desy-html 11.1.2 → 12.0.0

package/docs/_global.foot.njk

@@ -1,7 +1,7 @@
 {% from "components/footer/_macro.footer.njk" import componentFooter %}
 {{ componentFooter({
   "meta": {
-    "html": 'Creado por <a href="https://sda.aragon.es/" class="c-link c-link--neutral">SDA Servicios Digitales de Aragón</a>'
+    "html": "Creado por <a href='https://sda.aragon.es/' class='c-link c-link--neutral'>SDA Servicios Digitales de Aragón</a>"
   },
   "classes": "lg:mt-48"
 })  }}

package/docs/_macro.example-render.njk

@@ -117,29 +117,72 @@ import componentTree %}
 
   <div>
     <h1 class="c-h1">{{ exampleComponent | capitalize }}</h1>
-    {% call componentDetails({
-      "summary": {
-        "html": "Mostrar parámetros",
-        "classes": "c-link text-sm"
-      }
-    })  %}
-      <div class="c-markup">
-        <div class="py-base">
-          <h2 class="mb-sm font-bold">Parámetros del componente</h2>
-          {% from "_macro.load-component-params.njk" import loadComponentParams %}
+    {% from "_macro.load-component-params.njk" import loadComponentParams %}
+    <div class="sr-only">
+      <h2 class="mb-sm font-bold">Parámetros Nunjucks del componente<span class="sr-only">: "{{ exampleComponent | capitalize }}". Versión: {{ '' | filterversion }}</span></h2>
+      <p>Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.</p>
+      <pre>
+        <code class="language-yaml hljs text-sm">{{ loadComponentParams(exampleComponent) | filterescapeltgt }}</code>
+      </pre>
+    </div>
+    <div aria-hidden="true">
+      {% call componentDetails({
+        "summary": {
+          "html": "Mostrar parámetros",
+          "classes": "c-link text-sm"
+        }
+      })  %}
+        <div class="c-markup">
+          <div class="py-base">
+            <h2 class="mb-sm font-bold">Parámetros Nunjucks del componente<span class="sr-only">: "{{ exampleComponent | capitalize }}"</span></h2>
             <pre>
               <code class="language-yaml hljs text-sm">{{ loadComponentParams(exampleComponent) | highlight("yaml") | safe }}
               </code>
             </pre>
+          </div>
         </div>
-      </div>
-    {% endcall %}
+      {% endcall %}
+    </div>
   </div>
   {% for example in examples %}
-    <div class="grid grid-cols-1 gap-x-xl mt-xl">
+    <article class="grid grid-cols-1 gap-x-xl mt-xl">
       <div class="pt-xl">
         <h3 id="{{ example.name |filterslugify }}" class="c-h3 group">{{ example.name | capitalize }} <a href="#{{ example.name |filterslugify }}" class="hidden font-semibold text-neutral-base underline group-hover:inline-block">#</a></h3>
         <p class="c-paragraph-base mb-0">{{ example.description | safe }}</p>
