desy-html 10.2.2 → 11.0.1

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

@@ -1,187 +1,187 @@
-{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
-
-<div class="grid lg:grid-cols-5 gap-xl mb-lg">
-  <div>
-    Primario
-  </div>
-  <div>
-    {% call componentDropdown({
-      "text": "Primario",
-      "classes": "c-dropdown--primary"
-    })  %}
-        <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--primary"
-    })  %}
-        <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--primary"
-    })  %}
-        <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--primary 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>
-<div class="grid lg:grid-cols-5 gap-xl mb-lg">
-  <div>
-    Transparent
-  </div>
-  <div>
-    {% call componentDropdown({
-      "text": "Primario",
-      "classes": "c-dropdown--transparent"
-    })  %}
-        <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--transparent"
-    })  %}
-        <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--transparent"
-    })  %}
-        <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--transparent 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>
-<div class="grid lg:grid-cols-5 gap-xl mb-lg">
-  <div>
-    Header
-  </div>
-  <div>
-    {% call componentDropdown({
-      "text": "Primario",
-      "classes": "c-dropdown--header"
-    })  %}
-        <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--header"
-    })  %}
-        <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--header"
-    })  %}
-        <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--header 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>
-<div class="grid lg:grid-cols-5 gap-xl mb-lg">
-  <div>
-    Pequeño
-  </div>
-  <div>
-    {% call componentDropdown({
-      "text": "Primario",
-      "classes": "c-dropdown--sm"
-    })  %}
-        <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--sm"
-    })  %}
-        <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--sm"
-    })  %}
-        <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--sm 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>
-<div class="grid lg:grid-cols-5 gap-xl mb-lg">
-  <div>
-    Pequeño tiene selección
-  </div>
-  <div>
-    {% call componentDropdown({
-      "text": "Primario",
-      "classes": "c-dropdown--sm c-dropdown--has-selection"
-    })  %}
-        <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--sm c-dropdown--has-selection"
-    })  %}
-        <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--sm c-dropdown--has-selection"
-    })  %}
-        <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--sm c-dropdown--has-selection 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>
+{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
+
+<div class="grid lg:grid-cols-5 gap-xl mb-lg">
+  <div>
+    Primario
+  </div>
+  <div>
+    {% call componentDropdown({
+      "text": "Primario",
+      "classes": "c-dropdown--primary"
+    })  %}
+        <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--primary"
+    })  %}
+        <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--primary"
+    })  %}
+        <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--primary 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>
+<div class="grid lg:grid-cols-5 gap-xl mb-lg">
+  <div>
+    Transparent
+  </div>
+  <div>
+    {% call componentDropdown({
+      "text": "Primario",
+      "classes": "c-dropdown--transparent"
+    })  %}
+        <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--transparent"
+    })  %}
+        <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--transparent"
+    })  %}
+        <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--transparent 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>
+<div class="grid lg:grid-cols-5 gap-xl mb-lg">
+  <div>
+    Header
+  </div>
+  <div>
+    {% call componentDropdown({
+      "text": "Primario",
+      "classes": "c-dropdown--header"
+    })  %}
+        <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--header"
+    })  %}
+        <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--header"
+    })  %}
+        <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--header 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>
+<div class="grid lg:grid-cols-5 gap-xl mb-lg">
+  <div>
+    Pequeño
+  </div>
+  <div>
+    {% call componentDropdown({
+      "text": "Primario",
+      "classes": "c-dropdown--sm"
+    })  %}
+        <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--sm"
+    })  %}
+        <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--sm"
+    })  %}
+        <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--sm 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>
+<div class="grid lg:grid-cols-5 gap-xl mb-lg">
+  <div>
+    Pequeño tiene selección
+  </div>
+  <div>
+    {% call componentDropdown({
+      "text": "Primario",
+      "classes": "c-dropdown--sm c-dropdown--has-selection"
+    })  %}
+        <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--sm c-dropdown--has-selection"
+    })  %}
+        <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--sm c-dropdown--has-selection"
+    })  %}
+        <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--sm c-dropdown--has-selection 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.error-summary.njk

