desy-html 7.1.1 → 7.2.0

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

@@ -32,34 +32,29 @@
   {% set id = idPrefix + "-" + loop.index %}
   {% endif %}
   <li>
-    {% set prefix %}
-      <span class="sr-only">Página&nbsp;</span>
-    {% endset %}
-    {% set suffix %}
-      <span class="sr-only">&nbsp;(resultados del {{ loop.index | int * params.itemsPerPage | int }} al {% if ((loop.index | int + 1)  * params.itemsPerPage | int) > ( params.totalItems | int ) %}{{ params.totalItems }}{% else %}{{ (loop.index | int + 1)  * params.itemsPerPage | int }}{% endif %})</span>
-    {% endset %}
-
+    {% set prefix %}<span class="sr-only">Página&nbsp;</span>{% endset %}
+    {% set suffix %}<span class="sr-only">&nbsp;(resultados del {{ loop.index | int * params.itemsPerPage | int }} al {% if ((loop.index | int + 1)  * params.itemsPerPage | int) > ( params.totalItems | int ) %}{{ params.totalItems }}{% else %}{{ (loop.index | int + 1)  * params.itemsPerPage | int }}{% endif %})</span>{% endset %}
     {% if item.active %}
-      {{ componentButton({
-        "html": '<strong>' + prefix + loop.index + suffix + '</strong>',
-        "href": "#",
-        "classes": "c-button--primary c-button--disabled mb-sm mr-sm",
-        "disabled": true,
-        "attributes": {
-          "id": id,
-          "aria-current": "page",
-          "tabindex": "-1"
-        }
-      })  }}
+    {{ componentButton({
+      "html": '<strong>' + prefix | trim + loop.index + suffix | trim + '</strong>',
+      "href": "#",
+      "classes": "c-button--primary c-button--disabled mb-sm mr-sm",
+      "disabled": true,
+      "attributes": {
+        "id": id,
+        "aria-current": "page",
+        "tabindex": "-1"
+      }
+    }) | trim | indent(4)  }}
     {% else %}
-      {{ componentButton({
-        "html": prefix + loop.index + suffix,
-        "href": "#",
-        "classes": "mb-sm mr-sm",
-        "attributes": {
-          "id": id
-        }
-      })  }}
+    {{ componentButton({
+      "html": prefix + loop.index + suffix,
+      "href": "#",
+      "classes": "mb-sm mr-sm",
+      "attributes": {
+        "id": id
+      }
+    }) | trim | indent(4)  }}
     {% endif %}
   </li>
   {% endif %}
@@ -90,7 +85,7 @@
       "attributes": {
         "id": params.idPrefix + "-previous"
       }
-    })  }}
+    }) | trim | indent(4)  }}
     {{ componentListbox({
       "id": params.id + "-listbox",
       "idPrefix": params.idPrefix,
@@ -103,7 +98,7 @@
         "classes": "sr-only"
       },
       "items": params.items
-    })  }}
+    }) | trim | indent(4)  }}
     {{ componentButton({
       "html": prefix + params.nextText + nextSuffix + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="1em" height="1em" class="self-center h-2.5 w-2.5 ml-2" aria-hidden="true" focusable="false"><path d="M34 137.07a10 10 0 010-14.14l51.13-51.16a2.5 2.5 0 000-3.54L34 17.07A10 10 0 0148.11 2.93l56.46 56.46a15 15 0 010 21.22l-56.46 56.46a10 10 0 01-14.11 0z" fill="currentColor" /></svg>',
       "href": "#",
@@ -112,30 +107,30 @@
       "attributes": {
         "id": params.idPrefix + "-next"
       }
-    })  }}
+    }) | trim | indent(4)  }}
   </nav>
   {% else %}
   <nav {{- commonAttributes | safe }}>
     <ul class="flex flex-wrap">
-      {{ innerHtml | trim | safe }}
+      {{ innerHtml | trim | safe | indent(4) }}
     </ul>
   </nav>
   {% endif %}
   {% if params.itemsListbox %}