+        <div class="sr-only">
+          <h4>Ejemplo: "{{ example.name | capitalize }}", de código HTML, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
+          <p>Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: <a href="https://bitbucket.org/sdaragon/desy-html/src/master/">desy-html</a>.</p>
+          <p>Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: <a href="https://bitbucket.org/sdaragon/desy-html/src/master/">desy-html</a>.</p>
+          <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
+          <pre><code class="language-html hljs text-sm" data-desy-html-version="{{ '' | filterversion }}">
+              {{- getHTMLCodeFromExample(exampleComponent, example.data, 'component') -}}
+            </code>
+          </pre>
+        </div>
+        {% if example.data.caller %}
+          {% from "_macro.render-caller.njk" import renderCaller %}
+          {% set callerHtml %}{{ renderCaller(example.data.caller) }}{% endset %}
+          {% set callerNunjucks %}
+            {% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
+          {% raw %}{% {% endraw %}call component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }} {% endset %}
+          <div class="sr-only">
+            <h4>Ejemplo: "{{ example.name | capitalize }}", de código Nunjucks, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
+            <p>Pegar en la página: pagina-prueba.html del proyecto: <a href="https://bitbucket.org/sdaragon/desy-html-starter/src/master/">desy-html-starter</a>.</p>
+            <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
+            <pre><code class="language-js hljs text-sm" data-desy-html-version="{{ '' | filterversion }}">
+{{ callerNunjucks | safe }}({{ example.data | filtercaller | filterescapeltgt | dump(2) | safe }}){% raw %} %}{% endraw %}
+{{ callerHtml }}
+{% raw %}{%{% endraw %} endcall {% raw %} %}{% endraw %}</code></pre>
+
+          </div>
+        {% else %}
+          <div class="sr-only">
+            <h4>Ejemplo: "{{ example.name | capitalize }}", de código Nunjucks, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
+            <p>Pegar en la página: pagina-prueba.html del proyecto: <a href="https://bitbucket.org/sdaragon/desy-html-starter/src/master/">desy-html-starter</a>.</p>
+            <p>Usar sólo el código que está dentro de la siguiente etiqueta &lt;code&gt;.</p>
+            <pre><code class="language-njk hljs text-sm" data-desy-html-version="{{ '' | filterversion }}">{{- getNunjucksCodeFromExample(exampleComponent, example.data, 'component') | filterescapeltgt | safe -}}</code></pre>
+          </div>
+        {% endif %}
       </div>
       <div class="pt-base lg:pt-lg">
         <div class="p-base border border-neutral-base">
@@ -260,13 +303,13 @@ import componentTree %}
       <div class="pt-base lg:pt-lg mb-base">
           {% set htmlContent %}
             {{ componentButton({
-              "text": "Copiar código",
+              "html": 'Copiar código<span class="sr-only"> HTML</span>',
               "classes": "c-button--sm c-button--transparent mb-sm",
               "attributes": {
                 "data-module": "c-button-copy"
               }
             }) }}
-            <pre class="hljs"><code class="language-html hljs text-sm">
+            <pre class="hljs" aria-hidden="true"><code class="language-html hljs text-sm">
                 {{- getHTMLCodeFromExample(exampleComponent, example.data, 'component') | highlight("html") | safe -}}
               </code>
             </pre>
