desy-html 7.1.1 → 7.2.0

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

@@ -16,83 +16,83 @@
         html: params.skipLink.html if params.skipLink.html,
         text: params.skipLink.text if params.skipLink.text else "Saltar al contenido principal",
         href: params.skipLink.href if params.skipLink.href else "#content"
-      })  }}
+      }) | indent(6)  }}
     </nav>
     {% if params.headerMini %}
-      {{ componentHeaderMini(params.headerMini)  }}
+    {{ componentHeaderMini(params.headerMini) | indent(4)  }}
     {% else %}
-      {{ componentHeaderMini({})  }}
+    {{ componentHeaderMini({}) | indent(4)  }}
     {% endif %}
     {% if params.super %}
       {% if params.super.customHtml %}
-        {{ params.super.customHtml }}
+    {{ params.super.customHtml }}
       {% else %}
-        <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}">
-          <div class="container h-full mx-auto px-base">
-            <div class="relative h-full bg-cover bg-no-repeat" {% if params.super.backgroundContainerUrl %} style="background-image: url('{{ params.super.backgroundContainerUrl }}')"{% endif %}>
-              {% if params.super.logo %}
-                <a href="{{ params.super.logo.href | default('/') }}" class="{% if params.super.logo.classes %}{{ params.super.logo.classes }}{% else-%} absolute top-6 left-0 focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base{% endif %}">
-                  <img src="{{ params.super.logo.url}}" alt="{{ params.super.logo.alt}}">
-                </a>
-              {% endif %}
-              {{ params.super.customNavigationHtml | safe if params.super.customNavigationHtml }}
-            </div>
-          </div>
+    <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}">
+      <div class="container h-full mx-auto px-base">
+        <div class="relative h-full bg-cover bg-no-repeat" {% if params.super.backgroundContainerUrl %} style="background-image: url('{{ params.super.backgroundContainerUrl }}')"{% endif %}>
+          {% if params.super.logo %}
+            <a href="{{ params.super.logo.href | default('/') }}" class="{% if params.super.logo.classes %}{{ params.super.logo.classes }}{% else-%} absolute top-6 left-0 focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base{% endif %}">
+              <img src="{{ params.super.logo.url}}" alt="{{ params.super.logo.alt}}">
+            </a>
+          {% endif %}
+          {{ params.super.customNavigationHtml | safe if params.super.customNavigationHtml }}
         </div>
+      </div>
+    </div>
       {% endif %}
     {% endif %}
     {% if params.noTitle != true %}
