desy-html 16.0.3 → 17.0.0

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

@@ -1,415 +1,415 @@
-{% 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 un año para cargar sus datos",
-        "classes": "max-w-40 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="01-01-2025"
-    max="01-01-2026"
-    locale="es"
-    format="DD-MM-YYYY"
-  >
-    {{ 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="01-10-2025"
-    min="01-01-2025"
-    max="12-31-2025"
-    locale="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="10-01-2024 20-01-2025"
-    min="01-01-2025"
-    max="31-12-2025"
-    locale="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="10-01-2024/20-01-2025"
-    min="01-01-2025"
-    max="21-12-2025"
-    locale="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="01-01-2025/16-01-2025"
-    min="01-01-2025"
-    max="31-12-2025"
-    locale="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
-    },
-    "visualDescription": "Contenedor rectangular con borde gris claro de 1px, fondo blanco, esquinas redondeadas. Encabezado con texto negro de tamaño pequeño en peso normal. Debajo aparece texto gris medio mostrando \"[object Object]\" en fuente monoespaciada.",
-    "_generated": {
-      "hash": "d82d0ba4edf1590a900de4d80b43b761",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:55.367Z"
-    }
-  },
-  {
-    "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
-    },
-    "visualDescription": "Contenedor rectangular con borde gris claro de 1px, fondo blanco, esquinas redondeadas. Encabezado con texto negro de tamaño pequeño en peso normal. Debajo aparece texto gris medio mostrando \"[object Object]\" en fuente monoespaciada.",
-    "_generated": {
-      "hash": "be351e964c77f7e18c65539a14dd12ff",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:55.367Z"
-    }
-  },
-  {
-    "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
-    },
-    "visualDescription": "Contenedor rectangular con borde gris claro de 1px, fondo blanco, esquinas redondeadas. Encabezado con texto negro de tamaño pequeño en peso normal. Debajo aparece texto gris medio mostrando \"[object Object]\" en fuente monoespaciada.",
-    "_generated": {
-      "hash": "dfc01d2ee4c93bd8d5d1156b88abe5fa",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:55.367Z"
-    }
-  },
-  {
-    "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
-    },
-    "visualDescription": "Sección rectangular con borde gris claro de 1px y fondo blanco. Contiene un encabezado de texto negro en tamaño pequeño, seguido de texto gris \"[object Object]\" en fuente monoespaciada. Altura compacta con padding interno moderado.",
-    "_generated": {
-      "hash": "24d8457852a9f4e084feddf277e23592",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:55:03.942Z"
-    }
-  },
-  {
-    "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
-    },
-    "visualDescription": "Sección rectangular con borde gris claro de 1px y fondo blanco. Incluye un encabezado de texto negro en tamaño pequeño en dos líneas, seguido de texto gris \"[object Object]\" en fuente monoespaciada. Altura compacta con padding interno moderado.",
-    "_generated": {
-      "hash": "7b05081cca5ec5df3cc72efe8e18c58e",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:55:03.942Z"
-    }
-  },
-  {
-    "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'>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>"
-      },
-      "caller": calendarDateExample | safe
-    },
-    "visualDescription": "Sección rectangular con borde gris claro de 1px y fondo blanco. Encabezado de texto negro en negrita tamaño pequeño, seguido de dos líneas de texto gris normal como instrucciones. Campo de entrada blanco rectangular con borde gris claro de 1px y un icono azul con fondo azul claro alineado a la derecha dentro del campo.",
-    "_generated": {
-      "hash": "aeb9a788d9915ea7019e481715b3011f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:55:03.942Z"
-    }
-  },
-  {
-    "name": "Fechas múltiples",
-    "data": {
-      "id": "datepicker-multiple-dates",
-      "name": "test-name",
-      "label": {
-        "text": "Elige tus días disponibles"
-      },
-      "hint": {
-        "html": "Para incluir las fechas en el campo de texto usa el formato de fecha <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 las fechas mediante un espacio. Para seleccionar varios días en el calendario, pulsa los días que quieres seleccionar."
-      },
-      "value": "10-01-2024 20-01-2024",
-      "caller": calendarMultiExample | safe
-    },
-    "visualDescription": "Campo de texto con borde gris claro de 1px y esquinas redondeadas, fondo blanco, texto negro en formato de fecha. Título en negrita negro arriba, seguido de texto descriptivo gris oscuro en tamaño menor. Ícono de calendario azul alineado a la derecha dentro del campo, con desplegable indicado por flecha pequeña.",
-    "_generated": {
-      "hash": "fd85b350bd3b98bd1b2250f9d0f5734a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:55:14.318Z"
-    }
-  },
-  {
-    "name": "Rango de fechas",
-    "data": {
-      "id": "datepicker-range3",
-      "name": "test-name",
-      "label": {
-        "text": "Elige tu rango de días disponibles"
-      },
-      "hint": {
-        "html": "Para incluir el rango de fechas en el campo de texto usa el formato de fecha <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 /. Para seleccionar un rango de fechas en el calendario, pulsa el primer día del rango, desplázate hasta el último día del rango y púlsalo."
-      },
-      "value": "10-01-2024/20-01-2024",
-      "caller": calendarRangeExample | safe
-    },
-    "visualDescription": "Campo de texto rectangular con borde gris claro de 1px, fondo blanco, mostrando texto negro en formato de rango de fechas separado por guión. Encabezado en negrita negro, debajo texto explicativo gris oscuro de dos líneas en tamaño reducido. Ícono de calendario azul posicionado en el extremo derecho del campo con indicador de expansión.",
-    "_generated": {
-      "hash": "b590f68b56b3d7dd35cceb782fe75db9",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:55:14.318Z"
-    }
-  },
-  {
-    "name": "Rango de fechas 2 meses y selector de año",
-    "data": {
-      "id": "datepicker-with-hint-text-and-year",
-      "name": "test-name",
-      "label": {
-        "text": "Elige tu rango de días disponibles"
-      },
-      "hint": {
-        "html": "Para incluir el rango de fechas en el campo de texto usa el formato de fecha <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 /. Para seleccionar un rango de fechas en el calendario, pulsa el primer día del rango, desplázate hasta el último día del rango y púlsalo."
-      },
-      "value": "16-01-2024/04-02-2024",
-      "caller": calendarRangeExample2('datepicker-with-hint-text-and-year') | safe
-    },
-    "visualDescription": "Input rectangular con borde gris claro de 1px y fondo blanco, conteniendo texto negro de formato de rango. Título en negrita negro en la parte superior, texto instructivo gris oscuro de dos líneas debajo del título. Ícono de calendario azul ubicado en el borde derecho del campo con flecha desplegable adyacente.",
-    "_generated": {
-      "hash": "3a17f76c70edae55e6946eca4f15c5bc",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:55:14.318Z"
-    }
-  },
-  {
-    "name": "deshabilitado",
-    "data": {
-      "id": "datepicker-disabled",
-      "name": "test-name",
-      "label": {
-        "text": "Elige fecha de inicio"
-      },
-      "hint": {
-        "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))",
-      "caller": calendarDateExample | safe
-    },
-    "visualDescription": "Campo de entrada de fecha con fondo gris muy claro (#f5f5f5), borde gris claro de 1px, esquinas redondeadas. Label negro encima del campo, texto de ayuda gris medio debajo indicando formato. Ícono de calendario azul con cursor \"not-allowed\" alineado a la derecha dentro del input.",
-    "_generated": {
-      "hash": "9e12897eeb8c1f31d0828e2150d63356",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:55:23.628Z"
-    }
-  },
-  {
-    "name": "Con mensaje de error",
-    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un 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'>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": "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
-    },
-    "visualDescription": "Campo de entrada de fecha con fondo blanco, borde rojo de 2px, esquinas redondeadas. Label negro encima del campo, texto de ayuda gris medio debajo del label, mensaje de error en texto rojo debajo del campo. Ícono de calendario azul alineado a la derecha dentro del input con borde rojo visible alrededor.",
-    "_generated": {
-      "hash": "a2308fb68f258c46b270d01ae4bfa65a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:55:23.628Z"
-    }
-  },
-  {
-    "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'>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",
-      "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
-    },
-    "visualDescription": "Campo de entrada de fecha con fondo blanco, borde gris claro de 1px, esquinas redondeadas, altura reducida. Label negro en peso normal encima del campo, texto de ayuda gris medio entre paréntesis debajo del label. Ícono de calendario azul de tamaño pequeño alineado a la derecha dentro del input compacto.",
-    "_generated": {
-      "hash": "7d29019502394cfacead0bec153c4784",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:55:23.628Z"
-    }
-  },
-  {
-    "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'>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>"
-      },
-      "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
-    },
-    "visualDescription": "Campo de entrada de fecha con borde gris claro de 1px y fondo blanco. Incluye label en texto negro regular arriba indicando \"Elige fecha de inicio\", texto de ayuda gris claro debajo especificando el formato de fecha esperado, y botón \"Seleccionar fecha\" con texto azul y borde azul alineado a la derecha del campo.",
-    "_generated": {
-      "hash": "b9838d33b55fbf83f2be5ef3aaa07335",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:55:30.922Z"
-    }
-  },
-  {
-    "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'>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>",
-        "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
-    },
-    "visualDescription": "Campo de entrada de fecha con borde gris claro de 1px y fondo blanco. Incluye label en texto negro regular arriba indicando \"Elige fecha de inicio\", texto de ayuda gris claro debajo especificando el formato de fecha esperado, y botón \"Seleccionar fecha\" con texto azul y borde azul de dimensiones reducidas alineado a la derecha del campo.",
-    "_generated": {
-      "hash": "bf3f9aa1ed7519bbd6e85ef2c2ce4acb",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:55:30.922Z"
-    }
-  }
-] %}
+{% 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 un año para cargar sus datos",
+        "classes": "max-w-40 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="01-01-2025"
+    max="01-01-2026"
+    locale="es"
+    format="DD-MM-YYYY"
+  >
+    {{ 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="01-10-2025"
+    min="01-01-2025"
+    max="12-31-2025"
+    locale="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="10-01-2024 20-01-2025"
+    min="01-01-2025"
+    max="31-12-2025"
+    locale="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="10-01-2024/20-01-2025"
+    min="01-01-2025"
+    max="21-12-2025"
+    locale="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="01-01-2025/16-01-2025"
+    min="01-01-2025"
+    max="31-12-2025"
+    locale="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
+    },
+    "visualDescription": "Encabezado con texto negro de tamaño pequeño en peso normal. Debajo aparece texto gris medio en fuente monoespaciada.",
+    "_generated": {
+      "hash": "d82d0ba4edf1590a900de4d80b43b761",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:55.367Z"
+    }
+  },
+  {
+    "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
+    },
+    "visualDescription": "Encabezado con texto negro de tamaño pequeño en peso normal. Área de contenido con selector de año y formato de calendario.",
+    "_generated": {
+      "hash": "be351e964c77f7e18c65539a14dd12ff",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:55.367Z"
+    }
+  },
+  {
+    "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
+    },
+    "visualDescription": "Encabezado con texto negro de tamaño pequeño en peso normal. Área de contenido con formato de calendario para múltiples fechas.",
+    "_generated": {
+      "hash": "dfc01d2ee4c93bd8d5d1156b88abe5fa",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:55.367Z"
+    }
+  },
+  {
+    "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
+    },
+    "visualDescription": "Contiene un encabezado de texto negro en tamaño pequeño, seguido de área de calendario con rango de fechas. Altura compacta con padding interno moderado.",
+    "_generated": {
+      "hash": "24d8457852a9f4e084feddf277e23592",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:03.942Z"
+    }
+  },
+  {
+    "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
+    },
+    "visualDescription": "Incluye un encabezado de texto negro en tamaño pequeño en dos líneas, seguido de área de calendario con selector de año y rango de fechas. Altura compacta con padding interno moderado.",
+    "_generated": {
+      "hash": "7b05081cca5ec5df3cc72efe8e18c58e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:03.942Z"
+    }
+  },
+  {
+    "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'>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>"
+      },
+      "caller": calendarDateExample | safe
+    },
+    "visualDescription": "Encabezado de texto negro en negrita tamaño pequeño, seguido de dos líneas de texto gris normal como instrucciones. Campo de entrada blanco rectangular con borde gris claro de 1px y un icono azul con fondo azul claro alineado a la derecha dentro del campo.",
+    "_generated": {
+      "hash": "aeb9a788d9915ea7019e481715b3011f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:03.942Z"
+    }
+  },
+  {
+    "name": "Fechas múltiples",
+    "data": {
+      "id": "datepicker-multiple-dates",
+      "name": "test-name",
+      "label": {
+        "text": "Elige tus días disponibles"
+      },
+      "hint": {
+        "html": "Para incluir las fechas en el campo de texto usa el formato de fecha <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 las fechas mediante un espacio. Para seleccionar varios días en el calendario, pulsa los días que quieres seleccionar."
+      },
+      "value": "10-01-2024 20-01-2024",
+      "caller": calendarMultiExample | safe
+    },
+    "visualDescription": "Campo de texto con borde gris claro de 1px y esquinas redondeadas, fondo blanco, texto negro en formato de fecha. Título en negrita negro arriba, seguido de texto descriptivo gris oscuro en tamaño menor. Ícono de calendario azul alineado a la derecha dentro del campo, con desplegable indicado por flecha pequeña.",
+    "_generated": {
+      "hash": "fd85b350bd3b98bd1b2250f9d0f5734a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:14.318Z"
+    }
+  },
+  {
+    "name": "Rango de fechas",
+    "data": {
+      "id": "datepicker-range3",
+      "name": "test-name",
+      "label": {
+        "text": "Elige tu rango de días disponibles"
+      },
+      "hint": {
+        "html": "Para incluir el rango de fechas en el campo de texto usa el formato de fecha <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 /. Para seleccionar un rango de fechas en el calendario, pulsa el primer día del rango, desplázate hasta el último día del rango y púlsalo."
+      },
+      "value": "10-01-2024/20-01-2024",
+      "caller": calendarRangeExample | safe
+    },
+    "visualDescription": "Campo de texto rectangular con borde gris claro de 1px, fondo blanco, mostrando texto negro en formato de rango de fechas separado por guión. Encabezado en negrita negro, debajo texto explicativo gris oscuro de dos líneas en tamaño reducido. Ícono de calendario azul posicionado en el extremo derecho del campo con indicador de expansión.",
+    "_generated": {
+      "hash": "b590f68b56b3d7dd35cceb782fe75db9",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:14.318Z"
+    }
+  },
+  {
+    "name": "Rango de fechas 2 meses y selector de año",
+    "data": {
+      "id": "datepicker-with-hint-text-and-year",
+      "name": "test-name",
+      "label": {
+        "text": "Elige tu rango de días disponibles"
+      },
+      "hint": {
+        "html": "Para incluir el rango de fechas en el campo de texto usa el formato de fecha <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 /. Para seleccionar un rango de fechas en el calendario, pulsa el primer día del rango, desplázate hasta el último día del rango y púlsalo."
+      },
+      "value": "16-01-2024/04-02-2024",
+      "caller": calendarRangeExample2('datepicker-with-hint-text-and-year') | safe
+    },
+    "visualDescription": "Input rectangular con borde gris claro de 1px y fondo blanco, conteniendo texto negro de formato de rango. Título en negrita negro en la parte superior, texto instructivo gris oscuro de dos líneas debajo del título. Ícono de calendario azul ubicado en el borde derecho del campo con flecha desplegable adyacente.",
+    "_generated": {
+      "hash": "3a17f76c70edae55e6946eca4f15c5bc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:14.318Z"
+    }
+  },
+  {
+    "name": "deshabilitado",
+    "data": {
+      "id": "datepicker-disabled",
+      "name": "test-name",
+      "label": {
+        "text": "Elige fecha de inicio"
+      },
+      "hint": {
+        "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))",
+      "caller": calendarDateExample | safe
+    },
+    "visualDescription": "Campo de entrada de fecha con fondo gris muy claro (#f5f5f5), borde gris claro de 1px, esquinas redondeadas. Label negro encima del campo, texto de ayuda gris medio debajo indicando formato. Ícono de calendario azul con cursor \"not-allowed\" alineado a la derecha dentro del input.",
+    "_generated": {
+      "hash": "9e12897eeb8c1f31d0828e2150d63356",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:23.628Z"
+    }
+  },
+  {
+    "name": "Con mensaje de error",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un 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'>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": "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
+    },
+    "visualDescription": "Campo de entrada de fecha con fondo blanco, borde rojo de 2px, esquinas redondeadas. Label negro encima del campo, texto de ayuda gris medio debajo del label, mensaje de error en texto rojo debajo del campo. Ícono de calendario azul alineado a la derecha dentro del input con borde rojo visible alrededor.",
+    "_generated": {
+      "hash": "a2308fb68f258c46b270d01ae4bfa65a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:23.628Z"
+    }
+  },
+  {
+    "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'>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",
+      "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
+    },
+    "visualDescription": "Campo de entrada de fecha con fondo blanco, borde gris claro de 1px, esquinas redondeadas, altura reducida. Label negro en peso normal encima del campo, texto de ayuda gris medio entre paréntesis debajo del label. Ícono de calendario azul de tamaño pequeño alineado a la derecha dentro del input compacto.",
+    "_generated": {
+      "hash": "7d29019502394cfacead0bec153c4784",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:23.628Z"
+    }
+  },
+  {
+    "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'>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>"
+      },
+      "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
+    },
+    "visualDescription": "Campo de entrada de fecha con borde gris claro de 1px y fondo blanco. Incluye label en texto negro regular arriba, texto de ayuda gris claro debajo especificando el formato de fecha esperado, y botón personalizado con texto azul y borde azul alineado a la derecha del campo.",
+    "_generated": {
+      "hash": "b9838d33b55fbf83f2be5ef3aaa07335",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:30.922Z"
+    }
+  },
+  {
+    "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'>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>",
+        "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
+    },
+    "visualDescription": "Campo de entrada de fecha con borde gris claro de 1px y fondo blanco. Incluye label en texto negro regular arriba, texto de ayuda gris claro debajo especificando el formato de fecha esperado, y botón personalizado de dimensiones reducidas con texto azul y borde azul alineado a la derecha del campo.",
+    "_generated": {
+      "hash": "bf3f9aa1ed7519bbd6e85ef2c2ce4acb",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:55:30.922Z"
+    }
+  }
+] %}