desy-html 4.1.3 → 5.0.1

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

@@ -178,6 +178,69 @@
       ]
     }
   },
+  {
+    "name": "grouped",
+    "data": {
+      "classes": "w-full py-sm border-t border-b border-neutral-base",
+      "items": [
+        {
+          "term": {
+            "text": "Código de procedimiento",
+            "classes": "lg:w-1/3"
+          },
+          "definition": {
+            "text": "G00345-BX",
+            "classes": "lg:flex-1 font-semibold"
+          },
+          "classes": "lg:flex py-sm"
+        },
+        {
+          "term": {
+            "text": "Nombre del procedimiento",
+            "classes": "lg:w-1/3"
+          },
+          "definition": {
+            "text": "Resolución definitiva",
+            "classes": "lg:flex-1 font-semibold"
+          },
+          "classes": "lg:flex py-sm"
+        },
+        {
+          "term": {
+            "text": "CSV",
+            "classes": "lg:w-1/3"
+          },
+          "definition": {
+            "text": "CSVK45WT8V5T110CPPC",
+            "classes": "lg:flex-1 font-semibold"
+          },
+          "classes": "lg:flex py-sm"
+        },
+        {
+          "term": {
+            "text": "Fecha de captura",
+            "classes": "lg:w-1/3"
+          },
+          "definition": {
+            "text": "13 de Diciembre de 2021. A las 11:48:08",
+            "classes": "lg:flex-1 font-semibold"
+          },
+          "classes": "lg:flex py-sm"
+        },
+        {
+          "term": {
+            "text": "Categoría",
+            "classes": "lg:w-1/3"
+          },
+          "definition": {
+            "text": "Documento simple",
+            "classes": "lg:flex-1 font-semibold"
+          },
+          "classes": "lg:flex py-sm"
+        }
+      ]
+    }
+  },
   {
     "name": "with table like appaerance",
     "data": {

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

@@ -160,6 +160,7 @@
     @apply text-white;
 
     &:hover:not(disabled),
+    &:active:not(disabled),
     &.ds-hover:not(disabled) {
       @apply bg-black;
       @apply border-none;

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

@@ -2,19 +2,19 @@ params:
 - name: text
   type: string
   required: true
-  description: If `html` is set, this is not required. Text for the button. If `html` is provided, the `text` argument will be ignored.
+  description: If `html` is set, this is not required. Text for the dropdown. If `html` is provided, the `text` argument will be ignored.
 - name: html
   type: string
   required: true
-  description: If `text` is set, this is not required. HTML for the button. If `html` is provided, the `text` argument will be ignored.
+  description: If `text` is set, this is not required. HTML for the dropdown. If `html` is provided, the `text` argument will be ignored.
 - name: hiddenText
   type: string
   required: false
-  description: Text for screenreaders only after the button element.
+  description: Text for screenreaders only after the dropdown element.
 - name: classesContainer
   type: string
   required: false
-  description: Classes to add to the container div of button and tooltip elements.
+  description: Classes to add to the container div of dropdown and tooltip elements.
 - name: classesTooltip
   type: string
   required: false
@@ -22,11 +22,11 @@ params:
 - name: classes
   type: string
   required: false
-  description: Classes to add to the button element.
+  description: Classes to add to the dropdown element.
 - name: attributes
   type: object
   required: false
-  description: HTML attributes (for example data attributes) to add to the button element.
+  description: HTML attributes (for example data attributes) to add to the dropdown element.
 - name: caller
   type: nunjucks-block
   required: false

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

@@ -156,7 +156,7 @@
     }
   },
   {
-    "name": "Espanded logo",
+    "name": "Expanded logo",
     "description": "expandedLogo: true. Utilizar este logotipo en apps que estén dirigidas al ciudadano.",
     "data": {
       "homepageUrl": "/",
@@ -196,7 +196,7 @@
         "text": "Carpeta del gestor"
       },
       "offcanvas": {
-        "text": "Menu",
+        "text": "Menú",
         "textClose": "Cerrar menu",
         "labelledId": "offcanvas-title"
       },
@@ -262,6 +262,38 @@
       }
     }
   },