-      <div class="{% if params.titleContainer.classes %}{{ params.titleContainer.classes }}{% else -%} bg-heading-base bg-no-repeat bg-cover lg:bg-auto bg-center lg:bg-right bg-general lg:bg-general-lg  text-white{% endif %}" {%- if params.titleContainer.backgroundColor %} style="background-color: {{ params.titleContainer.backgroundColor }};"{% endif %}>
-        <div class="container mx-auto px-base">
-          <div class="lg:flex lg:flex-wrap py-base lg:py-lg">
-            {% if params.logo %}
-              <a href="{{ params.logo.href | default('/') }}" class="{% if params.logo.classes %}{{ params.logo.classes }}{% else-%} focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base{% endif %}">
-                <img src="{{ params.logo.url}}" alt="{{ params.logo.alt}}">
-              </a>
-              <div class="hidden lg:block mx-lg border-l border-current"></div>
-            {% endif %}
-            <div class="flex lg:flex-1">
-              <div>
-                {% set headingAttributes %}class="{% if params.title.classes %}{{ params.title.classes }}{% else %} text-2xl lg:text-3xl font-bold{% endif %}"{% endset %}
-                {% set headingContent %}<a href="{{ params.title.homepageUrl | default('/') }}" class="hover:underline focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base focus:text-black" title="Ir a la página de inicio">{{ params.title.html | safe if params.title.html else params.title.text }}</a>{% endset %}
-                {% if params.headingLevel == "1" %}
-                  <h1 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h1>
-                {% elseif params.headingLevel == "2" %}
-                  <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
-                {% elseif params.headingLevel == "3" %}
-                  <h3 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h3>
-                {% elseif params.headingLevel == "4" %}
-                  <h4 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h4>
-                {% elseif params.headingLevel == "5" %}
-                  <h5 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h5>
-                {% else %}
-                  <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
-                {% endif %}
-                {% if params.subtitle %}
-                  <p class="{% if params.subtitle.classes %}{{ params.subtitle.classes }}{% else -%} text-sm leading-5 lg:text-base lg:leading-6{% endif %}">{{ params.subtitle.html | safe if params.subtitle.html else params.subtitle.text }}</p>
-                {% endif %}
-              </div>
-              {{ params.title.customNavigationHtml | safe if params.title.customNavigationHtml }}
+    <div class="{% if params.titleContainer.classes %}{{ params.titleContainer.classes }}{% else -%} bg-heading-base bg-no-repeat bg-cover lg:bg-auto bg-center lg:bg-right bg-general lg:bg-general-lg  text-white{% endif %}" {%- if params.titleContainer.backgroundColor %} style="background-color: {{ params.titleContainer.backgroundColor }};"{% endif %}>
+      <div class="container mx-auto px-base">
+        <div class="lg:flex lg:flex-wrap py-base lg:py-lg">
+          {% if params.logo %}
+          <a href="{{ params.logo.href | default('/') }}" class="{% if params.logo.classes %}{{ params.logo.classes }}{% else-%} focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base{% endif %}">
+            <img src="{{ params.logo.url}}" alt="{{ params.logo.alt}}">
+          </a>
+          <div class="hidden lg:block mx-lg border-l border-current"></div>
+          {% endif %}
+          <div class="flex lg:flex-1">
+            <div>
+              {% set headingAttributes %}class="{% if params.title.classes %}{{ params.title.classes }}{% else %} text-2xl lg:text-3xl font-bold{% endif %}"{% endset %}
+              {% set headingContent %}<a href="{{ params.title.homepageUrl | default('/') }}" class="hover:underline focus:outline-none focus:ring-4 focus:ring-inset focus:ring-black focus:bg-warning-base focus:text-black" title="Ir a la página de inicio">{{ params.title.html | safe if params.title.html else params.title.text }}</a>{% endset %}
+              {% if params.headingLevel == "1" %}
+              <h1 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h1>
+              {% elseif params.headingLevel == "2" %}
+              <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
+              {% elseif params.headingLevel == "3" %}
+              <h3 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h3>
+              {% elseif params.headingLevel == "4" %}
+              <h4 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h4>
+              {% elseif params.headingLevel == "5" %}
+              <h5 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h5>
+              {% else %}
+              <h2 {{ headingAttributes | safe }}>{{ headingContent | safe }}</h2>
+              {% endif %}
+              {% if params.subtitle %}
+              <p class="{% if params.subtitle.classes %}{{ params.subtitle.classes }}{% else -%} text-sm leading-5 lg:text-base lg:leading-6{% endif %}">{{ params.subtitle.html | safe if params.subtitle.html else params.subtitle.text }}</p>
+              {% endif %}
             </div>
+            {{ params.title.customNavigationHtml | safe if params.title.customNavigationHtml }}
           </div>
         </div>
       </div>
+    </div>
     {% endif %}
     <div class="bg-neutral-lighter border-b border-neutral-base">
       <div class="container mx-auto px-base">
         <div class="flex items-center justify-between min-h-14">
           <div class="flex flex-wrap items-center">
             {% if params.navigation.items %}