-    <div class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
-      {{ componentListbox({
-        "id": "items-listbox-" + idPrefix,
-        "text": params.itemsPerPage,
-        "label": params.itemsListbox.label if params.itemsListbox.label else { "text": "Items por página: ", "classes": "inline-block align-middle mb-0" },
-        "doesChangeButtonText": true,
-        "classesContainer": "flex flex-wrap items-center gap-xs",
-        "classes": "c-listbox--sm c-listbox--transparent",
-        "items": params.itemsListbox.items
-      })  }}
-    </div>
+  <div class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
+    {{ componentListbox({
+      "id": "items-listbox-" + idPrefix,
+      "text": params.itemsPerPage,
+      "label": params.itemsListbox.label if params.itemsListbox.label else { "text": "Items por página: ", "classes": "inline-block align-middle mb-0" },
+      "doesChangeButtonText": true,
+      "classesContainer": "flex flex-wrap items-center gap-xs",
+      "classes": "c-listbox--sm c-listbox--transparent",
+      "items": params.itemsListbox.items
+    }) | indent(4)  }}
+  </div>
   {% endif %}
   <p class="block relative -top-xs lg:ml-auto text-sm text-neutral-dark">
-     <span class="sr-only">Posición de paginación: </span>{{ activePosition | int * params.itemsPerPage | int }} - {{ (activePosition | int + 1)  * params.itemsPerPage | int }} de {{ params.totalItems }}
+    <span class="sr-only">Posición de paginación: </span>{{ activePosition | int * params.itemsPerPage | int }} - {{ (activePosition | int + 1)  * params.itemsPerPage | int }} de {{ params.totalItems }}
   </p>
 </div>
 <!-- /pagination -->

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

@@ -1,4 +1,41 @@
+{% from "components/input/_macro.input.njk" import componentInput %}
+
 {% set exampleComponent = "radios" %}
+
+{% set telefonoContent %}
+  {{ componentInput({
+    "label": {
+      "text": "Número de teléfono"
+    },
+    "id": "telefono-a",
+    "name": "telefono-name"
+  })  }}
+{% endset %}
+
+{% set mobileContent %}
+  {{ componentInput({
+    "label": {
+      "text": "Número de teléfono móvil"
+    },
+    "id": "mobile-a",
+    "name": "mobile-name"
+  })  }}
+{% endset %}
+
+{% set mobileErrorContent %}
+  {{ componentInput({
+    "label": {
+      "text": "Número de teléfono móvil"
+    },
+    "id": "input-with-error-message-a",
+    "name": "test-name",
+    "errorMessage": {
+      "text": "Error: Este campo no puede estar vacío"
+    }
+  })  }}
+{% endset %}
+
+
 {% set examples =  [
   {
     "name": "default",
@@ -355,21 +392,21 @@
           "text": "Email",
           "checked": true,
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
+            "html": telefonoContent | trim | safe
           }
         },
         {
           "value": "phone",
           "text": "Phone",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
+            "html": mobileContent | trim | safe
           }
         },
         {
           "value": "text",
           "text": "Text message",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
+            "html": mobileContent | trim | safe
           }
         }
       ]
@@ -393,7 +430,7 @@
           "checked": true,
           "classes": "mr-sm",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
+            "html": telefonoContent | trim | safe
           }
         },
         {
@@ -401,7 +438,7 @@
           "text": "Phone",
           "classes": "mr-sm",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
+            "html": mobileContent | trim | safe
           }
         },
         {
@@ -409,7 +446,7 @@
           "text": "Text message",
           "classes": "mr-sm",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
+            "html": mobileContent | trim | safe
           }
         }
       ]
@@ -430,14 +467,14 @@
           "value": "email",
           "text": "Email",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
+            "html": telefonoContent | trim | safe
           }
         },
         {
           "value": "phone",
           "text": "Phone",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\">\n"
+            "html": mobileContent | trim | safe
           }
         },
         {
@@ -445,7 +482,7 @@
           "text": "Text message",
           "checked": true,
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
+            "html": mobileContent | trim | safe
           }
         }
       ]
@@ -469,7 +506,7 @@
           "value": "email",
           "text": "Email",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"context-email\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"context-email\" type=\"text\" id=\"context-email\">\n"
