desy-html 7.1.2 → 7.2.0

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

@@ -5,9 +5,7 @@
 {% endset %}
 
 {% set iconComplex %}
-  <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"><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>
+  <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"><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 examples =  [
@@ -43,21 +41,21 @@
           "href": "#",
           "text": "Item 1",
           "icon": {
-            "html": iconSimple
+            "html": iconSimple | trim
           }
         },
         {
           "href": "#",
           "text": "Item 2",
           "icon": {
-            "html": iconSimple
+            "html": iconSimple | trim
           }
         },
         {
           "href": "#",
           "text": "Item 3",
           "icon": {
-            "html": iconSimple
+            "html": iconSimple | trim
           }
         }
       ],
@@ -76,7 +74,7 @@
           "text": "Item grande con icono",
           "classes": "flex justify-between items-center py-base text-2xl",
           "icon": {
-            "html": iconComplex
+            "html": iconComplex | trim
           }
         },
         {
@@ -84,7 +82,7 @@
           "text": "Item grande con icono",
           "classes": "flex justify-between items-center py-base text-2xl",
           "icon": {
-            "html": iconComplex
+            "html": iconComplex | trim
           }
         },
         {
@@ -92,7 +90,7 @@
           "text": "Item grande con icono",
           "classes": "flex justify-between items-center py-base text-2xl",
           "icon": {
-            "html": iconComplex
+            "html": iconComplex | trim
           }
         }
       ],
@@ -111,7 +109,7 @@
           "text": "Item 1",
           "containerClasses": "px-base border border-neutral-base my-sm",
           "icon": {
-            "html": iconSimple
+            "html": iconSimple | trim
           }
         },
         {
@@ -119,7 +117,7 @@
           "text": "Item 2",
           "containerClasses": "my-base px-base border border-neutral-base rounded",
           "icon": {
-            "html": iconSimple
+            "html": iconSimple | trim
           }
         },
         {
@@ -127,7 +125,7 @@
           "text": "Item 3",
           "containerClasses": "px-base border border-neutral-base my-sm",
           "icon": {
-            "html": iconSimple
+            "html": iconSimple | trim
           }
         }
       ],

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

@@ -25,49 +25,49 @@
         {% set subId = "sub-" + id %}
     <li class="{% if item.containerClasses %}{{ item.containerClasses }}{% else %}px-base border-y border-neutral-base -my-px{% endif %}">
       {% if item.href %}
-        <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-link {%- if item.classes %} {{ item.classes }}{% else %} flex justify-between items-center gap-base flex-1 py-base{% endif %} {%- if item.disabled %} text-neutral-base no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-          <div class="flex gap-base justify-between items-center flex-1">
-            {% if item.icon %}
-              <div class="{% if item.icon.containerClasses %}{{ item.icon.containerClasses }}{% else %}self-center h-full{% endif %}">
-                {% if item.icon.html %}
-                  {{ item.icon.html | safe }}
-                {% endif %}
-              </div>
+      <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-link {%- if item.classes %} {{ item.classes }}{% else %} flex justify-between items-center gap-base flex-1 py-base{% endif %} {%- if item.disabled %} text-neutral-base no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        <div class="flex gap-base justify-between items-center flex-1">
+          {% if item.icon %}
+          <div class="{% if item.icon.containerClasses %}{{ item.icon.containerClasses }}{% else %}self-center h-full{% endif %}">
+            {% if item.icon.html %}
+            {{ item.icon.html | safe }}
             {% endif %}
-            <div class="flex-1">
-              {% if item.active %}
-                <strong>{{ item.html | safe if item.html else item.text }}</strong>
-              {% else %}
-                {{ item.html | safe if item.html else item.text }}
-              {% endif %}
-            </div>
           </div>
-          {{ arrow | safe }}
-        </a>
+          {% endif %}
+          <div class="flex-1">
+            {% if item.active %}
+            <strong>{{ item.html | safe if item.html else item.text }}</strong>
+            {% else %}
+            {{ item.html | safe if item.html else item.text }}
+            {% endif %}
+          </div>
+        </div>
+        {{ arrow | safe | trim }}
+      </a>
       {% else %}