-              <div class="-ml-base">
-                {{ componentHeaderNavigation({
-                  classes: params.navigation.classes,
-                  idPrefix: "header-nav-item",
-                  items: params.navigation.items,
-                  attributes: {
-                    "aria-label": "Menú principal"
-                  }
-                }) | indent(12) }}
-              </div>
+            <div class="-ml-base">
+              {{ componentHeaderNavigation({
+                classes: params.navigation.classes,
+                idPrefix: "header-nav-item",
+                items: params.navigation.items,
+                attributes: {
+                  "aria-label": "Menú principal"
+                }
+              }) | trim | indent(14) }}
+            </div>
             {% endif %}
           </div>
           {{ params.customNavigationHtml | safe if params.customNavigationHtml }}
@@ -107,18 +107,18 @@
             "attributes": params.dropdown.attributes
           }) %}
             {% if params.dropdown.contentHtml %}
-              {{ params.dropdown.contentHtml | safe }}
+            {{ params.dropdown.contentHtml | safe }}
             {% else %}
-              {{ componentNav({
-                isMenu: true,
-                idPrefix: "header-dropdown-nav-item",
-                items: params.dropdown.items,
-                classes: "w-max max-w-64",
-                attributes: {
-                  "id": "id-dropdown-nav",
-                  "aria-label": "Menú de usuario"
-                }
-              }) }}
+            {{ componentNav({
+              isMenu: true,
+              idPrefix: "header-dropdown-nav-item",
+              items: params.dropdown.items,
+              classes: "w-max max-w-64",
+              attributes: {
+                "id": "id-dropdown-nav",
+                "aria-label": "Menú de usuario"
+              }
+            }) }}
             {% endif %}
           {% endcall %}
           {% endif %}
@@ -126,39 +126,42 @@
           {{ componentHeaderOffcanvasButton({
             text: params.offcanvas.text,
             classes: params.offcanvas.classes
-          }) | indent(14) }}
+          }) | indent(10) }}
           {% endif %}
         </div>
       </div>
       {% if params.offcanvas %}
-      {% call componentOffcanvas({
-        text: params.offcanvas.textClose,
-        labelledId: params.offcanvas.labelledId
-      }) %}
-        {% if caller %}
-        {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
-        {% elseif params.caller %}
-        {{ params.caller | safe }}
-        {% endif %}
-      {% endcall %}
+      {% set offcanvasContent %}
+        {% call componentOffcanvas({
+          text: params.offcanvas.textClose,
+          labelledId: params.offcanvas.labelledId
+        }) %}
+          {% if caller %}
+          {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
+          {% elseif params.caller %}
+          {{ params.caller | safe }}
+          {% endif %}
+        {% endcall %}
+      {% endset %}
+      {{ offcanvasContent | safe }}
       {% endif %}
     </div>
     {% if params.sub %}
       {% if params.sub.customHtml %}
-        {{ params.sub.customHtml }}
+    {{ params.sub.customHtml }}
       {% else %}
-        <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}">
-          <div class="container h-full mx-auto px-base">
-            <div class="relative h-full bg-cover bg-center bg-no-repeat" {% if params.sub.backgroundContainerUrl %} style="background-image: url('{{ params.sub.backgroundContainerUrl }}')"{% endif %}>
-              {% if params.sub.logo %}
-                <a href="{{ params.sub.logo.href | default('/') }}" class="{% if params.sub.logo.classes %}{{ params.sub.logo.classes }}{% else-%} absolute top-6 left-0 focus:outline-none focus:shadow-outline-black{% endif %}">
-                  <img src="{{ params.sub.logo.url}}" alt="{{ params.sub.logo.alt}}">
-                </a>
-              {% endif %}
-              {{ params.sub.customNavigationHtml | safe if params.sub.customNavigationHtml }}
-            </div>
-          </div>
+    <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}">
+      <div class="container h-full mx-auto px-base">
+        <div class="relative h-full bg-cover bg-center bg-no-repeat" {% if params.sub.backgroundContainerUrl %} style="background-image: url('{{ params.sub.backgroundContainerUrl }}')"{% endif %}>
+          {% if params.sub.logo %}
+          <a href="{{ params.sub.logo.href | default('/') }}" class="{% if params.sub.logo.classes %}{{ params.sub.logo.classes }}{% else-%} absolute top-6 left-0 focus:outline-none focus:shadow-outline-black{% endif %}">
+            <img src="{{ params.sub.logo.url}}" alt="{{ params.sub.logo.alt}}">
+          </a>
+          {% endif %}
+          {{ params.sub.customNavigationHtml | safe if params.sub.customNavigationHtml }}
         </div>
