desy-html 16.0.4 → 17.0.0

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

@@ -1,3 +1,3 @@
-{% macro componentTree(params) %}
-{% include "./_template.tree.njk" %}
-{% endmacro %}
+{% macro componentTree(params) %}
+{% include "./_template.tree.njk" %}
+{% endmacro %}

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

@@ -1,54 +1,54 @@
-/* ==========================================================================
-   _styles.tree.css
-   ========================================================================== */
-
-@layer components {
-  .c-tree--base {
-    input[type='checkbox'],
-    input[type='radio'] {
-      @apply w-6;
-      @apply h-6;
-    }
-  }
-
-  .c-tree--sm {
-    input[type='checkbox'],
-    input[type='radio'] {
-      @apply w-base!;
-      @apply h-base!;
-    }
-  }
-
-  .c-tree__item {
-    &[aria-expanded='true'] {
-      & > ul {
-        @apply block;
-      }
-      .c-tree__plus {
-        @apply hidden;
-      }
-      .c-tree__minus {
-        @apply block;
-      }
-    }
-
-    &[aria-expanded='false'] {
-      & > ul {
-        @apply hidden;
-      }
-      .c-tree__plus {
-        @apply block;
-      }
-      .c-tree__minus {
-        @apply hidden;
-      }
-    }
-  }
-
-  .c-tree__item--focus {
-    @apply bg-warning-base;
-    @apply outline-hidden;
-    @apply shadow-outline-focus;
-    @apply text-black;
-  }
-}
+/* ==========================================================================
+   _styles.tree.css
+   ========================================================================== */
+
+@layer components {
+  .c-tree--base {
+    input[type='checkbox'],
+    input[type='radio'] {
+      @apply w-6;
+      @apply h-6;
+    }
+  }
+
+  .c-tree--sm {
+    input[type='checkbox'],
+    input[type='radio'] {
+      @apply w-base!;
+      @apply h-base!;
+    }
+  }
+
+  .c-tree__item {
+    &[aria-expanded='true'] {
+      & > ul {
+        @apply block;
+      }
+      .c-tree__plus {
+        @apply hidden;
+      }
+      .c-tree__minus {
+        @apply block;
+      }
+    }
+
+    &[aria-expanded='false'] {
+      & > ul {
+        @apply hidden;
+      }
+      .c-tree__plus {
+        @apply block;
+      }
+      .c-tree__minus {
+        @apply hidden;
+      }
+    }
+  }
+
+  .c-tree__item--focus {
+    @apply bg-warning-base;
+    @apply outline-hidden;
+    @apply shadow-outline-focus;
+    @apply text-black;
+  }
+}

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