@@ -279,7 +322,7 @@ import componentTree %}
                 {% raw %}{%{% endraw %} from "components/{{ exampleComponent }}/_macro.{{ exampleComponent }}.njk" import component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }}{% raw %} %}{% endraw %}
               {% raw %}{% {% endraw %}call component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }} {% endset %}
               {{ componentButton({
-                "text": "Copiar código",
+                "html": 'Copiar código<span class="sr-only"> Nunjucks</span>',
                 "classes": "c-button--sm c-button--transparent mb-sm",
                 "attributes": {
                   "data-module": "c-button-copy"
@@ -291,7 +334,7 @@ import componentTree %}
 {% raw %}{%{% endraw %} endcall {% raw %} %}{% endraw %}</code></pre>
               {% else %}
                 {{ componentButton({
-                  "text": "Copiar código",
+                  "html": 'Copiar código<span class="sr-only"> Nunjucks</span>',
                   "classes": "c-button--sm c-button--transparent mb-sm",
                   "attributes": {
                     "data-module": "c-button-copy"
@@ -307,6 +350,7 @@ import componentTree %}
           }
         })  %}
             {{ componentTabs({
+              "headingLevel": 4,
               "tablistAriaLabel": "Ejemplos de código de: " + example.name | capitalize,
               "idPrefix": "tab-" + loop.index,
               "classes": "c-tabs--scroll",
@@ -327,6 +371,6 @@ import componentTree %}
             })  }}
         {% endcall %}
       </div>
-    </div>
+    </article>
   {% endfor %}
 {% endmacro %}

package/docs/ds/_ds.example.botones-primary-lg.njk

@@ -0,0 +1,265 @@
+{% from "components/button/_macro.button.njk" import componentButton %}
+{% from "components/button-loader/_macro.button-loader.njk" import componentButtonLoader %}
+
+<div class="grid lg:grid-cols-5 gap-xl mb-lg">
+  <div>
+    Normal
+  </div>
+  <div>
+    {{ componentButton({
+      "text": "Primario",
+      "classes": "c-button--primary c-button--lg"
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"/></svg>',
+      "href": "/",
+      "classes": "c-button--primary c-button--lg"
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z" fill="currentColor"/></svg>Con icono',
+      "href": "/",
+      "classes": "c-button--primary c-button--lg"
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\"  class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
+      "href": "/",
+      "classes": "c-button--primary c-button--lg p-4 align-bottom"
+    })  }}
+  </div>
+</div>
+<div class="grid lg:grid-cols-5 gap-xl mb-lg">
+  <div>
+    :active
+  </div>
+  <div>
+    {{ componentButton({
+      "text": "Active",
+      "classes": "c-button--primary c-button--lg ds-active"
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"/></svg>',
+      "href": "/",
+      "classes": "c-button--primary c-button--lg ds-active"
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z" fill="currentColor"/></svg>Con icono',
+      "href": "/",
+      "classes": "c-button--primary c-button--lg ds-active"
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\"  class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
+      "href": "/",
+      "classes": "c-button--primary c-button--lg ds-active p-4 align-bottom"
+    })  }}
+  </div>
+</div>
+<div class="grid lg:grid-cols-5 gap-xl mb-lg">
+  <div>
+    :hover
+  </div>
+  <div>
+    {{ componentButton({
+      "text": "Hover",
+      "classes": "c-button--primary c-button--lg ds-hover"
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"/></svg>',
+      "href": "/",
+      "classes": "c-button--primary c-button--lg ds-hover"
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z" fill="currentColor"/></svg>Con icono',
+      "href": "/",
+      "classes": "c-button--primary c-button--lg ds-hover"
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\"  class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
+      "href": "/",
+      "classes": "c-button--primary c-button--lg ds-hover p-4 align-bottom"
+    })  }}
+  </div>
+</div>
+<div class="grid lg:grid-cols-5 gap-xl mb-lg">
+  <div>
+    :focus
+  </div>
+  <div>
+    {{ componentButton({
+      "text": "Focus",
+      "classes": "c-button--primary c-button--lg ds-focus"
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"/></svg>',
+      "href": "/",
+      "classes": "c-button--primary c-button--lg ds-focus"
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z" fill="currentColor"/></svg>Con icono',
+      "href": "/",
+      "classes": "c-button--primary c-button--lg ds-focus"
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\"  class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
+      "href": "/",
+      "classes": "c-button--primary c-button--lg ds-focus p-4 align-bottom"
+    })  }}
+  </div>
+</div>
+<div class="grid lg:grid-cols-5 gap-xl mb-lg">
+  <div>
+    Deshabilitado
+  </div>
+  <div>
+    {{ componentButton({
+      "text": "Deshabilitado",
+      "classes": "c-button--primary c-button--lg",
+      "disabled": true
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"/></svg>',
+      "href": "/",
+      "classes": "c-button--primary c-button--lg",
+      "disabled": true
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z" fill="currentColor"/></svg>Con icono',
+      "href": "/",
+      "classes": "c-button--primary c-button--lg",
+      "disabled": true
+    })  }}
+  </div>
+  <div>
+    {{ componentButton({
+      "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\"  class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
+      "href": "/",
+      "classes": "c-button--primary c-button--lg p-4 align-bottom",
+      "disabled": true
+    })  }}
+  </div>
+</div>
+<div class="grid lg:grid-cols-5 gap-xl mb-lg">
+  <div>
+    Estado cargando
+  </div>
+  <div>
+    {{ componentButtonLoader({
+      "name": "loading",
+      "text": "Loading",
+      "state": "is-loading",
+      "classes": "c-button-loader--primary c-button-loader--lg c-button-loader--is-loading",
+      "loader": {
+        "text": "Acción en curso"
+      }
+    })  }}
+  </div>
+  <div>
+    {{ componentButtonLoader({
+      "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"/></svg>',
+      "href": "/",
+      "state": "is-loading",
+      "classes": "c-button-loader--primary c-button-loader--lg c-button-loader--is-loading",
+      "loader": {
+        "text": "Acción en curso"
+      }
+    })  }}
+  </div>
+  <div>
+    {{ componentButtonLoader({
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z" fill="currentColor"/></svg>Con icono',
+      "href": "/",
+      "state": "is-loading",
+      "classes": "c-button-loader--primary c-button-loader--lg c-button-loader--is-loading",
+      "loader": {
+        "text": "Acción en curso"
+      }
+    })  }}
+  </div>
+  <div>
+    {{ componentButtonLoader({
+      "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\"  class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
+      "href": "/",
+      "state": "is-loading",
+      "classes": "c-button-loader--primary c-button-loader--lg c-button-loader--is-loading p-4 align-bottom",
+      "loader": {
+        "text": "Acción en curso"
+      }
+    })  }}
+  </div>
+</div>
+<div class="grid lg:grid-cols-5 gap-xl mb-lg">
+  <div>
+    Estado éxito
+  </div>
+  <div>
+    {{ componentButtonLoader({
+      "name": "success",
+      "text": "Success",
+      "state": "is-success",
+      "success": {
+        "text": "Acción realizada con éxito"
+      },
+      "classes": "c-button-loader--primary c-button-loader--lg c-button-loader--is-success"
+    })  }}
+  </div>
+  <div>
+    {{ componentButtonLoader({
+      "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z" fill="currentColor"/></svg>',
+      "href": "/",
+      "state": "is-success",
+      "success": {
+        "text": "Acción realizada con éxito"
+      },
+      "classes": "c-button-loader--primary c-button-loader--lg c-button-loader--is-success"
+    })  }}
+  </div>
+  <div>
+    {{ componentButtonLoader({
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M37.93 27.93l-35 35a10 10 0 000 14.14l35 35a10 10 0 1014.14-14.14L38.41 84.27A2.5 2.5 0 0140.18 80H130a10 10 0 000-20H40.18a2.5 2.5 0 01-1.77-4.27l13.66-13.66a10 10 0 00-14.14-14.14z" fill="currentColor"/></svg>Con icono',
+      "href": "/",
+      "state": "is-success",
+      "success": {
+        "text": "Acción realizada con éxito"
+      },
+      "classes": "c-button-loader--primary c-button-loader--lg c-button-loader--is-success"
+    })  }}
+  </div>
+  <div>
+    {{ componentButtonLoader({
+      "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\"  class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
+      "href": "/",
+      "state": "is-success",
+      "success": {
+        "text": "Acción realizada con éxito"
+      },
+      "classes": "c-button-loader--primary c-button-loader--lg c-button-loader--is-success p-4 align-bottom"
+    })  }}
+  </div>
+</div>

package/docs/ds/_ds.example.dropdowns-variaciones.njk

@@ -185,3 +185,40 @@
     {% endcall %}
   </div>
 </div>
+<div class="grid lg:grid-cols-5 gap-xl mb-lg">
+  <div>
+    Grande
+  </div>
+  <div>
+    {% call componentDropdown({
+      "text": "Primario",
+      "classes": "c-dropdown--lg"
+    })  %}
+        <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
+    {% endcall %}
+  </div>
+  <div>
+    {% call componentDropdown({
+      "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M100 0H40a15 15 0 00-15 15v120a5 5 0 008.54 3.53l34.69-34.69a2.5 2.5 0 013.54 0l34.69 34.69A5 5 0 00115 135V15a15 15 0 00-15-15z" fill="currentColor"/></svg>',
+      "classes": "c-dropdown--lg"
+    })  %}
+        <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
+    {% endcall %}
+  </div>
+  <div>
+    {% call componentDropdown({
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M135.57 22.29l-17.9-17.88a15.17 15.17 0 00-21.39 0L14.05 86.73a4.93 4.93 0 00-1.28 2.18L.19 133.64A5 5 0 005 140a4.84 4.84 0 001.35-.19l44.8-12.56a5.16 5.16 0 002.19-1.28l82.23-82.31a15.1 15.1 0 000-21.37z" fill="currentColor"/></svg>Con icono',
+      "classes": "c-dropdown--lg"
+    })  %}
+        <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
+    {% endcall %}
+  </div>
+  <div>
+    {% call componentDropdown({
+      "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\"  class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
+      "classes": "c-dropdown--lg align-bottom"
+    })  %}
+        <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
+    {% endcall %}
+  </div>
+</div>

package/docs/ds/_ds.example.listbox-variaciones.njk

@@ -685,3 +685,140 @@
     })  }}
   </div>
 </div>