+      </div>
+    </div>
       {% endif %}
     {% endif %}
   </div>

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

@@ -24,7 +24,7 @@
     "name": "With custom content after the logo",
     "description": "Use customNavigationHtml to nest custom content after the logo.",
     "data": {
-      "customNavigationHtml": '<div class="flex-1 text-right">' + logoUE | safe +'</div>'
+      "customNavigationHtml": '<div class="flex-1 text-right">' + logoUE | trim | safe +'</div>'
     }
   }
 ] %}

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

@@ -3,13 +3,13 @@
   {
     "name": "default",
     "data": {
-      "text": "It’s on your DNI, the last letter.\nFor example, ‘A’.\n"
+      "text": "It’s on your DNI, the last letter. For example, ‘A’."
     }
   },
   {
     "name": "with html",
     "data": {
-      "html": "It’s on your DNI, <strong class=\" font-bold \">the last letter</strong>.\nFor example, ‘A’.\n"
+      "html": "It’s on your DNI, <strong class=\" font-bold \">the last letter</strong>. For example, ‘A’."
     }
   }
 ] %}

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

@@ -1,6 +1,4 @@
 <!-- hint -->
 <p {%- if params.id %} id="{{ params.id }}"{% endif %} class="block text-neutral-dark {%- if params.classes %} {{ params.classes }}{% endif %}"
-{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  {{ params.html | safe if params.html else params.text }}
-</p>
+{%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.html | safe if params.html else params.text }}</p>
 <!-- /hint -->

package/src/templates/components/input-group/_template.input-group.njk

