desy-html 5.3.0 → 6.0.0

package/src/templates/components/menu-navigation/_macro.menu-navigation.njk

@@ -0,0 +1,3 @@
+{% macro componentMenuNavigation(params) %}
+{% include "./_template.menu-navigation.njk" %}
+{% endmacro %}

package/src/templates/components/menu-navigation/_styles.menu-navigation.css

@@ -0,0 +1,216 @@
+/* ==========================================================================
+   _styles.menu-navigation.css
+   ========================================================================== */
+
+@layer components {
+  .c-menu-navigation--last-right {
+    &>ul li:last-of-type {
+      @apply ml-auto;
+
+      .c-menu-navigation__sub {
+        @apply left-auto;
+        @apply right-0;
+      }
+
+      .c-menu-navigation__tooltip {
+        @apply left-auto;
+        @apply right-0;
+      }
+    }
+  }
+
+
+  .c-menu-navigation__button {
+    @apply inline-flex;
+    @apply items-baseline;
+    @apply px-3;
+    @apply py-2;
+    @apply bg-white;
+    @apply border;
+    @apply border-primary-base;
+    @apply rounded;
+    @apply align-baseline;
+    @apply font-semibold;
+    @apply text-primary-base;
+    @apply transition-all;
+    @apply duration-100;
+    @apply ease-out;
+    @apply whitespace-nowrap;
+    @apply cursor-pointer;
+
+    @apply focus:bg-warning-base;
+    @apply focus:border-warning-base;
+    @apply focus:shadow-outline-black;
+    @apply focus:text-black;
+    @apply focus:outline-none;
+
+    &:hover:not(disabled),
+    &:active:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-neutral-light;
+      @apply border-primary-base;
+      @apply text-primary-base;
+    }
+
+    &:active:not(disabled),
+    &.ds-active:not(disabled) {
+      @apply relative;
+      @apply top-px;
+    }
+
+    &.ds-focus {
+      @apply bg-warning-base;
+      @apply border-warning-base;
+      @apply shadow-outline-black;
+      @apply text-black;
+      @apply outline-none;
+    }
+
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-menu-navigation__button--disabled,
+    &.c-menu-navigation__button--disabled:hover,
+    &.c-menu-navigation__button--disabled:focus {
+      @apply bg-white;
+      @apply opacity-50;
+      @apply cursor-not-allowed;
+      @apply pointer-events-none;
+    }
+  }
+
+
+  .c-menu-navigation__tooltip {
+    @apply absolute;
+    @apply top-0;
+    @apply left-0;
+
+    &:focus,
+    &.ds-focus {
+      @apply bg-primary-base;
+      @apply text-white;
+      @apply outline-none;
+    }
+  }
+
+
+  .c-menu-navigation__button--sm {
+    @apply px-2;
+    @apply py-1;
+    @apply text-sm;
+  }
+
+
+  .c-menu-navigation__button--primary {
+    @apply bg-primary-base;
+    @apply text-white;
+    @apply shadow-solid-primary-dark;
+
+    &:hover:not(disabled),
+    &:active:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-primary-dark;
+      @apply border-primary-dark;
+      @apply text-white;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-menu-navigation__button--disabled,
+    &.c-menu-navigation__button--disabled:hover,
+    &.c-menu-navigation__button--disabled:focus {
+      @apply bg-primary-base;
+    }
+  }
+
+
+  .c-menu-navigation__button--has-selection {
+    @apply bg-primary-light;
+    @apply text-primary-dark;
+    @apply border-primary-base;
+    @apply shadow-none;
+    @apply font-bold;
+
+    &:hover:not(disabled),
+    &:active:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-primary-light;
+      @apply text-black;
+      @apply bg-opacity-50;
+    }
+
+    &:active:not(disabled),
+    &.ds-active:not(disabled) {
+      @apply shadow-none;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-menu-navigation__button--disabled,
+    &.c-menu-navigation__button--disabled:hover,
+    &.c-menu-navigation__button--disabled:focus {
+      @apply bg-primary-light;
+    }
+  }
+
+
+  .c-menu-navigation__button--transparent {
+    @apply bg-transparent;
+    @apply border-transparent;
+    @apply shadow-none;
+    @apply underline;
+
+    &:hover:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply text-primary-dark;
+      @apply border-neutral-base;
+      @apply shadow-none;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-menu-navigation__button--disabled,
+    &.c-menu-navigation__button--disabled:hover,
+    &.c-menu-navigation__button--disabled:focus {
+      @apply bg-transparent;
+      @apply border-transparent;
+      @apply no-underline;
+    }
+  }
+
+
+  .c-menu-navigation__button--header {
+    @apply bg-black;
+    @apply border-none;
+    @apply rounded-none;
+    @apply shadow-none;
+    @apply font-normal;
+    @apply text-sm;
+    @apply text-white;
+
+    &:hover:not(disabled),
+    &.ds-hover:not(disabled) {
+      @apply bg-black;
+      @apply border-none;
+      @apply shadow-none;
+      @apply text-white;
+    }
+
+    &[disabled],
+    &[disabled]:hover,
+    &[disabled]:focus,
+    &.c-menu-navigation__button--disabled,
+    &.c-menu-navigation__button--disabled:hover,
+    &.c-menu-navigation__button--disabled:focus {
+      @apply bg-transparent;
+    }
+
+    &.c-menu-navigation__button--has-selection {
+      @apply font-bold;
+    }
+  }
+}

