desy-html 7.1.2 → 7.2.0

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

@@ -19,23 +19,23 @@
   <tbody>
     {% for row in params.rows %}
       {% if row %}
-        <tr class="border-t border-b border-neutral-base">
+    <tr class="border-t border-b border-neutral-base">
         {% for cell in row %}
           {% set commonAttributes %}
             {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
             {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
           {% endset %}
           {% if loop.first and params.firstCellIsHeader %}
-          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
+      <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
             {{- commonAttributes | safe -}}
           >{{ cell.html | safe if cell.html else cell.text }}</th>
           {% else %}
-          <td class="px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
+      <td class="px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
             {{- commonAttributes | safe -}}
           >{{ cell.html | safe if cell.html else cell.text }}</td>
           {% endif %}
         {% endfor %}
-        </tr>
+    </tr>
       {% endif %}
     {% endfor %}
   </tbody>

package/src/templates/components/table-advanced/_examples.table-advanced.njk

@@ -35,7 +35,7 @@
         ],
         [
           {
-            "text": "February"
+            "text": "August"
           },
           {
             "text": "75€",
@@ -100,7 +100,7 @@
         ],
         [
           {
-            "text": "February"
+            "text": "August"
           },
           {
             "text": "75€",
@@ -165,7 +165,7 @@
         ],
         [
           {
-            "text": "February"
+            "text": "August"
           },
           {
             "text": "75€",
@@ -230,7 +230,7 @@
         ],
         [
           {
-            "text": "February"
+            "text": "August"
           },
           {
             "text": "75€",
@@ -361,7 +361,7 @@
         ],
         [
           {
-            "text": "February"
+            "text": "August"
           },
           {
             "text": "75€",
@@ -423,7 +423,7 @@
         ],
         [
           {
-            "text": "February"
+            "text": "August"
           },
           {
             "text": "75€",
@@ -547,7 +547,7 @@
             "text": "Second row"
           },
           {
-            "text": "February"
+            "text": "August"
           },
           {
             "text": "75€",
@@ -683,7 +683,7 @@
             "classes": "sticky left-16 z-10 w-60 bg-white"
           },
           {
-            "text": "February"
+            "text": "August"
           },
           {
             "text": "75€",
@@ -758,4 +758,4 @@
       "classes": "relative whitespace-nowrap min-w-full"
     }
   }
-] %}
+] %}

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

@@ -13,7 +13,7 @@
     [aria-sort="descending"],
     [aria-sort="none"] {
       .c-table-advanced__order {
-        @apply inline-block;
+        @apply inline-block pointer-events-none;
       }
     }
 
@@ -22,7 +22,7 @@
       @apply font-bold text-black;
 
       .c-table-advanced__ascending {
-        @apply inline-block;
+        @apply inline-block pointer-events-none;
       }
     }
 
@@ -31,7 +31,7 @@
       @apply font-bold text-black;
 
       .c-table-advanced__descending {
-        @apply inline-block;
+        @apply inline-block pointer-events-none;
       }
     }
 

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

@@ -32,8 +32,8 @@
         </th>
         {% endif %}
       {% for item in params.head %}