-        <div {%- if id %} id="{{ id }}"{% endif %} class="{%- if item.classes %} {{ item.classes }}{% else %} flex justify-between items-center gap-base flex-1 py-base{% endif %} {%- if item.disabled %} text-neutral-base no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-          <div class="flex gap-base justify-between items-center flex-1">
-            {% if item.icon %}
-              <div class="{% if item.icon.containerClasses %}{{ item.icon.containerClasses }}{% else %}self-center h-full{% endif %}">
-                {% if item.icon.html %}
-                  {{ item.icon.html | safe }}
-                {% endif %}
-              </div>
+      <div {%- if id %} id="{{ id }}"{% endif %} class="{%- if item.classes %} {{ item.classes }}{% else %} flex justify-between items-center gap-base flex-1 py-base{% endif %} {%- if item.disabled %} text-neutral-base no-underline pointer-events-none{% endif %} {%- if item.active %} font-bold{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        <div class="flex gap-base justify-between items-center flex-1">
+          {% if item.icon %}
+          <div class="{% if item.icon.containerClasses %}{{ item.icon.containerClasses }}{% else %}self-center h-full{% endif %}">
+            {% if item.icon.html %}
+            {{ item.icon.html | safe }}
+            {% endif %}
+          </div>
+          {% endif %}
+          <div class="flex-1">
+            {% if item.active %}
+            <strong>{{ item.html | safe if item.html else item.text }}</strong>
+            {% else %}
+            {{ item.html | safe if item.html else item.text }}
             {% endif %}
-            <div class="flex-1">
-              {% if item.active %}
-                <strong>{{ item.html | safe if item.html else item.text }}</strong>
-              {% else %}
-                {{ item.html | safe if item.html else item.text }}
-              {% endif %}
-            </div>
           </div>
         </div>
+      </div>
       {% endif %}
       {% if item.sub.html %}
-        <div class="{%- if item.sub.classes %} {{ item.sub.classes }}{% else %} c-paragraph-base text-neutral-dark -mt-base mr-lg{% endif %}" id="{{ subId }}">
-          {{ item.sub.html | safe }}
-        </div>
+      <div class="{%- if item.sub.classes %} {{ item.sub.classes }}{% else %} c-paragraph-base text-neutral-dark -mt-base mr-lg{% endif %}" id="{{ subId }}">
+        {{ item.sub.html | safe }}
+      </div>
       {% endif %}
     </li>
     {% endif %}
@@ -76,8 +76,6 @@
 {% endset -%}
 
 <!-- links-list -->
-
-
 {% if params.hasNav == false %}
 <div {%- if params.classes %} class="{{ params.classes }}"{% endif %}
 {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>

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

@@ -58,9 +58,9 @@ 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 }}>
-    {{ item.html | safe if item.html else item.text }}
-  </li>
+      <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 }}>
+        {{ item.html | safe if item.html else item.text }}
+      </li>
   {% endif %}
   {% endfor %}
 {% endset -%}
@@ -68,13 +68,13 @@ treat it as an interactive element - without this it will be
 <!-- listbox -->
 <div data-module="c-listbox" class="{% if params.classesContainer %}{{ params.classesContainer }}{% else %} relative{% endif %}">
   {% if params.label  %}
-    <div id="{{ params.id }}-label" class="mb-sm {%- if params.label.classes %} {{ params.label.classes }}{% endif %}">
-      {% if params.label.html %}
-        {{ params.label.html | safe}}
-      {% else %}
-        <p>{{ params.label.text }}</p>
-      {% endif %}
-    </div>
+  <div id="{{ params.id }}-label" class="mb-sm {%- if params.label.classes %} {{ params.label.classes }}{% endif %}">
+    {% if params.label.html %}
+    {{ params.label.html | safe}}
+    {% else %}
+    <p>{{ params.label.text }}</p>
+    {% endif %}
+  </div>
   {% endif %}
   <button {{- commonAttributes | safe }} >
     <span class="inline-flex self-center max-w-xs align-middle truncate">{%- if conditionalValue %} {{ conditionalValue }}{% else %}{{ params.html | safe if params.html else params.text }}{% endif %}</span>