+            "html": telefonoContent | trim | safe
           }
         },
         {
@@ -477,14 +514,14 @@
           "text": "Phone",
           "checked": true,
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\" block font-semibold text-alert-base\">Error: Problem with input</span>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base border-alert-base ring-2 ring-alert-base\" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-errormessage=\"contact-phone-error\">\n"
+            "html": mobileErrorContent | trim | safe
           }
         },
         {
           "value": "text",
           "text": "Text message",
           "conditional": {
-            "html": "<label class=\" block font-semibold \" for=\"contact-text-message\">Mobile phone number</label>\n<input class=\" c-input block mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base \" name=\"contact-text-message\" type=\"text\" id=\"contact-text-message\">\n"
+            "html": mobileContent | trim | safe
           }
         }
       ]

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

@@ -21,96 +21,97 @@
 {#- 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 }}
+{% 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
+}) | trim | indent(2) }}
 {% 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 }}
+{% 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
+}) | trim | indent(2) }}
 {% endif %}
-  <div class="c-radios {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="c-radios"
-    {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-    {% for item in params.items %}
-      {% if item %}
-        <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}{%- if item.conditional.html %} c-radios__conditional{% endif %} {%- if item.checked %} c-radios__conditional-active {% else %} c-radios__conditional-hidden {% endif %}">
-          {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
-          {%- if item.id -%}
-            {%- set id = item.id -%}
-          {%- else -%}
-            {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
-            {%- if loop.first -%}
-              {%- set id = idPrefix %}
-            {% else %}
-              {%- set id = idPrefix + "-" + loop.index -%}
-            {%- endif -%}
-          {%- endif -%}
-          {% set conditionalId = "conditional-" + id %}
-          {%- if item.divider %}
-          <div><p>{{ item.divider }}</p></div>
-          {%- else %}
-          {% set hasHint = true if item.hint.text or item.hint.html %}
-          {% set itemHintId = id + '-item-hint' %}
-          <div>
-            <div class="relative flex items-start py-base">
-              <div class="flex items-center mx-sm">
-                <input class="w-6 h-6 text-primary-base 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" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
-                {{-" checked" if item.checked }}
-                {{-" disabled" if item.disabled }}
-                {%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
-                {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
-                {%- if params.errorMessage %} aria-invalid="true"{% endif -%}
-                {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
-              </div>
-              <div class="pt-0.5 leading-5">
-                {{ componentLabel({
-                  html: item.html,
-                  text: item.text,
-                  classes: (item.label.classes if item.label.classes),
-                  attributes: item.label.attributes,
-                  for: id
-                }) | indent(6) | 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 }}
-                {% endif %}
-              </div>
-            </div>
-          </div>
-          {% if item.conditional.html %}
-          <div class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base c-radios__conditional-item" id="{{ conditionalId }}">
-            {{ item.conditional.html | safe }}
-          </div>
-          {% endif %}
+<div class="c-radios {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="c-radios"
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {% for item in params.items %}
+    {% if item %}
+  <div class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}{%- if item.conditional.html %} c-radios__conditional{% endif %} {%- if item.checked %} c-radios__conditional-active {% else %} c-radios__conditional-hidden {% endif %}">
+
+    {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+    {% if item.id %}
+      {% set id = item.id %}
+    {% else %}
+      {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+      {% if loop.first %}
+        {% set id = idPrefix %}
+      {% else %}
+        {% set id = idPrefix + "-" + loop.index %}
+      {% endif %}
+    {% endif %}
+    {% set conditionalId = "conditional-" + id %}
+    {% if item.divider %}
+    <div><p>{{ item.divider }}</p></div>
+    {% else %}
+    {% set hasHint = true if item.hint.text or item.hint.html %}
+    {% set itemHintId = id + '-item-hint' %}
+
+    <div>
+      <div class="relative flex items-start py-base">
+        <div class="flex items-center mx-sm">
+          <input class="w-6 h-6 text-primary-base 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" id="{{ id }}" name="{{ params.name }}" type="radio" value="{{ item.value }}"
+          {{-" checked" if item.checked }}
+          {{-" disabled" if item.disabled }}
+          {%- if item.conditional.html %} data-aria-controls="{{ conditionalId }}"{% endif -%}
+          {%- if hasHint %} aria-describedby="{{ itemHintId }}"{% endif -%}
+          {%- if params.errorMessage %} aria-invalid="true"{% endif -%}
+          {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+        </div>
+        <div class="pt-0.5 leading-5">
+          {{ componentLabel({
+            html: item.html,
+            text: item.text,
+            classes: (item.label.classes if item.label.classes),
+            attributes: item.label.attributes,
+            for: id
+          }) | indent(10) | 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(10) | trim }}
           {% endif %}
         </div>
-      {% endif %}
-    {% endfor %}
+      </div>
+    </div>
+        {% if item.conditional.html %}
+    <div class="mb-lg ml-5 pt-sm pb-base pl-6 origin-top-left border-l-2 border-primary-base c-radios__conditional-item" id="{{ conditionalId }}">
+      {{ item.conditional.html | safe | indent(6) }}
+    </div>
+        {% endif %}
+        {% endif %}
   </div>
+    {% endif %}
+  {% endfor %}
+</div>
 {% endset -%}
 
-<!-- radios -->
-<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
-{% if params.fieldset %}
+{% set radiosContent %}
+  {% if params.fieldset %}
   {% call componentFieldset({
     describedBy: describedBy,
     errorId: errorId,
@@ -121,8 +122,13 @@
   }) %}
   {{ innerHtml | trim | safe }}
   {% endcall %}
-{% else %}
+  {% else %}
   {{ innerHtml | trim | safe }}
-{% endif %}
+  {% endif %}
+{% endset %}
+
+<!-- radios -->
+<div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+  {{ radiosContent | safe | indent(2) }}
 </div>
 <!-- /radios -->

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

@@ -16,7 +16,7 @@
   isPageHeading: false,
   attributes: params.label.attributes,
   for: params.id
-}) | indent(2) | trim }}
+}) }}
 <div class="relative {%- if params.button %} flex flex-wrap items-end{% endif %}">
   <input class="c-input block pr-12 border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  {%- if not params.button %} w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.id }}" type="search"
   {%- if params.value %} value="{{ params.value}}"{% endif %}