+  {
+    "name": "con dropdown personalizado",
+    "description": "Se pueden usar los parámetros del dropdown para personalizarlo. En este ejemplo con html en el dropdown.",
+    "data": {
+      "homepageUrl": "/",
+      "dropdown": {
+        "html": '<p class="text-right">Marta Pérez <br>(Administración)</p>',
+        "items": [
+          {
+          "text": "Perfil",
+          "href": "/"
+          },
+          {
+          "text": "Cerrar sesión",
+          "href": "/"
+          }
+        ]
+      }
+    }
+  },
+  {
+    "name": "con contenido personalizado en dropdown",
+    "description": "El dropdown puede contener cualquier tipo de información.",
+    "data": {
+      "homepageUrl": "/",
+      "dropdown": {
+        "text": "Marta Pérez",
+        "contentHtml": '<div class="p-base"><dl><dt class="text-base">Marta Pérez</dt><dd class="text-sm text-neutral-dark">Departamento de Ciencia, Universidad y Sociedad del Conocimiento</dd></dl></div>',
+        "classesTooltip": "w-64 max-h-48 overflow-y-auto"
+      }
+    }
+  },
   {
     "name": "con todo",
     "description": "Logo, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.",
@@ -321,7 +353,7 @@
         ]
       },
       "offcanvas": {
-        "text": "Menu",
+        "text": "Menú",
         "textClose": "Cerrar menu"
       },
       "caller": exampleOffcanvas

package/src/templates/components/header/_template.header.header__dropdown.njk