@@ -83,7 +83,7 @@ treat it as an interactive element - without this it will be
   </button>
   <div class="c-listbox__tooltip -ml-sm mt-2 border border-neutral-base shadow-md bg-white {%- if params.classesTooltip %} {{ params.classesTooltip }}{% endif %}" data-module="c-listbox-tooltip" >
     <ul id="{{ params.id }}" {{- commonTooltipAttributes | safe }} {%- if conditionalId %} aria-activedescendant="{{ conditionalId }}"{% endif %}>
-      {{ innerHtml | trim | safe }}
+      {{ innerHtml | safe | trim }}
     </ul>
   </div>
 </div>

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

@@ -31,77 +31,76 @@
         {% set subId = "sub-" + id %}
     <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 | safe if item.html else item.text }}</span>
-        </a>
+      <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 | safe if item.html else item.text }}</span>
+      </a>
       {% else %}
-        <button {%- if item.sub %} aria-expanded="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 | indent(2, true) if iconHtml -}}
-        </button>
+      <button {%- if item.sub %} aria-expanded="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 -}}
+      </button>
       {% endif %}
       {% if item.sub.items %}
-        <div class="c-menu-navigation__sub absolute bottom-0 left-0">
-          <ul id="{{ id }}-sub-list" class="{% 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 -%}>
-          {% for subitem in item.sub.items %}
-            {% if subitem %}
-              {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
-              {%- if subitem.id -%}
-                {%- set subId = subitem.id -%}
-              {%- else -%}
-                {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-                {%- if loop.first -%}
-                  {%- set subId = "sub-" + id %}
-                {% else %}
-                  {%- set subId = "sub-" + id + "-" + loop.index -%}
-                {%- endif -%}
-              {%- endif %}
-              {% set commonSubItemAttributes %}{% if subId %} id="{{ subId }}"{% endif %} {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
-              <li>
-                {% if subitem.href %}
-                  {% if subitem.active %}
-                    <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="flex items-center px-base py-sm text-sm font-semibold {%- if subitem.classes %} {{ subitem.classes }}{% endif -%}" aria-current="page" {{- commonSubItemAttributes | safe }}>
-                      <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
-                    </span>
-                  {% else %}
-                    <a {%- 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>
-                      {% endif %}
-                    </a>
-                  {% endif %}
-                {% else %}
-                  <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="flex items-center px-base py-sm text-sm {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-                    {% if subitem.active %}
-                    <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
-                    {% else %}
-                    {{ subitem.html | safe if subitem.html else subitem.text }}
-                    {% endif %}
-                  </span>
-                  {% endif %}
-              </li>
-              {% if subitem.divider %}
-                <li class="my-sm border-b border-neutral-base">
-                  <div class="sr-only">Separador</div>
-                </li>
+      <div class="c-menu-navigation__sub absolute bottom-0 left-0">
+        <ul id="{{ id }}-sub-list" class="{% 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 -%}>
+        {% for subitem in item.sub.items %}
+          {% if subitem %}
+            {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+            {%- if subitem.id -%}
+              {%- set subId = subitem.id -%}
+            {%- else -%}
+              {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+              {%- if loop.first -%}
+                {%- set subId = "sub-" + id %}
+              {% else %}
+                {%- set subId = "sub-" + id + "-" + loop.index -%}
+              {%- endif -%}
+            {%- endif %}
+            {% set commonSubItemAttributes %}{% if subId %} id="{{ subId }}"{% endif %} {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
+          <li>
+            {% if subitem.href %}
+            {% if subitem.active %}
+            <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="flex items-center px-base py-sm text-sm font-semibold {%- if subitem.classes %} {{ subitem.classes }}{% endif -%}" aria-current="page" {{- commonSubItemAttributes | safe }}>
+              <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+            </span>
+            {% else %}
+            <a {%- 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>
               {% endif %}
+            </a>
             {% endif %}
-            {% endfor %}
-          </ul>
-        </div>
+            {% else %}
+            <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="flex items-center px-base py-sm text-sm {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+              {% if subitem.active %}
+              <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+              {% else %}
+              {{ subitem.html | safe if subitem.html else subitem.text }}
+              {% endif %}
+            </span>
+            {% endif %}
+          </li>
+          {% if subitem.divider %}
+          <li class="my-sm border-b border-neutral-base">
+            <div class="sr-only">Separador</div>
+          </li>
+          {% endif %}
+          {% endif %}
+          {% endfor %}
+        </ul>
+      </div>
       {% endif %}
     </li>
     {% if item.divider %}
-      <li {%- if item.divider.classes %} class="{{ item.divider.classes }}"{% endif %} role="presentation" aria-hidden="true">
-        {% if item.divider.html %}
-          {{ item.divider.html | safe }}
-        {% else %}
-          {{ item.divider.text }}
-        {% endif %}
-      </li>
+    <li {%- if item.divider.classes %} class="{{ item.divider.classes }}"{% endif %} role="presentation" aria-hidden="true">
+      {% if item.divider.html %}
+      {{ item.divider.html | safe }}
+      {% else %}
+      {{ item.divider.text }}
+      {% endif %}
+    </li>
     {% endif %}
     {% endif %}
     {% endfor %}

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

@@ -37,47 +37,47 @@
       </span>
       {% endif %}
       {% if item.sub.items %}
-        <ul {%- if item.sub.classes %} class="{{ item.sub.classes }}"{% 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 -#}
-            {%- if subitem.id -%}
-              {%- set subId = subitem.id -%}
-            {%- else -%}
-              {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-              {%- if loop.first -%}
-                {%- set subId = "sub-" + id %}
-              {% else %}
-                {%- set subId = "sub-" + id + "-" + loop.index -%}
-              {%- endif -%}
-            {%- endif %}
-            <li class="m-base origin-top-left text-sm">
-                {% if subitem.href %}
-                <a {%- if subitem.id %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.disabled %} no-underline pointer-events-none{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %}{%- if subitem.active %} aria-current="page"{% endif %} {% if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if subitem.target %} target="{{ subitem.target }}"{% endif %}{%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-                  {% if subitem.active %}
-                  <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
-                  {% else %}
-                  {{ subitem.html | safe if subitem.html else subitem.text }}
-                  {% endif %}
-                </a>
-                {% else %}
-                <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="block px-xs {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-                  {% if subitem.active %}
-                  <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
-                  {% else %}
-                  {{ subitem.html | safe if subitem.html else subitem.text }}
-                  {% endif %}
-                </span>
-                {% endif %}
-              </li>
-              {% if subitem.divider %}
-              <li class="my-sm border-b border-neutral-base" aria-hidden="true">
-                <div class="sr-only">Separador</div>
-              </li>
-              {% endif %}
-          {% endif %}
-       {% endfor %}
-       </ul>
+      <ul {%- if item.sub.classes %} class="{{ item.sub.classes }}"{% 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 -#}
+          {%- if subitem.id -%}
+            {%- set subId = subitem.id -%}
+          {%- else -%}
+            {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+            {%- if loop.first -%}
+              {%- set subId = "sub-" + id %}
+            {% else %}
+              {%- set subId = "sub-" + id + "-" + loop.index -%}
+            {%- endif -%}
+          {%- endif %}
+        <li class="m-base origin-top-left text-sm">
+            {% if subitem.href %}
+          <a {%- if subitem.id %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="block px-xs hover:text-primary-base hover:underline focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if params.hasUnderline %} underline{% endif %} {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.disabled %} no-underline pointer-events-none{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %}{%- if subitem.active %} aria-current="page"{% endif %} {% if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {% if subitem.target %} target="{{ subitem.target }}"{% endif %}{%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+            {% if subitem.active %}
+            <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+            {% else %}
+            {{ subitem.html | safe if subitem.html else subitem.text }}
+            {% endif %}
+          </a>
+            {% else %}
+          <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="block px-xs {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+            {% if subitem.active %}
+            <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+            {% else %}
+            {{ subitem.html | safe if subitem.html else subitem.text }}
+            {% endif %}
+          </span>
+            {% endif %}
+        </li>
+            {% if subitem.divider %}
+        <li class="my-sm border-b border-neutral-base" aria-hidden="true">
+          <div class="sr-only">Separador</div>
+        </li>
+            {% endif %}
+        {% endif %}
+      {% endfor %}
+      </ul>
       {% elseif item.sub.html %}
         <div class="mb-base px-xs origin-top-left text-sm text-neutral-dark {%- if item.sub.classes %} {{ item.sub.classes }}{% endif %}" id="{{ subId }}">
           {{ item.sub.html | safe }}