@@ -26,12 +26,12 @@
   {{-" disabled" if params.disabled }}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
   {% if params.button %}
-    {{ componentButton(params.button)  }}
+    {{ componentButton(params.button) | indent(2) }}
   {% else %}
-    <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus {%- if params.buttonClasses %} {{ params.buttonClasses }}{% endif %}" {%- if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}>
-      <span class="sr-only">Buscar</span>
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true"><path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor"/></svg>
-    </button>
+  <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus {%- if params.buttonClasses %} {{ params.buttonClasses }}{% endif %}" {%- if params.disabled %} disabled="disabled" aria-disabled="true"{% endif %}>
+    <span class="sr-only">Buscar</span>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true"><path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor"/></svg>
+  </button>
   {% endif %}
   {% if params.errorMessage %}
   {{ componentErrorMessage({

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

@@ -44,25 +44,25 @@
   {% for item in params.items %}
     {% if item %}
       {% if item.optgroup %}
-        <optgroup {%- if item.optgroup.label %} label="{{ item.optgroup.label }}"{% endif %} {%- if item.optgroup.disabled %} disabled{% endif %}>
+    <optgroup {%- if item.optgroup.label %} label="{{ item.optgroup.label }}"{% endif %} {%- if item.optgroup.disabled %} disabled{% endif %}>
           {% if item.optgroup.items %}
             {% for sub in item.optgroup.items %}
-              <option value="{{ sub.value }}"
-                {{-" selected" if sub.selected }}
-                {{-" disabled" if sub.disabled }}
-                {{-" hidden" if sub.hidden }}
-                {%- for attribute, value in sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ sub.text }}</option>
+      <option value="{{ sub.value }}"
+      {{-" selected" if sub.selected }}
+      {{-" disabled" if sub.disabled }}
+      {{-" hidden" if sub.hidden }}
+      {%- for attribute, value in sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ sub.text }}</option>
             {% endfor %}
           {% endif %}
-        </optgroup>
+    </optgroup>
         {% for sub in item.optgroup.items %}
         {% endfor %}
       {% else %}
-        <option value="{{ item.value }}"
-          {{-" selected" if item.selected }}
-          {{-" disabled" if item.disabled }}
-          {{-" hidden" if item.hidden }}
-          {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ item.text }}</option>
+    <option value="{{ item.value }}"
+      {{-" selected" if item.selected }}
+      {{-" disabled" if item.disabled }}
+      {{-" hidden" if item.hidden }}
+      {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>{{ item.text }}</option>
       {% endif %}
     {% endif %}
   {% endfor %}

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

@@ -9,9 +9,7 @@
 
 {%- set commonHtml %}
   {% if params.title %}
-    <p class="{% if params.title.classes %}{{ params.title.classes }}{% else %}my-sm{% endif %}">
-     {{ params.title.html | safe if params.title.html else params.title.text }}
-    </p>
+  <p class="{% if params.title.classes %}{{ params.title.classes }}{% else %}my-sm{% endif %}">{{ params.title.html | safe  if params.title.html else params.title.text }}</p>
   {% endif %}
   {% if params.hint %}
     {% set hintId = params.id + '-hint' %}
@@ -22,7 +20,7 @@
       attributes: params.hint.attributes,
       html: params.hint.html,
       text: params.hint.text
-    }) | indent(2) | trim }}
+    }) | trim | indent(6) }}
   {% endif %}
   {% if params.errorMessage %}
     {% if not params.errorId %}
