desy-html 12.1.0 → 13.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,53 +1,53 @@
-/* ==========================================================================
-   _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 !important;
-      @apply h-base !important;
-    }
-  }
-
-  .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 outline-none shadow-outline-focus 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 !important;
+      @apply h-base !important;
+    }
+  }
+
+  .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 outline-none shadow-outline-focus text-black;
+  }
+}
+
+

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

@@ -1,222 +1,222 @@
-{% 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 %}
-
-
-
-{% set ariaLabel = params.ariaLabel if params.ariaLabel %}
-
-
-{#- 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-none 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) %}
-    {% if itemNode.sub %}
-      <div class="w-full h-full">
-        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none 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="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 -%}>
-        {% 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-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 %}>
-        {% else %}
-        <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 %}>
-        {%- endif %}
-
-        {% if subitem.sub %}
-          {{ childrenTree(subitem, subId, name, type) | 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 %}
-     </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{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree">
-    {% 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-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 %}>
-      {{ childrenTree(item, id, name, params.type) | 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 -->
+{% 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 %}
+
+
+
+{% set ariaLabel = params.ariaLabel if params.ariaLabel %}
+
+
+{#- 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-none 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) %}
+    {% if itemNode.sub %}
+      <div class="w-full h-full">
+        <div class="w-full flex items-center relative  focus:bg-warning-base focus:outline-none 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="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 -%}>
+        {% 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-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 %}>
+        {% else %}
+        <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 %}>
+        {%- endif %}
+
+        {% if subitem.sub %}
+          {{ childrenTree(subitem, subId, name, type) | 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 %}
+     </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{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-tree">
+    {% 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-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 %}>
+      {{ childrenTree(item, id, name, params.type) | 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 -->