desy-html 12.0.1 → 13.0.0

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

@@ -219,7 +219,7 @@
                   </li>
                   <li class="mb-xs">
                     <a class="c-link font-semibold" href="#6">
-                      Accede a MiA, tu espacio digital<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
+                      Accede a MiA, tu espacio digital<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>
                     </a>
                   </li>
                   <li class="mb-xs">

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

@@ -30,7 +30,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,
@@ -44,7 +43,7 @@
   <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
   {%- if params.value %} value="{{ params.value}}"{% endif %}
   {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
-  {%- if params.errorMessage or params.errorId %} aria-errormessage="{{ errorId }}" aria-invalid="true" {%- if not describedBy %} aria-describedby="{{ errorId }}"{% endif %}{% endif %}
+  {%- if params.errorMessage or params.errorId %} aria-errormessage="{{ errorId }}" aria-invalid="true"{% endif %}
   {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
   {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
   {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}

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

@@ -112,7 +112,7 @@
           "name": "num-doc-A",
           "classes": "w-full lg:w-64",
           "label": {
-            "text": "Cantidad inicio",
+            "text": "Desde:",
             "classes": "sr-only"
           },
           "placeholder": "Ej: 0"
@@ -127,7 +127,7 @@
           "name": "num-doc-B",
           "classes": "w-full lg:w-64",
           "label": {
-            "text": "Cantidad final",
+            "text": "hasta:",
             "classes": "sr-only"
           },
           "placeholder": "Ej: 600"

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

@@ -23,7 +23,6 @@
 {% endif %}
 {% if params.errorMessage %}
   {% set errorId = params.id + "-error" %}
-  {% set describedBy = describedBy + " " + errorId if describedBy else errorId %}
 {{ componentErrorMessage({
   id: errorId,
   classes: params.errorMessage.classes,
@@ -51,7 +50,7 @@
   }) | indent(2) }}
       {% endif %}
     {% elseif item.divider %}
-  <div {%- if item.divider.classes %} class="{{ item.divider.classes }}{% endif %}" role="separator">
+  <div {%- if item.divider.classes %} class="{{ item.divider.classes }}{% endif %}" role="presentation" aria-hidden="true">
     {% if item.divider.html %}
       {{ item.divider.html | filterquotes | safe }}
     {% else %}

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

@@ -29,6 +29,7 @@
   {
     "name": "con descripción",
     "data": {
+      "headingLevel": 4,
       "title":{
         "html": "Registro de alta de la asociación"
       },
@@ -40,6 +41,7 @@
   {
     "name": "con items",
     "data": {
+      "headingLevel": 4,
       "title":{
         "text": "Entidades locales de la Comunidad Autónoma de Aragón"
       },
@@ -59,6 +61,7 @@
   {
     "name": "con contenido",
     "data": {
+      "headingLevel": 4,
       "title":{
         "text": "Registro de alta de la asociación"
       },
@@ -72,6 +75,7 @@
     "name": "con acciones",
     "description": "Utiliza el componente como un caller para anidar contenido. En este ejemplo el contenido es una lista de 2 botones de acciones. Para que sea accesible, cada botón debe tener un <code>aria-labelledby</code> que apunte al <code>id</code> de si mismo y al <code>id</code> del título. Muestra el código para verlo.",
     "data": {
+      "headingLevel": 4,
       "title":{
         "text": "Registro de alta de la asociación",
         "attributes": {
@@ -108,6 +112,7 @@
   {
     "name": "con icono tipo: documento",
     "data": {
+      "headingLevel": 4,
       "title": {
         "text": "Resolución de años anteriores",
         "attributes": {
@@ -126,6 +131,7 @@
   {
     "name": "con icono tipo: enlace",
     "data": {
+      "headingLevel": 4,
       "title": {
         "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA",
         "attributes": {
@@ -133,7 +139,7 @@
         }
       },
       "content":{
-        "html": "<a class=' c-link break-all ' href=' # '>http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</a> "
+        "html": "<a class=' c-link break-all ' href=' # '>Lista completa de admitidos (PDF, 20Kb)</a> "
       },
       "icon": {
         "type": "link"
@@ -144,6 +150,7 @@
   {
     "name": "con icono tipo: portapapeles",
     "data": {
+      "headingLevel": 4,
       "title": {
         "text": "Datos de la empresa",
         "attributes": {
@@ -170,6 +177,7 @@
   {
     "name": "con icono personalizado",
     "data": {
+      "headingLevel": 4,
       "title": {
         "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA",
         "attributes": {
@@ -177,7 +185,7 @@
         }
       },
       "content":{
-        "html": "<a class=' c-link break-all ' href=' # '>http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</a> "
+        "html": "<a class=' c-link break-all ' href=' # '>Lista completa de admitidos (PDF, 20Kb)</a> "
       },
       "icon": {
         "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'  width='1em' height='1em' class='w-8 h-8 text-neutral-dark' aria-label='Icono de papelera' focusable='false' role='img'><path d='M19.5 7.5h-15A.5.5 0 0 0 4 8v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a.5.5 0 0 0-.5-.5Zm-9.25 13a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0Zm5 0a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0ZM22 4h-4.75a.25.25 0 0 1-.25-.25V2.5A2.5 2.5 0 0 0 14.5 0h-5A2.5 2.5 0 0 0 7 2.5v1.25a.25.25 0 0 1-.25.25H2a1 1 0 0 0 0 2h20a1 1 0 0 0 0-2ZM9 3.75V2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v1.25a.25.25 0 0 1-.25.25h-5.5A.25.25 0 0 1 9 3.75Z' fill='currentColor' transform='scale(2)'/></svg>"
@@ -189,6 +197,7 @@
     "name": "con icono tipo: documento, alineado verticalmente arriba",
     "description": "Usa el parámetro <code>containerClasses</code> del parámetro <code>icon</code> para añadir clases al contenedor del icono. Esto permite posicionarlo o cambiar de color. En este ejemplo el icono aparece alineado verticalmente arriba en vez de centrado.",
     "data": {
+      "headingLevel": 4,
       "title": {
         "text": "Resolución de años anteriores",
         "attributes": {
@@ -213,6 +222,7 @@
   {
     "name": "arrastrable con icono tipo: documento",
     "data": {
+      "headingLevel": 4,
       "title": {
         "text": "Resolución de años anteriores",
         "attributes": {
@@ -232,6 +242,7 @@
   {
     "name": "con clases, descripción, items, contenido y acciones",
     "data": {
+      "headingLevel": 4,
       "title":{
         "text": "Registro de alta de la asociación",
         "classes": "font-bold",

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

@@ -16,11 +16,11 @@
     {% if params.icon.html %}
     {{ params.icon.html | filterquotes | safe }}
     {% elseif params.icon.type == 'document' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de documento" focusable="false" role="img"><path d="m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z" fill="currentColor" transform="scale(2)"/><path d="M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(2)"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Documento" focusable="false" role="img"><path d="m15.32 2.15 4.53 4.53A.49.49 0 0 1 20 7v14.5a.5.5 0 0 1-.5.5h-15a.5.5 0 0 1-.5-.5v-19a.5.5 0 0 1 .5-.5H15a.49.49 0 0 1 .32.15ZM15.59 0H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6.41a1 1 0 0 0-.29-.7L16.29.29a1 1 0 0 0-.7-.29Z" fill="currentColor" transform="scale(2)"/><path d="M16 11H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM16 15H7a1 1 0 0 1 0-2h9a1 1 0 0 1 0 2ZM11.5 19H7a1 1 0 0 1 0-2h4.5a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(2)"/></svg>
     {% elseif params.icon.type == 'link' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de enlace" focusable="false" role="img"><path d="M12.41 14.91a1 1 0 0 0-.55 1.3 1 1 0 0 1-.21 1.09l-2.83 2.83a2 2 0 0 1-2.83 0L3.87 18a2 2 0 0 1 0-2.83l2.83-2.82a1 1 0 0 1 1.09-.21 1 1 0 0 0 .76-1.85 3 3 0 0 0-3.27.65l-2.83 2.83a4 4 0 0 0 0 5.65l2.13 2.13a4 4 0 0 0 5.65 0l2.83-2.83a3 3 0 0 0 .65-3.27 1 1 0 0 0-1.3-.54Z" fill="currentColor" transform="scale(2)"/><path d="M7.76 16.24a1 1 0 0 0 1.41 0L17 8.46a1 1 0 0 0-1.41-1.41l-7.83 7.78a1 1 0 0 0 0 1.41Z" fill="currentColor" transform="scale(2)"/><path d="m21.55 4.57-2.13-2.12a4 4 0 0 0-5.65 0l-2.83 2.83a3 3 0 0 0-.88 2.12 3 3 0 0 0 .23 1.15 1 1 0 0 0 1.85-.76 1 1 0 0 1-.08-.39 1 1 0 0 1 .29-.7l2.83-2.83a2 2 0 0 1 2.83 0L20.13 6a2 2 0 0 1 0 2.83l-2.83 2.81a1 1 0 0 1-1.09.22 1 1 0 0 0-1.3.54 1 1 0 0 0 .54 1.31 3 3 0 0 0 3.27-.65l2.83-2.83a4 4 0 0 0 0-5.66Z" fill="currentColor" transform="scale(2)"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Enlace" focusable="false" role="img"><path d="M12.41 14.91a1 1 0 0 0-.55 1.3 1 1 0 0 1-.21 1.09l-2.83 2.83a2 2 0 0 1-2.83 0L3.87 18a2 2 0 0 1 0-2.83l2.83-2.82a1 1 0 0 1 1.09-.21 1 1 0 0 0 .76-1.85 3 3 0 0 0-3.27.65l-2.83 2.83a4 4 0 0 0 0 5.65l2.13 2.13a4 4 0 0 0 5.65 0l2.83-2.83a3 3 0 0 0 .65-3.27 1 1 0 0 0-1.3-.54Z" fill="currentColor" transform="scale(2)"/><path d="M7.76 16.24a1 1 0 0 0 1.41 0L17 8.46a1 1 0 0 0-1.41-1.41l-7.83 7.78a1 1 0 0 0 0 1.41Z" fill="currentColor" transform="scale(2)"/><path d="m21.55 4.57-2.13-2.12a4 4 0 0 0-5.65 0l-2.83 2.83a3 3 0 0 0-.88 2.12 3 3 0 0 0 .23 1.15 1 1 0 0 0 1.85-.76 1 1 0 0 1-.08-.39 1 1 0 0 1 .29-.7l2.83-2.83a2 2 0 0 1 2.83 0L20.13 6a2 2 0 0 1 0 2.83l-2.83 2.81a1 1 0 0 1-1.09.22 1 1 0 0 0-1.3.54 1 1 0 0 0 .54 1.31 3 3 0 0 0 3.27-.65l2.83-2.83a4 4 0 0 0 0-5.66Z" fill="currentColor" transform="scale(2)"/></svg>
     {% elseif params.icon.type == 'clipboard' %}
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Icono de datos" focusable="false" role="img"><path d="M16.5 9h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5ZM17.25 13.25a.76.76 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.76.76 0 0 0 .75-.75ZM10 6.5h4a1 1 0 0 0 1-1V3A3 3 0 0 0 13.82.62 3 3 0 0 0 9 3.09V5.5a1 1 0 0 0 1 1Zm1.25-3.75a.75.75 0 1 1 .75.75.76.76 0 0 1-.75-.75Z" fill="currentColor" transform="scale(2)"/><path d="M19.5 3h-2.75a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H19a.5.5 0 0 1 .5.5v12.79a.51.51 0 0 1-.15.36l-3.2 3.2a.49.49 0 0 1-.36.15H5a.5.5 0 0 1-.5-.5v-16A.5.5 0 0 1 5 5h2.25a.25.25 0 0 0 .25-.25v-1.5A.25.25 0 0 0 7.25 3H4.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z" fill="currentColor" transform="scale(2)"/><path d="M7.5 16a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(2)"/></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="1em" height="1em" class="w-8 h-8 text-neutral-dark" aria-label="Datos" focusable="false" role="img"><path d="M16.5 9h-9a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5ZM17.25 13.25a.76.76 0 0 0-.75-.75h-9a.75.75 0 0 0 0 1.5h9a.76.76 0 0 0 .75-.75ZM10 6.5h4a1 1 0 0 0 1-1V3A3 3 0 0 0 13.82.62 3 3 0 0 0 9 3.09V5.5a1 1 0 0 0 1 1Zm1.25-3.75a.75.75 0 1 1 .75.75.76.76 0 0 1-.75-.75Z" fill="currentColor" transform="scale(2)"/><path d="M19.5 3h-2.75a.25.25 0 0 0-.25.25v1.5a.25.25 0 0 0 .25.25H19a.5.5 0 0 1 .5.5v12.79a.51.51 0 0 1-.15.36l-3.2 3.2a.49.49 0 0 1-.36.15H5a.5.5 0 0 1-.5-.5v-16A.5.5 0 0 1 5 5h2.25a.25.25 0 0 0 .25-.25v-1.5A.25.25 0 0 0 7.25 3H4.5a2 2 0 0 0-2 2v17a2 2 0 0 0 2 2h15a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z" fill="currentColor" transform="scale(2)"/><path d="M7.5 16a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(2)"/></svg>
     {% endif %}
   </div>
   {% endif %}

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

@@ -8,6 +8,15 @@
   <div class="flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle" aria-label="Carpeta de documentos"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg></div>
 {% endset %}
 
+{% set subitems %}
+  <ul class="-mr-lg -mb-base bg-white">
+    <li class="relative p-base border-t border-neutral-base hover:bg-neutral-light"><a href="#" class="c-link c-link--full c-link--no-underline flex items-center"><span class="flex-1">Subitem 1</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center inline-block" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a></li>
+    <li class="relative p-base border-t border-neutral-base hover:bg-neutral-light"><a href="#" class="c-link c-link--full c-link--no-underline flex items-center"><span class="flex-1">Subitem 2</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center inline-block" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a></li>
+    <li class="relative p-base border-t border-neutral-base hover:bg-neutral-light"><a href="#" class="c-link c-link--full c-link--no-underline flex items-center"><span class="flex-1">Subitem 3</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center inline-block" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a></li>
+  </ul>
+{% endset %}
+
+
 {% set examples =  [
   {
     "name": "por defecto",
@@ -227,6 +236,29 @@
       }
     }
   },
+  {
+    "name": "con containerClasses aplicado: con aspecto de cards y subitems",
+    "data": {
+      "idPrefix": "with-containerclasses",
+      "listClasses": "border border-transparent",
+      "items": [
+        {
+          "html": '<div class="relative hover:bg-neutral-light c-link c-link--no-underline -mt-base pt-base"><div class="px-base pb-base w-full flex items-center"><div class="flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle" aria-label="Carpeta de documentos"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg></div><a href="#" class="mx-base w-full align-middle font-semibold c-link c-link--full c-link--no-underline text-lg">Item 1</a><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center inline-block flex-none" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></div>
+          </div>',
+          "containerClasses": "border border-neutral-base rounded",
+          "iconRight": {
+            "type": "none"
+          },
+          "sub": {
+            "html": subitems | safe
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    }
+  },
   {
     "name": "con item deshabilitado",
     "data": {

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

@@ -58,7 +58,7 @@ treat it as an interactive element - without this it will be
   {% endif %}
   {% endif %}
   {% set commonItemAttributes %}{% if id %} id="{{ id }}"{% endif %} {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
-      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.classes %} {{ item.classes }}{% endif -%}"  {%- if item.active %} aria-selected="true"{% endif -%} {{- commonItemAttributes | safe }}>
+      <li role="option" class="flex items-center pr-base pl-lg py-sm hover:bg-primary-base hover:text-white  focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.classes %} {{ item.classes }}{% endif -%}"  {%- if item.active %} aria-selected="true"{% else %} aria-selected="false"{% endif -%} {{- commonItemAttributes | safe }}>
         {{ item.html | filterquotes | safe if item.html else item.text }}
       </li>
   {% endif %}
@@ -66,7 +66,7 @@ treat it as an interactive element - without this it will be
 {% endset -%}
 
 <!-- listbox -->
-<div data-module="c-listbox" class="{% if params.classesContainer %}{{ params.classesContainer }}{% else %} relative{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+<div data-module="c-listbox" class="relative {%- if params.classesContainer %} {{ params.classesContainer }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {% if params.label  %}
   <div id="{{ params.id }}-label" class="mb-sm {%- if params.label.classes %} {{ params.label.classes }}{% endif %}">
     {% if params.label.html %}
@@ -77,7 +77,7 @@ treat it as an interactive element - without this it will be
   </div>
   {% endif %}
   <button {{- commonAttributes | safe }} >
-    <span class="inline-flex self-center max-w-xs align-middle truncate">{%- if conditionalValue %} {{ conditionalValue }}{% else %}{{ params.html | filterquotes | safe if params.html else params.text }}{% endif %}</span>
+    <span class="inline-flex self-center align-middle">{%- if conditionalValue %} {{ conditionalValue }}{% else %}{{ params.html | filterquotes | safe if params.html else params.text }}{% endif %}</span>
     {# Indentation is intentional to output HTML nicely #}
     {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
   </button>

package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk

@@ -26,7 +26,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menú horizontal"
       }
     }
   },
@@ -57,7 +57,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menú horizontal"
       }
     }
   },
@@ -89,7 +89,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu horizontal",
+        "aria-label": "Menú horizontal",
         "id": "mi-menu-horizontal"
       }
     }
@@ -101,31 +101,46 @@
         {
           "href": "http://www.google.com",
           "text": "Opción 1",
-          "target": "_blank"
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
         },
         {
           "href": "http://www.google.com",
           "text": "Opción 2",
-          "target": "_blank"
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
         },
         {
           "href": "http://www.google.com",
           "text": "Opción 3",
-          "target": "_blank"
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
         },
         {
           "href": "http://www.google.com",
           "text": "Opción 4",
-          "target": "_blank"
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
         },
         {
           "href": "http://www.google.com",
           "text": "Opción 5",
-          "target": "_blank"
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
         }
       ],
       "attributes": {
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menú horizontal"
       }
     }
   },
@@ -148,7 +163,7 @@
       ],
       "attributes": {
         "id": "mi-menu-icons",
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menú horizontal"
       }
     }
   },
@@ -183,7 +198,7 @@
       ],
       "attributes": {
         "id": "mi-menu-links",
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menú horizontal"
       }
     }
   },
@@ -223,7 +238,7 @@
       ],
       "attributes": {
         "id": "mi-menu-links-divider",
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menú horizontal"
       }
     }
   },
@@ -258,7 +273,7 @@
       ],
       "attributes": {
         "id": "mi-menu-navigation-bar",
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menú horizontal"
       }
     }
   },
@@ -321,7 +336,7 @@
       ],
       "attributes": {
         "id": "mi-menu-navigation-bar",
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menú horizontal"
       }
     }
   },
@@ -356,7 +371,7 @@
       ],
       "attributes": {
         "id": "mi-menu-tabs-en-escritorio",
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menú horizontal"
       }
     }
   },
@@ -382,7 +397,7 @@
       ],
       "attributes": {
         "id": "mi-menu-tabs-en-movil",
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menú horizontal"
       }
     }
   },
@@ -414,7 +429,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menú horizontal"
       }
     }
   },
@@ -450,7 +465,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menú horizontal"
       }
     }
   },
@@ -460,7 +475,7 @@
     "data": {
       "attributes": {
         "id": "nav-id-example",
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menú horizontal"
       },
       "items": [
         {

package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css

@@ -93,7 +93,8 @@
       @apply no-underline;
 
       strong {
-        @apply font-normal;
+        @apply font-bold;
+        @apply lg:font-normal;
       }
     }
   }

package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk

@@ -16,13 +16,13 @@
     {% endif %}
     <li>
     {% if item.active %}
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
-          {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% endif -%}" {%- if item.title %} title="{{ item.title }}"{% endif -%} {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} aria-current="page" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      <a {%- if id %} id="{{ id }}"{% endif %} {%- if not item.disabled %} href="{{ item.href }}"{% endif %} class="c-menu-horizontal__link c-menu-horizontal__active relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
+          {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% endif -%}" {%- if item.title %} title="{{ item.title }}"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} aria-current="page" {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         <strong class="flex items-center pointer-events-none font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
       </a>
     {% else %}
-      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
-          {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% endif -%}" {%- if item.title %} title="{{ item.title }}"{% endif -%} {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      <a {%- if id %} id="{{ id }}"{% endif %} {%- if not item.disabled %} href="{{ item.href }}"{% endif %} class="c-menu-horizontal__link relative flex items-center px-base py-sm lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
+          {%- if item.disabled %} no-underline pointer-events-none{% endif -%} {%- if item.classes %} {{ item.classes }}{% endif -%}" {%- if item.title %} title="{{ item.title }}"{% endif -%} {%- if item.target %} target="{{ item.target }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         <span class="flex items-center pointer-events-none">
           {{ item.html | filterquotes | safe if item.html else item.text }}
         </span>

package/src/templates/components/menu-navigation/_examples.menu-navigation.njk

@@ -744,29 +744,6 @@
       }
     }
   },
-  {
-    "name": "con un texto de item muy largo",
-    "data": {
-      "idPrefix": "with-very-ling-text-example",
-      "items": [
-        {
-          "href": "#",
-          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
-        },
-        {
-          "href": "#",
-          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
-        },
-        {
-          "href": "#",
-          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu navigation"
-      }
-    }
-  },
   {
     "name": "con deshabilitado o sin href en un padre e hijo",
     "data": {

package/src/templates/components/menu-navigation/_template.menu-navigation.njk

@@ -27,11 +27,11 @@
     <li class="relative">
       {% if item.href %}
       <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-navigation__button {%- if item.disabled %} c-menu-navigation__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--primary{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} role="link" aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | filterquotes | safe if item.html else item.text }}</span>
+        <span class="inline-flex self-center align-middle pointer-events-none">{{ item.html | filterquotes | safe if item.html else item.text }}</span>
       </a>
       {% else %}
       <button {%- if item.sub %} aria-expanded="true" aria-haspopup="true" aria-controls="{{ id }}-sub-list"{% endif %}
-        {%- if id %} id="{{ id }}"{% endif %} class="c-menu-navigation__button {%- if item.disabled %} c-menu-navigation__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--primary{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{% if item.active %}<span class="sr-only">Item activo: </span>{% endif %}<span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | filterquotes | safe if item.html else item.text }}</span>
+        {%- if id %} id="{{ id }}"{% endif %} class="c-menu-navigation__button {%- if item.disabled %} c-menu-navigation__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--primary{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{% if item.active %}<span class="sr-only">Item activo: </span>{% endif %}<span class="inline-flex self-center align-middle pointer-events-none">{{ item.html | filterquotes | safe if item.html else item.text }}</span>
         {# Indentation is intentional to output HTML nicely #}
         {{- iconHtml | safe | trim if iconHtml -}}
       </button>
@@ -57,9 +57,7 @@
             </a>
           </li>
           {% if subitem.divider %}
-          <li class="my-sm border-b border-neutral-base">
-            <div class="sr-only">Separador</div>
-          </li>
+          <li role="presentation" aria-hidden="true" class="my-sm border-b border-neutral-base"></li>
           {% endif %}
           {% endif %}
           {% endfor %}

package/src/templates/components/menu-vertical/_template.menu-vertical.njk

@@ -61,7 +61,7 @@
             {% endif %}
         </li>
             {% if subitem.divider %}
-        <li class="my-sm border-b border-neutral-base" aria-hidden="true">
+        <li class="my-sm border-b border-neutral-base" role="none" aria-hidden="true">
           <div class="sr-only">Separador</div>
         </li>
             {% endif %}
@@ -75,7 +75,7 @@
       {% endif %}
     </li>
     {% if item.divider %}
-    <li class="my-sm border-b border-neutral-base" aria-hidden="true">
+    <li class="my-sm border-b border-neutral-base" role="none" aria-hidden="true">
       <div class="sr-only">Separador</div>
     </li>
     {% endif %}

package/src/templates/components/menubar/_styles.menubar.css

@@ -71,6 +71,11 @@
   }
 
 
+  .c-menubar__msg {
+    @apply hidden;
+  }
+
+
   .c-menubar__tooltip {
     @apply hidden;
 
@@ -204,6 +209,11 @@
     &.c-menubar__button--disabled:focus {
       @apply bg-primary-light;
     }
+
+    .c-menubar__msg {
+      @apply inline;
+      @apply sr-only;
+    }
   }
 
 

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

@@ -26,7 +26,8 @@
       <a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--has-selection{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %}  id="{{ id }}"
         {%- if item.sub.html %} data-aria-controls="{{ subId }}"{% endif %}
         {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        <span class="inline-flex self-center max-w-xs align-middle truncate">{{ item.html | filterquotes | safe if item.html else item.text }}</span>
+        <span class="inline-flex self-center align-middle">{{ item.html | filterquotes | safe if item.html else item.text }}</span>
+        <span class="c-menubar__msg">Con ítems seleccionados</span>
         {# Indentation is intentional to output HTML nicely #}
         {{- iconHtml | safe | trim if iconHtml -}}
       </a>

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

@@ -31,7 +31,7 @@
   </a>
 </li>
   {% if item.divider %}
-<li class="my-sm border-b border-neutral-base" aria-hidden="true">
+<li class="my-sm border-b border-neutral-base" role="none" aria-hidden="true">
   <div class="sr-only">Separador</div>
 </li>
   {% endif %}

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

@@ -52,11 +52,11 @@
       </p>
     {% endif %}
     {% if params.items %}
-      <ul>
+      <ul class="mt-base">
         {% for item in params.items %}
         <li>
         {% if item.href %}
-          <a href="{{ item.href }}" class="c-link {% if params.type == "alert" %} c-link--alert{% endif %}" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | filterquotes | safe if item.html else item.text }}</a>
+          <a href="{{ item.href }}" class="inline-block pb-sm c-link {% if params.type == "alert" %} c-link--alert{% endif %}" {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | filterquotes | safe if item.html else item.text }}</a>
         {% else %}
           {{ item.html | filterquotes | safe if item.html else item.text }}
         {% endif %}