desy-html 16.0.4 → 17.0.1

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

@@ -1,836 +1,836 @@
-{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
-{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
-{% from "components/input/_macro.input.njk" import componentInput %}
-
-{% macro telefonoContent(id='id') %}
-  {% call componentFieldset({
-    "legend": {
-      "text": "¿Cuál es tu número de teléfono fijo?",
-      "classes": "mb-sm sr-only"
-    }
-  }) %}
-    <div class="c-form-group">
-    {{ componentInput({
-        "label": {
-          "text": "Número de teléfono fijo"
-        },
-        "id": "telefono-" + id,
-        "name": "telefono-name-" + id
-      })  }}
-    </div>
-  {% endcall  %}
-{% endmacro %}
-
-{% macro mobileContent(id='id') %}
-  {% call componentFieldset({
-    "legend": {
-      "text": "¿Cuál es tu número de teléfono móvil?",
-      "classes": "mb-sm sr-only"
-    }
-    }) %}
-    <div class="c-form-group">
-    {{ componentInput({
-        "label": {
-          "text": "Número de teléfono móvil"
-        },
-        "id": "mobile-" + id,
-        "name": "mobile-name-" + id
-      })  }}
-    </div>
-  {% endcall  %}
-{% endmacro %}
-
-{% macro mobileErrorContent(id='id') %}
-  {% call componentFieldset({
-    "legend": {
-      "text": "¿Cuál es tu número de teléfono móvil?",
-      "classes": "mb-sm sr-only"
-    }
-    }) %}
-    <div class="c-form-group">
-      {{ componentInput({
-        "label": {
-          "text": "Número de teléfono móvil"
-        },
-        "id": "input-with-error-message-" + id,
-        "name": "test-name-" + id,
-        "errorMessage": {
-          "text": "Este campo no puede estar vacío"
-        }
-        })  }}
-    </div>
-  {% endcall  %}
-{% endmacro %}
-
-{% macro grandchildContent(id='id') %}
-  {{ componentCheckboxes({
-    "idPrefix": "grandchild-" + id,
-    "name": "grandchild-" + id,
-    "items": [
-      {
-        "name": "oficina-principal",
-        "id": "oficina-principal-id",
-        "value": "oficina-principal",
-        "text": "Oficina principal"
-      },
-      {
-        "name": "oficina-secundaria",
-        "id": "oficina-secundaria-id",
-        "value": "oficina-secundaria",
-        "text": "Oficina secundaria"
-      }
-    ]
-  }) }}
-{% endmacro %}
-
-{% macro nestedContent(id='id') %}
-  {{ componentCheckboxes({
-    "idPrefix": "with-conditional-items-checked-nested-" + id,
-    "name": "with-conditional-items-checked-nested-" + id,
-    "items": [
-      {
-        "value": "oficinas-de-registro",
-        "text": "Oficinas de registro",
-        "checked": true,
-        "conditional": {
-          "html": grandchildContent(id).val
-        }
-      }
-    ]
-  }) }}
-{% endmacro %}
-
-
-
-{% set exampleComponent = "checkboxes" %}
-{% set examples =  [{
-    "name": "por defecto",
-    "data": {
-      "idPrefix": "default",
-      "name": "default",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?"
-        }
-      },
-      "hint": {
-        "text": "Si lo deseas puedes seleccionar varios elementos."
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correo-postal",
-          "text": "Correo postal"
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono"
-        }
-      ]
-    },
-    "visualDescription": "Grupo de tres checkboxes sin marcar con labels en negro. Encabezado en negrita negro pregunta sobre preferencias de contacto, seguido de texto gris instructivo. Fondo blanco con borde gris claro delimitando el componente completo.",
-    "_generated": {
-      "hash": "b35e6609f05ea9ee328a42e0da095a61",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:52:53.918Z"
-    }
-  },
-  {
-    "name": "Con id y name",
-    "data": {
-      "idPrefix": "with-id-and-name",
-      "name": "with-id-and-name",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?"
-        }
-      },
-      "hint": {
-        "text": "Si lo deseas puedes seleccionar varios elementos."
-      },
-      "items": [
-        {
-          "name": "correo-electronico",
-          "id": "correo-electronico-id",
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "name": "correo-postal",
-          "id": "correo-postal-id",
-          "value": "correo-postal",
-          "text": "Correo postal"
-        }
-      ]
-    },
-    "visualDescription": "Grupo de dos checkboxes sin marcar con labels en negro. Encabezado en negrita negro pregunta sobre preferencias de contacto, seguido de texto gris instructivo. Fondo blanco con borde gris claro delimitando el componente completo.",
-    "_generated": {
-      "hash": "e0540ce6682a0c05028cf634d18893d4",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:52:53.918Z"
-    }
-  },
-  {
-    "name": "con pistas en los items",
-    "data": {
-      "idPrefix": "hints-on-items",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?",
-          "isPageHeading": true
-        }
-      },
-      "items": [
-        {
-          "name": "correo-electronico",
-          "id": "correo-electronico-a",
-          "value": "desy-correo-electronico",
-          "text": "Correo electrónico",
-          "hint": {
-            "text": "Asegúrate de que el correo no llega a la bandeja de spam."
-          }
-        },
-        {
-          "name": "correo-postal",
-          "id": "desy-correo-postal-a",
-          "value": "desy-correo-postal-a",
-          "text": "Correo postal",
-          "hint": {
-            "text": "Asegúrate de haber introducido la dirección postal correctamente."
-          }
-        }
-      ]
-    },
-    "visualDescription": "Grupo de dos checkboxes sin marcar con labels en negro y texto de ayuda gris debajo de cada opción. Encabezado en negrita negro pregunta sobre preferencias de contacto. Fondo blanco con borde gris claro delimitando el componente completo, texto secundario en gris proporciona contexto adicional para cada checkbox.",
-    "_generated": {
-      "hash": "004cf6deb01dee8dd239e4dae0d0e4c2",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:52:53.918Z"
-    }
-  },
-  {
-    "name": "Con líneas divisorias",
-    "data": {
-      "idPrefix": "has-dividers",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?"
-        }
-      },
-      "hint": {
-        "text": "Si lo deseas puedes seleccionar varios elementos."
-      },
-      "hasDividers": true,
-      "items": [
-        {
-          "name": "correo-electronico",
-          "id": "correo-electronico-b",
-          "value": "desy-correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "name": "correo-postal",
-          "id": "desy-correo-postal-b",
-          "value": "desy-correo-postal-b",
-          "text": "Correo postal",
-          "hint": {
-            "text": "Asegúrate de haber introducido la dirección postal correctamente."
-          }
-        },
-        {
-          "name": "telefono",
-          "id": "telefono-b",
-          "value": "telefono",
-          "text": "Teléfono",
-          "checked": true,
-          "conditional": {
-            "html": telefonoContent('1').val
-          }
-        },
-        {
-          "name": "correo-postal",
-          "id": "desy-correo-postal-c",
-          "value": "desy-correo-postal-c",
-          "text": "Correo postal",
-          "hint": {
-            "text": "Asegúrate de haber introducido la dirección postal correctamente."
-          }
-        }
-      ]
-    },
-    "visualDescription": "Grupo de checkboxes con bordes grises claros separando cada opción. Encabezado en negro con texto de ayuda en rojo debajo. Checkboxes con cuadrados blancos de borde gris, labels en negro, texto de ayuda gris debajo de cada opción. Cuando se selecciona teléfono, aparece un campo de texto con label gris y borde gris.",
-    "_generated": {
-      "hash": "afe43a55114c0c623e38954b0e90dc63",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:03.466Z"
-    }
-  },
-  {
-    "name": "Con clases de CSS aplicadas",
-    "description": "Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.",
-    "data": {
-      "idPrefix": "classes",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "name": "correo-electronico",
-          "id": "correo-electronico-c",
-          "value": "desy-correo-electronico",
-          "text": "Correo electrónico",
-          "hint": {
-            "text": "Asegúrate de que el correo no llega a la bandeja de spam."
-          },
-          "classes": "bg-primary-light"
-        },
-        {
-          "name": "correo-postal",
-          "id": "desy-correo-postal-d",
-          "value": "desy-correo-postal-d",
-          "text": "Correo postal",
-          "hint": {
-            "text": "Asegúrate de haber introducido la dirección postal correctamente."
-          },
-          "classes": "bg-neutral-lighter"
-        }
-      ]
-    },
-    "visualDescription": "Grupo de checkboxes con fondo azul claro en la primera opción. Título en negro arriba del grupo. Dos checkboxes con cuadrados blancos de borde gris, labels en negro, y texto de ayuda gris debajo de cada label. Sin bordes divisorios entre opciones.",
-    "_generated": {
-      "hash": "b2fb4e8f402a12ecbca2df64fa9869b1",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:03.466Z"
-    }
-  },
-  {
-    "name": "con item deshabilitado",
-    "data": {
-      "idPrefix": "disabled-item",
-      "name": "colours",
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correo-postal",
-          "text": "Correo postal",
-          "disabled": true,
-          "checked": true
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono",
-          "disabled": true
-        }
-      ]
-    },
-    "visualDescription": "Grupo de tres checkboxes sin bordes divisorios. Primer checkbox sin marcar con cuadrado blanco de borde gris y label negro. Segundo checkbox marcado con check verde y label negro. Tercer checkbox deshabilitado con cuadrado gris, label gris atenuado, sin posibilidad de interacción.",
-    "_generated": {
-      "hash": "d08d81692b28f58c743b0054b2605af8",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:03.466Z"
-    }
-  },
-  {
-    "name": "con un legend del tamaño de un encabezado h2",
-    "data": {
-      "idPrefix": "medium-legend",
-      "name": "medium-legend",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?",
-          "classes": "c-h2"
-        }
-      },
-      "hint": {
-        "text": "Si lo deseas puedes seleccionar varios elementos."
-      },
-      "errorMessage": {
-        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correp-postal",
-          "text": "Correo postal"
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono"
-        }
-      ]
-    },
-    "visualDescription": "Fieldset con borde gris claro de 1px, encabezado grande en texto negro preguntando sobre preferencias de contacto. Tres checkboxes verticales sin marcar (Correo electrónico, Correo postal, Teléfono) con labels en texto negro. Mensaje de error en rojo arriba indicando que se debe seleccionar al menos una opción.",
-    "_generated": {
-      "hash": "b08d35753a0856f5116cc7d9db4b21a2",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:13.889Z"
-    }
-  },
-  {
-    "name": "sin fieldset",
-    "description": "Usa este ejemplo si vas a escribir tú mismo un fieldset, rodeándolo. Recuerda que el uso de fieldset es necesario por accesibilidad.",
-    "data": {
-      "idPrefix": "without-fieldset",
-      "name": "without-fieldset",
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correp-postal",
-          "text": "Correo postal"
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono"
-        }
-      ]
-    },
-    "visualDescription": "Grupo de tres checkboxes verticales sin borde contenedor, con título pequeño \"sin fieldset\" en gris oscuro arriba. Checkboxes sin marcar (Correo electrónico, Correo postal, Teléfono) con labels en texto negro, presentados en lista vertical sobre fondo blanco sin bordes delimitadores.",
-    "_generated": {
-      "hash": "0032e381b49bc66d24b36aa0a9d82439",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:13.889Z"
-    }
-  },
-  {
-    "name": "con una sóla opción usando 'aria-describedby' en el input",
-    "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": {
-      "idPrefix": "describedby",
-      "name": "describedby",
-      "errorMessage": {
-        "text": "Por favor, debes aceptar los términos y condiciones. Soluciona el error."
-      },
-      "items": [
-        {
-          "value": "acepto",
-          "html": "Acepto los <a href='#' target='_blank' class='c-link' title='Se abre en ventana nueva del navegador'>términos y condiciones</a>"
-        }
-      ]
-    },
-    "visualDescription": "Fieldset con borde gris claro de 1px, título descriptivo en texto negro sobre el uso de aria-describedby. Checkbox individual sin marcar con label \"Acepto los\" seguido de enlace azul subrayado \"términos y condiciones\". Mensaje de error en rojo arriba solicitando aceptar los términos.",
-    "_generated": {
-      "hash": "e10048a2729a00674e0e1e8ea1cf6d70",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:13.889Z"
-    }
-  },
-  {
-    "name": "con una sóla opción (y pista) usando 'aria-describedby' en el input",
-    "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": {
-      "name": "t-and-c-with-hint",
-      "errorMessage": {
-        "text": "Por favor, debes aceptar los términos y condiciones. Soluciona el error."
-      },
-      "items": [
-        {
-          "value": "acepto",
-          "html": "Acepto los <a href='#' target='_blank' class='c-link' title='Se abre en ventana nueva del navegador'>términos y condiciones</a>",
-          "hint": {
-            "text": "Puedes visualizarlos en ventana nueva del navegador"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Checkbox sin marcar con borde rojo de 2px, acompañado de label en negro con texto secundario gris debajo. Fondo blanco, contenedor con borde gris claro. Mensaje de error en rojo encima del checkbox indica validación pendiente.",
-    "_generated": {
-      "hash": "f0fab73c491454b5e79f07634d9bc6f2",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:22.839Z"
-    }
-  },
-  {
-    "name": "con fieldset 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": {
-      "name": "colours",
-      "errorMessage": {
-        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
-      },
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correo-postal",
-          "text": "Correo postal"
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono"
-        }
-      ]
-    },
-    "visualDescription": "Grupo de tres checkboxes sin marcar con bordes rojos de 2px, labels en negro (\"Correo electrónico\", \"Correo postal\", \"Teléfono\"). Título de pregunta en negro arriba, mensaje de error en rojo debajo del título. Fondo blanco, contenedor con borde gris claro.",
-    "_generated": {
-      "hash": "90be10d247ee63f67a33ffea19d03878",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:22.839Z"
-    }
-  },
-  {
-    "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": {
-      "idPrefix": "error-message",
-      "name": "error-message",
-      "errorMessage": {
-        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
-      },
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correp-postal",
-          "text": "Correo postal"
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono"
-        }
-      ]
-    },
-    "visualDescription": "Grupo de tres checkboxes sin marcar con bordes rojos de 2px, labels en negro para cada opción de contacto. Pregunta en negro encima, mensaje de validación en rojo debajo de la pregunta. Fondo blanco, layout vertical con espaciado uniforme entre elementos.",
-    "_generated": {
-      "hash": "487a697392d34c23813bb0cd56d14c98",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:22.839Z"
-    }
-  },
-  {
-    "name": "con mensaje de error y pistas en los items",
-    "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": {
-      "idPrefix": "error-and-hints",
-      "name": "error-and-hints",
-      "errorMessage": {
-        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
-      },
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico",
-          "hint": {
-            "text": "Asegúrate de que nuestros correos no lleguen a la bandeja de spam."
-          }
-        },
-        {
-          "value": "correo-postal",
-          "text": "Correo postal",
-          "hint": {
-            "text": "Asegúrate de haber introducido correctamente tu dirección."
-          }
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono",
-          "hint": {
-            "text": "Sólo enviamos mensajes durante el día."
-          }
-        }
-      ]
-    },
-    "visualDescription": "Grupo de checkboxes con borde rojo de 2px y fondo blanco. El título principal aparece en negro, seguido de texto de error en rojo con enlace subrayado en rojo. Cada checkbox sin marcar tiene borde gris, con label en negro y texto descriptivo secundario en gris debajo de cada opción.",
-    "_generated": {
-      "hash": "12763a8865daa39641e8fa91793786d2",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:32.934Z"
-    }
-  },
-  {
-    "name": "con un texto de item muy largo",
-    "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": {
-      "idPrefix": "long-option",
-      "name": "long-option",
-      "hint": {
-        "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
-      },
-      "errorMessage": {
-        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Soluciona el error."
-      },
-      "fieldset": {
-        "legend": {
-          "text": "Maecenas faucibus mollis interdum?"
-        }
-      },
-      "items": [
-        {
-          "value": "nullam",
-          "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
-        },
-        {
-          "value": "aenean",
-          "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
-        },
-        {
-          "value": "fusce",
-          "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
-        }
-      ]
-    },
-    "visualDescription": "Grupo de checkboxes con borde gris de 1px y fondo blanco. El título principal en negro va seguido de subtítulo en gris y párrafo con texto negro y fragmentos en rojo subrayado. Dos checkboxes sin marcar con borde gris, cada uno con label en negro seguido de múltiples líneas de texto descriptivo en gris que ocupan varios renglones.",
-    "_generated": {
-      "hash": "2aafe56aa2d1c450b218c2ab11afdf0b",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:32.934Z"
-    }
-  },
-  {
-    "name": "con items condicionales",
-    "description": "El contenido de cada condicional es una agrupación, y como tal, se deben agrupar con una etiqueta <code>&lt;fieldset&gt;</code> o bien de una etiqueta <code>&lt;div&gt;</code> con <code>role=\"group\"</code> que tenga un <code>aria-label</code> o <code>aria-labelledby</code>.",
-    "data": {
-      "idPrefix": "with-conditional-items",
-      "name": "with-conditional-items",
-      "idPrefix": "how-contacted",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo quieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico",
-          "conditional": {
-            "html": mobileContent('1').val
-          }
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono",
-          "conditional": {
-            "html": telefonoContent('2').val
-          }
-        },
-        {
-          "value": "mensaje-SMS",
-          "text": "Mensaje SMS",
-          "conditional": {
-            "html": mobileContent('2').val
-          }
-        }
-      ]
-    },
-    "visualDescription": "Grupo de checkboxes con borde gris de 1px y fondo blanco. Título pregunta en negro encima de tres opciones verticales. Cada checkbox sin marcar tiene borde gris con label en negro alineado a la derecha, sin texto descriptivo adicional.",
-    "_generated": {
-      "hash": "41879fc0c8d6643feb4ede218bf6374b",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:32.934Z"
-    }
-  },
-  {
-    "name": "con item condicional seleccionado",
-    "description": "Usa el parámetro <code>'checked': true</code> para mostrar un item condicional seleccionado. El contenido de cada condicional es una agrupación, y como tal, se deben agrupar con una etiqueta <code>&lt;fieldset&gt;</code> o bien de una etiqueta <code>&lt;div&gt;</code> con <code>role=\"group\"</code> que tenga un <code>aria-label</code> o <code>aria-labelledby</code>.",
-    "data": {
-      "idPrefix": "with-conditional-items-checked",
-      "name": "with-conditional-items-checked",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo quieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico",
-          "conditional": {
-            "html": mobileContent('3').val
-          }
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono",
-          "checked": true,
-          "conditional": {
-            "html": telefonoContent('3').val
-          }
-        },
-        {
-          "value": "mensaje-SMS",
-          "text": "Mensaje SMS",
-          "conditional": {
-            "html": mobileContent('4').val
-          }
-        }
-      ]
-    },
-    "visualDescription": "Grupo de checkboxes con título en texto negro. Checkbox \"Teléfono\" marcado con checkmark blanco en fondo azul, revelando label \"Número de teléfono fijo\" en negro y campo de texto rectangular con borde gris. Checkboxes \"Correo electrónico\" y \"Mensaje SMS\" desmarcados con borde gris oscuro y fondo blanco.",
-    "_generated": {
-      "hash": "1b3fc7a37bb15b87d05330e064bf6043",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:42.047Z"
-    }
-  },
-  {
-    "name": "con clases opcionales del form-group mostrando un error del grupo",
-    "data": {
-      "idPrefix": "optional-classes-showing-error",
-      "name": "optional-classes-showing-error",
-      "formGroup": {
-        "classes": "c-form-group--error"
-      },
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo quieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico",
-          "conditional": {
-            "html": mobileContent('5').val
-          }
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono",
-          "checked": true,
-          "conditional": {
-            "html": mobileErrorContent('1').val
-          }
-        },
-        {
-          "value": "mensaje-SMS",
-          "text": "Mensaje SMS",
-          "conditional": {
-            "html": mobileContent('6').val
-          }
-        }
-      ]
-    },
-    "visualDescription": "Grupo de checkboxes con título en texto negro. Checkbox \"Teléfono\" marcado con checkmark blanco en fondo azul, revelando label \"Número de teléfono móvil\" en negro, texto de error en rojo, y campo de texto con borde rojo grueso. Checkboxes \"Correo electrónico\" y \"Mensaje SMS\" desmarcados con borde rojo.",
-    "_generated": {
-      "hash": "2736892fbda93848e5d2988f108818f1",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:42.047Z"
-    }
-  },
-  {
-    "name": "peque",
-    "data": {
-      "idPrefix": "small",
-      "name": "peque",
-      "classes": "c-checkboxes--sm",
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico",
-          "classes": "-mt-base",
-          "label": {
-            "classes": "text-sm -mt-1"
-          }
-        },
-        {
-          "value": "correo-postal",
-          "text": "Correo postal",
-          "classes": "-mt-base",
-          "label": {
-            "classes": "text-sm -mt-1"
-          }
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono",
-          "classes": "-mt-base",
-          "label": {
-            "classes": "text-sm -mt-1"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Lista vertical de tres checkboxes sin marcar: cada checkbox tiene borde gris oscuro y fondo blanco. Labels en texto negro regular alineados a la derecha de cada checkbox. Espaciado compacto entre elementos.",
-    "_generated": {
-      "hash": "17662ee9b3cb12d4d68cdca15572f6c6",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:42.047Z"
-    }
-  },
-  {
-    "name": "indeterminado",
-    "description": "Usando el parámetro <code>'isIndeterminate': true</code> podemos crear un item del checkbox que tenga 3 estados: marcado, desmarcado o indeterminado. El estado indeterminado expresa que hay sólo algún item seleccionado pero no todos. Útil para selecciones múltiples.",
-    "data": {
-      "idPrefix": "indeterminate",
-      "name": "indeterminate",
-      "classes": "c-checkboxes--sm",
-      "items": [
-        {
-          "value": "indeterminate",
-          "text": "1 elemento seleccionado",
-          "isIndeterminate": true,
-          "classes": "-mt-base",
-          "label": {
-            "classes": "text-sm -mt-1"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Checkbox de tamaño pequeño con borde gris oscuro de 1px y fondo blanco, conteniendo un guion horizontal gris en el centro indicando estado indeterminado. Label de texto negro normal alineado a la derecha del checkbox, leyendo \"1 elemento seleccionado\".",
-    "_generated": {
-      "hash": "655e826fbb1a0317ca2018c37878a04d",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:48.604Z"
-    }
-  },
-  {
-    "name": "indeterminado marcado",
-    "description": "Usando los parámetros <code>'isIndeterminate': true</code> y <code>'indeterminateChecked': true</code> podemos marcar como estado indeterminado un item que sea de tipo indeterminado.",
-    "data": {
-      "idPrefix": "indeterminate-checked",
-      "name": "indeterminate-checked",
-      "classes": "c-checkboxes--sm",
-      "items": [
-        {
-          "value": "indeterminate-checked-item",
-          "text": "1 elemento seleccionado",
-          "isIndeterminate": true,
-          "indeterminateChecked": true,
-          "checked": false,
-          "classes": "-mt-base",
-          "label": {
-            "classes": "text-sm -mt-1"
-          }
-        }
-      ]
-    },
-    "visualDescription": "Checkbox de tamaño pequeño con borde gris oscuro de 1px y fondo blanco, conteniendo un guion horizontal gris en el centro indicando estado indeterminado. Label de texto negro normal alineado a la derecha del checkbox, leyendo \"1 elemento seleccionado\".",
-    "_generated": {
-      "hash": "5828c23f8c6e24052da6398ec22f32f4",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T18:53:48.604Z"
-    }
-  }
+{% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
+{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
+{% from "components/input/_macro.input.njk" import componentInput %}
+
+{% macro telefonoContent(id='id') %}
+  {% call componentFieldset({
+    "legend": {
+      "text": "¿Cuál es tu número de teléfono fijo?",
+      "classes": "mb-sm sr-only"
+    }
+  }) %}
+    <div class="c-form-group">
+    {{ componentInput({
+        "label": {
+          "text": "Número de teléfono fijo"
+        },
+        "id": "telefono-" + id,
+        "name": "telefono-name-" + id
+      })  }}
+    </div>
+  {% endcall  %}
+{% endmacro %}
+
+{% macro mobileContent(id='id') %}
+  {% call componentFieldset({
+    "legend": {
+      "text": "¿Cuál es tu número de teléfono móvil?",
+      "classes": "mb-sm sr-only"
+    }
+    }) %}
+    <div class="c-form-group">
+    {{ componentInput({
+        "label": {
+          "text": "Número de teléfono móvil"
+        },
+        "id": "mobile-" + id,
+        "name": "mobile-name-" + id
+      })  }}
+    </div>
+  {% endcall  %}
+{% endmacro %}
+
+{% macro mobileErrorContent(id='id') %}
+  {% call componentFieldset({
+    "legend": {
+      "text": "¿Cuál es tu número de teléfono móvil?",
+      "classes": "mb-sm sr-only"
+    }
+    }) %}
+    <div class="c-form-group">
+      {{ componentInput({
+        "label": {
+          "text": "Número de teléfono móvil"
+        },
+        "id": "input-with-error-message-" + id,
+        "name": "test-name-" + id,
+        "errorMessage": {
+          "text": "Este campo no puede estar vacío"
+        }
+        })  }}
+    </div>
+  {% endcall  %}
+{% endmacro %}
+
+{% macro grandchildContent(id='id') %}
+  {{ componentCheckboxes({
+    "idPrefix": "grandchild-" + id,
+    "name": "grandchild-" + id,
+    "items": [
+      {
+        "name": "oficina-principal",
+        "id": "oficina-principal-id",
+        "value": "oficina-principal",
+        "text": "Oficina principal"
+      },
+      {
+        "name": "oficina-secundaria",
+        "id": "oficina-secundaria-id",
+        "value": "oficina-secundaria",
+        "text": "Oficina secundaria"
+      }
+    ]
+  }) }}
+{% endmacro %}
+
+{% macro nestedContent(id='id') %}
+  {{ componentCheckboxes({
+    "idPrefix": "with-conditional-items-checked-nested-" + id,
+    "name": "with-conditional-items-checked-nested-" + id,
+    "items": [
+      {
+        "value": "oficinas-de-registro",
+        "text": "Oficinas de registro",
+        "checked": true,
+        "conditional": {
+          "html": grandchildContent(id).val
+        }
+      }
+    ]
+  }) }}
+{% endmacro %}
+
+
+
+{% set exampleComponent = "checkboxes" %}
+{% set examples =  [{
+    "name": "por defecto",
+    "data": {
+      "idPrefix": "default",
+      "name": "default",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?"
+        }
+      },
+      "hint": {
+        "text": "Si lo deseas puedes seleccionar varios elementos."
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "value": "correo-postal",
+          "text": "Correo postal"
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono"
+        }
+      ]
+    },
+    "visualDescription": "Grupo de checkboxes sin marcar con labels en negro. Encabezado en negrita negro haciendo pregunta sobre preferencias de contacto.",
+    "_generated": {
+      "hash": "b35e6609f05ea9ee328a42e0da095a61",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:53.918Z"
+    }
+  },
+  {
+    "name": "Con id y name",
+    "data": {
+      "idPrefix": "with-id-and-name",
+      "name": "with-id-and-name",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?"
+        }
+      },
+      "hint": {
+        "text": "Si lo deseas puedes seleccionar varios elementos."
+      },
+      "items": [
+        {
+          "name": "correo-electronico",
+          "id": "correo-electronico-id",
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "name": "correo-postal",
+          "id": "correo-postal-id",
+          "value": "correo-postal",
+          "text": "Correo postal"
+        }
+      ]
+    },
+    "visualDescription": "Grupo de checkboxes sin marcar con labels en negro. Encabezado en negrita negro haciendo pregunta sobre preferencias de contacto. Cada checkbox tiene identificador único y nombre propio.",
+    "_generated": {
+      "hash": "e0540ce6682a0c05028cf634d18893d4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:53.918Z"
+    }
+  },
+  {
+    "name": "con pistas en los items",
+    "data": {
+      "idPrefix": "hints-on-items",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?",
+          "isPageHeading": true
+        }
+      },
+      "items": [
+        {
+          "name": "correo-electronico",
+          "id": "correo-electronico-a",
+          "value": "desy-correo-electronico",
+          "text": "Correo electrónico",
+          "hint": {
+            "text": "Asegúrate de que el correo no llega a la bandeja de spam."
+          }
+        },
+        {
+          "name": "correo-postal",
+          "id": "desy-correo-postal-a",
+          "value": "desy-correo-postal-a",
+          "text": "Correo postal",
+          "hint": {
+            "text": "Asegúrate de haber introducido la dirección postal correctamente."
+          }
+        }
+      ]
+    },
+    "visualDescription": "Grupo de checkboxes sin marcar con labels en negro y texto de ayuda gris debajo de cada opción. Encabezado en negrita negro pregunta sobre preferencias de contacto. Texto secundario en gris proporciona contexto adicional para cada checkbox.",
+    "_generated": {
+      "hash": "004cf6deb01dee8dd239e4dae0d0e4c2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:52:53.918Z"
+    }
+  },
+  {
+    "name": "Con líneas divisorias",
+    "data": {
+      "idPrefix": "has-dividers",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?"
+        }
+      },
+      "hint": {
+        "text": "Si lo deseas puedes seleccionar varios elementos."
+      },
+      "hasDividers": true,
+      "items": [
+        {
+          "name": "correo-electronico",
+          "id": "correo-electronico-b",
+          "value": "desy-correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "name": "correo-postal",
+          "id": "desy-correo-postal-b",
+          "value": "desy-correo-postal-b",
+          "text": "Correo postal",
+          "hint": {
+            "text": "Asegúrate de haber introducido la dirección postal correctamente."
+          }
+        },
+        {
+          "name": "telefono",
+          "id": "telefono-b",
+          "value": "telefono",
+          "text": "Teléfono",
+          "checked": true,
+          "conditional": {
+            "html": telefonoContent('1').val
+          }
+        },
+        {
+          "name": "correo-postal",
+          "id": "desy-correo-postal-c",
+          "value": "desy-correo-postal-c",
+          "text": "Correo postal",
+          "hint": {
+            "text": "Asegúrate de haber introducido la dirección postal correctamente."
+          }
+        }
+      ]
+    },
+    "visualDescription": "Grupo de checkboxes con bordes grises claros separando cada opción. Encabezado en negro con texto de ayuda en rojo debajo. Checkboxes con cuadrados blancos de borde gris, labels en negro, texto de ayuda gris debajo de cada opción. Cuando se selecciona teléfono, aparece un campo de texto con label gris y borde gris.",
+    "_generated": {
+      "hash": "afe43a55114c0c623e38954b0e90dc63",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:03.466Z"
+    }
+  },
+  {
+    "name": "Con clases de CSS aplicadas",
+    "description": "Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.",
+    "data": {
+      "idPrefix": "classes",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "name": "correo-electronico",
+          "id": "correo-electronico-c",
+          "value": "desy-correo-electronico",
+          "text": "Correo electrónico",
+          "hint": {
+            "text": "Asegúrate de que el correo no llega a la bandeja de spam."
+          },
+          "classes": "bg-primary-light"
+        },
+        {
+          "name": "correo-postal",
+          "id": "desy-correo-postal-d",
+          "value": "desy-correo-postal-d",
+          "text": "Correo postal",
+          "hint": {
+            "text": "Asegúrate de haber introducido la dirección postal correctamente."
+          },
+          "classes": "bg-neutral-lighter"
+        }
+      ]
+    },
+    "visualDescription": "Grupo de checkboxes con fondo azul claro en la primera opción. Título en negro arriba del grupo. Dos checkboxes con cuadrados blancos de borde gris, labels en negro, y texto de ayuda gris debajo de cada label. Sin bordes divisorios entre opciones.",
+    "_generated": {
+      "hash": "b2fb4e8f402a12ecbca2df64fa9869b1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:03.466Z"
+    }
+  },
+  {
+    "name": "con item deshabilitado",
+    "data": {
+      "idPrefix": "disabled-item",
+      "name": "colours",
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "value": "correo-postal",
+          "text": "Correo postal",
+          "disabled": true,
+          "checked": true
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono",
+          "disabled": true
+        }
+      ]
+    },
+    "visualDescription": "Grupo de checkboxes sin bordes divisorios. Primer checkbox sin marcar con cuadrado blanco de borde gris y label negro. Segundo checkbox marcado con check verde y label negro. Tercer checkbox deshabilitado con cuadrado gris, label gris atenuado, sin posibilidad de interacción.",
+    "_generated": {
+      "hash": "d08d81692b28f58c743b0054b2605af8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:03.466Z"
+    }
+  },
+  {
+    "name": "con un legend del tamaño de un encabezado h2",
+    "data": {
+      "idPrefix": "medium-legend",
+      "name": "medium-legend",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?",
+          "classes": "c-h2"
+        }
+      },
+      "hint": {
+        "text": "Si lo deseas puedes seleccionar varios elementos."
+      },
+      "errorMessage": {
+        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "value": "correp-postal",
+          "text": "Correo postal"
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono"
+        }
+      ]
+    },
+    "visualDescription": "Fieldset con borde gris claro de 1px, encabezado grande en texto negro preguntando sobre preferencias de contacto. Tres checkboxes verticales sin marcar (Correo electrónico, Correo postal, Teléfono) con labels en texto negro. Mensaje de error en rojo arriba indicando que se debe seleccionar al menos una opción.",
+    "_generated": {
+      "hash": "b08d35753a0856f5116cc7d9db4b21a2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:13.889Z"
+    }
+  },
+  {
+    "name": "sin fieldset",
+    "description": "Usa este ejemplo si vas a escribir tú mismo un fieldset, rodeándolo. Recuerda que el uso de fieldset es necesario por accesibilidad.",
+    "data": {
+      "idPrefix": "without-fieldset",
+      "name": "without-fieldset",
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "value": "correp-postal",
+          "text": "Correo postal"
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono"
+        }
+      ]
+    },
+    "visualDescription": "Grupo de checkboxes verticales sin borde contenedor, con título pequeño  en gris oscuro arriba. Checkboxes sin marcar (Correo electrónico, Correo postal, Teléfono) con labels en texto negro, presentados en lista vertical sobre fondo blanco sin bordes delimitadores.",
+    "_generated": {
+      "hash": "0032e381b49bc66d24b36aa0a9d82439",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:13.889Z"
+    }
+  },
+  {
+    "name": "con una sóla opción usando 'aria-describedby' en el input",
+    "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": {
+      "idPrefix": "describedby",
+      "name": "describedby",
+      "errorMessage": {
+        "text": "Por favor, debes aceptar los términos y condiciones. Soluciona el error."
+      },
+      "items": [
+        {
+          "value": "acepto",
+          "html": "Acepto los <a href='#' target='_blank' class='c-link' title='Se abre en ventana nueva del navegador'>términos y condiciones</a>"
+        }
+      ]
+    },
+    "visualDescription": "Fieldset con borde gris claro de 1px, título descriptivo en texto negro sobre el uso de aria-describedby. Checkbox individual sin marcar con label. Mensaje de error en rojo arriba solicitando aceptar los términos.",
+    "_generated": {
+      "hash": "e10048a2729a00674e0e1e8ea1cf6d70",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:13.889Z"
+    }
+  },
+  {
+    "name": "con una sóla opción (y pista) usando 'aria-describedby' en el input",
+    "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": {
+      "name": "t-and-c-with-hint",
+      "errorMessage": {
+        "text": "Por favor, debes aceptar los términos y condiciones. Soluciona el error."
+      },
+      "items": [
+        {
+          "value": "acepto",
+          "html": "Acepto los <a href='#' target='_blank' class='c-link' title='Se abre en ventana nueva del navegador'>términos y condiciones</a>",
+          "hint": {
+            "text": "Puedes visualizarlos en ventana nueva del navegador"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Checkbox sin marcar con borde rojo de 2px, acompañado de label en negro con texto secundario gris debajo. Mensaje de error en rojo encima del checkbox indica validación pendiente.",
+    "_generated": {
+      "hash": "f0fab73c491454b5e79f07634d9bc6f2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:22.839Z"
+    }
+  },
+  {
+    "name": "con fieldset 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": {
+      "name": "colours",
+      "errorMessage": {
+        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
+      },
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "value": "correo-postal",
+          "text": "Correo postal"
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono"
+        }
+      ]
+    },
+    "visualDescription": "Grupo de checkboxes sin marcar con bordes rojos de 2px, labels en negro. Título de pregunta en negro arriba, mensaje de error en rojo debajo del título.",
+    "_generated": {
+      "hash": "90be10d247ee63f67a33ffea19d03878",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:22.839Z"
+    }
+  },
+  {
+    "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": {
+      "idPrefix": "error-message",
+      "name": "error-message",
+      "errorMessage": {
+        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
+      },
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico"
+        },
+        {
+          "value": "correp-postal",
+          "text": "Correo postal"
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono"
+        }
+      ]
+    },
+    "visualDescription": "Grupo de checkboxes sin marcar con bordes rojos de 2px, labels en negro para cada opción de contacto. Pregunta en negro encima, mensaje de validación en rojo debajo de la pregunta. Fondo blanco, layout vertical con espaciado uniforme entre elementos.",
+    "_generated": {
+      "hash": "487a697392d34c23813bb0cd56d14c98",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:22.839Z"
+    }
+  },
+  {
+    "name": "con mensaje de error y pistas en los items",
+    "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": {
+      "idPrefix": "error-and-hints",
+      "name": "error-and-hints",
+      "errorMessage": {
+        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
+      },
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo prefieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
+          "hint": {
+            "text": "Asegúrate de que nuestros correos no lleguen a la bandeja de spam."
+          }
+        },
+        {
+          "value": "correo-postal",
+          "text": "Correo postal",
+          "hint": {
+            "text": "Asegúrate de haber introducido correctamente tu dirección."
+          }
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono",
+          "hint": {
+            "text": "Sólo enviamos mensajes durante el día."
+          }
+        }
+      ]
+    },
+    "visualDescription": "Grupo de checkboxes con borde rojo de 2px y fondo blanco. El título principal aparece en negro, seguido de texto de error en rojo con enlace subrayado en rojo. Cada checkbox sin marcar tiene borde gris, con label en negro y texto descriptivo secundario en gris debajo de cada opción.",
+    "_generated": {
+      "hash": "12763a8865daa39641e8fa91793786d2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:32.934Z"
+    }
+  },
+  {
+    "name": "con un texto de item muy largo",
+    "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": {
+      "idPrefix": "long-option",
+      "name": "long-option",
+      "hint": {
+        "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
+      },
+      "errorMessage": {
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Soluciona el error."
+      },
+      "fieldset": {
+        "legend": {
+          "text": "Maecenas faucibus mollis interdum?"
+        }
+      },
+      "items": [
+        {
+          "value": "nullam",
+          "text": "Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
+        },
+        {
+          "value": "aenean",
+          "text": "Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
+        },
+        {
+          "value": "fusce",
+          "text": "Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
+        }
+      ]
+    },
+    "visualDescription": "Grupo de checkboxes con borde gris de 1px y fondo blanco. El título principal en negro va seguido de subtítulo en gris y párrafo con texto negro y fragmentos en rojo subrayado. Dos checkboxes sin marcar con borde gris, cada uno con label en negro seguido de múltiples líneas de texto descriptivo en gris que ocupan varios renglones.",
+    "_generated": {
+      "hash": "2aafe56aa2d1c450b218c2ab11afdf0b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:32.934Z"
+    }
+  },
+  {
+    "name": "con items condicionales",
+    "description": "El contenido de cada condicional es una agrupación, y como tal, se deben agrupar con una etiqueta <code>&lt;fieldset&gt;</code> o bien de una etiqueta <code>&lt;div&gt;</code> con <code>role=\"group\"</code> que tenga un <code>aria-label</code> o <code>aria-labelledby</code>.",
+    "data": {
+      "idPrefix": "with-conditional-items",
+      "name": "with-conditional-items",
+      "idPrefix": "how-contacted",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo quieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
+          "conditional": {
+            "html": mobileContent('1').val
+          }
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono",
+          "conditional": {
+            "html": telefonoContent('2').val
+          }
+        },
+        {
+          "value": "mensaje-SMS",
+          "text": "Mensaje SMS",
+          "conditional": {
+            "html": mobileContent('2').val
+          }
+        }
+      ]
+    },
+    "visualDescription": "Grupo de checkboxes con borde gris de 1px y fondo blanco. Título pregunta en negro encima de tres opciones verticales. Cada checkbox sin marcar tiene borde gris con label en negro alineado a la derecha, sin texto descriptivo adicional.",
+    "_generated": {
+      "hash": "41879fc0c8d6643feb4ede218bf6374b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:32.934Z"
+    }
+  },
+  {
+    "name": "con item condicional seleccionado",
+    "description": "Usa el parámetro <code>'checked': true</code> para mostrar un item condicional seleccionado. El contenido de cada condicional es una agrupación, y como tal, se deben agrupar con una etiqueta <code>&lt;fieldset&gt;</code> o bien de una etiqueta <code>&lt;div&gt;</code> con <code>role=\"group\"</code> que tenga un <code>aria-label</code> o <code>aria-labelledby</code>.",
+    "data": {
+      "idPrefix": "with-conditional-items-checked",
+      "name": "with-conditional-items-checked",
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo quieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
+          "conditional": {
+            "html": mobileContent('3').val
+          }
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono",
+          "checked": true,
+          "conditional": {
+            "html": telefonoContent('3').val
+          }
+        },
+        {
+          "value": "mensaje-SMS",
+          "text": "Mensaje SMS",
+          "conditional": {
+            "html": mobileContent('4').val
+          }
+        }
+      ]
+    },
+    "visualDescription": "Grupo de checkboxes con título en texto negro. Checkbox marcado con checkmark blanco en fondo azul, revelando label en negro y campo de texto rectangular con borde gris. Checkboxes desmarcados con borde gris oscuro y fondo blanco.",
+    "_generated": {
+      "hash": "1b3fc7a37bb15b87d05330e064bf6043",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:42.047Z"
+    }
+  },
+  {
+    "name": "con clases opcionales del form-group mostrando un error del grupo",
+    "data": {
+      "idPrefix": "optional-classes-showing-error",
+      "name": "optional-classes-showing-error",
+      "formGroup": {
+        "classes": "c-form-group--error"
+      },
+      "fieldset": {
+        "legend": {
+          "text": "¿Cómo quieres que te contactemos?"
+        }
+      },
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
+          "conditional": {
+            "html": mobileContent('5').val
+          }
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono",
+          "checked": true,
+          "conditional": {
+            "html": mobileErrorContent('1').val
+          }
+        },
+        {
+          "value": "mensaje-SMS",
+          "text": "Mensaje SMS",
+          "conditional": {
+            "html": mobileContent('6').val
+          }
+        }
+      ]
+    },
+    "visualDescription": "Grupo de checkboxes con título en texto negro. Checkbox marcado con checkmark blanco en fondo azul, revelando label en negro, texto de error en rojo, y campo de texto con borde rojo grueso. Checkboxes desmarcados con borde rojo.",
+    "_generated": {
+      "hash": "2736892fbda93848e5d2988f108818f1",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:42.047Z"
+    }
+  },
+  {
+    "name": "peque",
+    "data": {
+      "idPrefix": "small",
+      "name": "peque",
+      "classes": "c-checkboxes--sm",
+      "items": [
+        {
+          "value": "correo-electronico",
+          "text": "Correo electrónico",
+          "classes": "-mt-base",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        },
+        {
+          "value": "correo-postal",
+          "text": "Correo postal",
+          "classes": "-mt-base",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        },
+        {
+          "value": "telefono",
+          "text": "Teléfono",
+          "classes": "-mt-base",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Lista vertical de tres checkboxes sin marcar: cada checkbox tiene borde gris oscuro y fondo blanco. Labels en texto negro regular alineados a la derecha de cada checkbox. Espaciado compacto entre elementos.",
+    "_generated": {
+      "hash": "17662ee9b3cb12d4d68cdca15572f6c6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:42.047Z"
+    }
+  },
+  {
+    "name": "indeterminado",
+    "description": "Usando el parámetro <code>'isIndeterminate': true</code> podemos crear un item del checkbox que tenga 3 estados: marcado, desmarcado o indeterminado. El estado indeterminado expresa que hay sólo algún item seleccionado pero no todos. Útil para selecciones múltiples.",
+    "data": {
+      "idPrefix": "indeterminate",
+      "name": "indeterminate",
+      "classes": "c-checkboxes--sm",
+      "items": [
+        {
+          "value": "indeterminate",
+          "text": "1 elemento seleccionado",
+          "isIndeterminate": true,
+          "classes": "-mt-base",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Checkbox de tamaño pequeño con borde gris oscuro de 1px y fondo blanco, conteniendo un guion horizontal gris en el centro indicando estado indeterminado. Label de texto negro normal alineado a la derecha del checkbox.",
+    "_generated": {
+      "hash": "655e826fbb1a0317ca2018c37878a04d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:48.604Z"
+    }
+  },
+  {
+    "name": "indeterminado marcado",
+    "description": "Usando los parámetros <code>'isIndeterminate': true</code> y <code>'indeterminateChecked': true</code> podemos marcar como estado indeterminado un item que sea de tipo indeterminado.",
+    "data": {
+      "idPrefix": "indeterminate-checked",
+      "name": "indeterminate-checked",
+      "classes": "c-checkboxes--sm",
+      "items": [
+        {
+          "value": "indeterminate-checked-item",
+          "text": "1 elemento seleccionado",
+          "isIndeterminate": true,
+          "indeterminateChecked": true,
+          "checked": false,
+          "classes": "-mt-base",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        }
+      ]
+    },
+    "visualDescription": "Checkbox de tamaño pequeño con borde gris oscuro de 1px y fondo blanco, conteniendo un guion horizontal gris en el centro indicando estado indeterminado. Label de texto negro normal alineado a la derecha del checkbox.",
+    "_generated": {
+      "hash": "5828c23f8c6e24052da6398ec22f32f4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T18:53:48.604Z"
+    }
+  }
 ] %}