desy-html 16.0.4 → 17.0.0

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

@@ -1,365 +1,365 @@
-{% set exampleComponent = "select" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "id": "select-1",
-      "name": "select-1",
-      "label": {
-        "text": "Esto es un label"
-      },
-      "items": [
-        {
-          "value": 1,
-          "text": "Opción 1"
-        },
-        {
-          "value": 2,
-          "text": "Opción 2",
-          "selected": true
-        },
-        {
-          "value": 3,
-          "text": "Opción 3",
-          "disabled": true
-        }
-      ]
-    },
-    "visualDescription": "Dropdown select con label \"por defecto\" en texto negro pequeño arriba. Campo rectangular con fondo blanco, borde gris de 1px, padding medio, texto \"Opción 2\" negro alineado a la izquierda, icono de flecha gris apuntando hacia abajo a la derecha. Label descriptivo \"Esta es un label\" en gris claro debajo del título.",
-    "_generated": {
-      "hash": "50e984dcaa02d1931cc408cc58083d7f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:17.504Z"
-    }
-  },
-  {
-    "name": "deshabilitado",
-    "data": {
-      "id": "select-2",
-      "name": "select-2",
-      "disabled": true,
-      "label": {
-        "text": "Esto es un label"
-      },
-      "items": [
-        {
-          "value": 1,
-          "text": "Opción 1"
-        },
-        {
-          "value": 2,
-          "text": "Opción 2",
-          "selected": true
-        },
-        {
-          "value": 3,
-          "text": "Opción 3",
-          "disabled": true
-        }
-      ]
-    },
-    "visualDescription": "Dropdown select con label \"deshabilitado\" en texto negro pequeño arriba. Campo rectangular con fondo gris muy claro (#f5f5f5), borde gris tenue de 1px, padding medio, texto \"Opción 2\" gris atenuado alineado a la izquierda, icono de flecha gris claro apuntando hacia abajo a la derecha. Label descriptivo \"Esta es un label\" en gris claro debajo del título, apariencia visualmente inactiva.",
-    "_generated": {
-      "hash": "aa1969045e310a4272e2e7ee800fbd6e",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:17.504Z"
-    }
-  },
-  {
-    "name": "placeholder",
-    "description": "Usa una combinación de los parámetros <code>'disabled': true</code>, <code>'selected': true</code> y <code>'hidden': true</code> para la primera opción y  actúará como si fuera un placeholder visual.",
-    "data": {
-      "id": "select-placeholder",
-      "name": "select-placeholder",
-      "label": {
-        "text": "Esto es un label"
-      },
-      "items": [
-        {
-          "value": "",
-          "text": "Choose an option",
-          "disabled": true,
-          "selected": true,
-          "hidden": true
-        },
-        {
-          "value": 1,
-          "text": "Opción 1"
-        },
-        {
-          "value": 2,
-          "text": "Opción 2"
-        },
-        {
-          "value": 3,
-          "text": "Opción 3"
-        }
-      ]
-    },
-    "visualDescription": "Dropdown select con label \"placeholder\" en texto negro pequeño arriba. Campo rectangular con fondo blanco, borde gris de 1px, padding medio, texto \"Choose an option\" gris claro alineado a la izquierda, icono de flecha gris apuntando hacia abajo a la derecha. Label descriptivo \"Esta es un label\" en gris claro debajo del título.",
-    "_generated": {
-      "hash": "ea5f57e900141f23399190acdfea0cbc",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:17.504Z"
-    }
-  },
-  {
-    "name": "con optgroup",
-    "data": {
-      "id": "select-optgroup",
-      "name": "select-optgroup",
-      "label": {
-        "text": "Esto es un label"
-      },
-      "items": [
-        {
-          "value": 1,
-          "text": "Opción 1"
-        },
-        {
-          "value": 2,
-          "text": "Opción 2"
-        },
-        {
-          "optgroup": {
-            "label": "Optgroup label A",
-            "items": [
-              {
-                "value": 1,
-                "text": "Optgroup subopción A1"
-              },
-              {
-                "value": 2,
-                "text": "Optgroup subopción A2",
-                "selected": true
-              },
-              {
-                "value": 3,
-                "text": "Optgroup subopción A3"
-              }
-            ]
-          }
-        },
-        {
-          "value": 3,
-          "text": "Opción 3"
-        },
-        {
-          "value": 4,
-          "text": "Opción 4"
-        },
-        {
-          "optgroup": {
-            "label": "Optgroup label B",
-            "items": [
-              {
-                "value": 1,
-                "text": "Optgroup subopción B1"
-              },
-              {
-                "value": 2,
-                "text": "Optgroup subopción B2"
-              },
-              {
-                "value": 3,
-                "text": "Optgroup subopción B3"
-              }
-            ]
-          }
-        },
-        {
-          "value": 5,
-          "text": "Opción 5"
-        },
-        {
-          "value": 6,
-          "text": "Opción 6"
-        }
-      ]
-    },
-    "visualDescription": "Dropdown select con borde gris de 1px, fondo blanco, esquinas redondeadas. Label negro en peso normal arriba del campo. Icono chevron gris apuntando hacia abajo en el extremo derecho del campo. Texto seleccionado en negro sobre fondo blanco.",
-    "_generated": {
-      "hash": "f5e3d8bfb775cbb8d86afaf0c56fa97d",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:26.720Z"
-    }
-  },
-  {
-    "name": "con pista y 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": "select-3",
-      "name": "select-3",
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista."
-      },
-      "errorMessage": {
-        "text": "Esto es un mensaje de error"
-      },
-      "items": [
-        {
-          "value": 1,
-          "text": "Opción 1"
-        },
-        {
-          "value": 2,
-          "text": "Opción 2"
-        },
-        {
-          "value": 3,
-          "text": "Opción 3"
-        }
-      ]
-    },
-    "visualDescription": "Dropdown select con borde rojo de 2px, fondo blanco, esquinas redondeadas. Label negro en peso normal arriba, texto gris debajo del label, texto rojo debajo del campo. Botón seleccionado con borde negro, fondo blanco, texto negro, icono X rojo a la derecha.",
-    "_generated": {
-      "hash": "c26a244e36a845de69498697ed7fe8c4",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:26.720Z"
-    }
-  },
-  {
-    "name": "con anchura completa",
-    "data": {
-      "id": "select-5",
-      "name": "select-5",
-      "classes": "w-full",
-      "label": {
-        "text": "Esto es un label"
-      },
-      "items": [
-        {
-          "value": 1,
-          "text": "Opción 1"
-        },
-        {
-          "value": 2,
-          "text": "Opción 2",
-          "selected": true
-        },
-        {
-          "value": 3,
-          "text": "Opción 3",
-          "disabled": true
-        }
-      ]
-    },
-    "visualDescription": "Dropdown select ocupando el 100% del ancho del contenedor, borde gris de 1px, fondo blanco, esquinas redondeadas. Label negro en peso normal arriba del campo. Icono chevron gris apuntando hacia abajo alineado al extremo derecho. Texto seleccionado en negro sobre fondo blanco.",
-    "_generated": {
-      "hash": "fe5c3562a0204afdeebbb59c8448ea58",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:26.720Z"
-    }
-  },
-  {
-    "name": "con clases de form-group opcionales",
-    "description": "Label en línea + Select flexible y mensaje de error",
-    "data": {
-      "id": "select-6",
-      "name": "select-6",
-      "classes": "lg:flex-1",
-      "label": {
-        "text": "Label en línea:",
-        "classes": "lg:py-sm lg:mt-sm"
-      },
-      "formGroup": {
-        "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
-      },
-      "errorMessage": {
-        "text": "Esto es un mensaje de error",
-        "classes": "order-1 w-full pt-sm"
-      },
-      "items": [
-        {
-          "value": 1,
-          "text": "Opción 1"
-        },
-        {
-          "value": 2,
-          "text": "Opción 2",
-          "selected": true
-        },
-        {
-          "value": 3,
-          "text": "Opción 3",
-          "disabled": true
-        }
-      ]
-    },
-    "visualDescription": "Select desplegable con label en negro, contenedor con borde rojo de 2px, fondo blanco, y texto \"Opción 2\" seleccionado. Mensaje de error en rojo debajo del campo indicando validación fallida. Altura estándar del select con flecha dropdown negra a la derecha.",
-    "_generated": {
-      "hash": "4371662f21e81c42c3f914b60f164af9",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:35.628Z"
-    }
-  },
-  {
-    "name": "transparente",
-    "data": {
-      "id": "select-7",
-      "name": "select-7",
-      "classes": "c-select--transparent",
-      "label": {
-        "text": "Esto es un label"
-      },
-      "items": [
-        {
-          "value": 1,
-          "text": "Opción 1"
-        },
-        {
-          "value": 2,
-          "text": "Opción 2",
-          "selected": true
-        },
-        {
-          "value": 3,
-          "text": "Opción 3",
-          "disabled": true
-        }
-      ]
-    },
-    "visualDescription": "Select desplegable con label en negro, texto \"Opción 2\" visible, sin borde visible o con borde muy sutil, fondo transparente o blanco. Altura estándar del componente con flecha dropdown negra. Texto \"Esto es un label\" aparece entre el encabezado y el select.",
-    "_generated": {
-      "hash": "4c2e2a1e277432f3142570c3180b1afb",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:35.628Z"
-    }
-  },
-  {
-    "name": "peque",
-    "data": {
-      "id": "select-8",
-      "name": "select-8",
-      "classes": "c-select--sm",
-      "label": {
-        "text": "Esto es un label"
-      },
-      "items": [
-        {
-          "value": 1,
-          "text": "Opción 1"
-        },
-        {
-          "value": 2,
-          "text": "Opción 2",
-          "selected": true
-        },
-        {
-          "value": 3,
-          "text": "Opción 3",
-          "disabled": true
-        }
-      ]
-    },
-    "visualDescription": "Select desplegable compacto con label en negro arriba, texto \"Opción 2\" seleccionado, borde gris de 1px, fondo blanco. Altura reducida del campo select con padding mínimo. Texto \"Esto es un label\" entre el encabezado y el componente, flecha dropdown negra a la derecha.",
-    "_generated": {
-      "hash": "89b16841c1f253dd851c8d6c7bf7866f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:13:35.628Z"
-    }
-  }
+{% set exampleComponent = "select" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "id": "select-1",
+      "name": "select-1",
+      "label": {
+        "text": "Esto es un label"
+      },
+      "items": [
+        {
+          "value": 1,
+          "text": "Opción 1"
+        },
+        {
+          "value": 2,
+          "text": "Opción 2",
+          "selected": true
+        },
+        {
+          "value": 3,
+          "text": "Opción 3",
+          "disabled": true
+        }
+      ]
+    },
+    "visualDescription": "Dropdown select con label en texto negro pequeño arriba. Campo rectangular con fondo blanco, borde gris de 1px, padding medio, texto seleccionado negro alineado a la izquierda, icono de flecha gris apuntando hacia abajo a la derecha. Label descriptivo en gris claro debajo del título.",
+    "_generated": {
+      "hash": "50e984dcaa02d1931cc408cc58083d7f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:17.504Z"
+    }
+  },
+  {
+    "name": "deshabilitado",
+    "data": {
+      "id": "select-2",
+      "name": "select-2",
+      "disabled": true,
+      "label": {
+        "text": "Esto es un label"
+      },
+      "items": [
+        {
+          "value": 1,
+          "text": "Opción 1"
+        },
+        {
+          "value": 2,
+          "text": "Opción 2",
+          "selected": true
+        },
+        {
+          "value": 3,
+          "text": "Opción 3",
+          "disabled": true
+        }
+      ]
+    },
+    "visualDescription": "Dropdown select con label en texto negro pequeño arriba. Campo rectangular con fondo gris muy claro, borde gris tenue de 1px, padding medio, texto seleccionado gris atenuado alineado a la izquierda, icono de flecha gris claro apuntando hacia abajo a la derecha. Label descriptivo en gris claro debajo del título, apariencia visualmente inactiva.",
+    "_generated": {
+      "hash": "aa1969045e310a4272e2e7ee800fbd6e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:17.504Z"
+    }
+  },
+  {
+    "name": "placeholder",
+    "description": "Usa una combinación de los parámetros <code>'disabled': true</code>, <code>'selected': true</code> y <code>'hidden': true</code> para la primera opción y  actúará como si fuera un placeholder visual.",
+    "data": {
+      "id": "select-placeholder",
+      "name": "select-placeholder",
+      "label": {
+        "text": "Esto es un label"
+      },
+      "items": [
+        {
+          "value": "",
+          "text": "Choose an option",
+          "disabled": true,
+          "selected": true,
+          "hidden": true
+        },
+        {
+          "value": 1,
+          "text": "Opción 1"
+        },
+        {
+          "value": 2,
+          "text": "Opción 2"
+        },
+        {
+          "value": 3,
+          "text": "Opción 3"
+        }
+      ]
+    },
+    "visualDescription": "Dropdown select con label en texto negro pequeño arriba. Campo rectangular con fondo blanco, borde gris de 1px, padding medio, texto placeholder en gris claro alineado a la izquierda, icono de flecha gris apuntando hacia abajo a la derecha. Label descriptivo en gris claro debajo del título.",
+    "_generated": {
+      "hash": "ea5f57e900141f23399190acdfea0cbc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:17.504Z"
+    }
+  },
+  {
+    "name": "con optgroup",
+    "data": {
+      "id": "select-optgroup",
+      "name": "select-optgroup",
+      "label": {
+        "text": "Esto es un label"
+      },
+      "items": [
+        {
+          "value": 1,
+          "text": "Opción 1"
+        },
+        {
+          "value": 2,
+          "text": "Opción 2"
+        },
+        {
+          "optgroup": {
+            "label": "Optgroup label A",
+            "items": [
+              {
+                "value": 1,
+                "text": "Optgroup subopción A1"
+              },
+              {
+                "value": 2,
+                "text": "Optgroup subopción A2",
+                "selected": true
+              },
+              {
+                "value": 3,
+                "text": "Optgroup subopción A3"
+              }
+            ]
+          }
+        },
+        {
+          "value": 3,
+          "text": "Opción 3"
+        },
+        {
+          "value": 4,
+          "text": "Opción 4"
+        },
+        {
+          "optgroup": {
+            "label": "Optgroup label B",
+            "items": [
+              {
+                "value": 1,
+                "text": "Optgroup subopción B1"
+              },
+              {
+                "value": 2,
+                "text": "Optgroup subopción B2"
+              },
+              {
+                "value": 3,
+                "text": "Optgroup subopción B3"
+              }
+            ]
+          }
+        },
+        {
+          "value": 5,
+          "text": "Opción 5"
+        },
+        {
+          "value": 6,
+          "text": "Opción 6"
+        }
+      ]
+    },
+    "visualDescription": "Dropdown select con borde gris de 1px, fondo blanco, esquinas redondeadas. Label negro en peso normal arriba del campo. Icono chevron gris apuntando hacia abajo en el extremo derecho del campo. Texto seleccionado en negro sobre fondo blanco.",
+    "_generated": {
+      "hash": "f5e3d8bfb775cbb8d86afaf0c56fa97d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:26.720Z"
+    }
+  },
+  {
+    "name": "con pista y 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": "select-3",
+      "name": "select-3",
+      "label": {
+        "text": "Esto es un label"
+      },
+      "hint": {
+        "text": "Esto es una pista."
+      },
+      "errorMessage": {
+        "text": "Esto es un mensaje de error"
+      },
+      "items": [
+        {
+          "value": 1,
+          "text": "Opción 1"
+        },
+        {
+          "value": 2,
+          "text": "Opción 2"
+        },
+        {
+          "value": 3,
+          "text": "Opción 3"
+        }
+      ]
+    },
+    "visualDescription": "Dropdown select con borde rojo de 2px, fondo blanco, esquinas redondeadas. Label negro en peso normal arriba, texto de ayuda en gris debajo del label, mensaje de error en rojo debajo del campo. Campo seleccionado con borde negro, fondo blanco, texto negro, icono X rojo a la derecha.",
+    "_generated": {
+      "hash": "c26a244e36a845de69498697ed7fe8c4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:26.720Z"
+    }
+  },
+  {
+    "name": "con anchura completa",
+    "data": {
+      "id": "select-5",
+      "name": "select-5",
+      "classes": "w-full",
+      "label": {
+        "text": "Esto es un label"
+      },
+      "items": [
+        {
+          "value": 1,
+          "text": "Opción 1"
+        },
+        {
+          "value": 2,
+          "text": "Opción 2",
+          "selected": true
+        },
+        {
+          "value": 3,
+          "text": "Opción 3",
+          "disabled": true
+        }
+      ]
+    },
+    "visualDescription": "Dropdown select ocupando el 100% del ancho del contenedor, borde gris de 1px, fondo blanco, esquinas redondeadas. Label negro en peso normal arriba del campo. Icono chevron gris apuntando hacia abajo alineado al extremo derecho. Valor seleccionado en negro sobre fondo blanco.",
+    "_generated": {
+      "hash": "fe5c3562a0204afdeebbb59c8448ea58",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:26.720Z"
+    }
+  },
+  {
+    "name": "con clases de form-group opcionales",
+    "description": "Label en línea + Select flexible y mensaje de error",
+    "data": {
+      "id": "select-6",
+      "name": "select-6",
+      "classes": "lg:flex-1",
+      "label": {
+        "text": "Label en línea:",
+        "classes": "lg:py-sm lg:mt-sm"
+      },
+      "formGroup": {
+        "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
+      },
+      "errorMessage": {
+        "text": "Esto es un mensaje de error",
+        "classes": "order-1 w-full pt-sm"
+      },
+      "items": [
+        {
+          "value": 1,
+          "text": "Opción 1"
+        },
+        {
+          "value": 2,
+          "text": "Opción 2",
+          "selected": true
+        },
+        {
+          "value": 3,
+          "text": "Opción 3",
+          "disabled": true
+        }
+      ]
+    },
+    "visualDescription": "Select desplegable con label en negro, contenedor con borde rojo de 2px, fondo blanco, y valor seleccionado. Mensaje de error en rojo debajo del campo indicando validación fallida. Altura estándar del select con flecha dropdown negra a la derecha.",
+    "_generated": {
+      "hash": "4371662f21e81c42c3f914b60f164af9",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:35.628Z"
+    }
+  },
+  {
+    "name": "transparente",
+    "data": {
+      "id": "select-7",
+      "name": "select-7",
+      "classes": "c-select--transparent",
+      "label": {
+        "text": "Esto es un label"
+      },
+      "items": [
+        {
+          "value": 1,
+          "text": "Opción 1"
+        },
+        {
+          "value": 2,
+          "text": "Opción 2",
+          "selected": true
+        },
+        {
+          "value": 3,
+          "text": "Opción 3",
+          "disabled": true
+        }
+      ]
+    },
+    "visualDescription": "Select desplegable con label en negro, valor seleccionado visible, sin borde visible o con borde muy sutil, fondo transparente o blanco. Altura estándar del componente con flecha dropdown negra. Texto descriptivo aparece entre el encabezado y el select.",
+    "_generated": {
+      "hash": "4c2e2a1e277432f3142570c3180b1afb",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:35.628Z"
+    }
+  },
+  {
+    "name": "peque",
+    "data": {
+      "id": "select-8",
+      "name": "select-8",
+      "classes": "c-select--sm",
+      "label": {
+        "text": "Esto es un label"
+      },
+      "items": [
+        {
+          "value": 1,
+          "text": "Opción 1"
+        },
+        {
+          "value": 2,
+          "text": "Opción 2",
+          "selected": true
+        },
+        {
+          "value": 3,
+          "text": "Opción 3",
+          "disabled": true
+        }
+      ]
+    },
+    "visualDescription": "Select desplegable compacto con label en negro arriba, valor seleccionado, borde gris de 1px, fondo blanco. Altura reducida del campo select con padding mínimo. Texto descriptivo entre el encabezado y el componente, flecha dropdown negra a la derecha.",
+    "_generated": {
+      "hash": "89b16841c1f253dd851c8d6c7bf7866f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:13:35.628Z"
+    }
+  }
 ] %}