desy-html 8.12.0 → 8.13.0

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

@@ -113,7 +113,7 @@
               isMenu: true,
               idPrefix: "header-dropdown-nav-item",
               items: params.dropdown.items,
-              classes: "w-max max-w-64",
+              classes: "max-w-64",
               attributes: {
                 "id": "id-dropdown-nav",
                 "aria-label": "Menú de usuario"

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

@@ -417,7 +417,7 @@
           "classes": "font-semibold text-sm"
         },
         "classes": "w-full justify-between",
-        "classesTooltip": "w-max max-h-64 overflow-y-auto",
+        "classesTooltip": "max-h-64 overflow-y-auto",
         "items": [
           {
             "href": "#",

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

@@ -8,6 +8,12 @@
     @apply lg:border-neutral-dark;
 
     .c-menu-horizontal__list {
+      @apply lg:relative;
+      @apply lg:w-full;
+      @apply lg:flex;
+      @apply lg:flex-nowrap;
+      @apply lg:snap-x;
+      @apply lg:overflow-x-auto;
       @apply lg:-mb-0.5;
     }
 
@@ -30,7 +36,12 @@
     @apply border-neutral-dark;
 
     .c-menu-horizontal__list {
+      @apply relative;
+      @apply w-full;
       @apply flex;
+      @apply flex-nowrap;
+      @apply snap-x;
+      @apply overflow-x-auto;
       @apply -mb-0.5;
     }
 

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

@@ -30,7 +30,7 @@
         <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | safe if item.html else item.text }}</span>
       </a>
       {% else %}
-      <button {%- if item.sub %} aria-expanded="true" aria-controls="{{ id }}-sub-list"{% endif %}
+      <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 | safe if item.html else item.text }}</span>
         {# Indentation is intentional to output HTML nicely #}
         {{- iconHtml | safe | trim if iconHtml -}}
@@ -38,7 +38,7 @@
       {% endif %}
       {% if item.sub.items %}
       <div class="c-menu-navigation__sub absolute bottom-0 left-0">
-        <ul id="{{ id }}-sub-list" class="c-menu-navigation__sub--list {% if item.sub.classes %}{{ item.sub.classes }}{% else-%} c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm{% endif %}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        <ul id="{{ id }}-sub-list" class="c-menu-navigation__sub--list {% if item.sub.classes %}{{ item.sub.classes }}{% else-%} c-menu-navigation__tooltip max-w-64 border border-neutral-base shadow-md bg-white text-sm{% endif %}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {% for subitem in item.sub.items %}
           {% if subitem %}
             {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -52,7 +52,7 @@
             <a {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.id %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if subitem.classes %} {{ subitem.classes }}{% endif -%} {%- if subitem.disabled %} pointer-events-none{% endif -%}" {%- if subitem.disabled %} tabindex="-1"{% endif -%} {%- if subitem.target %} target="{{ subitem.target }}"{% endif %} {{- commonSubItemAttributes | safe }}>
               {{ subitem.html | safe if subitem.html else subitem.text }}
               {% if subitem.disabled %}
-              <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
+              <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle flex-initial ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
               {% endif %}
             </a>
           </li>

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

@@ -37,7 +37,7 @@
       </a>
       {% endif %}
       {% if item.sub.items %}
-      <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm {%- if item.sub.classes %} {{ item.sub.classes }}{% endif %}" aria-label="{{ item.ariaLabel }}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      <ul role="menu" class="c-menubar__tooltip max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm {%- if item.sub.classes %} {{ item.sub.classes }}{% endif %}" aria-label="{{ item.ariaLabel }}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {% for subitem in item.sub.items %}
           {% if subitem %}
             {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}

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

@@ -394,7 +394,7 @@
         "text": "Clases max-width aplicadas para evitar demasiada anchura dentro de los menus y forzar a saltos de línea"
       }
       ],
-      "classes": "w-max max-w-64",
+      "classes": "max-w-64",
       "attributes": {
         "aria-label": "Navegación local"
       }

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

@@ -26,7 +26,7 @@
       {{ item.html | safe if item.html else item.text }}
       {% endif %}
       {% if item.disabled %}
-      <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
+      <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle flex-initial ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
       {% endif %}
   </a>
 </li>

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

@@ -155,7 +155,7 @@
     {{ componentListbox({
       "id": "items-listbox-" + idPrefix,
       "text": params.itemsPerPage,
-      "label": params.itemsListbox.label if params.itemsListbox.label else { "text": "Items por página: ", "classes": "inline-block align-middle mb-[0]" },
+      "label": params.itemsListbox.label if params.itemsListbox.label else { "text": "Items por página: ", "classes": "inline-block flex align-middle mb-[0]" },
       "doesChangeButtonText": true,
       "classesContainer": "flex flex-wrap items-center gap-xs",
       "classes": "c-listbox--sm c-listbox--transparent",

package/src/templates/components/table-advanced/_styles.table-advanced.css

@@ -51,6 +51,7 @@
       @apply bg-warning-base;
       @apply outline-none;
       @apply shadow-outline-black;
+      @apply text-black;
     }
   }
 

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

@@ -105,7 +105,7 @@
     "name": "isSwitch",
     "description": 'Apariencia de Switch con <code>"isSwitch": true</code>, sin cambio en el texto, sólo cambia su estado visual. Necesita un elemento externo con un <code>id</code> para referenciarlo con su <code>aria-labelledby</code>.',
     "data": {
-      "classes": "",
+      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
       "isSwitch": true,
       "offState": {
         "classes": "",
@@ -124,7 +124,7 @@
     "name": "isSwitch pressed",
     "description": 'Usa <code>"pressed": true</code> para activarlo inicialmente.',
     "data": {
-      "classes": "",
+      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
       "pressed": true,
       "isSwitch": true,
       "offState": {
@@ -144,7 +144,7 @@
     "name": "isSwitch con JavaScript",
     "description": 'También puedes usar con javascript la función global <code>activateItemToggle(element, toggle)</code>,  para modificar el estado del Switch, usando su id, el parámetro <code>toggle</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrará activado, y si le pasamos false se mostrará desactivado. Ej: Abre la consola del navegador y escribe <code>activateItemToggle("toggle-switch-js", true)</code> para mostrar el switch activado.',
     "data": {
-      "classes": "",
+      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
       "id": "toggle-switch-js",
       "isSwitch": true,
       "offState": {
@@ -163,7 +163,7 @@
   {
     "name": "isSwitch peque",
     "data": {
-      "classes": "",
+      "classes": "focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black",
       "isSwitch": true,
       "offState": {
         "classes": "",