@@ -13,78 +13,77 @@
 {% if params.hint %}
   {% set hintId = params.id + "-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 }}
+{{ componentHint({
+  id: hintId,
+  classes: params.hint.classes,
+  attributes: params.hint.attributes,
+  html: params.hint.html,
+  text: params.hint.text
+}) }}
 {% endif %}
 {% if params.errorMessage %}
   {% set errorId = params.id + "-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 }}
+{{ componentErrorMessage({
+  id: errorId,
+  classes: params.errorMessage.classes,
+  attributes: params.errorMessage.attributes,
+  html: params.errorMessage.html,
+  text: params.errorMessage.text,
+  visuallyHiddenText: params.errorMessage.visuallyHiddenText
+}) }}
 {% endif %}
-  <div class="{% if params.classes %}{{ params.classes }}{% else %}flex{% endif %}"
-    {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
-    {%- if params.id %} id="{{ params.id }}"{% endif %}>
-    {% for item in params.items %}
-      {% if item.isSelect %}
-        {% if item.selectItems %}
-          {{ componentSelect({
-            label: item.label,
-            id: item.id if item.id else (params.id + "-" + item.name),
-            formGroup: item.formGroup,
-            classes: "mb-0 " + (item.classes if item.classes),
-            name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
-            disabled: item.disabled,
-            attributes: item.attributes,
-            items: item.selectItems
-          }) | indent(6) | trim }}
-        {% endif %}
-      {% elseif item.divider %}
-        <div {%- if item.divider.classes %} class="{{ item.divider.classes }}{% endif %}" role="separator">
-          {% if item.divider.html %}
-            {{ item.divider.html | safe }}
-          {% else %}
-            <p>
-              {{ item.divider.text }}
-            </p>
-          {% endif %}
-        </div>
-      {% else %}
-        {{ componentInput({
-          label: item.label,
-          id: item.id if item.id else (params.id + "-" + item.name),
-          formGroup: item.formGroup,
-          classes: "mb-0 " + (item.classes if item.classes),
-          name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
-          value: item.value,
-          type: item.type if item.type else "text",
-          inputmode: item.inputmode,
-          autocomplete: item.autocomplete,
-          pattern: item.pattern,
-          placeholder: item.placeholder,
-          disabled: item.disabled,
-          attributes: item.attributes
-        }) | indent(6) | trim }}
+<div class="{% if params.classes %}{{ params.classes }}{% else %}flex{% endif %}"
+  {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
+  {%- if params.id %} id="{{ params.id }}"{% endif %}>
+  {% for item in params.items %}
+    {% if item.isSelect %}
+      {% if item.selectItems %}
+  {{ componentSelect({
+    label: item.label,
+    id: item.id if item.id else (params.id + "-" + item.name),
+    formGroup: item.formGroup,
+    classes: "mb-0 " + (item.classes if item.classes),
+    name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
+    disabled: item.disabled,
+    attributes: item.attributes,
+    items: item.selectItems
+  }) | indent(2) }}
       {% endif %}
-  {% endfor %}
+    {% elseif item.divider %}
+  <div {%- if item.divider.classes %} class="{{ item.divider.classes }}{% endif %}" role="separator">
+    {% if item.divider.html %}
+      {{ item.divider.html | safe }}
+    {% else %}
+      <p>
+        {{ item.divider.text }}
+      </p>
+    {% endif %}
   </div>
+    {% else %}
+  {{ componentInput({
+    label: item.label,
+    id: item.id if item.id else (params.id + "-" + item.name),
+    formGroup: item.formGroup,
+    classes: "mb-0 " + (item.classes if item.classes),
+    name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name,
+    value: item.value,
+    type: item.type if item.type else "text",
+    inputmode: item.inputmode,
+    autocomplete: item.autocomplete,
+    pattern: item.pattern,
+    placeholder: item.placeholder,
+    disabled: item.disabled,
+    attributes: item.attributes
+  }) | indent(2) }}
+    {% endif %}
+{% endfor %}
+</div>
 {% endset %}
 
-<!-- input-group -->
-<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-{% if params.fieldset %}
-{#- We override the fieldset's role to 'group' because otherwise JAWS does not
+{% set formGroupContent %}
+  {% if params.fieldset %}
+  {#- We override the fieldset's role to 'group' because otherwise JAWS does not
     announce the description for a fieldset comprised of text inputs, but
     adding the role to the fieldset always makes the output overly verbose for
     radio buttons or checkboxes. -#}
@@ -96,10 +95,15 @@
     legend: params.fieldset.legend,
     headingLevel: params.fieldset.headingLevel
   }) %}
-  {{ innerHtml | trim | safe }}
-  {% endcall %}
-{% else %}
-  {{ innerHtml | trim | safe }}
-{% endif %}
+{{ innerHtml | safe }}
+    {% endcall %}
+  {% else %}
+{{ innerHtml | safe }}
+  {% endif %}
+{% endset %}
+
+<!-- input-group -->
+<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+  {{ formGroupContent | safe | indent(2) }}
 </div>
 <!-- /input-group -->

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

@@ -27,47 +27,47 @@
   <div class="lg:flex flex-1 self-center">
     <div class="lg:flex-1 lg:self-center">
       {% if params.headingLevel == "1" %}
-        <h1 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h1>
+      <h1 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h1>
       {% elseif params.headingLevel == "2" %}
-        <h2 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h2>
+      <h2 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h2>
       {% elseif params.headingLevel == "3" %}
-        <h3 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h3>
+      <h3 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h3>
       {% elseif params.headingLevel == "4" %}
-        <h4 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h4>
+      <h4 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h4>
       {% elseif params.headingLevel == "5" %}
-        <h5 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h5>
+      <h5 {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</h5>
       {% else %}
-        <p {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</p>
+      <p {%- if params.title.classes %} class="{{ params.title.classes }}"{% endif %} {%- for attribute, value in params.title.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ params.title.html | safe if params.title.html else params.title.text }}</p>
       {% endif %}
       {% if params.description %}
-        <p {%- if params.description.classes %} class="{{ params.description.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-            {{ params.description.html | safe if params.description.html else params.description.text }}
-        </p>
+      <p {%- if params.description.classes %} class="{{ params.description.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
+        {{ params.description.html | safe if params.description.html else params.description.text }}
+      </p>
       {% endif %}
       {% if params.items %}
-        <ul class="-ml-sm lg:divide-x lg:divide-neutral-base">
-          {% for item in params.items %}
-            <li class="lg:inline-block px-sm text-sm text-neutral-dark">{{ item.text }}</li>
-          {% endfor %}
-        </ul>
+      <ul class="-ml-sm lg:divide-x lg:divide-neutral-base">
+        {% for item in params.items %}
+        <li class="lg:inline-block px-sm text-sm text-neutral-dark">{{ item.text }}</li>
+        {% endfor %}
+      </ul>
       {% endif %}
       {% if params.content %}
-        <p class="text-sm {%- if params.content.classes %} {{ params.content.classes }}{% endif %}">
-            {{ params.content.html | safe if params.content.html else params.content.text }}
-        </p>
+      <p class="text-sm {%- if params.content.classes %} {{ params.content.classes }}{% endif %}">
+        {{ params.content.html | safe if params.content.html else params.content.text }}
+      </p>
       {% endif %}
     </div>
     {% if caller %}
       {% set myCaller = caller() %}
       {% if myCaller | string != '' %}
-      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
-        {{ myCaller }}
-      </div>
+    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
+      {{ myCaller }}
+    </div>
       {% endif %}
     {% elseif params.caller %}
-     <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
-        {{ params.caller | safe }}
-      </div>
+    <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 lg:ml-base">
+      {{ params.caller | safe }}
+    </div>
     {% endif %}
   </div>
 </div>

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

@@ -2,24 +2,35 @@
 {% set labelHtml %}
 <label class="block {%- if params.classes %} {{ params.classes }}{% endif %}"
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}
-  {%- if params.for %} for="{{ params.for }}"{% endif %}>{{ params.html | safe if params.html else params.text }}</label>
-{% endset %}
+  {%- if params.for %} for="{{ params.for }}"{% endif %}>{{ params.html | safe if params.html else params.text }}</label>{% endset %}
 
 <!-- label -->
 {% if params.isPageHeading %}
   {% if params.headingLevel == "1" %}
-    <h1 class="block ">{{ labelHtml | safe | indent(2) }}</h1>
-  {% elseif params.headingLevel == "2" %}
-    <h2 class="block ">{{ labelHtml | safe | indent(2) }}</h2>
-  {% elseif params.headingLevel == "3" %}
-    <h3 class="block ">{{ labelHtml | safe | indent(2) }}</h3>
-  {% elseif params.headingLevel == "4" %}
-    <h4 class="block ">{{ labelHtml | safe | indent(2) }}</h4>
-  {% elseif params.headingLevel == "5" %}
-    <h5 class="block ">{{ labelHtml | safe | indent(2) }}</h5>
-  {% else %}
-    <h1 class="block ">{{ labelHtml | safe | indent(2) }}</h1>
-  {% endif %}
+<h1 class="block ">
+  {{ labelHtml | safe }}
+</h1>
+{% elseif params.headingLevel == "2" %}
+<h2 class="block ">
+  {{ labelHtml | safe }}
+</h2>
+{% elseif params.headingLevel == "3" %}
+<h3 class="block ">
+  {{ labelHtml | safe }}
+</h3>
+{% elseif params.headingLevel == "4" %}
+<h4 class="block ">
+  {{ labelHtml | safe }}
+</h4>
+{% elseif params.headingLevel == "5" %}
+<h5 class="block ">
+  {{ labelHtml | safe }}
+</h5>
+{% else %}
+<h1 class="block ">
+  {{ labelHtml | safe }}
+</h1>
+{% endif %}
 {% else %}
 {{ labelHtml | safe }}
 {% endif %}