@@ -1,23 +1,22 @@
+            {% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
             <div class="ml-4 flex items-center lg:ml-6">
-              <div x-data="{ isOpen: false }" class="ml-3 relative">
+              <div class="ml-3 relative">
                 <div>
-                  <button id="header-dropdown-button" @click="isOpen = !isOpen" class="inline-flex items-center px-3 py-4 text-sm text-white focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base" aria-haspopup="true"  x-bind:aria-expanded="String(isOpen)" x-on:keydown.escape="isOpen = false; document.getElementById('header-dropdown-button').focus();">
-                    <span class="inline-block align-middle text-right">{{ params.html | safe if params.html else params.text }}</span> <svg class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" aria-hidden="true" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
-                  </button>
-                </div>
-                <div  x-show="isOpen"
-                      x-transition:enter="transition ease-out duration-100 transform"
-                      x-transition:enter-start="opacity-0 scale-95"
-                      x-transition:enter-end="opacity-100 scale-100"
-                      x-transition:leave="transition ease-in duration-75 transform"
-                      x-transition:leave-start="opacity-100 scale-100"
-                      x-transition:leave-end="opacity-0 scale-95"
-                      @click.away="isOpen = false"
-                      x-on:keydown.escape="isOpen = false; document.getElementById('header-dropdown-button').focus();"
-                      class="origin-top-right absolute right-0 max-h-64 mt-2 border border-neutral-base overflow-y-auto shadow-md">
-                  <div class="bg-white shadow-xs">
-                    {{ caller() if caller }}
-                  </div>
+                  {% call componentDropdown({
+                    "text": params.text,
+                    "html": params.html,
+                    "hiddenText": params.hiddenText,
+                    "classesContainer": params.classesContainer,
+                    "classesTooltip": params.classesTooltip,
+                    "classes": params.classes,
+                    "attributes": params.attributes
+                  })  %}
+                      {% if caller %}
+                      {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+                      {% elseif params.caller %}
+                      {{ params.caller | safe }}
+                      {% endif %}
+                  {% endcall %}
                 </div>
               </div>
             </div>

package/src/templates/components/header/_template.header.header__offcanvas.njk

@@ -5,7 +5,7 @@
               <button
                 onclick="closeDialog(this)"
                 id="header-offcanvas-button-close"
-                class="c-button c-button--sm c-button--transparent m-sm">{{ params.text }} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" class="self-center ml-2"><path fill="currentColor" d="M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z"/></svg></button>
+                class="c-button c-button--sm c-button--transparent m-sm">{{ params.text }} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" class="self-center ml-2" aria-hidden="true"><path fill="currentColor" d="M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z"/></svg></button>
             </div>
             {% if caller %}
             {{ caller() }} {#- if statement allows usage of `call` to be optional -#}

package/src/templates/components/header/_template.header.header__subnav.njk

@@ -1,34 +1,30 @@
+          {% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
+
+
           {% if params.items %}
             <div class="hidden lg:flex items-center">
-              <div x-data="{ isOpen: false }" class="ml-3 relative">
-                <h2 id="subnav-title">
-                  <button id="header-subnav-button" @click="isOpen = !isOpen" class="pr-2 pl-3 py-4 border-r border-l border-neutral-base text-sm text-white truncate focus:outline-none focus:ring-4 focus:ring-inset focus:ring-warning-base" aria-haspopup="true"  x-bind:aria-expanded="String(isOpen)" x-on:keydown.escape="isOpen = false; document.getElementById('header-subnav-button').focus();">
-                    <span class="inline-block align-middle">{{ params.html | safe if params.html else params.text }}</span> <svg class="inline-block align-middle" viewBox="0 0 96 96" fill="currentColor" aria-hidden="true" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
-                  </button>
-                </h2>
-                <div  x-show="isOpen"
-                      x-transition:enter="transition ease-out duration-100 transform"
-                      x-transition:enter-start="opacity-0 scale-95"
-                      x-transition:enter-end="opacity-100 scale-100"
-                      x-transition:leave="transition ease-in duration-75 transform"
-                      x-transition:leave-start="opacity-100 scale-100"
-                      x-transition:leave-end="opacity-0 scale-95"
-                      @click.away="isOpen = false"
-                      x-on:keydown.escape="isOpen = false; document.getElementById('header-subnav-button').focus();"
-                      class="origin-top-left absolute left-0 max-h-64 mt-2 border border-neutral-base overflow-y-auto shadow-md">
-                  <div class="bg-white shadow-xs">
+              <div class="ml-3 py-2 relative border-r border-l border-neutral-base">
+                <p class="sr-only">Aplicación actual: </p>
+                {% call componentDropdown({
+                  "text": params.text,
+                  "html": params.html,
+                  "hiddenText": params.hiddenText,
+                  "classesContainer": params.classesContainer,
+                  "classesTooltip": params.classesTooltip,
+                  "classes": params.classes,
+                  "attributes": params.attributes
+                })  %}
                     {% if caller %}
                     {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
                     {% elseif params.caller %}
                     {{ params.caller | safe }}
                     {% endif %}
-                  </div>
-                </div>
+                {% endcall %}
               </div>
             </div>
           {% else %}
             <p class="hidden lg:inline-block align-middle ml-4 px-3 py-4 border-r border-l border-neutral-base text-sm text-white">
               <span class="sr-only">Aplicación actual: </span>
-              {{ params.text }}
+              {{ params.html | safe if params.html else params.text }}
             </p>
           {% endif %}

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

@@ -26,28 +26,32 @@
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216.878 51.894" width="144" height="32" class="fill-current {% if params.expandedLogo %} hidden sm:block{% else %} hidden{% endif %}" aria-label="Gobierno de Aragón" role="img"><title>Ir a la página de inicio</title><path data-name="img" d="M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z"/><path data-name="typo" d="M59.352 45.091V32.36h2.074c4.307 0 6.668 2.266 6.668 6.382 0 4.212-2.265 6.349-6.7 6.349zm15.489-16.974v21.281h14.1v-4.307h-9.348v-4.85h9.253v-4.308h-9.253v-3.542h9.348v-4.275zm32.389 0l-7.757 21.282h5.041l2.3-6.477h6.509l2.265 6.477h5.138l-7.912-21.281zm2.807 4.4l-1.978 6.287h3.989zm63.051 6h-4.754v6.7a6.262 6.262 0 01-2.042.288c-3.638 0-6.317-2.84-6.317-6.7 0-4.147 2.84-6.923 7.051-6.923a11.142 11.142 0 016.062 1.851v-4.849a17.388 17.388 0 00-6.477-1.276c-6.891 0-11.677 4.626-11.677 11.262 0 6.54 4.689 10.976 11.677 10.976a19.329 19.329 0 006.477-1.117zm24.023.192c0-6.35-4.722-10.976-11.167-10.976a11.024 11.024 0 00.16 22.047c6.445.001 11.007-4.593 11.007-11.07zm-11.1-6.637c-3.573 0-5.966 2.713-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.681 5.934-6.7s-2.428-6.699-6.033-6.699zm12.94-3.956v21.281h4.85v-13.56l8.58 13.56h4.5V28.116h-4.849l.006 13.235-8.237-13.235zm-126.6-15h-4.754v6.7a6.266 6.266 0 01-2.042.287c-3.637 0-6.317-2.84-6.317-6.7 0-4.148 2.84-6.923 7.051-6.923a11.152 11.152 0 016.062 1.85V3.481a17.386 17.386 0 00-6.477-1.277c-6.891 0-11.677 4.626-11.677 11.263 0 6.54 4.69 10.974 11.677 10.974a19.342 19.342 0 006.477-1.116zm24 .191c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.159 22.046c6.437-.002 11-4.597 11-11.074zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.457 6.7 6.062 6.7c3.573 0 5.935-2.68 5.935-6.7s-2.437-6.702-6.042-6.702zm12.695-3.956v21.281h8.806c4.69 0 7.433-2.33 7.433-6.318 0-2.743-1.563-4.721-4.435-5.551a4.665 4.665 0 002.9-4.371c.032-3.382-2.265-5.041-6.859-5.041zm7.083 7.944c2.074 0 2.9-.575 2.9-2.01 0-1.372-.8-1.882-3.062-1.882h-2.074v3.892zm.638 9c2.36 0 3.381-.734 3.381-2.457 0-1.786-1.053-2.489-3.573-2.489h-2.679v4.946zm14.274-16.942h-4.768v21.281h4.754zm2.07 0v21.281h14.1v-4.307h-9.349v-4.85h9.253v-4.307h-9.253V6.993h9.349V2.718zm75.145 10.592c0-6.349-4.722-10.975-11.167-10.975a11.023 11.023 0 00.16 22.046c6.435-.004 10.997-4.599 10.997-11.076zm-11.1-6.636c-3.573 0-5.966 2.711-5.966 6.7s2.456 6.7 6.062 6.7c3.573 0 5.934-2.68 5.934-6.7s-2.438-6.704-6.043-6.704zm-37.783 32.132l-2.01-6.287-1.978 6.287zM126.43 49.398v-8.743h.606c3.063 0 3.382.319 5.423 5.583a10.7 10.7 0 00.447 1.085l.415.989a9.523 9.523 0 00.51 1.085h6.911l2.3-6.477h6.509l2.265 6.477h5.137l-7.912-21.281h-5.583l-6.288 17.258a89.817 89.817 0 01-1.549-3.411c-.83-1.819-1.308-2.362-2.84-3a5.086 5.086 0 003.892-5.106c0-3.828-2.52-5.743-7.593-5.743h-7.53v21.281zm0-12.763h2.105c2.042 0 3.063-.734 3.063-2.265s-.926-2.2-3-2.2h-2.17zm16.613-12.643V15.25h.605c3.063 0 3.382.319 5.424 5.583a10.427 10.427 0 00.447 1.085l.415.989a9.465 9.465 0 00.51 1.085h9.578l.027-13.652 8.555 13.652h4.5V2.711h-4.849l.021 13.056-8.252-13.056h-4.851v19.812a44.3 44.3 0 01-2.942-5.962c-.829-1.818-1.307-2.36-2.839-3a5.085 5.085 0 003.892-5.1c0-3.829-2.521-5.743-7.594-5.743h-7.529v21.281zm0-12.762h2.106c2.041 0 3.062-.734 3.062-2.265s-.924-2.2-3-2.2h-2.169zM54.53 28.117v21.281h7.114c7.21 0 11.454-3.956 11.454-10.657 0-6.669-4.339-10.625-11.709-10.625z" fill-rule="evenodd"/></svg>
                 <svg class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}" viewBox="0 0 51.894 51.894" width="32" height="32" aria-label="Gobierno de Aragón" role="img"><title>Ir a la página de inicio</title><path data-name="img" d="M51.89 51.892H0V0h51.89zm-2.5-2.494v-8.96L38.906 42.33a17.743 17.743 0 01-3.136.278 18.211 18.211 0 01-9.225-2.517 21.42 21.42 0 00-9.317-2.082 20.786 20.786 0 00-4.9.571c-.743.15-1.526.292-2.282.429l-.125.023-.613.112-4.928.913-1.875.382V48.934l1.527-.247 22.517-4.133a17.458 17.458 0 013.236-.3 18.06 18.06 0 017.317 1.527l5.442 2.854a9.431 9.431 0 002.372.679 7.837 7.837 0 001.147.083h.029a16 16 0 003.3-.464zm0 0zm0-8.96V27.195a8.1 8.1 0 00-4.062-1.2 7.451 7.451 0 00-1.162.094l-10.852 2.009c-.026 0-2.878.518-4.281.779L17.12 31.048a18.266 18.266 0 01-2.5.173 18.246 18.246 0 01-7.67-1.683l-4.447-2.34V33.636l1.511-.281a19.009 19.009 0 014.442-.517 17.882 17.882 0 018.168 1.894 23.042 23.042 0 0010.673 2.617 23.64 23.64 0 002.884-.178l19.21-3.535zm0-13.243v-8.778l-1.341.282a19.092 19.092 0 01-4.442.516 17.873 17.873 0 01-8.169-1.894 23.049 23.049 0 00-10.672-2.618 23.464 23.464 0 00-2.884.179L2.5 18.417v6.538a7.558 7.558 0 003.968 1.128 9.406 9.406 0 001.426-.116l10.852-2.008c.027-.005 2.876-.518 4.28-.78l11.914-2.174a18.122 18.122 0 012.5-.173 18.236 18.236 0 017.67 1.683l4.277 2.441v-4.427zm0-8.778V2.981l-7.4 1.524-7.35 1.328-7.035 1.277a23.976 23.976 0 01-5.306.62 16.834 16.834 0 01-4.517-.57 19.322 19.322 0 01-5.084-2.209 95.551 95.551 0 00-1.3-.712c-.285-.139-.571-.291-.846-.437h-.005a9.085 9.085 0 00-2.252-.954 7.331 7.331 0 00-1.918-.341H2.5v9c1.433-.237 2.593-.442 3.651-.647l7.517-1.345a19.656 19.656 0 012.63-.178 17.162 17.162 0 012.63.2 22.628 22.628 0 017.434 2.705 21.654 21.654 0 008.584 1.768h.006a20.746 20.746 0 003.173-.242l11.264-2.256v6.907zM2.5 2.98v-.472h2.95a14.929 14.929 0 00-2.949.473z"/></svg>
               </a>
-              {% if params.subnav.text %}
-              <div {%- if params.subnav.classes %} class="{{ params.subnav.classes }}"{% endif %}>
-                {% from "./_macro.header.header__subnav.njk" import componentHeaderSubnav %}
-                {% call componentHeaderSubnav({
-                  text: params.subnav.text,
-                  items: params.subnav.items
-                }) %}
-                  {% if params.subnav.items %}
-                    {% from "../nav/_macro.nav.njk" import componentNav %}
-                    {{ componentNav({
-                      isMenu: true,
-                      idPrefix: "header-subnav-nav-item",
-                      items: params.subnav.items,
-                      classes: "w-max max-w-64",
-                      attributes: {
-                        "id": "id-subnav-nav",
-                        "aria-label": "Aplicaciones"
-                      }
-                    }) }}
-                  {% endif %}
-                {% endcall %}
-              </div>
+              {% if params.subnav %}
+              {% from "./_macro.header.header__subnav.njk" import componentHeaderSubnav %}
+              {% call componentHeaderSubnav({
+                "text": params.subnav.text,
+                "html": params.subnav.html,
+                "hiddenText": params.subnav.hiddenText,
+                "classesContainer": params.subnav.classesContainer,
+                "classesTooltip": params.subnav.classesTooltip,
+                "classes": params.subnav.classes if params.subnav.classes else "c-dropdown--header",
+                "attributes": params.subnav.attributes,
+                "items": params.subnav.items
+              }) %}
+                {% if params.subnav.items %}
+                  {% from "../nav/_macro.nav.njk" import componentNav %}
+                  {{ componentNav({
+                    isMenu: true,
+                    idPrefix: "header-subnav-nav-item",
+                    items: params.subnav.items,
+                    classes: "w-max max-w-64",
+                    attributes: {
+                      "id": "id-subnav-nav",
+                      "aria-label": "Aplicaciones"
+                    }
+                  }) }}
+                {% endif %}
+              {% endcall %}
               {% endif %}
             </div>
             {% if params.navigation.items %}
@@ -62,12 +66,20 @@
             }) | indent(12) }}
             {% endif %}
           </div>
