desy-html 11.2.0 → 12.0.0

package/src/templates/components/button-loader/_template.button-loader.njk

@@ -57,7 +57,7 @@
 {{ iconLoader | safe }}
 {{ iconSuccess | safe }}
   <span class="c-button-loader__content inline-flex align-baseline">
-    {{ params.html | safe if params.html else params.text }}
+    {{ params.html | filterquotes | safe if params.html else params.text }}
   </span>
 </a>
 
@@ -67,7 +67,7 @@
 {{ iconLoader | safe }}
 {{ iconSuccess | safe }}
   <span class="c-button-loader__content inline-flex align-baseline">
-    {{ params.html | safe if params.html else params.text }}
+    {{ params.html | filterquotes | safe if params.html else params.text }}
   </span>
 </button>
 

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

@@ -29,7 +29,7 @@
 
 {% macro verButton(id='id') %}
 {{ componentButton({
-  "html": 'Más <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"></path></svg>',
+  "html": "Más <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'></path></svg>",
   "classes": "c-button--transparent",
   "href": "#",
   "attributes": {
@@ -41,7 +41,7 @@
 
 {% macro verDetalleButton(id='id') %}
 {{ componentButton({
-  "html": 'Ver detalle <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"></path></svg>',
+  "html": "Ver detalle <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'></path></svg>",
   "classes": "c-button--transparent",
   "href": "#",
   "attributes": {
@@ -111,7 +111,7 @@
   },
   {
     "name": "todo el card clicable",
-    "description": 'Usa la clase <code>.c-link--full</code> en un único enlace dentro del card, junto con las clases <code>relative</code> y <code>hover:bg-neutral-light</code> en el parámetro <code>containerClasses</code> para hacer que el enlace ocupe todo el card y sea perceptible en el estado hover. Recuerda que sólo debe haber un enlace en este tipo de cards clicables.',
+    "description": "Usa la clase <code>.c-link--full</code> en un único enlace dentro del card, junto con las clases <code>relative</code> y <code>hover:bg-neutral-light</code> en el parámetro <code>containerClasses</code> para hacer que el enlace ocupe todo el card y sea perceptible en el estado hover. Recuerda que sólo debe haber un enlace en este tipo de cards clicables.",
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base border border-neutral-base rounded relative hover:bg-neutral-light",

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

@@ -3,13 +3,13 @@
   <div {%- if params.containerClasses %} class="{{ params.containerClasses }}"{% endif %}>
     {% if params.super %}
     <div class="{% if params.super.classes %}{{ params.super.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.super.backgroundFullColor }}; {% if params.super.backgroundFullUrl %} background-image: url('{{ params.super.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.super.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ params.super.html | safe if params.super.html}}
+      {{ params.super.html | filterquotes | safe if params.super.html}}
     </div>
     {% endif %}
     <div class="flex">
       {% if params.left %}
       <div class="{% if params.left.classes %}{{ params.left.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.left.backgroundFullColor }}; {% if params.left.backgroundFullUrl %} background-image: url('{{ params.left.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.left.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ params.left.html | safe if params.left.html}}
+        {{ params.left.html | filterquotes | safe if params.left.html}}
       </div>
       {% endif %}
       <div {%- if params.left or params.right %} class="flex-1"{% endif %}>
@@ -21,13 +21,13 @@
       </div>
       {% if params.right %}
       <div class="{% if params.right.classes %}{{ params.right.classes }}{% else-%} w-1/2 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.right.backgroundFullColor }}; {% if params.right.backgroundFullUrl %} background-image: url('{{ params.right.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.right.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-        {{ params.right.html | safe if params.right.html}}
+        {{ params.right.html | filterquotes | safe if params.right.html}}
       </div>
       {% endif %}
     </div>
     {% if params.sub %}
     <div class="{% if params.sub.classes %}{{ params.sub.classes }}{% else-%} h-32 bg-cover bg-center bg-no-repeat overflow-hidden{% endif %}" style="background-color: {{ params.sub.backgroundFullColor }}; {% if params.sub.backgroundFullUrl %} background-image: url('{{ params.sub.backgroundFullUrl }}'){% endif %}"  {%- for attribute, value in params.sub.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-      {{ params.sub.html | safe if params.sub.html}}
+      {{ params.sub.html | filterquotes | safe if params.sub.html}}
     </div>
     {% endif %}
   </div>

package/src/templates/components/character-count/_examples.character-count.njk

@@ -14,7 +14,7 @@
   {
     "name": "placeholder",
     "data": {
-      "name": "placeholder",
+      "name": "con-placeholder",
       "id": "placeholder",
       "maxlength": 250,
       "placeholder": "Esto es un placeholder",
@@ -90,7 +90,7 @@
   },
   {
     "name": "con label como encabezado",
-    "description": 'Utiliza el parámetro <code>"isPageheading": true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. Por ejemplo: <code>"headingLevel": 3</code> creará un encabezado <code>&lt;h3&gt;</code>. Si no se establece un <code>"headingLevel"</code>, por defecto usará un <code>&lt;h1&gt;</code>.',
+    "description": "Utiliza el parámetro <code>'isPageheading': true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>. Si no se establece un <code>'headingLevel'</code>, por defecto usará un <code>&lt;h1&gt;</code>.",
     "data": {
       "id": "textarea-with-page-heading",
       "name": "address",

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

@@ -218,7 +218,7 @@
   },
   {
     "name": "Con clases de CSS aplicadas",
-    "description": 'Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.',
+    "description": "Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.",
     "data": {
       "idPrefix": "classes",
       "fieldset": {
@@ -276,7 +276,7 @@
   },
   {
     "name": "con un legend como encabezado",
-    "description": 'Usa el parámetro <code>"heading"</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. Por ejemplo: <code>"headingLevel": 3</code> creará un encabezado <code>&lt;h3&gt;</code>.',
+    "description": "Usa el parámetro <code>'heading'</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
     "data": {
       "idPrefix": "legend-as-page-heading",
       "name": "legend-as-page-heading",
@@ -372,7 +372,7 @@
       "items": [
         {
           "value": "acepto",
-          "html": 'Acepto los <a href="#" target="_blank" class="c-link" title="Se abre en ventana nueva del navegador">términos y condiciones</a>'
+          "html": "Acepto los <a href='#' target='_blank' class='c-link' title='Se abre en ventana nueva del navegador'>términos y condiciones</a>"
         }
       ]
     }
@@ -387,7 +387,7 @@
       "items": [
         {
           "value": "acepto",
-          "html": 'Acepto los <a href="#" target="_blank" class="c-link" title="Se abre en ventana nueva del navegador">términos y condiciones</a>',
+          "html": "Acepto los <a href='#' target='_blank' class='c-link' title='Se abre en ventana nueva del navegador'>términos y condiciones</a>",
           "hint": {
             "text": "Puedes visualizarlos en ventana nueva del navegador"
           }
@@ -692,7 +692,7 @@
   },
   {
     "name": "indeterminado",
-    "description": 'Usando el parámetro <code>"isIndeterminate": true</code> podemos crear un item del checkbox que tenga 3 estados: marcado, desmarcado o indeterminado. El estado indeterminado expresa que hay sólo algún item seleccionado pero no todos. Útil para selecciones múltiples.',
+    "description": "Usando el parámetro <code>'isIndeterminate': true</code> podemos crear un item del checkbox que tenga 3 estados: marcado, desmarcado o indeterminado. El estado indeterminado expresa que hay sólo algún item seleccionado pero no todos. Útil para selecciones múltiples.",
     "data": {
       "idPrefix": "indeterminate",
       "name": "indeterminate",
@@ -712,7 +712,7 @@
   },
   {
     "name": "indeterminado marcado",
-    "description": 'Usando los parámetros <code>"isIndeterminate": true</code> y <code>"indeterminateChecked": true</code> podemos marcar como estado indeterminado un item que sea de tipo indeterminado.',
+    "description": "Usando los parámetros <code>'isIndeterminate': true</code> y <code>'indeterminateChecked': true</code> podemos marcar como estado indeterminado un item que sea de tipo indeterminado.",
     "data": {
       "idPrefix": "indeterminate-checked",
       "name": "indeterminate-checked",

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

@@ -79,7 +79,7 @@
           {{-" checked" if item.checked }}
           {{-" disabled" if item.disabled }}
           {%- if item.conditional.html %} aria-controls="{{ conditionalId }}"{% endif -%}
-          {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
+          {%- if itemDescribedBy != " " %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
           {%- if params.errorMessage %} aria-invalid="true"{% endif -%}
           {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
           {%- if item.isIndeterminate or item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
@@ -105,7 +105,7 @@
       </div>
       {% if item.conditional.html %}
       <div class="mb-base ml-5 py-sm pl-6 origin-top-left border-l-2 border-primary-base c-checkboxes__conditional-item" id="{{ conditionalId }}">
-        {{ item.conditional.html | safe | indent(10) }}
+        {{ item.conditional.html | filterquotes | safe | indent(10) }}
       </div>
       {% endif %}
     {% endif %}

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

@@ -15,7 +15,7 @@
   },
   {
     "name": "expandido",
-    "description": 'Añade <code>open: true</code> a un item para mostrarlo abierto inicialmente.',
+    "description": "Añade <code>open: true</code> a un item para mostrarlo abierto inicialmente.",
     "data": {
       "id": "collapsible-initially-expanded",
       "headerText": "Cabecera del collapsible",
@@ -30,7 +30,7 @@
   },
   {
     "name": "expandido con JavaScript",
-    "description": 'También puedes usar con javascript la función global <code>activateItemCollapsible(element, open)</code>,  para mostrar un item abierto o cerrado, usando su id, el parámetro <code>open</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrará abierto, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemCollapsible("collapsible-expanded-title", true)</code> para mostrar el item actual abierto.',
+    "description": "También puedes usar con javascript la función global <code>activateItemCollapsible(element, open)</code>,  para mostrar un item abierto o cerrado, usando su id, el parámetro <code>open</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrará abierto, y si le pasamos false se mostrará cerrado. Ej: Abre la consola del navegador y escribe <code>activateItemCollapsible('collapsible-expanded-title', true)</code> para mostrar el item actual abierto.",
     "data": {
       "id": "collapsible-expanded",
       "headerText": "Cabecera del collapsible",
@@ -47,12 +47,12 @@
     "data": {
       "id": "collapsible-html",
       "headerText": "Cabecera del collapsible",
-      "html": '<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod
+      "html": "<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod
       tempor <em>incididunt</em> ut labore et dolore magna aliqua. Ut enim ad minim veniam,
       quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
       consequat. Duis aute irure dolor in <strong>reprehenderit</strong> in voluptate velit esse
       cillum dolore eu fugiat nulla <em>pariatur</em>. Excepteur sint occaecat cupidatat non
-      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>'
+      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>"
     }
   },
   {

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

@@ -6,7 +6,7 @@
   </button>
   <div aria-hidden="true" class="c-collapsible__content {% if params.contentClasses %} {{ params.contentClasses }}{% else -%} py-sm{% endif %}" {%- if params.id %} id="{{params.id}}"{% endif %}>
     {% if params.html %}
-    {{ params.html | safe }}
+    {{ params.html | filterquotes | safe }}
     {% else %}
     <p>
       {{ params.text }}

package/src/templates/components/date-input/_template.date-input.njk

@@ -68,7 +68,7 @@
       {% if item.divider %}
     <div {%- if item.divider.classes %} class="{{ item.divider.classes }}{% endif %}" role="separator">
           {% if item.divider.html %}
-            {{ item.divider.html | safe }}
+            {{ item.divider.html | filterquotes | safe }}
           {% else %}
       <p>
         {{ item.divider.text }}

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

@@ -11,8 +11,8 @@
       },
       "classes": "c-select--sm w-full",
       "label": {
-        "text": "Selecciona año",
-        "classes": "text-sm"
+        "text": "Selecciona un año para cargar sus datos",
+        "classes": "max-w-40 text-sm"
       },
       "items": [
         {
@@ -47,9 +47,10 @@
 
 {% set calendarDateExample %}
   <calendar-date
-    min="2024-01-01"
-    max="2024-12-31"
-    locale="es-ES"
+    min="01-01-2024"
+    max="01-01-2025"
+    locale="es"
+    format="DD-MM-YYYY"
   >
     {{ buttonLeft | safe }}
     {{ buttonRight | safe }}
@@ -61,10 +62,10 @@
 
 {% macro calendarDateYearsExample(id='id') %}
   <calendar-date
-    value="2024-01-10"
-    min="2024-01-01"
-    max="2024-12-31"
-    locale="es-ES"
+    value="01-10-2024"
+    min="01-01-2024"
+    max="12-31-2024"
+    locale="es"
   >
     {{ buttonLeft | safe }}
     {{ buttonRight | safe }}
@@ -77,10 +78,10 @@
 
 {% set calendarMultiExample %}
   <calendar-multi
-    value="2024-01-10 2024-01-20"
-    min="2024-01-01"
-    max="2024-12-31"
-    locale="es-ES"
+    value="10-01-2024 20-01-2024"
+    min="01-01-2024"
+    max="31-12-2024"
+    locale="es"
   >
     {{ buttonLeft | safe }}
     {{ buttonRight | safe }}
@@ -92,10 +93,10 @@
 
 {% set calendarRangeExample %}
   <calendar-range
-    value="2024-01-10/2024-01-20"
-    min="2024-01-01"
-    max="2024-12-31"
-    locale="es-ES"
+    value="10-01-2024/20-01-2024"
+    min="01-01-2024"
+    max="21-12-2024"
+    locale="es"
   >
     {{ buttonLeft | safe }}
     {{ buttonRight | safe }}
@@ -108,10 +109,10 @@
 {% macro calendarRangeExample2(id='id') %}
   <calendar-range
     months="2"
-    value="2024-01-16/2024-02-04"
-    min="2024-01-01"
-    max="2024-12-31"
-    locale="es-ES"
+    value="01-01-2025/16-01-2025"
+    min="01-01-2025"
+    max="31-12-2025"
+    locale="es"
   >
     {{ buttonLeft | safe }}
     {{ buttonRight | safe }}
@@ -127,7 +128,7 @@
 {% set examples =  [
   {
     "name": "standalone fecha única",
-    "description": 'Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href="https://wicky.nillia.ms/cally/" class="c-link" title="Se abre en ventana nueva" target="_blank">Cally<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> para añadir el calendario como un caller de este componente.',
+    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<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> para añadir el calendario como un caller de este componente.",
     "data": {
       "id": "datepicker-date",
       "standalone": true,
@@ -136,7 +137,7 @@
   },
   {
     "name": "standalone fecha única y selector de año",
-    "description": 'Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href="https://wicky.nillia.ms/cally/" class="c-link" title="Se abre en ventana nueva" target="_blank">Cally<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> para añadir el calendario como un caller de este componente. En este ejemplo hemos personalizado el slot "header" del calendario de Cally para añadirle un componente Select como selector de año.',
+    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<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> para añadir el calendario como un caller de este componente. En este ejemplo hemos personalizado el slot 'header' del calendario de Cally para añadirle un componente Select como selector de año.",
     "data": {
       "id": "datepicker-years",
       "standalone": true,
@@ -145,7 +146,7 @@
   },
   {
     "name": "standalone fechas múltiples",
-    "description": 'Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href="https://wicky.nillia.ms/cally/" class="c-link" title="Se abre en ventana nueva" target="_blank">Cally<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> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado el componente <code>&#x3C;calendar-multi&#x3E;</code> de Cally para se puedan seleccionar múltiples fechas.',
+    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<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> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado el componente <code>&#x3C;calendar-multi&#x3E;</code> de Cally para se puedan seleccionar múltiples fechas.",
     "data": {
       "id": "datepicker-multi",
       "standalone": true,
@@ -154,7 +155,7 @@
   },
   {
     "name": "standalone rango de fechas",
-    "description": 'Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href="https://wicky.nillia.ms/cally/" class="c-link" title="Se abre en ventana nueva" target="_blank">Cally<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> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado el componente <code>&#x3C;calendar-range&#x3E;</code> de Cally para que tenga un selector de rangos de fecha.',
+    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<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> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado el componente <code>&#x3C;calendar-range&#x3E;</code> de Cally para que tenga un selector de rangos de fecha.",
     "data": {
       "id": "datepicker-range",
       "standalone": true,
@@ -163,7 +164,7 @@
   },
   {
     "name": "standalone rango de fechas 2 meses y selector de año",
-    "description": 'Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href="https://wicky.nillia.ms/cally/" class="c-link" title="Se abre en ventana nueva" target="_blank">Cally<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> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado los componentes <code>&#x3C;calendar-range months="2"&#x3E;</code> y <code>&#x3C;calendar-month offset="1"&#x3E;</code> de Cally para que tenga un selector de rangos de fecha mostrando 2 meses.',
+    "description": "Usa el parámetro <code>standalone: true</code> para mostrar solo el calendario sin el input. Usa la documentación de la librería <a href='https://wicky.nillia.ms/cally/' class='c-link' title='Se abre en ventana nueva' target='_blank'>Cally<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> para añadir el calendario como un caller de este componente. En este ejemplo hemos usado los componentes <code>&#x3C;calendar-range months='2'&#x3E;</code> y <code>&#x3C;calendar-month offset='1'&#x3E;</code> de Cally para que tenga un selector de rangos de fecha mostrando 2 meses.",
     "data": {
       "id": "datepicker-range2",
       "standalone": true,
@@ -179,72 +180,54 @@
         "text": "Elige fecha de inicio"
       },
       "hint": {
-        "html": 'Usa el formato: <span aria-hidden="true">AAAA-MM-DD (año-mes-día)</span><span class="sr-only">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>.'
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
       },
-      "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
       "caller": calendarDateExample | safe
     }
   },
   {
     "name": "Fechas múltiples",
     "data": {
-      "id": "datepicker-with-hint-text",
+      "id": "datepicker-multiple-dates",
       "name": "test-name",
       "label": {
         "text": "Elige tus días disponibles"
       },
       "hint": {
-        "html": 'Usa el formato: <span aria-hidden="true">AAAA-MM-DD (año-mes-día)</span><span class="sr-only">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>. Separa tus fechas con un espacio.'
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa tus fechas con un espacio."
       },
-      "value": "2024-01-10 2024-01-20",
+      "value": "10-01-2024 20-01-2024",
       "caller": calendarMultiExample | safe
     }
   },
   {
     "name": "Rango de fechas",
     "data": {
-      "id": "datepicker-with-hint-text",
+      "id": "datepicker-range3",
       "name": "test-name",
       "label": {
         "text": "Elige tus días disponibles"
       },
       "hint": {
-        "html": 'Usa el formato: <span aria-hidden="true">AAAA-MM-DD (año-mes-día)</span><span class="sr-only">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>. Separa la fecha inicial de la final con una barra /.'
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una barra /."
       },
-      "value": "2024-01-10/2024-01-20",
+      "value": "10-01-2024/20-01-2024",
       "caller": calendarRangeExample | safe
     }
   },
   {
     "name": "Rango de fechas 2 meses y selector de año",
     "data": {
-      "id": "datepicker-with-hint-text",
+      "id": "datepicker-with-hint-text-and-year",
       "name": "test-name",
       "label": {
         "text": "Elige tus días disponibles"
       },
       "hint": {
-        "html": 'Usa el formato: <span aria-hidden="true">AAAA-MM-DD (año-mes-día)</span><span class="sr-only">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>. Separa la fecha inicial de la final con una /.'
-      },
-      "value": "2024-01-16/2024-02-04",
-      "caller": calendarRangeExample2('datepicker-with-hint-text') | safe
-    }
-  },
-  {
-    "name": "con placeholder y label invisible",
-    "data": {
-      "id": "datepicker-with-placeholder",
-      "name": "test-name",
-      "label": {
-        "text": "Elige rango de fechas",
-        "classes": "sr-only"
-      },
-      "hint": {
-        "html": 'Usa el formato: <span aria-hidden="true">AAAA-MM-DD (año-mes-día)</span><span class="sr-only">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>.',
-        "classes": "sr-only"
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una /."
       },
-      "placeholder": "Elige fecha de inicio. Ej.: AAAA-MM-DD",
-      "caller": calendarDateExample | safe
+      "value": "16-01-2024/04-02-2024",
+      "caller": calendarRangeExample2('datepicker-with-hint-text-and-year') | safe
     }
   },
   {
@@ -256,7 +239,7 @@
         "text": "Elige fecha de inicio"
       },
       "hint": {
-        "html": 'Usa el formato: <span aria-hidden="true">AAAA-MM-DD (año-mes-día)</span><span class="sr-only">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>.'
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
       },
       "disabled": true,
       "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
@@ -272,7 +255,7 @@
         "text": "Elige fecha de inicio"
       },
       "hint": {
-        "html": 'Usa el formato: <span aria-hidden="true">AAAA-MM-DD (año-mes-día)</span><span class="sr-only">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>.'
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
       },
       "errorMessage": {
         "text": "Error: Esto es un mensaje de error",
@@ -292,7 +275,7 @@
         "classes": "text-sm"
       },
       "hint": {
-        "html": 'Usa el formato: <span aria-hidden="true">AAAA-MM-DD (año-mes-día)</span><span class="sr-only">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>.',
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>",
         "classes": "text-sm"
       },
       "classes": "c-input--sm",
@@ -311,10 +294,10 @@
         "text": "Elige fecha de inicio"
       },
       "hint": {
-        "html": 'Usa el formato: <span aria-hidden="true">AAAA-MM-DD (año-mes-día)</span><span class="sr-only">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>.'
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
       },
       "dropdown": {
-        "html": 'Seleccionar fecha<span class="sr-only"> con tabla de calendario</span>'
+        "html": "Seleccionar fecha<span class='sr-only'> con tabla de calendario</span>"
       },
       "classes": "flex-1",
       "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",
@@ -332,11 +315,11 @@
         "classes": "text-sm"
       },
       "hint": {
-        "html": 'Usa el formato: <span aria-hidden="true">AAAA-MM-DD (año-mes-día)</span><span class="sr-only">año con 4 dígitos, guión simple, mes con dos dígitos, guión simple y día con dos dígitos</span>.',
+        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>",
         "classes": "text-sm"
       },
       "dropdown": {
-        "html": 'Seleccionar fecha<span class="sr-only"> con tabla de calendario</span>',
+        "html": "Seleccionar fecha<span class='sr-only'> con tabla de calendario</span>",
         "classes": "c-dropdown--sm"
       },
       "classes": "flex-1 c-input--sm",

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

@@ -20,6 +20,10 @@
           @apply focus:outline-none;
         }
       }
+
+      &::part(today){
+        @apply font-bold underline;
+      }
     }
 
     calendar-date,

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

@@ -105,16 +105,24 @@
       {% else %}
         <div class="absolute top-0 right-0">
           {% call componentDropdown({
-            "html": '<span class="sr-only">Seleccionar fecha con una tabla de calendario</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="1.375em" height="1.375em" aria-hidden="true"><g><path fill="currentColor" fill-rule="evenodd" d="M4.5 1.5c0 -0.552285 -0.44772 -1 -1 -1s-1 0.447715 -1 1v1H2C1.17157 2.5 0.5 3.17157 0.5 4v8c0 0.8284 0.67157 1.5 1.5 1.5h10c0.8284 0 1.5 -0.6716 1.5 -1.5V4c0 -0.82843 -0.6716 -1.5 -1.5 -1.5h-0.5v-1c0 -0.552285 -0.4477 -1 -1 -1 -0.55229 0 -1 0.447715 -1 1v1h-5v-1Zm-1 5.75c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm3.5 0c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm-2.5 3c0 0.5523 -0.44772 1 -1 1s-1 -0.4477 -1 -1c0 -0.55229 0.44772 -1 1 -1s1 0.44771 1 1Zm2.5 1c0.55228 0 1 -0.4477 1 -1 0 -0.55229 -0.44772 -1 -1 -1s-1 0.44771 -1 1c0 0.5523 0.44772 1 1 1Zm4.5 -5c0 0.55228 -0.4477 1 -1 1 -0.55229 0 -1 -0.44772 -1 -1s0.44771 -1 1 -1c0.5523 0 1 0.44772 1 1Z" clip-rule="evenodd" stroke-width="1"></path></g></svg>',
+            "html": "<span class='sr-only'>Seleccionar fecha con una tabla de calendario</span><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' width='1.375em' height='1.375em' aria-hidden='true'><g><path fill='currentColor' fill-rule='evenodd' d='M4.5 1.5c0 -0.552285 -0.44772 -1 -1 -1s-1 0.447715 -1 1v1H2C1.17157 2.5 0.5 3.17157 0.5 4v8c0 0.8284 0.67157 1.5 1.5 1.5h10c0.8284 0 1.5 -0.6716 1.5 -1.5V4c0 -0.82843 -0.6716 -1.5 -1.5 -1.5h-0.5v-1c0 -0.552285 -0.4477 -1 -1 -1 -0.55229 0 -1 0.447715 -1 1v1h-5v-1Zm-1 5.75c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm3.5 0c0.55228 0 1 -0.44772 1 -1s-0.44772 -1 -1 -1 -1 0.44772 -1 1 0.44772 1 1 1Zm-2.5 3c0 0.5523 -0.44772 1 -1 1s-1 -0.4477 -1 -1c0 -0.55229 0.44772 -1 1 -1s1 0.44771 1 1Zm2.5 1c0.55228 0 1 -0.4477 1 -1 0 -0.55229 -0.44772 -1 -1 -1s-1 0.44771 -1 1c0 0.5523 0.44772 1 1 1Zm4.5 -5c0 0.55228 -0.4477 1 -1 1 -0.55229 0 -1 -0.44772 -1 -1s0.44771 -1 1 -1c0.5523 0 1 0.44772 1 1Z' clip-rule='evenodd' stroke-width='1'></path></g></svg>",
             "classes": params.dropdownClasses if params.dropdownClasses else "c-dropdown--transparent",
             "disabled": params.disabled,
             "attributes": {
-              "id": params.id + "-dropdown"
+              "id": params.id + "-dropdown",
+              "data-aria-haspopup": "dialog",
+              "data-role": "dialog",
+              "data-aria-modal": "false",
+              "data-aria-label": "Selección de fecha"
             }
           }) %}
             {{ datepickerContent | safe }}
             {{ dropdownActionButtons | safe }}
           {% endcall  %}
+          {# Change the dropdown aria-haspopup="true" to "dialog" #}
+          <script>
+              document.getElementById('{{params.id}}-dropdown').setAttribute('aria-haspopup', 'dialog');
+          </script>
         </div>
       {% endif %}
     </div>