package/src/templates/components/menu-navigation/_template.menu-navigation.njk

@@ -0,0 +1,116 @@
+{#- 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 "menu-nav-item" %}
+
+{#- fieldset is false by default -#}
+{% set hasFieldset = true if params.fieldset else false %}
+
+{% set iconHtml %}
+  {#- The SVG needs `focusable="false"` so that Internet Explorer does not
+  treat it as an interactive element - without this it will be
+  'focusable' when using the keyboard to navigate. #}
+  <svg class="inline-block -mr-2  align-middle -my-px pointer-events-none" viewBox="0 0 96 96" aria-hidden="true" fill="currentColor" focusable="false" width="1.5em" height="1.5em"><g><path d="M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z"/></g></svg>
+{% endset %}
+
+{#- Capture the HTML so we can optionally nest it in a fieldset -#}
+{% set innerHtml %}
+  <ul data-module="c-menu-navigation" class="flex flex-wrap gap-base">
+    {% 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 -%}
+          {#- 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 subId = "sub-" + id %}
+    <li class="relative">
+      {% if item.href %}
+        <a {%- if id %} id="{{ id }}"{% endif %} href="{{ item.href }}" class="c-menu-navigation__button {%- if item.disabled %} c-menu-navigation__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--primary{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if item.active %} aria-current="page"{% endif %} {% if item.disabled %} tabindex="-1"{% endif %} {% if item.target %} target="{{ item.target }}"{% endif %}{%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+          <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | safe if item.html else item.text }}</span>
+        </a>
+      {% else %}
+        <button {%- if item.sub %} aria-expanded="true" aria-controls="{{ id }}-sub-list"{% endif %}
+          {%- if id %} id="{{ id }}"{% endif %} class="c-menu-navigation__button {%- if item.disabled %} c-menu-navigation__button--disabled{% endif %} {%- if item.active %} c-menu-navigation__button--primary{% endif %} {%- if item.active %} c-menu-navigation__button--has-selection{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}" {%- if item.title %} title="{{ item.title }}"{% endif %} {% if item.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+          <span class="inline-flex self-center max-w-xs align-middle truncate pointer-events-none">{{ item.html | safe if item.html else item.text }}</span>
+          {# Indentation is intentional to output HTML nicely #}
+          {{- iconHtml | safe | trim | indent(2, true) if iconHtml -}}
+        </button>
+      {% endif %}
+      {% if item.sub.items %}
+        <div class="c-menu-navigation__sub absolute bottom-0 left-0">
+          <ul id="{{ id }}-sub-list" class="{% if item.sub.classes %}{{ item.sub.classes }}{% else-%} c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm{% endif %}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+          {% for subitem in item.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 -%}
+                {#- 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 subId = "sub-" + id %}
+                {% else %}
+                  {%- set subId = "sub-" + id + "-" + loop.index -%}
+                {%- endif -%}
+              {%- endif %}
+              {% set commonSubItemAttributes %}{% if subId %} id="{{ subId }}"{% endif %} {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor %}{% endset %}
+              <li>
+                {% if subitem.href %}
+                  {% if subitem.active %}
+                    <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="flex items-center px-base py-sm text-sm font-semibold {%- if subitem.classes %} {{ subitem.classes }}{% endif -%}" aria-current="page" {{- commonSubItemAttributes | safe }}>
+                      <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+                    </span>
+                  {% else %}
+                    <a {%- if subitem.id %} id="{{ subId }}"{% endif %} href="{{ subitem.href }}" class="flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black{%- if subitem.classes %} {{ subitem.classes }}{% endif -%} {%- if subitem.disabled %} pointer-events-none{% endif -%}" {%- if subitem.disabled %} tabindex="-1"{% endif -%} {%- if subitem.target %} target="{{ subitem.target }}"{% endif %} {{- commonSubItemAttributes | safe }}>
+                      {{ subitem.html | safe if subitem.html else subitem.text }}
+                      {% if subitem.disabled %}
+                        <svg viewBox="0 0 140 140" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="inline-block align-middle ml-sm text-neutral-base fill-current" aria-hidden="true" focusable="false" ><path d="M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z"/></svg>
+                      {% endif %}
+                    </a>
+                  {% endif %}
+                {% else %}
+                  <span {%- if subitem.id %} id="{{ subId }}"{% endif %} class="flex items-center px-base py-sm text-sm {%- if subitem.classes %} {{ subitem.classes }}{% endif %} {%- if subitem.active %} font-bold{% endif %} {%- if subitem.active %} font-bold{% endif %}" {%- if subitem.title %} title="{{ subitem.title }}"{% endif %} {%- if subitem.active %} aria-current="page"{% endif %} {%- if subitem.disabled %} aria-disabled="true" tabindex="-1"{% endif %} {%- for attribute, value in subitem.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+                    {% if subitem.active %}
+                    <strong>{{ subitem.html | safe if subitem.html else subitem.text }}</strong>
+                    {% else %}
+                    {{ subitem.html | safe if subitem.html else subitem.text }}
+                    {% endif %}
+                  </span>
+                  {% endif %}
+              </li>
+              {% if subitem.divider %}
+                <li class="my-sm border-b border-neutral-base">
+                  <div class="sr-only">Separador</div>
+                </li>
+              {% endif %}
+            {% endif %}
+            {% endfor %}
+          </ul>
+        </div>
+      {% endif %}
+    </li>
+    {% if item.divider %}
+      <li {%- if item.divider.classes %} class="{{ item.divider.classes }}"{% endif %} role="presentation" aria-hidden="true">
+        {% if item.divider.html %}
+          {{ item.divider.html | safe }}
+        {% else %}
+          {{ item.divider.text }}
+        {% endif %}
+      </li>
+    {% endif %}
+    {% endif %}
+    {% endfor %}
+  </ul>
+{% endset -%}
+
+<!-- menu-navigation -->
+<nav {%- if params.classes %} class="{{ params.classes }}"{% endif %}
+{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+  {{ innerHtml | trim | safe }}
+</nav>
+<!-- /menu-navigation -->

package/src/templates/components/menu-navigation/params.menu-navigation.yaml

@@ -0,0 +1,93 @@
+params:
+- name: idPrefix
+  type: string
+  required: false
+  description: String to prefix id for each item if no id is specified on each item.
+- name: items
+  type: array
+  required: true
+  description: Array of nav items objects.
+  params:
+  - name: href
+    type: string
+    required: false
+    description: Item link.
+  - name: target
+    type: string
+    required: false
+    description: The target where the item should link to.
+  - name: text
+    type: string
+    required: true
+    description: If `html` is set, this is not required. Text to use within each nav item label. If `html` is provided, the `text` argument will be ignored.
+  - name: html
+    type: string
+    required: true
+    description: If `text` is set, this is not required. HTML to use within each nav item label. If `html` is provided, the `text` argument will be ignored.
+  - name: id
+    type: string
+    required: false
+    description: Specific id attribute for the item. If omitted, then idPrefix option will be applied.
+  - name: hint
+    type: object
+    required: false
+    description: Provide hint to each nav item.
+    isComponent: true
+  - name: expanded
+    type: boolean
+    required: false
+    description: If true, nav sub will be expanded.
+  - name: divider
+    type: object
+    required: false
+    description: Divider item that separates items.
+    - name: text
+      type: string
+      required: true
+      description: If `html` is set, this is not required. Text to use within the divider. If `html` is provided, the `text` argument will be ignored.
+    - name: html
+      type: string
+      required: true
+      description: If `text` is set, this is not required. HTML to use within the divider. If `html` is provided, the `text` argument will be ignored.
+  - name: sub
+    type: boolean
+    required: false
+    description: If true, content provided will be revealed when the item is expanded.
+  - name: sub.classes
+    type: string
+    required: false
+    description: Classes to add to the sub container.
+  - name: sub.items
+    type: array
+    required: false
+    description: Provide subitems for the sub reveal with same parameters as nav component, including divider.
+  - name: disabled
+    type: boolean
+    required: false
+    description: If true, nav will be disabled.
+  - name: classes
+    type: string
+    required: false
+    description: Classes to add to the item.
+  - name: attributes
+    type: object
+    required: false
+    description: HTML attributes (for example data attributes) to add to the item.
+- name: classes
+  type: string
+  required: false
+  description: Classes to add to the nav container.
+- name: attributes
+  type: object
+  required: false
+  description: HTML attributes (for example data attributes) to add to the nav container.
+
+accessibilityCriteria: |
+  ## sub reveals
+  Must:
+  - be visible as static content if JavaScript is unavailable or fails
+  - be hidden if JavaScript is available and is collapsed
+  - indicate if content is expanded or collapsed
+  - indicate that there is collapsed content to interact with
+
+  Note that alphagov have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575

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

@@ -924,7 +924,7 @@
   },
   {
     "name": "Header",
-    "description": "In special cases, a special fixed header with a menubar could be useful.",
+    "description": "In special cases, a special fixed header with a menubar could be useful. If you need a navigation menu with links, use the component Menu navigation instead.",
     "data": {
       "id": "header-items",
       "idPrefix": "header-example",

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

@@ -82,6 +82,20 @@
         @apply bg-primary-base;
         @apply text-white;
         @apply outline-none;
+
+        &[aria-checked="true"]{
+          &::before {
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix(3.4285714285714284,0,0,3.4285714285714284,0,0)'%3E%3Cpath d='M4,12.5a2,2,0,0,1-1.55-.78L.25,9.23A1,1,0,0,1,.34,7.81a1,1,0,0,1,1.41.1l2.06,2.33a.21.21,0,0,0,.18.09.23.23,0,0,0,.18-.08l8.11-8.44a1,1,0,0,1,1.44,1.38l-8.2,8.63A1.94,1.94,0,0,1,4,12.5Z' style='fill: %23ffffff'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+          }
+        }
+
+        &[role="menuitemradio"] {
+          &[aria-checked="true"]{
+            &::before {
+              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix(3.4285714285714284,0,0,3.4285714285714284,0,0)'%3E%3Ccircle cx='7' cy='7' r='7' style='fill: %23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
+            }
+          }
+        }
       }
 
 
@@ -89,11 +103,14 @@
         @apply font-bold;
 
         &::before {
-          content: '✓';
+          @apply bg-center bg-no-repeat bg-cover;
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix(3.4285714285714284,0,0,3.4285714285714284,0,0)'%3E%3Cpath d='M4,12.5a2,2,0,0,1-1.55-.78L.25,9.23A1,1,0,0,1,.34,7.81a1,1,0,0,1,1.41.1l2.06,2.33a.21.21,0,0,0,.18.09.23.23,0,0,0,.18-.08l8.11-8.44a1,1,0,0,1,1.44,1.38l-8.2,8.63A1.94,1.94,0,0,1,4,12.5Z' style='fill: %23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
+          content: '';
+          @apply w-3;
+          @apply h-3;
           @apply absolute;
-          @apply top-0;
-          @apply left-0;
-          @apply p-sm;
+          @apply top-3;
+          @apply left-2;
         }
       }
     }
@@ -101,7 +118,11 @@
     [role="menuitemradio"] {
       &[aria-checked="true"]{
         &::before {
-          content: '∙';
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg transform='matrix(3.4285714285714284,0,0,3.4285714285714284,0,0)'%3E%3Ccircle cx='7' cy='7' r='7' style='fill: %23000000'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
+          @apply w-1.5;
+          @apply h-1.5;
+          @apply top-4;
+          @apply left-3;
         }
       }
     }

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

@@ -19,6 +19,28 @@
       "isDismissible": true
     }
   },
+  {
+    "name": "isButtonLoader",
+    "description": "If an additional param in items called isButtonLoader is true, then a Button loader is used with this item.",
+    "data": {
+      "id": "button-loader-example",
+      "title": {
+        "text": "Aviso"
+      },
+      "description": {
+        "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
+      },
+      "itemsPrimary": [
+        {
+          "text": "De acuerdo, continuar",
+          "isButtonLoader": true,
+          "state": "is-loading",
+          "classes": "c-button-loader--primary c-button-loader--is-loading"
+        }
+      ],
+      "isDismissible": true
+    }
+  },
   {
     "name": "with headingLevel 3",
     "data": {
@@ -120,6 +142,46 @@
       "classes": "max-w-4xl"
     }
   },
+  {
+    "name": "with many actions isButtonLoader",
+    "data": {
+      "id": "many-actions-is-button-loader-example",
+      "title": {
+        "text": "Aviso"
+      },
+      "description": {
+        "text": "Estamos realizando labores de mantenimiento en el sistema. Es posible que algunos procesos tarden más de lo esperado. Rogamos disculpas."
+      },
+      "itemsPrimary": [
+        {
+          "text": "Guardar cambios y publicar",
+          "isButtonLoader": true,
+          "state": "is-success",
+          "classes": "c-button-loader--primary c-button-loader--is-success"
+        },
+        {
+          "text": "Guardar cambios",
+          "isButtonLoader": true
+        }
+      ],
+      "itemsSecondary": [
+        {
+          "text": "Más información",
+          "isButtonLoader": true,
+          "state": "is-loading",
+          "classes": "c-button-loader--transparent c-button-loader--is-loading"
+        },
+        {
+          "html": 'Cancelar <span class="sr-only">y cerrar la ventana modal</span>',
+          "isButtonLoader": true,
+          "state": "is-success",
+          "classes": "c-button-loader--is-success"
+        }
+      ],
+      "isDismissible": true,
+      "classes": "max-w-4xl"
+    }
+  },
   {
     "name": "with icon type delete",
     "data": {

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

@@ -1,4 +1,5 @@
 {% from "components/button/_macro.button.njk" import componentButton %}
+{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
 
 {% set labelledId = 'label-' + params.id %}
 
@@ -65,13 +66,21 @@
         <ul class="flex flex-wrap gap-sm">
           {% for item in params.itemsPrimary %}
             <li>
-              {{ componentButton(item) }}
+              {% if item.isButtonLoader %}
+                {{ componentButtonLoader(item) }}
+              {% else %}
+                {{ componentButton(item) }}
+              {% endif %}
             </li>
           {% endfor %}
         </ul>
       {% else %}
         <div class="mt-sm">
-          {{ componentButton(params.itemsPrimary[0]) }}
+          {% if params.itemsPrimary[0].isButtonLoader %}
+            {{ componentButtonLoader(params.itemsPrimary[0]) }}
+          {% else %}
+            {{ componentButton(params.itemsPrimary[0]) }}
+          {% endif %}
         </div>
       {% endif %}
     {% endif %}
@@ -80,13 +89,21 @@
         <ul class="flex flex-wrap gap-sm">
           {% for item in params.itemsSecondary %}
             <li>
-              {{ componentButton(item) }}
+              {% if item.isButtonLoader %}
+                {{ componentButtonLoader(item) }}
+              {% else %}
+                {{ componentButton(item) }}
+              {% endif %}
             </li>
           {% endfor %}
         </ul>
       {% else %}
         <div class="mt-sm">
-          {{ componentButton(params.itemsSecondary[0]) }}
+          {% if params.itemsSecondary[0].isButtonLoader %}
+            {{ componentButtonLoader(params.itemsSecondary[0]) }}
+          {% else %}
+            {{ componentButton(params.itemsSecondary[0]) }}
+          {% endif %}
         </div>
       {% endif %}
     {% endif %}

package/src/templates/components/modal/params.modal.yaml

@@ -38,11 +38,11 @@ params:
 - name: itemsPrimary
   type: array
   required: false
-  description: This is a list of primary action buttons (see button component params) placed left side from secondary items or centered if are alone.
+  description: This is a list of primary action buttons (see button component params) placed left side from secondary items or centered if are alone. If additional item param `isButtonLoader` is `true` then a ButtonLoader component will be used.
 - name: itemsSecondary
   type: array
   required: false
-  description: This is a list of secondary action buttons (see button component params) placed right side from primary items or centered if are alone.
+  description: This is a list of secondary action buttons (see button component params) placed right side from primary items or centered if are alone. If additional item param `isButtonLoader` is `true` then a ButtonLoader component will be used.
 - name: icon
   type: object
   required: false

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

@@ -5,7 +5,8 @@
     "data": {
       "id": "searchbar-1",
       "label": {
-        "text": "Buscar"
+        "text": "Buscar",
+        "classes": "not-sr-only"
       }
     }
   },
@@ -42,6 +43,16 @@
       }
     }
   },
+  {
+    "name": "with label visible",
+    "data": {
+      "id": "searchbar-label-visible",
+      "label": {
+        "text": "Buscar items recientes",
+        "classes": "not-sr-only"
+      }
+    }
+  },
   {
     "name": "small",
     "data": {