@@ -1,35 +1,35 @@
-{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
-
-<div class="grid lg:grid-cols-1 gap-xl mb-lg">
-  <div>
-    {{ componentErrorSummary({
-      "titleText": "Problemas encontrados",
-      "errorList": [
-        {
-          "text": "Campo Nombre de la empresa está vacío",
-          "href": "#example-error-1"
-        },
-        {
-          "text": "Campo Fecha de inicio de la actividad está vacío",
-          "href": "#example-error-2"
-        }
-      ]
-    })  }}
-  </div>
-  <div>
-    {% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
-    {{ componentErrorSummary({
-      "titleText": "Problemas encontrados",
-      "descriptionText": "Por favor, corrige los errores siguientes.",
-      "errorList": [
-        {
-          "text": "El nombre de usuario no puede tener menos de 4 caracteres"
-        },
-        {
-          "text": "Campo Fecha de inicio de la actividad está vacío",
-          "href": "#example-error-2"
-        }
-      ]
-    })  }}
-  </div>
+{% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
+
+<div class="grid lg:grid-cols-1 gap-xl mb-lg">
+  <div>
+    {{ componentErrorSummary({
+      "titleText": "Problemas encontrados",
+      "errorList": [
+        {
+          "text": "Campo Nombre de la empresa está vacío",
+          "href": "#example-error-1"
+        },
+        {
+          "text": "Campo Fecha de inicio de la actividad está vacío",
+          "href": "#example-error-2"
+        }
+      ]
+    })  }}
+  </div>
+  <div>
+    {% from "components/error-summary/_macro.error-summary.njk" import componentErrorSummary %}
+    {{ componentErrorSummary({
+      "titleText": "Problemas encontrados",
+      "descriptionText": "Por favor, corrige los errores siguientes.",
+      "errorList": [
+        {
+          "text": "El nombre de usuario no puede tener menos de 4 caracteres"
+        },
+        {
+          "text": "Campo Fecha de inicio de la actividad está vacío",
+          "href": "#example-error-2"
+        }
+      ]
+    })  }}
+  </div>
 </div>

package/docs/ds/_ds.example.file-upload.njk

@@ -1,54 +1,54 @@
-{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}
-
-<div class="grid lg:grid-cols-2 gap-xl mb-lg items-end">
-  <div>
-    {{ componentFileUpload({
-      "id": "file-upload-3",
-      "name": "file-upload-3",
-      "label": {
-        "text": "Sube un archivo"
-      },
-      "classes": "text-sm lg:text-base"
-    })  }}
-  </div>
-  <div>
-    {{ componentFileUpload({
-      "id": "file-upload-3",
-      "name": "file-upload-3",
-      "label": {
-        "text": "Sube un archivo"
-      },
-      "disabled": true,
-      "classes": "text-sm lg:text-base"
-    })  }}
-  </div>
-  <div>
-    {{ componentFileUpload({
-      "id": "file-upload-3",
-      "name": "file-upload-3",
-      "label": {
-        "text": "Sube un archivo"
-      },
-      "hint": {
-        "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
-      },
-      "classes": "text-sm lg:text-base"
-    })  }}
-  </div>
-  <div>
-    {{ componentFileUpload({
-      "id": "file-upload-3",
-      "name": "file-upload-3",
-      "label": {
-        "text": "Sube un archivo"
-      },
-      "hint": {
-        "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
-      },
-      "errorMessage": {
-        "text": "Error: Error message goes here"
-      },
-      "classes": "text-sm lg:text-base"
-    })  }}
-  </div>
-</div>
+{% from "components/file-upload/_macro.file-upload.njk" import componentFileUpload %}
+
+<div class="grid lg:grid-cols-2 gap-xl mb-lg items-end">
+  <div>
+    {{ componentFileUpload({
+      "id": "file-upload-3",
+      "name": "file-upload-3",
+      "label": {
+        "text": "Sube un archivo"
+      },
+      "classes": "text-sm lg:text-base"
+    })  }}
+  </div>
+  <div>
+    {{ componentFileUpload({
+      "id": "file-upload-3",
+      "name": "file-upload-3",
+      "label": {
+        "text": "Sube un archivo"
+      },
+      "disabled": true,
+      "classes": "text-sm lg:text-base"
+    })  }}
+  </div>
+  <div>
+    {{ componentFileUpload({
+      "id": "file-upload-3",
+      "name": "file-upload-3",
+      "label": {
+        "text": "Sube un archivo"
+      },
+      "hint": {
+        "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
+      },
+      "classes": "text-sm lg:text-base"
+    })  }}
+  </div>
+  <div>
+    {{ componentFileUpload({
+      "id": "file-upload-3",
+      "name": "file-upload-3",
+      "label": {
+        "text": "Sube un archivo"
+      },
+      "hint": {
+        "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
+      },
+      "errorMessage": {
+        "text": "Error: Error message goes here"
+      },
+      "classes": "text-sm lg:text-base"
+    })  }}
+  </div>
+</div>