@@ -36,13 +34,13 @@
       html: params.errorMessage.html,
       text: params.errorMessage.text,
       visuallyHiddenText: params.errorMessage.visuallyHiddenText
-    }) | indent(2) | trim }}
+    }) | trim | indent(6) }}
   {% endif %}
 {% endset %}
 
 
 {%- set innerItems %}
-  {% for item in params.items %}
+  {%- for item in params.items %}
   <div class="flex lg-flex-wrap {%- if item.classes %} {{ item.classes }}{% endif %}"
   {%- for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>
     <dt class="{% if item.term.classes %}{{ item.term.classes }}{% else %}w-1/2 my-sm{% endif %}"
@@ -55,40 +53,40 @@
     </dd>
   </div>
   {% endfor %}
-{% endset %}
+{% endset -%}
 
 
 {%- set innerHtml %}
   <div class="lg:flex lg:justify-between lg:items-start -my-px px-base py-sm border-t border-b border-neutral-base">
     {% if params.items %}
-      <div class="lg:w-2/3">
-        {{ commonHtml | safe }}
-        <dl>
-          {{ innerItems | safe }}
-        </dl>
-      </div>
+    <div class="lg:w-2/3">
+      {{ commonHtml | safe | trim }}
+      <dl>
+        {{ innerItems | trim | safe | indent(6) }}
+      </dl>
+    </div>
     {% else %}
-      <div class="lg:w-2/3">
-        {{ commonHtml | safe }}
-      </div>
+    <div class="lg:w-2/3">
+      {{ commonHtml | safe | trim }}
+    </div>
     {% endif %}
     <div class="lg:flex lg:flex-wrap lg:items-center lg:1/3">
       {% if caller %}
         {% set myCaller = caller() %}
         {% if myCaller | string != '' %}
-        <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
-          {{ myCaller }}
-        </div>
+      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
+        {{ myCaller }}
+      </div>
         {% endif %}
       {% elseif params.caller %}
-       <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
-          {{ params.caller | safe }}
-        </div>
+      <div class="w-full lg:w-auto lg:text-right mt-base lg:mt-0 mb-base lg:mb-0">
+        {{ params.caller | safe }}
+      </div>
       {% endif %}
       {% if params.status %}
-        <div class="mb-base lg:mb-0 ml-base py-sm">
-          {{ componentStatus(params.status) }}
-        </div>
+      <div class="mb-base lg:mb-0 ml-base py-sm">
+        {{ componentStatus(params.status) | trim | indent(8) }}
+      </div>
       {% endif %}
     </div>
   </div>