-        {%- set idHeader = idPrefix + "-header-" + loop.index0 -%}
-        {%- set idHeaderCheckbox = idPrefix + "-header-checkbox-" + loop.index0 -%}
+        {%-set idHeader = idPrefix + "-header-" + loop.index0 %}
+        {% set idHeaderCheckbox = idPrefix + "-header-checkbox-" + loop.index0 %}
         <th {%- if item.orderBy %} aria-sort="{% if item.orderBy == 'asc' %}ascending{% elseif item.orderBy == 'desc' %}descending{% elseif item.orderBy == 'none' %}none{% endif %}"{% endif %} scope="col" id="{{ idHeader }}" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark {%- if item.classes %} {{ item.classes }}{% endif %}"
         {%- if item.colspan %} colspan="{{ item.colspan }}"{% endif %}
         {%- if item.rowspan %} rowspan="{{ item.rowspan }}"{% endif %}{% for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
@@ -61,93 +61,95 @@
     {% endif %}
     <tbody>
       {% if hasFilters or hasSelects %}
-        <tr class="divide-x divide-neutral-base">
-          {% if params.hasCheckboxes %}
-            <td {%- if params.checkboxesClasses %} class="{{ params.checkboxesClasses }}"{% endif %}></td>
+      <tr class="divide-x divide-neutral-base">
+        {% if params.hasCheckboxes %}
+        <td {%- if params.checkboxesClasses %} class="{{ params.checkboxesClasses }}"{% endif %}></td>
+        {% endif %}
+        {% for item in params.head %}
+          {% set idHeader = idPrefix + "-header-" + loop.index0 %}
+          {% set idFilter = idPrefix + "-header-filter-" + loop.index0 %}
+          {% set idSelect = idPrefix + "-header-select-" + loop.index0 %}
+        <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark {%- if item.classes %} {{ item.classes }}{% endif %}">
+          {% if item.select %}
+          {{ componentSelect({
+            "formGroup": {
+              "classes": "mb-0"
+            },
+            "label": {
+              "text": "Filtrar por esta columna",
+              "classes": "sr-only"
+            },
+            "id": item.select.id if item.select.id else idSelect,
+            "name": item.select.name if item.select.name else idSelect,
+            "items": item.select.items,
+            "describedBy": idHeader,
+            "disabled": item.select.disabled,
+            "classes": item.select.classes if item.select.classes else "c-select--sm w-full mt-0",
+            "attributes": item.select.attributes
+          }) | indent(10)  }}
+          {% endif %}
+          {% if item.select and item.hasFilter %}
+          <div class="pb-sm"></div>
+          {% endif %}
+          {% if item.hasFilter %}
+          {{ componentSearchbar({
+            "formGroup": {
+              "classes": "mb-0"
+            },
+            "label": {
+              "text": "Buscar en esta columna",
+              "classes": "sr-only"
+            },
+            "id": idFilter,
+            "name": idFilter,
+            "placeholder": "Buscar",
+            "classes": "c-input--sm " + item.filterClasses if item.filterClasses else "c-input--sm",
+            "buttonClasses": "m-xs p-0.5 text-xs",
+            "attributes": {
+              "aria-describedby": idHeader
+            }
+          }) | indent(10)  }}
           {% endif %}
-          {% for item in params.head %}
-            {%- set idHeader = idPrefix + "-header-" + loop.index0 -%}
-            {%- set idFilter = idPrefix + "-header-filter-" + loop.index0 -%}
-            {%- set idSelect = idPrefix + "-header-select-" + loop.index0 -%}
-            <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark {%- if item.classes %} {{ item.classes }}{% endif %}">
-              {% if item.select %}
-                {{ componentSelect({
-                  "formGroup": {
-                    "classes": "mb-0"
-                  },
-                  "label": {
-                    "text": "Filtrar por esta columna",
-                    "classes": "sr-only"
-                  },
-                  "id": item.select.id if item.select.id else idSelect,
-                  "name": item.select.name if item.select.name else idSelect,
-                  "items": item.select.items,
-                  "describedBy": idHeader,
-                  "disabled": item.select.disabled,
-                  "classes": item.select.classes if item.select.classes else "c-select--sm w-full mt-0",
-                  "attributes": item.select.attributes
-                })  }}
-              {% endif %}
-              {% if item.select and item.hasFilter %}<div class="pb-sm"></div>{% endif %}
-              {% if item.hasFilter %}
-                {{ componentSearchbar({
-                  "formGroup": {
-                    "classes": "mb-0"
-                  },
-                  "label": {
-                    "text": "Buscar en esta columna",
-                    "classes": "sr-only"
-                  },
-                  "id": idFilter,
-                  "name": idFilter,
-                  "placeholder": "Buscar",
-                  "classes": "c-input--sm " + item.filterClasses if item.filterClasses else "c-input--sm",
-                  "buttonClasses": "m-xs p-0.5 text-xs",
-                  "attributes": {
-                    "aria-describedby": idHeader
-                  }
-                })  }}
-              {% endif %}
-            </td>
-          {% endfor %}
-        </tr>
+        </td>
+        {% endfor %}
+      </tr>
       {% endif %}
       {% for row in params.rows %}
         {%- set idCheckbox = idPrefix + "-checkbox-" + loop.index0 -%}
         {% if row %}
-          <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
-            {% if params.hasCheckboxes %}
-              <td class="px-base py-sm {%- if params.checkboxesClasses %} {{ params.checkboxesClasses }}{% endif %}" tabindex="-1">
-                <div class="c-checkboxes c-checkboxes--sm">
-                  <div>
-                    <div class="relative flex items-start">
-                      <div class="flex items-center mx-sm">
-                        <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="{{ idCheckbox }}" name="{{ idCheckbox }}" type="checkbox" value="table-checkbox">
-                      </div>
-                      <div class="pt-0.5 leading-5">
-                        <label class="sr-only block text-sm -mt-1" for="{{ idCheckbox }}">Selecciona fila {{ loop.index + 1 }}</label>
-                      </div>
-                    </div>
-                  </div>
+      <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
+        {% if params.hasCheckboxes %}
+        <td class="px-base py-sm {%- if params.checkboxesClasses %} {{ params.checkboxesClasses }}{% endif %}" tabindex="-1">
+          <div class="c-checkboxes c-checkboxes--sm">
+            <div>
+              <div class="relative flex items-start">
+                <div class="flex items-center mx-sm">
+                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="{{ idCheckbox }}" name="{{ idCheckbox }}" type="checkbox" value="table-checkbox">
                 </div>
-              </td>
-            {% endif %}
-          {% for cell in row %}
-            {% set commonAttributes %}
-              {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
-              {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
-            {% endset %}
-            {% if loop.first and params.firstCellIsHeader %}
-            <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
-              {{- commonAttributes | safe -}}
-            >{{ cell.html | safe if cell.html else cell.text }}</th>
-            {% else %}
-            <td  tabindex="-1" class="px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
-              {{- commonAttributes | safe -}}
-            >{{ cell.html | safe if cell.html else cell.text }}</td>
-            {% endif %}
-          {% endfor %}
-          </tr>
+                <div class="pt-0.5 leading-5">
+                  <label class="sr-only block text-sm -mt-1" for="{{ idCheckbox }}">Selecciona fila {{ loop.index + 1 }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </td>
+        {% endif %}
+      {% for cell in row %}
+        {% set commonAttributes %}
+          {%- if cell.colspan %} colspan="{{ cell.colspan }}"{% endif %}
+          {%- if cell.rowspan %} rowspan="{{ cell.rowspan }}"{% endif %}{% for attribute, value in cell.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
+        {% endset %}
+        {% if loop.first and params.firstCellIsHeader %}
+        <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark{%- if cell.classes %} {{ cell.classes }}{% endif %}"
+          {{- commonAttributes | safe -}}
+        >{{ cell.html | safe if cell.html else cell.text }}</th>
+        {% else %}
+        <td  tabindex="-1" class="px-base py-sm {%- if cell.classes %} {{ cell.classes }}{% endif %}"
+          {{- commonAttributes | safe -}}
+        >{{ cell.html | safe if cell.html else cell.text }}</td>
+        {% endif %}
+      {% endfor %}
+      </tr>
         {% endif %}
       {% endfor %}
     </tbody>

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

@@ -6,17 +6,17 @@
 <div {%- if params.id %} id="{{params.id}}"{% endif %} class="c-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-module="c-tabs">
   <div class="c-tabs__heading">
     {% if params.headingLevel == "1" %}
-      <h1>{{ params.title | default ("Contenido") }}</h1>
+    <h1>{{ params.title | default ("Contenido") }}</h1>
     {% elseif params.headingLevel == "2" %}
-      <h2>{{ params.title | default ("Contenido") }}</h2>
+    <h2>{{ params.title | default ("Contenido") }}</h2>
     {% elseif params.headingLevel == "3" %}
-      <h3>{{ params.title | default ("Contenido") }}</h3>
+    <h3>{{ params.title | default ("Contenido") }}</h3>
     {% elseif params.headingLevel == "4" %}
-      <h4>{{ params.title | default ("Contenido") }}</h4>
+    <h4>{{ params.title | default ("Contenido") }}</h4>
     {% elseif params.headingLevel == "5" %}
-      <h5>{{ params.title | default ("Contenido") }}</h5>
+    <h5>{{ params.title | default ("Contenido") }}</h5>
     {% else %}
-      <h2>{{ params.title | default ("Contenido") }}</h2>
+    <h2>{{ params.title | default ("Contenido") }}</h2>
     {% endif %}
   </div>
   {% if(params.items | length) %}
@@ -25,14 +25,14 @@
       {% if item %}
         {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
         {% set tabPanelId = "tab-" + id %}
-          <button class="c-tabs__link group {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%} {%- if item.active %} c-tabs__link--is-active{% endif %}"
-            role="tab" aria-selected="{% if loop.index == 1 %}true{% else %}false{% endif %}" aria-controls="{{ tabPanelId }}" id="{{ id }}" {%- if loop.index > 1 or item.disabled %} tabindex="-1"{% endif %}
-            {%- if item.disabled %} disabled="disabled" aria-disabled="true"{% endif -%}
-            {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-            <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
-              {{ item.html | safe if item.html else item.text }}
-            </span>
-          </button>
+    <button class="c-tabs__link group {%- if item.disabled %} opacity-50 pointer-events-none{% endif -%} {%- if item.active %} c-tabs__link--is-active{% endif %}"
+      role="tab" aria-selected="{% if loop.index == 1 %}true{% else %}false{% endif %}" aria-controls="{{ tabPanelId }}" id="{{ id }}" {%- if loop.index > 1 or item.disabled %} tabindex="-1"{% endif %}
+      {%- if item.disabled %} disabled="disabled" aria-disabled="true"{% endif -%}
+      {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+      <span class="flex items-center pointer-events-none group-focus:bg-warning-base group-focus:shadow-outline-focus group-focus:outline-none">
+        {{ item.html | trim | safe if item.html else item.text }}
+      </span>
+    </button>
       {% endif %}
     {% endfor %}
   </div>
@@ -41,31 +41,31 @@
     {% if item %}
       {% set id = item.id if item.id else idPrefix + "-" + loop.index %}
       {% set tabPanelId = "tab-" + id %}
-      <div class="c-tabs__panel {%- if item.panel.classes %} {{ item.panel.classes }}{% endif %}" id="{{ tabPanelId }}" tabindex="0" role="tabpanel" aria-labelledby="{{ id }}"
-        {%- if loop.index > 1 %} hidden=""{% endif %}
-        {% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-          <div class="c-tabs__panel-heading">
-            {% if params.headingLevel == "1" %}
-              <h2 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h2>
-            {% elseif params.headingLevel == "2" %}
-              <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h3>
-            {% elseif params.headingLevel == "3" %}
-              <h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h4>
-            {% elseif params.headingLevel == "4" %}
-              <h5 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h5>
-            {% elseif params.headingLevel == "5" %}
-              <h6 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h6>
-            {% else %}
-              <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h3>
-            {% endif %}
-          </div>
-          {% if item.panel.html %}
-            {{ item.panel.html | safe }}
-          {% else %}
-            <p>{{ item.panel.text }}</p>
-          {% endif %}
-      </div>
+  <div class="c-tabs__panel {%- if item.panel.classes %} {{ item.panel.classes }}{% endif %}" id="{{ tabPanelId }}" tabindex="0" role="tabpanel" aria-labelledby="{{ id }}"
+    {%- if loop.index > 1 %} hidden=""{% endif %}
+    {% for attribute, value in item.panel.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+    <div class="c-tabs__panel-heading">
+        {% if params.headingLevel == "1" %}
+      <h2 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h2>
+        {% elseif params.headingLevel == "2" %}
+      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h3>
+        {% elseif params.headingLevel == "3" %}
+      <h4 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h4>
+        {% elseif params.headingLevel == "4" %}
+      <h5 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h5>
+        {% elseif params.headingLevel == "5" %}
+      <h6 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h6>
+        {% else %}
+      <h3 class="inline-flex items-center mb-base lg:mb-0 font-semibold">{{ item.html | safe if item.html else item.text }}</h3>
+        {% endif %}
+    </div>
+  {% if item.panel.html %}
+    {{ item.panel.html | safe }}
+  {% else %}
+    <p>{{ item.panel.text }}</p>
+  {% endif %}
+  </div>
     {% endif %}
   {% endfor %}
 </div>
-<!-- /tabs -->
+<!-- /tabs -->

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

@@ -1,6 +1,5 @@
 <!-- toggle -->
-<div data-module="c-toggle" class="relative c-toggle"
->
+<div data-module="c-toggle" class="relative c-toggle">
   <!-- Button -->
   <button
     {% if params.isSwitch and params.pressed == null %}

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

@@ -4,29 +4,29 @@
 <div id="{{ params.id }}" data-module="c-tooltip" {% if params.classes %}class="{{ params.classes }}"{% endif %} {%- if params.attributes %}{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
   <div id="{{ idButton }}" data-module="c-tooltip-button" {%- if params.complex %} data-type="c-tooltip-button-complex"{% endif %} class="inline-flex items-center focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" tabindex="0" role="button" aria-labelledby="{{ idButton }} {{ idTooltip }}">
     {% if params.text or params.html %}
-      {% if params.html %}
-        {{ params.html | safe }}
-      {% else %}
-      <p>
-        {{ params.text }}
-      </p>
-      {% endif %}
+    {% if params.html %}
+    {{ params.html | safe }}
+    {% else %}
+    <p>
+      {{ params.text }}
+    </p>
+    {% endif %}
     {% endif %}
     {% if params.icon and params.text %}
-      <span class="inline-block w-1.5"></span>
+    <span class="inline-block w-1.5"></span>
     {% endif %}
     {% if params.icon %}
-      <span class="inline-block">
-        {% if params.icon.html %}
-          {{ params.icon.html | safe }}
-        {% elseif params.icon.type == 'info' %}
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Información"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
-        {% elseif params.icon.type == 'alert' %}
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" role="img" aria-label="Alerta"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
-        {% else %}
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Ayuda"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg>
-        {% endif %}
-      </span>
+    <span class="inline-block">
+      {% if params.icon.html %}
+      {{ params.icon.html | safe }}
+      {% elseif params.icon.type == 'info' %}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Información"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm7.5 105a7.5 7.5 0 01-15 0V70a7.5 7.5 0 0115 0zM70 50a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
+      {% elseif params.icon.type == 'alert' %}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-alert-base" role="img" aria-label="Alerta"><path d="M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z" fill="currentColor"/></svg>
+      {% else %}
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="w-4 h-4 text-primary-base" role="img" aria-label="Ayuda"><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zm0 117.51a10 10 0 1110-10 10 10 0 01-10 10zm9.17-39.08a2.5 2.5 0 00-1.67 2.36v1.71a7.5 7.5 0 01-15 0v-10A7.5 7.5 0 0170 65a12.5 12.5 0 10-12.5-12.5 7.5 7.5 0 01-15 0 27.5 27.5 0 1136.67 25.93z" fill="currentColor"/></svg>
+      {% endif %}
+    </span>
     {% endif %}
   </div>
   <div id="{{ idTooltip }}" class="-my-xs p-sm shadow-md bg-black rounded text-white {%- if params.classesTooltip %} {{ params.classesTooltip }}{% endif %}" data-module="c-tooltip-tooltip" >

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

@@ -44,15 +44,15 @@
           classes: item.label.classes if item.label.classes else 'block relative -top-xs -left-8 pl-8 py-xs',
           attributes: item.label.attributes,
           for: id + '-input'
-        }) | indent(6) | trim }}
+        }) | indent(8) | trim }}
         {% if hasHint %}
-          {{ componentHint({
-            id: itemHintId,
-            classes: (item.hint.classes if item.hint.classes),
-            attributes: item.hint.attributes,
-            html: item.hint.html,
-            text: item.hint.text
-          }) | indent(6) | trim }}
+        {{ componentHint({
+          id: itemHintId,
+          classes: (item.hint.classes if item.hint.classes),
+          attributes: item.hint.attributes,
+          html: item.hint.html,
+          text: item.hint.text
+        }) | indent(8) | trim }}
         {% endif %}
       </div>
     </div>
@@ -69,11 +69,11 @@
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__minus"><path fill="currentColor" d="M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z"/></svg>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" width="10" height="10" aria-hidden="true" class="c-tree__plus"><path fill="currentColor" d="M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z"/></svg>
           </span>
-          {{ checkboxItem(itemNode, id, name, type) }}
+          {{ checkboxItem(itemNode, id, name, type) | trim | indent(8) }}
         </div>
       </div>
     {% else %}
-      {{ checkboxItem(itemNode, id, name, type) }}
+      {{ checkboxItem(itemNode, id, name, type) | trim | indent(4)}}
     {% endif %}
     {% if itemNode.sub.items %}
       {% set subLevel = subLevel + "sub-" %}
@@ -86,22 +86,22 @@
             {%- else -%}
               {%- set subId = subLevel + id + "-" + loop.index0 -%}
             {%- endif %}
-            <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="{{ subId }}" role="treeitem" data-module="c-tree__item" {%- if subitem.sub%}{% if subitem.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
-              {% if subitem.sub %}
-                {{ childrenTree(subitem, subId, name, type) }}
-              {% else %}
-                <div {%- if subitem.id %} id="{{ id }}"{% endif %} class="block {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-                  {% if subitem.active %}
-                    <div class="font-bold">
-                      {{ checkboxItem(subitem, subId, name, type) }}
-                    </div>
-                  {% else %}
-                    {{ checkboxItem(subitem, subId, name, type) }}
-                  {% endif %}
-                </div>
-              {% endif %}
-            </li>
+        <li class="c-tree__item ml-8 origin-top-left focus:outline-none" id="{{ subId }}" role="treeitem" data-module="c-tree__item" {%- if subitem.sub%}{% if subitem.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
+        {% if subitem.sub %}
+          {{ childrenTree(subitem, subId, name, type) | trim | indent(12) }}
+        {% else %}
+          <div {%- if subitem.id %} id="{{ id }}"{% endif %} class="block {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+          {% if subitem.active %}
+            <div class="font-bold">
+              {{ checkboxItem(subitem, subId, name, type) | trim | indent(10) }}
+            </div>
+          {% else %}
+            {{ checkboxItem(subitem, subId, name, type) | trim | indent(10) }}
           {% endif %}
+          </div>
+        {% endif %}
+        </li>
+       {% endif %}
        {% endfor %}
      </ul>
   {% endif %}
@@ -150,29 +150,33 @@
         {% set itemHintId = id + "-item-hint" if hasHint else "" %}
         {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
         {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-        <li id="{{ id }}" class="c-tree__item ml-4 focus:outline-none {%- if item.active %} font-bold{% endif %}" role="treeitem" data-module="c-tree__item" {%- if item.sub%}{% if item.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}{%- if item.active %} aria-current="page"{% endif %} {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %}>
-          {{ childrenTree(item, id, name, params.type) }}
-        </li>
+    <li id="{{ id }}" class="c-tree__item ml-4 focus:outline-none {%- if item.active %} font-bold{% endif %}" role="treeitem" data-module="c-tree__item" {%- if item.sub%}{% if item.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}{%- if item.active %} aria-current="page"{% endif %} {%- if item.disabled %} disabled="disabled" aria-disabled="true" tabindex="-1"{% endif %}>
+      {{ childrenTree(item, id, name, params.type) | trim }}
+    </li>
       {% endif %}
     {% endfor %}
   </ul>
 {% endset -%}
 
+{% set treeContent %}
+{% if params.fieldset %}
+{% call componentFieldset({
+  describedBy: describedBy,
+  errorId: errorId,
+  classes: params.fieldset.classes,
+  attributes: params.fieldset.attributes,
+  legend: params.fieldset.legend,
+  headingLevel: params.fieldset.headingLevel
+}) %}
+{{ innerHtml | safe }}
+{% endcall %}
+{% else %}
+{{ innerHtml | safe }}
+{% endif %}
+{% endset %}
+
 <!-- tree -->
 <div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-  {% if params.fieldset %}
-    {% call componentFieldset({
-      describedBy: describedBy,
-      errorId: errorId,
-      classes: params.fieldset.classes,
-      attributes: params.fieldset.attributes,
-      legend: params.fieldset.legend,
-      headingLevel: params.fieldset.headingLevel
-    }) %}
-    {{ innerHtml | trim | safe }}
-    {% endcall %}
-  {% else %}
-    {{ innerHtml | trim | safe }}
-  {% endif %}
+  {{ treeContent | indent(2) | safe }}
 </div>
 <!-- /tree -->