desy-html 8.6.0 → 8.7.0

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

@@ -2,7 +2,7 @@
 {% set examples =  [
   {
     "name": "Por defecto",
-    "description": "El menubar se usa para interactuar con él y realizar cambios en otra parte de la página, no como menú de navegación. Si necesitas una navegación con enlaces, debes usas el componente Menu navigation en vez de este Menubar. Este ejmplo muestra parámetros mixtos.",
+    "description": "El menubar se usa para interactuar con él y realizar cambios en otra parte de la página, no como menú de navegación. Si necesitas una navegación con enlaces, debes usas el componente Menu navigation en vez de este Menubar. Este ejemplo muestra parámetros mixtos.",
     "data": {
       "id": "with-all-parent-items-1",
       "idPrefix": "parent-example",
@@ -154,7 +154,7 @@
   },
   {
     "name": "Tiene selección en items padres",
-    "description": "Cuando se ha seleccionado algún elemento hijo, el padre se muestra con color.",
+    "description": "Cuando se ha seleccionado algún elemento hijo, si se desea, el padre se puede mostrar con color usando la clase <code>.c-menubar__button--has-selection</code>.",
     "data": {
       "id": "with-all-parent-items-2",
       "idPrefix": "parent-example",
@@ -306,6 +306,159 @@
       ]
     }
   },
+  {
+    "name": "Con sub-item activo",
+    "description": "Cuando se ha seleccionado algún elemento hijo, el padre se muestra con color. Añade <code>active: true</code> a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuBarAction(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item o varios sub-items de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuBarAction('mi-menubar', 'sub-sub-menuitems-example-item-3-2-1-1')</code> para desactivar el sub-item actual y activar el primer sub-item del tercer menú de este ejemplo. Si quieres activar varios sub-items, abre la consola del navegador y escribe <code>activateItemMenuBarAction('mi-menubar', ['sub-menuitems-example-item-2-2-1', 'sub-menuitems-example-item-2-2-2', 'sub-menuitems-example-item-2-2-3'])</code>.",
+    "data": {
+      "id": "mi-menubar",
+      "idPrefix": "parent-example",
+      "ariaLabel":"Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-example-item-1-2",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-example-item-2-2",
+          "classes": "mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "active": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-example-item-3-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "menuitems-example-item-4-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-example-item-6-2",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "#"
+        }
+      ]
+    }
+  },
   {
     "name": "con un item padre deshabilitado",
     "data": {
@@ -1467,4 +1620,4 @@
       ]
     }
   }
-] %}
+] %}

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

@@ -23,7 +23,7 @@
       {% set subId = "sub-" + id %}
     <li class="relative" role="none">
       {% if item.sub %}
-      <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--primary{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %}  id="{{ id }}"
+      <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-menu-navigation__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 | safe if item.html else item.text }}</span>
@@ -32,7 +32,7 @@
       </a>
       {% endif %}
       {% if item.href and not item.sub %}
-      <a role="menuitem" {%- if id %} id="{{ id }}"{% endif %} {%- if item.href %} href="{{ item.href }}"{% endif %} class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menubar__button--primary{% 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 role="menuitem" {%- if id %} id="{{ id }}"{% endif %} {%- if item.href %} href="{{ item.href }}"{% endif %} class="c-menubar__button {%- if item.classes %} {{ item.classes }}{% endif %} {%- if item.disabled %} c-menubar__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% 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 -%}>
         {{ item.html | safe if item.html else item.text }}
       </a>
       {% endif %}

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

@@ -120,7 +120,7 @@
   </div>
   {% if params.isDismissible %}
   <div class="absolute top-0 right-0 p-sm lg:p-base">
-    <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar la ventana emergente">
+    <button onclick="closeDialog(this)" class="p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar la ventana emergente" type="button">
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
     </button>
   </div>

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

@@ -68,7 +68,7 @@
     </div>
     {% if params.isDismissible %}
     <div class="absolute top-0 right-0 p-sm">
-      <button class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
+      <button type="button" class="c-notification-button__close p-sm focus:bg-warning-base focus:border-warning-base focus:shadow-outline-black focus:text-black focus:outline-none" aria-label="X: Cerrar notificación">
         <svg class="w-4 h-4 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" aria-hidden="true" role="presentation"><path d="M85.91 71.77a2.5 2.5 0 010-3.54l46.16-46.16a10 10 0 10-14.14-14.14L71.77 54.09a2.5 2.5 0 01-3.54 0L22.07 7.93A10 10 0 007.93 22.07l46.16 46.16a2.5 2.5 0 010 3.54L7.93 117.93a10 10 0 0014.14 14.14l46.16-46.16a2.5 2.5 0 013.54 0l46.16 46.16a10 10 0 0014.14-14.14z" fill="currentColor"/></svg>
       </button>
     </div>

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

@@ -40,7 +40,8 @@
       "attributes": {
         "id": id,
         "aria-current": "page",
-        "tabindex": "-1"
+        "tabindex": "-1",
+        "type": "button"
       }
     }) | trim | indent(4)  }}
     {% else %}
@@ -49,7 +50,8 @@
       "href": "#",
       "classes": "mb-sm mr-sm",
       "attributes": {
-        "id": id
+        "id": id,
+        "type": "button"
       }
     }) | trim | indent(4)  }}
     {% endif %}
@@ -81,7 +83,8 @@
       "disabled": disabledFirst,
       "classes": "c-button--sm c-button--transparent mr-xs",
       "attributes": {
-        "id": params.idPrefix + "-first"
+        "id": params.idPrefix + "-first",
+        "type": "button"
       }
     }) | trim | indent(4)  }}
     {% endif %}
@@ -92,7 +95,8 @@
       "disabled": disabledPrevious,
       "classes": "c-button--sm c-button--transparent mr-xs",
       "attributes": {
-        "id": params.idPrefix + "-previous"
+        "id": params.idPrefix + "-previous",
+        "type": "button"
       }
     }) | trim | indent(4)  }}
     {% endif %}
@@ -121,7 +125,8 @@
       "disabled": disabledNext,
       "classes": "c-button--sm c-button--transparent mr-xs",
       "attributes": {
-        "id": params.idPrefix + "-next"
+        "id": params.idPrefix + "-next",
+        "type": "button"
       }
     }) | trim | indent(4)  }}
     {% endif %}
@@ -132,7 +137,8 @@
       "disabled": disabledLast,
       "classes": "c-button--sm c-button--transparent mr-xs",
       "attributes": {
-        "id": params.idPrefix + "-last"
+        "id": params.idPrefix + "-last",
+        "type": "button"
       }
     }) | trim | indent(4)  }}
     {% endif %}