desy-html 11.1.2 → 11.2.0

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>

package/docs/ds/_ds.example.tabs.njk

@@ -90,4 +90,48 @@
       ]
     })  }}
   </div>
+</div>
+<div class="grid lg:grid-cols-1 gap-xl mb-lg">
+  <div>
+    <p class="c-paragraph-base">Ejemplo con aspecto de lista de enlaces:</p>
+    {{ componentTabs({
+      "tablistClasses": "flex flex-col col-span-2 lg:col-span-1 lg:divide-y lg:divide-neutral-base mb-base lg:mb-0",
+      "tablistAriaLabel": "Ejemplo de tab con aspecto de links list dispuesto en horizontal",
+      "idPrefix": "tab-links-list",
+      "items": [
+        {
+          "html": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 1</div><div class=\"self-center h-full text-primary-base\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"hidden lg:block self-center\" 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\"></path></svg></div>",
+          "panel": {
+            "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>",
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+          }
+        },
+        {
+          "html": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 2</div><div class=\"self-center h-full text-primary-base\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"hidden lg:block self-center\" 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\"></path></svg></div>",
+          "panel": {
+            "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+          }
+        },
+        {
+          "html": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 3</div><div class=\"self-center h-full text-primary-base\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"hidden lg:block self-center\" 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\"></path></svg></div>",
+          "panel": {
+            "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+          }
+        },
+        {
+          "html": "<div class=\"flex gap-base justify-between items-center flex-1 c-link\">Tab 4</div><div class=\"self-center h-full text-primary-base\"><svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"hidden lg:block self-center\" 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\"></path></svg></div>",
+          "panel": {
+            "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
+            "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-none focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
+          }
+        }
+      ],
+      "classes": "c-tabs--reset c-tabs--list grid grid-cols-2 lg:grid-cols-4 lg:gap-lg",
+      "attributes": {
+        "id": "tabs-list"
+      }
+    }) }}
+  </div>
 </div>

package/docs/ds/_ds.example.textos.njk

@@ -6,6 +6,11 @@
 <p>Esto es un <a href="#" class="c-link">link</a> en un texto</p>
 <p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a> en un texto.</p>
 <p>Esto es un <a href="#" class="c-link c-link--alert">link</a> en una notificación de error</p>
+<p class="text-neutral-dark">Esto es un <a href="#" class="c-link c-link--neutral">enlace</a> en un texto secundario.</p>
+<p>Esto es un <a href="#" class="c-link c-link--no-underline">enlace</a> sin subrayado (sólo en hover).</p>
+<div class="col-span-2 lg:col-span-2 p-base border border-neutral-base rounded relative hover:bg-neutral-light">
+  <p><a href="#" class="c-link c-link--full">Esto es un contenedor con enlace</a></p>
+</div>
 <p class="c-paragraph-lg">Párrafo destacados</p>
 <p class="c-paragraph-base">Párrafo por defecto</p>
 <p class="c-paragraph-base text-neutral-dark">Párrafo secundario</p>

package/docs/ds/_ds.section.botones.njk

@@ -45,4 +45,9 @@
       title: "Botones pequeños alerta"
     }) }}
   {% include "ds/_ds.example.botones-alert-sm.njk" %}
+  <div class="pb-lg"></div>
+    {{ DSSubsectionTitle({
+      title: "Botones grandes primarios"
+    }) }}
+  {% include "ds/_ds.example.botones-primary-lg.njk" %}
 </div>

package/docs/ds/_ds.section.textos.njk

@@ -4,7 +4,7 @@
 <!--  _ds.section.textos.njk -->
 
 <div class="container mx-auto">
-  
+
   <div class="pb-lg"></div>
   {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
   {{ DSSubsectionTitle({
@@ -209,6 +209,16 @@
         </dd>
       </dl>
     </li>
+    <li>
+      <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
+        <dt class="col-span-2 lg:col-span-2">
+          <p>Esto es un <a href="#" class="c-link c-link--no-underline">enlace</a> sin subrayado (sólo en hover).</p>
+        </dt>
+        <dd class="col-span-2 lg:col-span-2">
+          <p class="text-neutral-dark text-sm"><code>.c-link.c-link--no-underline</code> - <code>normal</code> - <code>no-underline</code> - <code>text-current</code> - hover: <code>primary-dark.underline</code></p>
+        </dd>
+      </dl>
+    </li>
     <li>
       <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
         <dt class="col-span-2 lg:col-span-2 p-base border border-neutral-base rounded relative hover:bg-neutral-light">

package/docs/index.html

@@ -38,6 +38,15 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.11.2.0</h3>
+  <ul class="text-sm">
+    <li>Added global function to Links list and Tree navigation to activate items.</li>
+    <li>Added parameter in Table advanced to customize filter texts in table head.</li>
+    <li>Added parameter in Tabs to improve customization.</li>
+    <li>Added large modifier in Button, Button loader, Dropdown, Listbox, Menu navigation and Menebar.</li>
+    <li>Added style for links.</li>
+    <li>Validation fixes.</li>
+  </ul>
   <h3>v.11.1.2</h3>
   <ul class="text-sm">
     <li>Improved initial tooltip visualization in Dropdown, Listbox, Menu navigation, Menubar and Tooltip.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "11.1.2",
+  "version": "11.2.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "type": "module",
   "author": {
@@ -41,7 +41,7 @@
     "postcss": "^8.4.38",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
-    "tailwindcss": "^3.4.4"
+    "tailwindcss": "^3.4.15"
   },
   "devDependencies": {
     "@babel/core": "^7.24.7",