-          {% if params.dropdown.items %}
-          <div class="{{ params.dropdown.classes if params.dropdown.classes else 'hidden lg:block' }}">
-            {% from "./_macro.header.header__dropdown.njk" import componentHeaderDropdown %}
-            {% call componentHeaderDropdown({
-              text: params.dropdown.text
-            }) %}
+          {% if params.dropdown.items or params.dropdown.contentHtml %}
+          {% from "./_macro.header.header__dropdown.njk" import componentHeaderDropdown %}
+          {% call componentHeaderDropdown({
+            "text": params.dropdown.text,
+            "html": params.dropdown.html,
+            "hiddenText": params.dropdown.hiddenText,
+            "classesContainer": params.dropdown.classesContainer if params.dropdown.classesContainer else "hidden lg:block",
+            "classesTooltip": params.dropdown.classesTooltip,
+            "classes": params.dropdown.classes if params.dropdown.classes else "c-dropdown--header",
+            "attributes": params.dropdown.attributes
+          }) %}
+            {% if params.dropdown.contentHtml %}
+              {{ params.dropdown.contentHtml | safe }}
+            {% else %}
               {% from "../nav/_macro.nav.njk" import componentNav %}
               {{ componentNav({
                 isMenu: true,
@@ -79,8 +91,8 @@
                   "aria-label": "Menú de usuario"
                 }
               }) }}