@@ -1,233 +1,233 @@
-{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
-{% from "../fieldset/_macro.fieldset.njk" import componentFieldset %}
-{% from "../hint/_macro.hint.njk" import componentHint %}
-{% from "../label/_macro.label.njk" import componentLabel %}
-{% from "../searchbar/_macro.searchbar.njk" import componentSearchbar %}
-
-{#- If an id 'prefix' is not passed, fall back to using the name attribute
-   instead. We need this for error messages and hints as well -#}
-{% set idPrefix = params.idPrefix if params.idPrefix else
-  params.name %}
-
-{#- a record of other elements that we need to associate with the input using
-   aria-describedby – for example hints or error messages -#}
-{% set describedBy = params.describedBy if params.describedBy else
-  "" %}
-{% if params.fieldset.describedBy %}
-  {% set describedBy = params.fieldset.describedBy %}
-{% endif %}
-
-{% set subLevel = "" %}
-
-{#- fieldset is false by default -#}
-{% set hasFieldset = true if params.fieldset else
-  false %}
-
-{#- fieldset is false by default -#}
-{% set hasUnderline = true if params.hasUnderline else
-  false %}
-
-{#- macro to generate checkboxes -#}
-{% macro checkboxItem(item, id, name, type) %}
-  {% set hasHint = true if item.hint.text or item.hint.html %}
-  {% set itemHintId = id + "-item-hint" if hasHint else "" %}
-  {% set itemDescribedBy = describedBy if not hasFieldset else
-    "" %}
-  {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-  <div {%- if params.hasDividers or item.classes %} class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}"{% endif %}>
-    <div class="relative flex items-start py-xs">
-      {% if type == 'checkbox' or type == 'radio' or type == undefined %}
-        <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-base disabled:border-neutral-base text-primary-base {%- if item.isIndeterminate and item.indeterminateChecked %} c-checkboxes__indeterminate-active {% endif %}" id="{{ id }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox" {% else %} type="radio"{% endif %} value="{{ item.value }}"
-        {{-" checked" if item.checked }}
-        {{-" disabled" if item.disabled }}
-        {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
-        {%- if params.errorMessage %} aria-invalid="true"{% endif -%}
-        {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
-        {%- if item.isIndeterminate or item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
-        </div>
-        <div class="flex-1 pt-0.5 leading-5">
-          {{ componentLabel({
-          html: item.html,
-          text: item.text,
-          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(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(8) | trim }}
-          {% endif %}
-        </div>
-      {% endif %}
-      {% if type == 'navigation' %}
-        {% if item.href %}
-          <a {%- if id %} id="{{ id }}-link"{% endif %} href="{{ item.href }}" class="block px-xs focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black {%- if hasUnderline %} underline{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if not item.disabled %} hover:text-primary-base hover:underline{% endif %} {%- if item.disabled %} no-underline pointer-events-none{% 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 -%}>
-            {% if item.active %}
-              <strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
-            {% else %}
-              {{ item.html | filterquotes | safe if item.html else item.text }}
-            {% endif %}
-          </a>
-        {% else %}
-          <span {%- if id %} id="{{ id }}-link"{% endif %} class="block px-xs {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-            {% if item.active %}
-              <strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
-            {% else %}
-              {{ item.html | filterquotes | safe if item.html else item.text }}
-            {% endif %}
-          </span>
-        {% endif %}
-      {% endif %}
-    </div>
-  </div>
-{% endmacro %}
-
-{#- macro to generate children -#}
-{% macro childrenTree(itemNode, id, name, type, lazyRendering) %}
-  {% if itemNode.sub %}
-    <div class="w-full h-full">
-      <div class="flex items-center relative  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black text-left {%- if itemNode.classes %} {{ itemNode.classes }}{% endif %}"
-        {%- for attribute, value in itemNode.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-        <span class="c-tree__icon absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
-          <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) | trim | indent(8) }}
-      </div>
-    </div>
-  {% else %}
-    {{ checkboxItem(itemNode, id, name, type) | trim | indent(4)}}
-  {% endif %}
-  {% if itemNode.sub.items %}
-    {% set subLevel = subLevel + "sub-" %}
-    <ul role="group" class='c-tree__itemgroup {%- if itemNode.sub.classes %} {{ itemNode.sub.classes }}{% endif %}' {%- for attribute, value in itemNode.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-      {% if lazyRendering != true %}
-        {% for subitem in itemNode.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 -%}
-              {%- set subId = subLevel + id + "-" + loop.index0 -%}
-            {%- endif %}
-            {% if type == 'navigation' %}
-              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-hidden" id="{{ subId }}" role="treeitem" data-module="c-tree__item" {%- if subitem.sub%}{% if subitem.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
-              {% else %}
-                <li class="c-tree__item ml-8 origin-top-left focus:outline-hidden" id="{{ subId }}" role="treeitem" data-module="c-tree__item" {%- if subitem.sub%}{% if subitem.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
-                {%- endif %}
-
-                {% if subitem.sub %}
-                  {{ childrenTree(subitem, subId, name, type, lazyRendering) | trim | indent(12) }}
-                {% else %}
-                  <div 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 %}
-        {% endif %}
-      </ul>
-    {% endif %}
-  {% endmacro %}
-
-  {#- Capture the HTML so we can optionally nest it in a fieldset -#}
-  {% set innerHtml %}
-  {% if params.hint %}
-    {% set hintId = idPrefix + '-hint' %}
-    {% set describedBy = describedBy + ' ' + hintId if describedBy else
-      hintId %}
-    {{ componentHint({
-      id: hintId,
-      classes: params.hint.classes,
-      attributes: params.hint.attributes,
-      html: params.hint.html,
-      text: params.hint.text
-    }) | indent(2) | trim }}
-  {% endif %}
-  {% if params.errorMessage %}
-    {% set errorId = idPrefix + '-error' %}
-    {% set describedBy = describedBy + ' ' + errorId if describedBy else
-      errorId %}
-    {{ componentErrorMessage({
-      id: errorId,
-      classes: params.errorMessage.classes,
-      attributes: params.errorMessage.attributes,
-      html: params.errorMessage.html,
-      text: params.errorMessage.text,
-      visuallyHiddenText: params.errorMessage.visuallyHiddenText
-    }) | indent(2) | trim }}
-  {% endif %}
-  {% if params.searchbar %}
-    {{ componentSearchbar(params.searchbar)  }}
-  {% endif %}
-  <ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" id="{% if params.id %}{{ params.id }}{% else %}{{ idPrefix }}{% endif %}" role="tree" {%- if params.type=='navigation' %} data-tree-navigation="true"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree"
-  {% if params.lazyRendering %}
-    data-tree='{{ params.items | dump | safe }}'
-    data-params='{{ params | dump | safe }}'
-  {% endif %}
-  >
-    {% for item in params.items %}
-      {% if item %}
-        {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
-        {%- if item.id -%}
-          {%- set id = item.id -%}
-        {%- else -%}
-          {%- set id = idPrefix + "-" + loop.index0 -%}
-        {%- endif -%}
-        {% set subId = "sub-" + id %}
-        {% set name = item.name if item.name else
-          params.name %}
-        {% set hasHint = true if item.hint.text or item.hint.html %}
-        {% 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 {%- if params.type=='navigation' %} my-sm {% endif %} focus:outline-hidden {%- 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 %}>
-          {{ childrenTree(item, id, name, params.type, params.lazyRendering) | trim }}
-        </li>
-      {% endif %}
-    {% endfor %}
-  </ul>
-  {% endset -%}
-
-  {% set treeContent %}
-  {% if params.type == 'navigation' %}
-    <nav {%- if params.ariaLabel%} aria-label= "{{params.ariaLabel}}" {% else %} aria-label= "Árbol de navegación" {% endif -%} >
-      {{ innerHtml | safe }}
-    </nav>
-  {% elseif params.type == 'checkbox' or params.type == 'radio' or params.type == undefined %}
-    {% 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 %}
-  {% endif %}
-  {% endset %}
-
-  <!-- tree -->
-  <div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-    {{ treeContent | indent(2) | safe }}
-  </div>
+{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
+{% from "../fieldset/_macro.fieldset.njk" import componentFieldset %}
+{% from "../hint/_macro.hint.njk" import componentHint %}
+{% from "../label/_macro.label.njk" import componentLabel %}
+{% from "../searchbar/_macro.searchbar.njk" import componentSearchbar %}
+
+{#- If an id 'prefix' is not passed, fall back to using the name attribute
+   instead. We need this for error messages and hints as well -#}
+{% set idPrefix = params.idPrefix if params.idPrefix else
+  params.name %}
+
+{#- a record of other elements that we need to associate with the input using
+   aria-describedby – for example hints or error messages -#}
+{% set describedBy = params.describedBy if params.describedBy else
+  "" %}
+{% if params.fieldset.describedBy %}
+  {% set describedBy = params.fieldset.describedBy %}
+{% endif %}
+
+{% set subLevel = "" %}
+
+{#- fieldset is false by default -#}
+{% set hasFieldset = true if params.fieldset else
+  false %}
+
+{#- fieldset is false by default -#}
+{% set hasUnderline = true if params.hasUnderline else
+  false %}
+
+{#- macro to generate checkboxes -#}
+{% macro checkboxItem(item, id, name, type) %}
+  {% set hasHint = true if item.hint.text or item.hint.html %}
+  {% set itemHintId = id + "-item-hint" if hasHint else "" %}
+  {% set itemDescribedBy = describedBy if not hasFieldset else
+    "" %}
+  {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
+  <div {%- if params.hasDividers or item.classes %} class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}"{% endif %}>
+    <div class="relative flex items-start py-xs">
+      {% if type == 'checkbox' or type == 'radio' or type == undefined %}
+        <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-base disabled:border-neutral-base text-primary-base {%- if item.isIndeterminate and item.indeterminateChecked %} c-checkboxes__indeterminate-active {% endif %}" id="{{ id }}-input" name="{{ name }}" {%- if type == 'checkbox' %} type="checkbox" {% else %} type="radio"{% endif %} value="{{ item.value }}"
+        {{-" checked" if item.checked }}
+        {{-" disabled" if item.disabled }}
+        {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
+        {%- if params.errorMessage %} aria-invalid="true"{% endif -%}
+        {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
+        {%- if item.isIndeterminate or item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
+        </div>
+        <div class="flex-1 pt-0.5 leading-5">
+          {{ componentLabel({
+          html: item.html,
+          text: item.text,
+          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(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(8) | trim }}
+          {% endif %}
+        </div>
+      {% endif %}
+      {% if type == 'navigation' %}
+        {% if item.href %}
+          <a {%- if id %} id="{{ id }}-link"{% endif %} href="{{ item.href }}" class="block px-xs focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black {%- if hasUnderline %} underline{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %} {%- if not item.disabled %} hover:text-primary-base hover:underline{% endif %} {%- if item.disabled %} no-underline pointer-events-none{% 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 -%}>
+            {% if item.active %}
+              <strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
+            {% else %}
+              {{ item.html | filterquotes | safe if item.html else item.text }}
+            {% endif %}
+          </a>
+        {% else %}
+          <span {%- if id %} id="{{ id }}-link"{% endif %} class="block px-xs {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+            {% if item.active %}
+              <strong class="font-bold">{{ item.html | filterquotes | safe if item.html else item.text }}</strong>
+            {% else %}
+              {{ item.html | filterquotes | safe if item.html else item.text }}
+            {% endif %}
+          </span>
+        {% endif %}
+      {% endif %}
+    </div>
+  </div>
+{% endmacro %}
+
+{#- macro to generate children -#}
+{% macro childrenTree(itemNode, id, name, type, lazyRendering) %}
+  {% if itemNode.sub %}
+    <div class="w-full h-full">
+      <div class="flex items-center relative  focus:bg-warning-base focus:outline-hidden focus:shadow-outline-focus focus:text-black text-left {%- if itemNode.classes %} {{ itemNode.classes }}{% endif %}"
+        {%- for attribute, value in itemNode.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        <span class="c-tree__icon absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold after:content-[''] after:absolute after:-left-2 after:p-4">
+          <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) | trim | indent(8) }}
+      </div>
+    </div>
+  {% else %}
+    {{ checkboxItem(itemNode, id, name, type) | trim | indent(4)}}
+  {% endif %}
+  {% if itemNode.sub.items %}
+    {% set subLevel = subLevel + "sub-" %}
+    <ul role="group" class='c-tree__itemgroup {%- if itemNode.sub.classes %} {{ itemNode.sub.classes }}{% endif %}' {%- for attribute, value in itemNode.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      {% if lazyRendering != true %}
+        {% for subitem in itemNode.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 -%}
+              {%- set subId = subLevel + id + "-" + loop.index0 -%}
+            {%- endif %}
+            {% if type == 'navigation' %}
+              <li class="c-tree__item ml-5 my-sm origin-top-left focus:outline-hidden" id="{{ subId }}" role="treeitem" data-module="c-tree__item" {%- if subitem.sub%}{% if subitem.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
+              {% else %}
+                <li class="c-tree__item ml-8 origin-top-left focus:outline-hidden" id="{{ subId }}" role="treeitem" data-module="c-tree__item" {%- if subitem.sub%}{% if subitem.expanded %} aria-expanded="true"{% else %} aria-expanded="false"{% endif %}{% endif %}>
+                {%- endif %}
+
+                {% if subitem.sub %}
+                  {{ childrenTree(subitem, subId, name, type, lazyRendering) | trim | indent(12) }}
+                {% else %}
+                  <div 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 %}
+        {% endif %}
+      </ul>
+    {% endif %}
+  {% endmacro %}
+
+  {#- Capture the HTML so we can optionally nest it in a fieldset -#}
+  {% set innerHtml %}
+  {% if params.hint %}
+    {% set hintId = idPrefix + '-hint' %}
+    {% set describedBy = describedBy + ' ' + hintId if describedBy else
+      hintId %}
+    {{ componentHint({
+      id: hintId,
+      classes: params.hint.classes,
+      attributes: params.hint.attributes,
+      html: params.hint.html,
+      text: params.hint.text
+    }) | indent(2) | trim }}
+  {% endif %}
+  {% if params.errorMessage %}
+    {% set errorId = idPrefix + '-error' %}
+    {% set describedBy = describedBy + ' ' + errorId if describedBy else
+      errorId %}
+    {{ componentErrorMessage({
+      id: errorId,
+      classes: params.errorMessage.classes,
+      attributes: params.errorMessage.attributes,
+      html: params.errorMessage.html,
+      text: params.errorMessage.text,
+      visuallyHiddenText: params.errorMessage.visuallyHiddenText
+    }) | indent(2) | trim }}
+  {% endif %}
+  {% if params.searchbar %}
+    {{ componentSearchbar(params.searchbar)  }}
+  {% endif %}
+  <ul class="c-tree {%- if params.classes %} {{ params.classes }}{% endif %}" id="{% if params.id %}{{ params.id }}{% else %}{{ idPrefix }}{% endif %}" role="tree" {%- if params.type=='navigation' %} data-tree-navigation="true"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree"
+  {% if params.lazyRendering %}
+    data-tree='{{ params.items | dump | safe }}'
+    data-params='{{ params | dump | safe }}'
+  {% endif %}
+  >
+    {% for item in params.items %}
+      {% if item %}
+        {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+        {%- if item.id -%}
+          {%- set id = item.id -%}
+        {%- else -%}
+          {%- set id = idPrefix + "-" + loop.index0 -%}
+        {%- endif -%}
+        {% set subId = "sub-" + id %}
+        {% set name = item.name if item.name else
+          params.name %}
+        {% set hasHint = true if item.hint.text or item.hint.html %}
+        {% 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 {%- if params.type=='navigation' %} my-sm {% endif %} focus:outline-hidden {%- 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 %}>
+          {{ childrenTree(item, id, name, params.type, params.lazyRendering) | trim }}
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ul>
+  {% endset -%}
+
+  {% set treeContent %}
+  {% if params.type == 'navigation' %}
+    <nav {%- if params.ariaLabel%} aria-label= "{{params.ariaLabel}}" {% else %} aria-label= "Árbol de navegación" {% endif -%} >
+      {{ innerHtml | safe }}
+    </nav>
+  {% elseif params.type == 'checkbox' or params.type == 'radio' or params.type == undefined %}
+    {% 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 %}
+  {% endif %}
+  {% endset %}
+
+  <!-- tree -->
+  <div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+    {{ treeContent | indent(2) | safe }}
+  </div>
   <!-- /tree -->