desy-html 8.13.1 → 9.0.1

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

@@ -0,0 +1,347 @@
+{% from "components/button/_macro.button.njk" import componentButton %}
+{% from "components/select/_macro.select.njk" import componentSelect %}
+
+{% macro headingYears(id='id') %}
+  <div slot="heading" class="order-first w-full flex justify-center">
+    {{ componentSelect({
+      "id": "select-years-" + id,
+      "name": "select-years-" + id,
+      "formGroup": {
+        "classes": "-mb-12"
+      },
+      "classes": "c-select--sm w-full",
+      "label": {
+        "text": "Selecciona año",
+        "classes": "text-sm"
+      },
+      "items": [
+        {
+          "value": 2024,
+          "text": "2024",
+          "selected": true
+        },
+        {
+          "value": 2025,
+          "text": "2025"
+        },
+        {
+          "value": 2026,
+          "text": "2026"
+        }
+      ]
+    }) }}
+  </div>
+{% endmacro %}
+
+{% set buttonLeft %}
+  <div slot="previous">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes anterior"><path d="M4.00001 7.97945C4.00001 7.63023 4.14967 7.3309 4.39911 7.13135L9.93669 2.19243C10.3358 1.8931 10.9345 1.94298 11.2338 2.34209C11.5331 2.74119 11.5331 3.28996 11.134 3.58929L6.24497 7.87967C6.19508 7.92956 6.19508 7.97945 6.24497 8.07922L11.134 12.3696C11.5331 12.7188 11.583 13.2676 11.2338 13.6667C10.8846 14.0658 10.3358 14.1157 9.93669 13.7665C9.93669 13.7665 9.93669 13.7665 9.8868 13.7166L4.34922 8.82754C4.14967 8.62799 4.00001 8.27877 4.00001 7.97945Z" fill="currentColor"></path></svg>
+  </div>
+{% endset %}
+
+{% set buttonRight %}
+  <div slot="next">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="1em" width="1em" class="self-center my-1" focusable="false" role="img" aria-label="Mes siguiente"><path d="M11.4673 8.02055C11.4673 8.36977 11.3176 8.6691 11.0682 8.86865L5.53062 13.8076C5.13152 14.1069 4.53286 14.057 4.23353 13.6579C3.9342 13.2588 3.9342 12.71 4.33331 12.4107L9.22234 8.12033C9.27223 8.07044 9.27223 8.02055 9.22234 7.92078L4.33331 3.6304C3.9342 3.28118 3.88432 2.73241 4.23353 2.33331C4.58275 1.9342 5.13152 1.88432 5.53062 2.23353C5.53062 2.23353 5.53062 2.23353 5.58051 2.28342L11.1181 7.17246C11.3176 7.37201 11.4673 7.72123 11.4673 8.02055Z" fill="currentColor"></path></svg>
+  </div>
+{% endset %}
+
+{% set calendarDateExample %}
+  <calendar-date
+    min="2024-01-01"
+    max="2024-12-31"
+    locale="es-ES"
+  >
+    {{ buttonLeft | safe }}
+    {{ buttonRight | safe }}
+    <div class="flex flex-wrap justify-center gap-lg">
+      <calendar-month></calendar-month>
+    </div>
+  </calendar-date>
+{% endset %}
+
+{% macro calendarDateYearsExample(id='id') %}
+  <calendar-date
+    value="2024-01-10"
+    min="2024-01-01"
+    max="2024-12-31"
+    locale="es-ES"
+  >
+    {{ buttonLeft | safe }}
+    {{ buttonRight | safe }}
+    {{ headingYears(id) | safe }}
+    <div class="flex flex-wrap justify-center gap-lg">
+      <calendar-month></calendar-month>
+    </div>
+  </calendar-date>
+{% endmacro %}
+
+{% set calendarMultiExample %}
+  <calendar-multi
+    value="2024-01-10 2024-01-20"
+    min="2024-01-01"
+    max="2024-12-31"
+    locale="es-ES"
+  >
+    {{ buttonLeft | safe }}
+    {{ buttonRight | safe }}
+    <div class="flex flex-wrap justify-center gap-lg">
+      <calendar-month></calendar-month>
+    </div>
+  </calendar-multi>
+{% endset %}
+
+{% set calendarRangeExample %}
+  <calendar-range
+    value="2024-01-10/2024-01-20"
+    min="2024-01-01"
+    max="2024-12-31"
+    locale="es-ES"
+  >
+    {{ buttonLeft | safe }}
+    {{ buttonRight | safe }}
+    <div class="flex flex-wrap justify-center gap-lg">
+      <calendar-month></calendar-month>
+    </div>
+  </calendar-range>
+{% endset %}
+
+{% 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"
+  >
+    {{ buttonLeft | safe }}
+    {{ buttonRight | safe }}
+    {{ headingYears(id) | safe }}
+    <div class="flex flex-wrap justify-center gap-lg">
+      <calendar-month></calendar-month>
+      <calendar-month offset="1"></calendar-month>
+    </div>
+  </calendar-range>
+{% endmacro %}
+
+{% set exampleComponent = "datepicker" %}
+{% 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.',
+    "data": {
+      "id": "datepicker-date",
+      "standalone": true,
+      "caller": calendarDateExample | safe
+    }
+  },
+  {
+    "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.',
+    "data": {
+      "id": "datepicker-years",
+      "standalone": true,
+      "caller": calendarDateYearsExample('datepicker-years') | safe
+    }
+  },
+  {
+    "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.',
+    "data": {
+      "id": "datepicker-multi",
+      "standalone": true,
+      "caller": calendarMultiExample | safe
+    }
+  },
+  {
+    "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.',
+    "data": {
+      "id": "datepicker-range",
+      "standalone": true,
+      "caller": calendarRangeExample | safe
+    }
+  },
+  {
+    "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.',
+    "data": {
+      "id": "datepicker-range2",
+      "standalone": true,
+      "caller": calendarRangeExample2('datepicker-range2') | safe
+    }
+  },
+  {
+    "name": "por defecto",
+    "data": {
+      "id": "datepicker-default",
+      "name": "test-name",
+      "label": {
+        "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>.'
+      },
+      "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",
+      "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.'
+      },
+      "value": "2024-01-10 2024-01-20",
+      "caller": calendarMultiExample | safe
+    }
+  },
+  {
+    "name": "Rango de fechas",
+    "data": {
+      "id": "datepicker-with-hint-text",
+      "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 /.'
+      },
+      "value": "2024-01-10/2024-01-20",
+      "caller": calendarRangeExample | safe
+    }
+  },
+  {
+    "name": "Rango de fechas 2 meses y selector de año",
+    "data": {
+      "id": "datepicker-with-hint-text",
+      "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"
+      },
+      "placeholder": "Elige fecha de inicio. Ej.: AAAA-MM-DD",
+      "caller": calendarDateExample | safe
+    }
+  },
+  {
+    "name": "deshabilitado",
+    "data": {
+      "id": "datepicker-disabled",
+      "name": "test-name",
+      "label": {
+        "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>.'
+      },
+      "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))",
+      "caller": calendarDateExample | safe
+    }
+  },
+  {
+    "name": "Con mensaje de error",
+    "data": {
+      "id": "datepicker-with-error-message",
+      "name": "test-name",
+      "label": {
+        "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>.'
+      },
+      "errorMessage": {
+        "text": "Error: Esto es un mensaje de error",
+        "classes": "mt-xs"
+      },
+      "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": "peque",
+    "data": {
+      "id": "datepicker-small",
+      "name": "test-name",
+      "label": {
+        "text": "Elige fecha de inicio",
+        "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>.',
+        "classes": "text-sm"
+      },
+      "classes": "c-input--sm",
+      "dropdownClasses": "c-dropdown--sm c-dropdown--transparent",
+      "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": "Botón personalizado",
+    "description": "Añade parámetros del componente Botón para sustituir el icono del calendario con un botón junto al input.",
+    "data": {
+      "id": "datepicker-with-personalized-button",
+      "name": "test-name",
+      "label": {
+        "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>.'
+      },
+      "dropdown": {
+        "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))",
+      "caller": calendarDateExample | safe
+    }
+  },
+  {
+    "name": "Botón personalizado pequeño",
+    "description": "Usamos los parámetros del componente Botón para personalizarlo, en este ejemplo botón peque.",
+    "data": {
+      "id": "datepicker-with-button-small",
+      "name": "test-name",
+      "label": {
+        "text": "Elige fecha de inicio",
+        "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>.',
+        "classes": "text-sm"
+      },
+      "dropdown": {
+        "html": 'Seleccionar fecha<span class="sr-only"> con tabla de calendario</span>',
+        "classes": "c-dropdown--sm"
+      },
+      "classes": "flex-1 c-input--sm",
+      "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
+    }
+  }
+] %}

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

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

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

@@ -0,0 +1,85 @@
+/* ==========================================================================
+   _styles.datepicker.css
+   ========================================================================== */
+
+@layer components {
+  .c-datepicker {
+    calendar-month {
+      --color-accent: theme(colors.primary.base);
+      --color-text-on-accent: theme(colors.white);
+
+      &::part(button){
+        @apply mx-px;
+        @apply rounded;
+
+        &:focus-visible {
+          @apply focus:bg-warning-base;
+          @apply focus:border-warning-base;
+          @apply focus:shadow-outline-black;
+          @apply focus:text-black;
+          @apply focus:outline-none;
+        }
+      }
+    }
+
+    calendar-date,
+    calendar-range,
+    calendar-multi {
+      &::part(header){
+        @apply flex;
+        @apply flex-wrap;
+        @apply gap-base;
+      }
+
+      &::part(next),
+      &::part(previous)  {
+        @apply inline-flex;
+        @apply items-baseline;
+        @apply px-3;
+        @apply py-2;
+        @apply bg-white;
+        @apply border;
+        @apply border-primary-base;
+        @apply rounded;
+        @apply align-baseline;
+        @apply font-semibold;
+        @apply text-primary-base;
+        @apply transition-all;
+        @apply duration-100;
+        @apply ease-out;
+        @apply whitespace-nowrap;
+        @apply cursor-pointer;
+
+        @apply focus:bg-warning-base;
+        @apply focus:border-warning-base;
+        @apply focus:shadow-outline-black;
+        @apply focus:text-black;
+        @apply focus:outline-none;
+
+        &:hover:not(disabled),
+        &:active:not(disabled) {
+          @apply bg-neutral-light;
+          @apply border-primary-base;
+          @apply text-primary-base;
+        }
+
+        &:active:not(disabled) {
+          @apply relative;
+          @apply top-px;
+        }
+
+        &[disabled],
+        &[disabled]:hover,
+        &[disabled]:focus {
+          @apply bg-white;
+          @apply opacity-50;
+          @apply cursor-not-allowed;
+        }
+
+        @apply px-2;
+        @apply py-1;
+        @apply text-sm;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,124 @@
+{% from "components/button/_macro.button.njk" import componentButton %}
+{% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
+{% from "../error-message/_macro.error-message.njk" import componentErrorMessage -%}
+{% from "../hint/_macro.hint.njk" import componentHint %}
+{% from "../input/_macro.input.njk" import componentInput %}
+{% from "../label/_macro.label.njk" import componentLabel %}
+
+{% set describedBy = params.describedBy if params.describedBy else "" %}
+{% if params.errorMessage %}
+  {% set errorId = params.id + '-error' %}
+  {% set describedBy = describedBy + " " + errorId if describedBy else errorId %}
+{% endif %}
+{% set datepickerContent %}
+  {% if caller %}
+    {% set myCaller = caller() %}
+    {% if myCaller | string != '' %}
+  <div class="p-sm overflow-x-auto">
+    {{ myCaller }}
+  </div>
+    {% endif %}
+  {% elseif params.caller %}
+  <div class="p-sm overflow-x-auto">
+    {{ params.caller | safe }}
+  </div>
+  {% endif %}
+{% endset %}
+
+<!-- datepicker -->
+<div data-module="c-datepicker" class="c-datepicker {%- if params.containerClasses %} {{ params.containerClasses }}{% endif %}" {%- for attribute, value in params.containerAttributes %} {{attribute}}="{{value}}"{% endfor %}>
+  {% if params.standalone %}
+    {{ datepickerContent | safe }}
+  {% else %}
+    <div class="c-form-group {%- if params.errorMessage %} c-form-group--error{% endif %} {%- if params.formGroup.classes %} {{ params.formGroup.classes }}{% endif %}">
+      {{ componentLabel({
+        html: params.label.html,
+        text: params.label.text,
+        classes: params.label.classes,
+        isPageHeading: params.label.isPageHeading,
+        attributes: params.label.attributes,
+        for: params.id
+      }) }}
+    {% if params.hint %}
+      {% set hintId = params.id + '-hint' %}
+      {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %}
+      {{ componentHint({
+        id: hintId,
+        classes: params.hint.classes,
+        attributes: params.hint.attributes,
+        html: params.hint.html,
+        text: params.hint.text
+      }) }}
+    {% endif %}
+    {% if params.errorMessage %}
+      {% if not params.errorId %}
+      {% set errorId = params.id + '-error' %}
+      {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
+      {% endif %}
+      {{ componentErrorMessage({
+        id: errorId,
+        classes: params.errorMessage.classes,
+        attributes: params.errorMessage.attributes,
+        html: params.errorMessage.html,
+        text: params.errorMessage.text,
+        visuallyHiddenText: params.errorMessage.visuallyHiddenText
+      }) }}
+    {% endif %}
+    <div class="relative {%- if params.dropdown %} flex flex-wrap items-end gap-sm{% endif %}">
+      <input class="c-input block mt-sm border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base {%- if not params.dropdown %} pr-16 w-full{% endif %} {%- if params.classes %} {{ params.classes }}{% endif %} {%- if params.errorMessage %} border-alert-base ring-2 ring-alert-base {% endif %}" id="{{ params.id }}" name="{{ params.name }}" type="{{ params.type | default('text') }}"
+        {%- if params.value %} value="{{ params.value}}"{% endif %}
+        {%- if describedBy %} aria-describedby="{{ describedBy }}"{% endif %}
+        {%- if params.errorMessage or params.errorId %} aria-errormessage="{{ errorId }}" aria-invalid="true" {%- if not describedBy %} aria-describedby="{{ errorId }}"{% endif %}{% endif %}
+        {%- if params.autocomplete %} autocomplete="{{ params.autocomplete}}"{% endif %}
+        {%- if params.pattern %} pattern="{{ params.pattern }}"{% endif %}
+        {%- if params.inputmode %} inputmode="{{ params.inputmode }}"{% endif %}
+        {%- if params.placeholder %} placeholder="{{ params.placeholder }}"{% endif %}
+        {{-" disabled" if params.disabled }}
+        {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      {% set dropdownActionButtons %}
+        <ul class="flex flex-wrap justify-between gap-sm p-sm">
+          <li>
+            {{ componentButton({
+              "text": "Aceptar",
+              "classes": "c-button--primary c-button--sm",
+              "attributes": {
+                "id": params.id + "-submit"
+              }
+            }) }}
+          </li>
+          <li>
+            {{ componentButton({
+              "text": "Cancelar",
+              "classes": " c-button--sm",
+              "attributes": {
+                "id": params.id + "-cancel"
+              }
+            }) }}
+          </li>
+        </ul>
+      {% endset %}
+      {% if params.dropdown %}
+        {% call componentDropdown(params.dropdown) %}
+          {{ datepickerContent | safe }}
+          {{ dropdownActionButtons | safe }}
+        {% endcall  %}
+      {% 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>',
+            "classes": params.dropdownClasses if params.dropdownClasses else "c-dropdown--transparent",
+            "disabled": params.disabled,
+            "attributes": {
+              "id": params.id + "-dropdown"
+            }
+          }) %}
+            {{ datepickerContent | safe }}
+            {{ dropdownActionButtons | safe }}
+          {% endcall  %}
+        </div>
+      {% endif %}
+    </div>
+  </div>
+  {% endif %}
+</div>
+<!-- /datepicker -->