desy-html 16.0.3 → 17.0.0

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

@@ -1,579 +1,579 @@
-{% set exampleComponent = "date-input" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "id": "fechnacim",
-      "namePrefix": "fechnacim",
-      "fieldset": {
-        "legend": {
-          "text": "Fecha de nacimiento"
-        }
-      },
-      "hint": {
-        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
-      },
-      "items": [
-        {
-          "name": "día",
-          "classes": "w-14",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "mes",
-          "classes": "w-14",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "año",
-          "classes": "w-20",
-          "attributes": {
-            "maxlength": "4"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Componente de fecha con tres campos de entrada separados para día, mes y año. Cada campo tiene borde gris claro de 1px y fondo blanco. Encabezado en negro con texto descriptivo gris pequeño debajo mostrando formato de ejemplo.",
-    "_generated": {
-      "hash": "7654b0ccadfb86f502a9eba64139432f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:11.775Z"
-    }
-  },
-  {
-    "name": "con errores solo",
-    "data": {
-      "id": "fechnacim-errors-a",
-      "fieldset": {
-        "legend": {
-          "text": "Fecha de nacimiento"
-        }
-      },
-      "errorMessage": {
-        "text": "Aqui va un mensaje de error"
-      },
-      "items": [
-        {
-          "name": "día",
-          "hasErrors": true,
-          "classes": "w-14  border-alert-base ring-2 ring-alert-base",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "mes",
-          "hasErrors": true,
-          "classes": "w-14  border-alert-base ring-2 ring-alert-base",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "año",
-          "hasErrors": true,
-          "classes": "w-20  border-alert-base ring-2 ring-alert-base",
-          "attributes": {
-            "maxlength": "4"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Componente de fecha con tres campos de entrada separados para día, mes y año. Cada campo tiene borde rojo de 2px y fondo blanco. Encabezado en negro con mensaje de error en texto rojo pequeño debajo de los campos.",
-    "_generated": {
-      "hash": "ebf304dd3809905f8a5abf202866fee1",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:11.775Z"
-    }
-  },
-  {
-    "name": "con errores y pista",
-    "data": {
-      "id": "fechnacim-errors-b",
-      "fieldset": {
-        "legend": {
-          "text": "Fecha de nacimiento"
-        }
-      },
-      "hint": {
-        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
-      },
-      "errorMessage": {
-        "text": "Aqui va un mensaje de error"
-      },
-      "items": [
-        {
-          "name": "día",
-          "hasErrors": true,
-          "classes": "w-14  border-alert-base ring-2 ring-alert-base",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "mes",
-          "hasErrors": true,
-          "classes": "w-14  border-alert-base ring-2 ring-alert-base",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "año",
-          "hasErrors": true,
-          "classes": "w-20  border-alert-base ring-2 ring-alert-base",
-          "attributes": {
-            "maxlength": "4"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Componente de fecha con tres campos de entrada separados para día, mes y año. Cada campo tiene borde rojo de 2px y fondo blanco. Encabezado en negro, texto descriptivo gris pequeño arriba de los campos, y mensaje de error en texto rojo pequeño debajo de los campos.",
-    "_generated": {
-      "hash": "f6307deb728c9272ede4ad48a959cf34",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:11.775Z"
-    }
-  },
-  {
-    "name": "con error en el input del día",
-    "data": {
-      "id": "fechnacim-day-error",
-      "namePrefix": "fechnacim-day-error",
-      "fieldset": {
-        "legend": {
-          "text": "Fecha de nacimiento"
-        }
-      },
-      "hint": {
-        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
-      },
-      "errorMessage": {
-        "text": "Aqui va un mensaje de error"
-      },
-      "items": [
-        {
-          "name": "día",
-          "hasErrors": true,
-          "classes": "w-14  border-alert-base ring-2 ring-alert-base",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "mes",
-          "classes": "w-14",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "año",
-          "classes": "w-20",
-          "attributes": {
-            "maxlength": "4"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Componente de fecha con tres campos de entrada alineados horizontalmente. El primer campo (día) tiene borde rojo de 2px, mientras los campos de mes y año tienen bordes grises estándar. Texto de error en rojo debajo de los campos, título negro en la parte superior, y subtexto gris claro que indica formato de ejemplo.",
-    "_generated": {
-      "hash": "7e56017e6c7907ee454cc3ad8ba51b0d",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:22.278Z"
-    }
-  },
-  {
-    "name": "con error en el input del mes",
-    "data": {
-      "id": "fechnacim-month-error",
-      "namePrefix": "fechnacim-month-error",
-      "fieldset": {
-        "legend": {
-          "text": "Fecha de nacimiento"
-        }
-      },
-      "hint": {
-        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
-      },
-      "errorMessage": {
-        "text": "Aqui va un mensaje de error"
-      },
-      "items": [
-        {
-          "name": "día",
-          "classes": "w-14",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "mes",
-          "hasErrors": true,
-          "classes": "w-14  border-alert-base ring-2 ring-alert-base",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "año",
-          "classes": "w-20",
-          "attributes": {
-            "maxlength": "4"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Componente de fecha con tres campos de entrada alineados horizontalmente. El campo central (mes) tiene borde rojo de 2px, mientras los campos de día y año mantienen bordes grises estándar. Texto de error en rojo debajo de los campos, título negro en la parte superior, y subtexto gris claro que muestra ejemplo de formato.",
-    "_generated": {
-      "hash": "8245312c5b2219b537c27eba0d75c5a0",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:22.278Z"
-    }
-  },
-  {
-    "name": "con error en el input del año",
-    "data": {
-      "id": "fechnacim-year-error",
-      "namePrefix": "fechnacim-year-error",
-      "fieldset": {
-        "legend": {
-          "text": "Fecha de nacimiento"
-        }
-      },
-      "hint": {
-        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
-      },
-      "errorMessage": {
-        "text": "Aqui va un mensaje de error"
-      },
-      "items": [
-        {
-          "name": "día",
-          "classes": "w-14",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "mes",
-          "classes": "w-14",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "año",
-          "hasErrors": true,
-          "classes": "w-20  border-alert-base ring-2 ring-alert-base",
-          "attributes": {
-            "maxlength": "4"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Componente de fecha con tres campos de entrada alineados horizontalmente. El tercer campo (año) presenta borde rojo de 2px, mientras los campos de día y mes conservan bordes grises estándar. Texto de error en rojo ubicado debajo de los campos, título negro en la parte superior, y subtexto gris claro indicando formato esperado.",
-    "_generated": {
-      "hash": "ec5d62ef6aa779956bc25e82fb6b7835",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:22.278Z"
-    }
-  },
-  {
-    "name": "con items por defecto",
-    "data": {
-      "id": "fechnacim-default-items",
-      "namePrefix": "fechnacim-default-items",
-      "fieldset": {
-        "legend": {
-          "text": "Fecha de nacimiento"
-        }
-      },
-      "hint": {
-        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
-      }
-    },
-    "visualDescription": "Grupo de tres campos de entrada numéricos alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro, subtexto descriptivo gris con ejemplo de fecha, y tres labels grises pequeños (\"Día\", \"Mes\", \"Año\") sobre cada campo respectivo. Los campos tienen tamaño pequeño uniforme con esquinas redondeadas sutiles.",
-    "_generated": {
-      "hash": "28d86e05f5f6096f809f00d05b1453ef",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:32.941Z"
-    }
-  },
-  {
-    "name": "input de tiempo",
-    "data": {
-      "id": "time",
-      "namePrefix": "time",
-      "fieldset": {
-        "legend": {
-          "text": "Hora de publicación"
-        }
-      },
-      "hint": {
-        "text": "Por ejemplo, 14:30"
-      },
-      "items": [
-        {
-          "name": "hora",
-          "classes": "w-14",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "divider": {
-            "text": ":",
-            "classes": "flex items-end mb-sm mr-base"
-          }
-        },
-        {
-          "name": "minutos",
-          "classes": "w-14",
-          "attributes": {
-            "maxlength": "2"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Dos campos de entrada numéricos alineados horizontalmente con bordes grises de 1px y fondo blanco, separados por dos puntos negros. Encabezado principal en negrita negro, subtexto descriptivo gris con formato de ejemplo, y dos labels grises pequeños (\"Hora\", \"Minutos\") sobre cada campo. Los campos tienen ancho reducido con esquinas redondeadas sutiles.",
-    "_generated": {
-      "hash": "8f273b1ceadf88767e75c547fa49201f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:32.941Z"
-    }
-  },
-  {
-    "name": "con clases de form-group opcionales",
-    "data": {
-      "id": "fechnacim-formgroup-classes",
-      "namePrefix": "fechnacim-formgroup-classes",
-      "fieldset": {
-        "legend": {
-          "text": "Fecha de nacimiento"
-        }
-      },
-      "hint": {
-        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
-      },
-      "formGroup": {
-        "classes": "p-base bg-primary-light"
-      }
-    },
-    "visualDescription": "Grupo de tres campos de entrada numéricos con bordes grises de 1px sobre fondo azul celeste claro. Encabezado en negrita azul oscuro, subtexto descriptivo azul oscuro con ejemplo de fecha, y tres labels azul oscuro pequeños (\"Día\", \"Mes\", \"Año\") sobre campos de fondo blanco. Los campos tienen tamaño pequeño uniforme con esquinas redondeadas, contenidos en contenedor con padding generoso.",
-    "_generated": {
-      "hash": "44afe613b59ef9620d88ec3550a1fe21",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:32.941Z"
-    }
-  },
-  {
-    "name": "con valores de autocompletado",
-    "data": {
-      "id": "fechnacim-with-autocomplete-attribute",
-      "namePrefix": "fechnacim-with-autocomplete",
-      "fieldset": {
-        "legend": {
-          "text": "Fecha de nacimiento"
-        }
-      },
-      "hint": {
-        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
-      },
-      "items": [
-        {
-          "name": "día",
-          "classes": "w-14",
-          "autocomplete": "bday-day",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "mes",
-          "classes": "w-14",
-          "autocomplete": "bday-month",
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "año",
-          "classes": "w-20",
-          "autocomplete": "bday-year",
-          "attributes": {
-            "maxlength": "4"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Tres campos de entrada rectangulares alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro arriba, seguido de texto descriptivo gris en dos líneas. Labels \"Día\", \"Mes\", \"Año\" en negro arriba de cada campo respectivo.",
-    "_generated": {
-      "hash": "cbc06eed93ec064c5971ef9ed7618217",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:41.338Z"
-    }
-  },
-  {
-    "name": "con atributos de input",
-    "data": {
-      "id": "fechnacim-with-input-attributes",
-      "namePrefix": "fechnacim-with-input-attributes",
-      "fieldset": {
-        "legend": {
-          "text": "Fecha de nacimiento"
-        }
-      },
-      "hint": {
-        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
-      },
-      "items": [
-        {
-          "name": "día",
-          "classes": "w-14",
-          "attributes": {
-            "data-example-day": "día",
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "mes",
-          "classes": "w-14",
-          "attributes": {
-            "data-example-month": "mes",
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "año",
-          "classes": "w-20",
-          "attributes": {
-            "data-example-year": "año",
-            "maxlength": "4"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Tres campos de entrada rectangulares alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro arriba, seguido de texto descriptivo gris en dos líneas. Labels \"Día\", \"Mes\", \"Año\" en negro arriba de cada campo respectivo.",
-    "_generated": {
-      "hash": "8418d3131ee57c0415dc6061865c568f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:41.338Z"
-    }
-  },
-  {
-    "name": "peque",
-    "data": {
-      "id": "fechnacim-small",
-      "namePrefix": "fechnacim-small",
-      "fieldset": {
-        "legend": {
-          "text": "Fecha de nacimiento",
-          "classes": "text-sm font-bold"
-        }
-      },
-      "hint": {
-        "text": "Por ejemplo, día: 31 mes: 3 año: 1980",
-        "classes": "text-sm"
-      },
-      "items": [
-        {
-          "name": "día",
-          "classes": "c-input--sm w-10 mt-xs",
-          "label": {
-            "text": "Dia",
-            "classes": "text-sm"
-          },
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "mes",
-          "classes": "c-input--sm w-10 mt-xs",
-          "label": {
-            "text": "Mes",
-            "classes": "text-sm"
-          },
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "name": "año",
-          "classes": "c-input--sm w-16 mt-xs",
-          "label": {
-            "text": "Año",
-            "classes": "text-sm"
-          },
-          "attributes": {
-            "maxlength": "4"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Tres campos de entrada rectangulares alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro arriba, seguido de texto descriptivo gris en una línea. Labels \"Día\", \"Mes\", \"Año\" en negro arriba de cada campo respectivo.",
-    "_generated": {
-      "hash": "cdd0bae191cf102b7a121d97e995e150",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:41.338Z"
-    }
-  },
-  {
-    "name": "input de tiempo peque",
-    "data": {
-      "id": "fechnacim-small-time",
-      "namePrefix": "fechnacim-small-time",
-      "fieldset": {
-        "legend": {
-          "text": "Hora de publicación",
-          "classes": "text-sm font-bold"
-        }
-      },
-      "hint": {
-        "text": "Por ejemplo, 14:30",
-        "classes": "text-sm"
-      },
-      "items": [
-        {
-          "name": "hora",
-          "classes": "c-input--sm w-10 mt-xs",
-          "label": {
-            "text": "Hora",
-            "classes": "text-sm"
-          },
-          "attributes": {
-            "maxlength": "2"
-          }
-        },
-        {
-          "divider": {
-            "text": ":",
-            "classes": "flex items-end mb-xs mr-base"
-          }
-        },
-        {
-          "name": "minutos",
-          "classes": "c-input--sm w-10 mt-xs",
-          "label": {
-            "text": "Minutos",
-            "classes": "text-sm"
-          },
-          "attributes": {
-            "maxlength": "2"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Componente con encabezado \"Input de tiempo peque\" en fuente negra estándar. Contiene etiqueta \"Hora de aplicación\" en texto negro, ejemplo \"Por ejemplo: 14:30\" en gris, y dos campos de entrada pequeños con bordes grises de 1px y fondo blanco separados por dos puntos, etiquetados \"Hora\" y \"Minutos\" respectivamente en texto gris pequeño debajo de cada campo.",
-    "_generated": {
-      "hash": "5e718d3d90147ac0bf725bc694c6b65f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:54:48.811Z"
-    }
-  }
+{% set exampleComponent = "date-input" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "id": "fechnacim",
+      "namePrefix": "fechnacim",
+      "fieldset": {
+        "legend": {
+          "text": "Fecha de nacimiento"
+        }
+      },
+      "hint": {
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
+      },
+      "items": [
+        {
+          "name": "día",
+          "classes": "w-14",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "mes",
+          "classes": "w-14",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "año",
+          "classes": "w-20",
+          "attributes": {
+            "maxlength": "4"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Componente de fecha con tres campos de entrada separados. Cada campo tiene borde gris claro de 1px y fondo blanco. Encabezado en negro con texto descriptivo gris pequeño debajo mostrando formato de ejemplo.",
+    "_generated": {
+      "hash": "7654b0ccadfb86f502a9eba64139432f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:11.775Z"
+    }
+  },
+  {
+    "name": "con errores solo",
+    "data": {
+      "id": "fechnacim-errors-a",
+      "fieldset": {
+        "legend": {
+          "text": "Fecha de nacimiento"
+        }
+      },
+      "errorMessage": {
+        "text": "Aqui va un mensaje de error"
+      },
+      "items": [
+        {
+          "name": "día",
+          "hasErrors": true,
+          "classes": "w-14  border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "mes",
+          "hasErrors": true,
+          "classes": "w-14  border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "año",
+          "hasErrors": true,
+          "classes": "w-20  border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "maxlength": "4"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Componente de fecha con tres campos de entrada separados. Cada campo tiene borde rojo de 2px y fondo blanco. Encabezado en negro con mensaje de error en texto rojo pequeño debajo de los campos.",
+    "_generated": {
+      "hash": "ebf304dd3809905f8a5abf202866fee1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:11.775Z"
+    }
+  },
+  {
+    "name": "con errores y pista",
+    "data": {
+      "id": "fechnacim-errors-b",
+      "fieldset": {
+        "legend": {
+          "text": "Fecha de nacimiento"
+        }
+      },
+      "hint": {
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
+      },
+      "errorMessage": {
+        "text": "Aqui va un mensaje de error"
+      },
+      "items": [
+        {
+          "name": "día",
+          "hasErrors": true,
+          "classes": "w-14  border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "mes",
+          "hasErrors": true,
+          "classes": "w-14  border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "año",
+          "hasErrors": true,
+          "classes": "w-20  border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "maxlength": "4"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Componente de fecha con tres campos de entrada separados. Cada campo tiene borde rojo de 2px y fondo blanco. Encabezado en negro, texto descriptivo gris pequeño arriba de los campos, y mensaje de error en texto rojo pequeño debajo de los campos.",
+    "_generated": {
+      "hash": "f6307deb728c9272ede4ad48a959cf34",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:11.775Z"
+    }
+  },
+  {
+    "name": "con error en el input del día",
+    "data": {
+      "id": "fechnacim-day-error",
+      "namePrefix": "fechnacim-day-error",
+      "fieldset": {
+        "legend": {
+          "text": "Fecha de nacimiento"
+        }
+      },
+      "hint": {
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
+      },
+      "errorMessage": {
+        "text": "Aqui va un mensaje de error"
+      },
+      "items": [
+        {
+          "name": "día",
+          "hasErrors": true,
+          "classes": "w-14  border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "mes",
+          "classes": "w-14",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "año",
+          "classes": "w-20",
+          "attributes": {
+            "maxlength": "4"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Componente de fecha con tres campos de entrada alineados horizontalmente. El primer campo tiene borde rojo de 2px, mientras los otros dos campos tienen bordes grises estándar. Texto de error en rojo debajo de los campos, título negro en la parte superior, y subtexto gris claro que indica formato de ejemplo.",
+    "_generated": {
+      "hash": "7e56017e6c7907ee454cc3ad8ba51b0d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:22.278Z"
+    }
+  },
+  {
+    "name": "con error en el input del mes",
+    "data": {
+      "id": "fechnacim-month-error",
+      "namePrefix": "fechnacim-month-error",
+      "fieldset": {
+        "legend": {
+          "text": "Fecha de nacimiento"
+        }
+      },
+      "hint": {
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
+      },
+      "errorMessage": {
+        "text": "Aqui va un mensaje de error"
+      },
+      "items": [
+        {
+          "name": "día",
+          "classes": "w-14",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "mes",
+          "hasErrors": true,
+          "classes": "w-14  border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "año",
+          "classes": "w-20",
+          "attributes": {
+            "maxlength": "4"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Componente de fecha con tres campos de entrada alineados horizontalmente. El campo central tiene borde rojo de 2px, mientras los otros dos campos mantienen bordes grises estándar. Texto de error en rojo debajo de los campos, título negro en la parte superior, y subtexto gris claro que muestra ejemplo de formato.",
+    "_generated": {
+      "hash": "8245312c5b2219b537c27eba0d75c5a0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:22.278Z"
+    }
+  },
+  {
+    "name": "con error en el input del año",
+    "data": {
+      "id": "fechnacim-year-error",
+      "namePrefix": "fechnacim-year-error",
+      "fieldset": {
+        "legend": {
+          "text": "Fecha de nacimiento"
+        }
+      },
+      "hint": {
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
+      },
+      "errorMessage": {
+        "text": "Aqui va un mensaje de error"
+      },
+      "items": [
+        {
+          "name": "día",
+          "classes": "w-14",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "mes",
+          "classes": "w-14",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "año",
+          "hasErrors": true,
+          "classes": "w-20  border-alert-base ring-2 ring-alert-base",
+          "attributes": {
+            "maxlength": "4"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Componente de fecha con tres campos de entrada alineados horizontalmente. El tercer campo presenta borde rojo de 2px, mientras los otros dos campos conservan bordes grises estándar. Texto de error en rojo ubicado debajo de los campos, título negro en la parte superior, y subtexto gris claro indicando formato esperado.",
+    "_generated": {
+      "hash": "ec5d62ef6aa779956bc25e82fb6b7835",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:22.278Z"
+    }
+  },
+  {
+    "name": "con items por defecto",
+    "data": {
+      "id": "fechnacim-default-items",
+      "namePrefix": "fechnacim-default-items",
+      "fieldset": {
+        "legend": {
+          "text": "Fecha de nacimiento"
+        }
+      },
+      "hint": {
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
+      }
+    },
+    "visualDescription": "Grupo de tres campos de entrada numéricos alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro, subtexto descriptivo gris con ejemplo de fecha, y tres labels grises pequeños sobre cada campo respectivo. Los campos tienen tamaño pequeño uniforme con esquinas redondeadas sutiles.",
+    "_generated": {
+      "hash": "28d86e05f5f6096f809f00d05b1453ef",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:32.941Z"
+    }
+  },
+  {
+    "name": "input de tiempo",
+    "data": {
+      "id": "time",
+      "namePrefix": "time",
+      "fieldset": {
+        "legend": {
+          "text": "Hora de publicación"
+        }
+      },
+      "hint": {
+        "text": "Por ejemplo, 14:30"
+      },
+      "items": [
+        {
+          "name": "hora",
+          "classes": "w-14",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "divider": {
+            "text": ":",
+            "classes": "flex items-end mb-sm mr-base"
+          }
+        },
+        {
+          "name": "minutos",
+          "classes": "w-14",
+          "attributes": {
+            "maxlength": "2"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Dos campos de entrada numéricos alineados horizontalmente con bordes grises de 1px y fondo blanco, separados por dos puntos negros. Encabezado principal en negrita negro, subtexto descriptivo gris con formato de ejemplo, y dos labels grises pequeños sobre cada campo. Los campos tienen ancho reducido con esquinas redondeadas sutiles.",
+    "_generated": {
+      "hash": "8f273b1ceadf88767e75c547fa49201f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:32.941Z"
+    }
+  },
+  {
+    "name": "con clases de form-group opcionales",
+    "data": {
+      "id": "fechnacim-formgroup-classes",
+      "namePrefix": "fechnacim-formgroup-classes",
+      "fieldset": {
+        "legend": {
+          "text": "Fecha de nacimiento"
+        }
+      },
+      "hint": {
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
+      },
+      "formGroup": {
+        "classes": "p-base bg-primary-light"
+      }
+    },
+    "visualDescription": "Grupo de tres campos de entrada numéricos con bordes grises de 1px sobre fondo azul celeste claro. Encabezado en negrita azul oscuro, subtexto descriptivo azul oscuro con ejemplo de fecha, y tres labels azul oscuro pequeños sobre campos de fondo blanco. Los campos tienen tamaño pequeño uniforme con esquinas redondeadas, contenidos en contenedor con padding generoso.",
+    "_generated": {
+      "hash": "44afe613b59ef9620d88ec3550a1fe21",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:32.941Z"
+    }
+  },
+  {
+    "name": "con valores de autocompletado",
+    "data": {
+      "id": "fechnacim-with-autocomplete-attribute",
+      "namePrefix": "fechnacim-with-autocomplete",
+      "fieldset": {
+        "legend": {
+          "text": "Fecha de nacimiento"
+        }
+      },
+      "hint": {
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
+      },
+      "items": [
+        {
+          "name": "día",
+          "classes": "w-14",
+          "autocomplete": "bday-day",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "mes",
+          "classes": "w-14",
+          "autocomplete": "bday-month",
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "año",
+          "classes": "w-20",
+          "autocomplete": "bday-year",
+          "attributes": {
+            "maxlength": "4"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Tres campos de entrada rectangulares alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro arriba, seguido de texto descriptivo gris en dos líneas. Labels en negro arriba de cada campo respectivo.",
+    "_generated": {
+      "hash": "cbc06eed93ec064c5971ef9ed7618217",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:41.338Z"
+    }
+  },
+  {
+    "name": "con atributos de input",
+    "data": {
+      "id": "fechnacim-with-input-attributes",
+      "namePrefix": "fechnacim-with-input-attributes",
+      "fieldset": {
+        "legend": {
+          "text": "Fecha de nacimiento"
+        }
+      },
+      "hint": {
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980"
+      },
+      "items": [
+        {
+          "name": "día",
+          "classes": "w-14",
+          "attributes": {
+            "data-example-day": "día",
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "mes",
+          "classes": "w-14",
+          "attributes": {
+            "data-example-month": "mes",
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "año",
+          "classes": "w-20",
+          "attributes": {
+            "data-example-year": "año",
+            "maxlength": "4"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Tres campos de entrada rectangulares alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro arriba, seguido de texto descriptivo gris en dos líneas. Labels en negro arriba de cada campo respectivo.",
+    "_generated": {
+      "hash": "8418d3131ee57c0415dc6061865c568f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:41.338Z"
+    }
+  },
+  {
+    "name": "peque",
+    "data": {
+      "id": "fechnacim-small",
+      "namePrefix": "fechnacim-small",
+      "fieldset": {
+        "legend": {
+          "text": "Fecha de nacimiento",
+          "classes": "text-sm font-bold"
+        }
+      },
+      "hint": {
+        "text": "Por ejemplo, día: 31 mes: 3 año: 1980",
+        "classes": "text-sm"
+      },
+      "items": [
+        {
+          "name": "día",
+          "classes": "c-input--sm w-10 mt-xs",
+          "label": {
+            "text": "Dia",
+            "classes": "text-sm"
+          },
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "mes",
+          "classes": "c-input--sm w-10 mt-xs",
+          "label": {
+            "text": "Mes",
+            "classes": "text-sm"
+          },
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "name": "año",
+          "classes": "c-input--sm w-16 mt-xs",
+          "label": {
+            "text": "Año",
+            "classes": "text-sm"
+          },
+          "attributes": {
+            "maxlength": "4"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Tres campos de entrada rectangulares alineados horizontalmente con bordes grises de 1px y fondo blanco. Encabezado en negrita negro arriba, seguido de texto descriptivo gris en una línea. Labels en negro arriba de cada campo respectivo.",
+    "_generated": {
+      "hash": "cdd0bae191cf102b7a121d97e995e150",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:41.338Z"
+    }
+  },
+  {
+    "name": "input de tiempo peque",
+    "data": {
+      "id": "fechnacim-small-time",
+      "namePrefix": "fechnacim-small-time",
+      "fieldset": {
+        "legend": {
+          "text": "Hora de publicación",
+          "classes": "text-sm font-bold"
+        }
+      },
+      "hint": {
+        "text": "Por ejemplo, 14:30",
+        "classes": "text-sm"
+      },
+      "items": [
+        {
+          "name": "hora",
+          "classes": "c-input--sm w-10 mt-xs",
+          "label": {
+            "text": "Hora",
+            "classes": "text-sm"
+          },
+          "attributes": {
+            "maxlength": "2"
+          }
+        },
+        {
+          "divider": {
+            "text": ":",
+            "classes": "flex items-end mb-xs mr-base"
+          }
+        },
+        {
+          "name": "minutos",
+          "classes": "c-input--sm w-10 mt-xs",
+          "label": {
+            "text": "Minutos",
+            "classes": "text-sm"
+          },
+          "attributes": {
+            "maxlength": "2"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Componente de entrada de tiempo con encabezado en fuente negra estándar. Contiene etiqueta en texto negro, ejemplo de formato en gris, y dos campos de entrada pequeños con bordes grises de 1px y fondo blanco separados por dos puntos, con texto gris pequeño debajo de cada campo.",
+    "_generated": {
+      "hash": "5e718d3d90147ac0bf725bc694c6b65f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:54:48.811Z"
+    }
+  }
 ] %}