-            {% endcall %}
-          </div>
+            {% endif %}
+          {% endcall %}
           {% endif %}
           {% if params.offcanvas %}
           {% from "./_macro.header.header__offcanvasButton.njk" import componentHeaderOffcanvasButton %}

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

@@ -19,11 +19,31 @@ params:
   - name: text
     type: string
     required: true
-    description: Text for the subnav item. If no items are defined, there will be simple text instead a dropdown.
+    description: If `html` is set, this is not required. Text for the dropdown. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML for the dropdown. If `html` is provided, the `text` argument will be ignored.
+  - name: hiddenText
+    type: string
+    required: false
+    description: Text for screenreaders only after the dropdown element.
+  - name: classesContainer
+    type: string
+    required: false
+    description: Classes to add to the container div of dropdown and tooltip elements.
+  - name: classesTooltip
+    type: string
+    required: false
+    description: Classes to add to the tooltip content.
   - name: classes
     type: string
     required: false
-    description: Classes for the subnav component.
+    description: Classes to add to the dropdown element.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the dropdown element.
   - name: contentHtml
     type: string
     required: true
@@ -77,11 +97,31 @@ params:
   - name: text
     type: string
     required: true
-    description: Text for the dropdown item.
+    description: If `html` is set, this is not required. Text for the dropdown. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML for the dropdown. If `html` is provided, the `text` argument will be ignored.
+  - name: hiddenText
+    type: string
+    required: false
+    description: Text for screenreaders only after the dropdown element.
+  - name: classesContainer
+    type: string
+    required: false
+    description: Classes to add to the container div of dropdown and tooltip elements. Defaults to 'hidden lg:block'
+  - name: classesTooltip
+    type: string
+    required: false
+    description: Classes to add to the tooltip content.
   - name: classes
     type: string
     required: false
-    description: Classes for the dropdown component. Defaults to 'hidden lg:block'.
+    description: Classes to add to the dropdown element.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the dropdown element.
   - name: contentHtml
     type: string
     required: true
@@ -89,7 +129,7 @@ params:
   - name: items
     type: array
     required: true
-    description: An array of navigation item objects in subnav dropdown.
+    description: An array of navigation item objects in subnav dropdown. If `items` is provided, the `contentHtml` argument will be ignored.
     params:
     - name: href
       type: string

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

@@ -148,7 +148,8 @@
         },
         {
           "href": "http://www.google.com",
-          "text": "Option 4"
+          "text": "Option 4",
+          "disabled": true
         },
         {
           "href": "http://www.google.com",

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

@@ -26,7 +26,7 @@
       </span>
     {% else %}
       <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-horizontal__link relative flex items-center py-sm lg:px-lg lg:py-base border border-transparent text-black hover:text-primary-base underline truncate focus:outline-none
-          {%- if item.disabled %} opacity-50 pointer-events-none{% 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 -%}>
+          {%- if item.disabled %} no-underline pointer-events-none{% 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 -%}>
         <span class="flex items-center pointer-events-none">
           {{ item.html | safe if item.html else item.text }}
         </span>