+<div class="grid lg:grid-cols-5 gap-xl mb-lg">
+  <div>
+    Grande
+  </div>
+  <div>
+    {{ componentListbox({
+      "id":"listbox-21",
+      "text": "Primario",
+      "label": {
+        "text": "Label",
+        "classes": "sr-only"
+      },
+      "classes": "c-listbox--lg",
+      "items": [
+        {
+          "href": "#",
+          "html": "Opción 1"
+        },
+        {
+          "href": "#",
+          "text": "Opción 2"
+        },
+        {
+          "href": "#",
+          "text": "Opción 3"
+        },
+        {
+          "href": "#",
+          "text": "Opción 4"
+        },
+        {
+          "href": "#",
+          "text": "Opción 5"
+        }
+      ]
+    })  }}
+  </div>
+  <div>
+    {{ componentListbox({
+      "id":"listbox-22",
+      "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M100 0H40a15 15 0 00-15 15v120a5 5 0 008.54 3.53l34.69-34.69a2.5 2.5 0 013.54 0l34.69 34.69A5 5 0 00115 135V15a15 15 0 00-15-15z" fill="currentColor"/></svg>',
+      "label": {
+        "text": "Label",
+        "classes": "sr-only"
+      },
+      "classes": "c-listbox--lg",
+      "items": [
+        {
+          "href": "#",
+          "html": "Opción 1"
+        },
+        {
+          "href": "#",
+          "text": "Opción 2"
+        },
+        {
+          "href": "#",
+          "text": "Opción 3"
+        },
+        {
+          "href": "#",
+          "text": "Opción 4"
+        },
+        {
+          "href": "#",
+          "text": "Opción 5"
+        }
+      ]
+    })  }}
+  </div>
+  <div>
+    {{ componentListbox({
+      "id":"listbox-23",
+      "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M135.57 22.29l-17.9-17.88a15.17 15.17 0 00-21.39 0L14.05 86.73a4.93 4.93 0 00-1.28 2.18L.19 133.64A5 5 0 005 140a4.84 4.84 0 001.35-.19l44.8-12.56a5.16 5.16 0 002.19-1.28l82.23-82.31a15.1 15.1 0 000-21.37z" fill="currentColor"/></svg>Con icono',
+      "label": {
+        "text": "Label",
+        "classes": "sr-only"
+      },
+      "classes": "c-listbox--lg",
+      "items": [
+        {
+          "href": "#",
+          "html": "Opción 1"
+        },
+        {
+          "href": "#",
+          "text": "Opción 2"
+        },
+        {
+          "href": "#",
+          "text": "Opción 3"
+        },
+        {
+          "href": "#",
+          "text": "Opción 4"
+        },
+        {
+          "href": "#",
+          "text": "Opción 5"
+        }
+      ]
+    })  }}
+  </div>
+  <div>
+    {{ componentListbox({
+      "id":"listbox-24",
+      "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\"  class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
+      "label": {
+        "text": "Label",
+        "classes": "sr-only"
+      },
+      "classes": "c-listbox--lg align-bottom",
+      "items": [
+        {
+          "href": "#",
+          "html": "Opción 1"
+        },
+        {
+          "href": "#",
+          "text": "Opción 2"
+        },
+        {
+          "href": "#",
+          "text": "Opción 3"
+        },
+        {
+          "href": "#",
+          "text": "Opción 4"
+        },
+        {
+          "href": "#",
+          "text": "Opción 5"
+        }
+      ]
+    })  }}
+  </div>
+</div>