desy-html 16.0.4 → 17.0.1

package/src/templates/components/status-item/_examples.status-item.njk

@@ -1,319 +1,319 @@
-{% set exampleComponent = "status-item" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "description": "Recuerda que los items, por accesibilidad, deben estar rodeados de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code>.",
-    "data": {
-      "id": "default",
-      "title": {
-        "text": "Título"
-      },
-      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> item del Título</span></button>"
-    },
-    "visualDescription": "Contenedor rectangular con borde gris claro, fondo blanco. En la esquina superior izquierda aparece texto indicando el tipo en color gris oscuro. Dentro del contenedor hay un label en negro alineado a la izquierda, y un enlace en azul alineado a la derecha.",
-    "_generated": {
-      "hash": "e75120ac83d6febec43b8a24f2debbdc",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:17.308Z"
-    }
-  },
-  {
-    "name": "por defecto sólo items",
-    "data": {
-      "id": "only-items",
-      "items": [
-        {
-          "term": {
-            "text": "término"
-          },
-          "definition": {
-            "text": "definición"
-          }
-        },
-        {
-          "term": {
-            "text": "término"
-          },
-          "definition": {
-            "text": "definición"
-          }
-        },
-        {
-          "term": {
-            "text": "término"
-          },
-          "definition": {
-            "text": "definición"
-          }
-        }
-      ],
-      "status": {
-        "text": "Correcto",
-        "icon": {
-          "type": "success"
-        }
-      },
-      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> los datos de término y definición y el resto</span></button>"
-    },
-    "visualDescription": "Contenedor rectangular con borde gris claro, fondo blanco. En la esquina superior izquierda aparece texto indicando el tipo en gris oscuro. Dentro hay una tabla con tres columnas: la primera muestra texto de términos en negro, la segunda muestra definiciones en negro, y la tercera contiene un enlace azul y una marca de verificación verde con indicador de estado. Las tres filas repiten esta estructura con fondos alternados gris muy claro y blanco.",
-    "_generated": {
-      "hash": "68014e553fa91c3e998340385bd96c77",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:17.308Z"
-    }
-  },
-  {
-    "name": "con título HTML",
-    "data": {
-      "id": "with-title-html",
-      "title": {
-        "html": "Autorización para la consulta de datos de las personas de la unidad familiar. <span class='text-neutral-dark'>(Documento condicionado)</span>"
-      },
-      "caller": "<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>"
-    },
-    "visualDescription": "Contenedor rectangular con borde gris claro, fondo blanco. En la esquina superior izquierda aparece texto indicando el tipo en gris oscuro. Dentro hay texto negro que describe autorización para consulta de datos, seguido de texto gris entre paréntesis. En la esquina superior derecha del contenedor hay un enlace en azul.",
-    "_generated": {
-      "hash": "f9403633bd941ec3497ef1da6a464445",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:17.308Z"
-    }
-  },
-  {
-    "name": "con pista",
-    "data": {
-      "id": "with-hint",
-      "title": {
-        "text": "Personas de la unidad familiar"
-      },
-      "hint": {
-        "text": "2 personas añadidas"
-      },
-      "status": {
-        "text": "Aportado",
-        "icon": {
-          "type": "success"
-        }
-      },
-      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> personas de la unidad familiar</span></button>"
-    },
-    "visualDescription": "Contenedor con borde gris claro de 1px, fondo blanco, y padding interno. Incluye un título negro en la parte superior, un subtexto gris claro debajo, y dos enlaces en la esquina superior derecha: uno azul y otro negro con icono de check.",
-    "_generated": {
-      "hash": "0fb06d9c6fb0f6cff9edcdd966a1b38a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:26.932Z"
-    }
-  },
-  {
-    "name": "con pista HTML",
-    "data": {
-      "id": "with-hint-html",
-      "title": {
-        "text": "Autorización para la consulta de datos de las personas de la unidad familiar"
-      },
-      "hint": {
-        "html": "<a href='#' class='c-link'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='inline-block self-center w-4 h-4 mr-sm no-underline' role='img' aria-hidden='true'><path d='M100.3 52.2a7.49 7.49 0 00-10.6 0L77.5 64.39V7.5a7.5 7.5 0 00-15 0v56.89L50.3 52.2a7.5 7.5 0 10-10.6 10.6l25 25a7.49 7.49 0 0010.6 0l25-25a7.49 7.49 0 000-10.6zM130 95a10 10 0 00-10 10v12.5a2.5 2.5 0 01-2.5 2.5h-95a2.5 2.5 0 01-2.5-2.5V105a10 10 0 00-20 0v15a20 20 0 0020 20h100a20 20 0 0020-20v-15a10 10 0 00-10-10z' fill='currentColor'/></svg>Descargar modelo</a>"
-      },
-      "caller": "<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>"
-    },
-    "visualDescription": "Contenedor con borde gris claro de 1px, fondo blanco, y padding interno. Contiene un texto descriptivo gris oscuro alineado a la izquierda, un enlace azul en la esquina superior derecha, y un enlace de descarga con icono en la parte inferior izquierda en color azul.",
-    "_generated": {
-      "hash": "17dbc44a0f77a35da8adf93090b4f833",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:26.932Z"
-    }
-  },
-  {
-    "name": "con estado simple",
-    "data": {
-      "id": "with-status-simple",
-      "title": {
-        "text": "Datos adicionales del solicitante"
-      },
-      "status": {
-        "text": "Iniciado"
-      },
-      "caller": "<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>"
-    },
-    "visualDescription": "Contenedor con borde gris claro de 1px, fondo blanco, y padding interno. Presenta un texto descriptivo gris oscuro alineado a la izquierda y dos elementos en la esquina superior derecha: un enlace azul seguido de una etiqueta negra en mayúsculas.",
-    "_generated": {
-      "hash": "1f36aff4510da5a8e3888d00c2602517",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:26.932Z"
-    }
-  },
-  {
-    "name": "con estado éxito",
-    "data": {
-      "id": "with-status-success",
-      "title": {
-        "text": "Datos adicionales del solicitante"
-      },
-      "status": {
-        "text": "Aportado",
-        "icon": {
-          "type": "success"
-        }
-      },
-      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>"
-    },
-    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro. Encabezado de texto gris oscuro peso normal alineado a la izquierda. Lado derecho contiene enlace azul y badge negro con ícono de checkmark verde.",
-    "_generated": {
-      "hash": "f35487c1634fee9714f63c2436027155",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:36.250Z"
-    }
-  },
-  {
-    "name": "con estado alerta",
-    "data": {
-      "id": "with-status-alert",
-      "title": {
-        "text": "Datos adicionales del solicitante"
-      },
-      "errorMessage": {
-        "text": "Es necesario aportar este documento para enviar el trámite",
-        "classes": "my-sm text-alert-base"
-      },
-      "status": {
-        "text": "Incompleto",
-        "icon": {
-          "type": "alert"
-        },
-        "classes": "text-alert-base"
-      },
-      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>",
-      "classes": "border-l-4 border-alert-base"
-    },
-    "visualDescription": "Contenedor rectangular con fondo rosa muy claro y borde rojo fino. Encabezado de texto gris oscuro peso normal arriba, mensaje de error en rojo debajo. Lado derecho contiene enlace azul y badge rojo con ícono de advertencia triangular.",
-    "_generated": {
-      "hash": "3f3cb8f24e62daa2416667b71b2d51ba",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:36.250Z"
-    }
-  },
-  {
-    "name": "con estado cargando",
-    "data": {
-      "id": "with-status-loading",
-      "title": {
-        "text": "Datos adicionales del solicitante"
-      },
-      "status": {
-        "text": "Subiendo (20%)",
-        "icon": {
-          "type": "loading"
-        }
-      },
-      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>"
-    },
-    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro. Encabezado de texto gris oscuro peso normal alineado a la izquierda. Lado derecho contiene enlace azul y texto negro con spinner circular animado.",
-    "_generated": {
-      "hash": "234716fffbdcc293e8455c94686a5ec0",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:36.250Z"
-    }
-  },
-  {
-    "name": "con estado error",
-    "data": {
-      "id": "with-status-error",
-      "title": {
-        "text": "Datos adicionales del solicitante"
-      },
-      "errorMessage": {
-        "text": "Se ha producido un error al subir el archivo",
-        "classes": "my-sm text-alert-base"
-      },
-      "status": {
-        "text": "Error",
-        "icon": {
-          "type": "error"
-        },
-        "classes": "text-alert-base"
-      },
-      "caller": "<button class='c-button c-button--transparent'>Ver<span class='sr-only'> datos adicionales del solicitante</span></button>",
-      "classes": "border-l-4 border-alert-base"
-    },
-    "visualDescription": "Bloque con borde rojo en el lateral izquierdo y fondo rosado claro. Contiene un encabezado en texto negro, texto descriptivo gris, y un enlace azul subrayado. En la esquina superior derecha aparecen dos elementos: un enlace azul y una etiqueta roja con texto blanco.",
-    "_generated": {
-      "hash": "d1bdc62cec77ee077854e1334914f694",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:46.799Z"
-    }
-  },
-  {
-    "name": "con HTML en la definición",
-    "data": {
-      "id": "with-html-in-definition",
-      "items": [
-        {
-          "term": {
-            "text": "Acreditación"
-          },
-          "definition": {
-            "html": "Mediante archivo adjunto <a href='#' class='c-link inline-block'>Modelo de solicitud (PDF, 200Kb)</a>"
-          }
-        }
-      ],
-      "status": {
-        "text": "Completo",
-        "icon": {
-          "type": "success"
-        }
-      },
-      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> acreditación</span></button>"
-    },
-    "visualDescription": "Bloque rectangular con fondo blanco y borde gris claro. Fila horizontal dividida en tres secciones: etiqueta gris a la izquierda, texto negro con enlace azul en el centro, y dos elementos a la derecha (enlace azul y etiqueta verde con checkmark blanco). Layout en disposición horizontal con alineación vertical centrada.",
-    "_generated": {
-      "hash": "be7510c93bda846675b2c0883e5719ba",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:46.799Z"
-    }
-  },
-  {
-    "name": "incompleto",
-    "data": {
-      "id": "incompleto-status-item",
-      "items": [
-        {
-          "term": {
-            "text": "Nombre"
-          },
-          "definition": {
-            "text": "Ana"
-          }
-        },
-        {
-          "term": {
-            "text": "Apellidos"
-          },
-          "definition": {
-            "text": "Pérez Escribano"
-          }
-        },
-        {
-          "term": {
-            "text": "Número de identificación"
-          },
-          "definition": {
-            "text": "72882918B"
-          }
-        }
-      ],
-      "status": {
-        "text": "Incompleto",
-        "icon": {
-          "type": "alert"
-        }
-      },
-      "caller": "<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>",
-      "classes": "border-l-4 border-alert-base"
-    },
-    "visualDescription": "Bloque con borde rosa claro en el lateral izquierdo y fondo blanco. Contiene tres filas de información en formato clave-valor: etiquetas grises a la izquierda y valores negros a la derecha. En la esquina superior derecha aparecen un enlace azul y una etiqueta roja con triángulo de alerta blanco.",
-    "_generated": {
-      "hash": "7e69dd0caea1b30c605e06255fc99720",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:14:46.799Z"
-    }
-  }
-] %}
+{% set exampleComponent = "status-item" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "description": "Recuerda que los items, por accesibilidad, deben estar rodeados de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code>.",
+    "data": {
+      "id": "default",
+      "title": {
+        "text": "Título"
+      },
+      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> item del Título</span></button>"
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro, fondo blanco. En la esquina superior izquierda aparece texto indicando el tipo en color gris oscuro. Dentro del contenedor hay un texto en negro alineado a la izquierda, y un enlace en azul alineado a la derecha.",
+    "_generated": {
+      "hash": "e75120ac83d6febec43b8a24f2debbdc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:17.308Z"
+    }
+  },
+  {
+    "name": "por defecto sólo items",
+    "data": {
+      "id": "only-items",
+      "items": [
+        {
+          "term": {
+            "text": "término"
+          },
+          "definition": {
+            "text": "definición"
+          }
+        },
+        {
+          "term": {
+            "text": "término"
+          },
+          "definition": {
+            "text": "definición"
+          }
+        },
+        {
+          "term": {
+            "text": "término"
+          },
+          "definition": {
+            "text": "definición"
+          }
+        }
+      ],
+      "status": {
+        "text": "Correcto",
+        "icon": {
+          "type": "success"
+        }
+      },
+      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> los datos de término y definición y el resto</span></button>"
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro, fondo blanco. En la esquina superior izquierda aparece texto indicando el tipo en gris oscuro. Dentro hay una tabla con tres columnas: la primera muestra texto de etiquetas en negro, la segunda muestra valores en negro, y la tercera contiene un enlace azul y una marca de verificación verde con indicador de estado. Las tres filas repiten esta estructura con fondos alternados gris muy claro y blanco.",
+    "_generated": {
+      "hash": "68014e553fa91c3e998340385bd96c77",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:17.308Z"
+    }
+  },
+  {
+    "name": "con título HTML",
+    "data": {
+      "id": "with-title-html",
+      "title": {
+        "html": "Autorización para la consulta de datos de las personas de la unidad familiar. <span class='text-neutral-dark'>(Documento condicionado)</span>"
+      },
+      "caller": "<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>"
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro, fondo blanco. En la esquina superior izquierda aparece texto indicando el tipo en gris oscuro. Dentro hay texto negro descriptivo, seguido de texto gris entre paréntesis. En la esquina superior derecha del contenedor hay un enlace en azul.",
+    "_generated": {
+      "hash": "f9403633bd941ec3497ef1da6a464445",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:17.308Z"
+    }
+  },
+  {
+    "name": "con pista",
+    "data": {
+      "id": "with-hint",
+      "title": {
+        "text": "Personas de la unidad familiar"
+      },
+      "hint": {
+        "text": "2 personas añadidas"
+      },
+      "status": {
+        "text": "Aportado",
+        "icon": {
+          "type": "success"
+        }
+      },
+      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> personas de la unidad familiar</span></button>"
+    },
+    "visualDescription": "Contenedor con borde gris claro de 1px, fondo blanco, y padding interno. Incluye un título negro en la parte superior, un subtexto gris claro debajo, y dos enlaces en la esquina superior derecha: uno azul y otro negro con icono de verificación.",
+    "_generated": {
+      "hash": "0fb06d9c6fb0f6cff9edcdd966a1b38a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:26.932Z"
+    }
+  },
+  {
+    "name": "con pista HTML",
+    "data": {
+      "id": "with-hint-html",
+      "title": {
+        "text": "Autorización para la consulta de datos de las personas de la unidad familiar"
+      },
+      "hint": {
+        "html": "<a href='#' class='c-link'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='inline-block self-center w-4 h-4 mr-sm no-underline' role='img' aria-hidden='true'><path d='M100.3 52.2a7.49 7.49 0 00-10.6 0L77.5 64.39V7.5a7.5 7.5 0 00-15 0v56.89L50.3 52.2a7.5 7.5 0 10-10.6 10.6l25 25a7.49 7.49 0 0010.6 0l25-25a7.49 7.49 0 000-10.6zM130 95a10 10 0 00-10 10v12.5a2.5 2.5 0 01-2.5 2.5h-95a2.5 2.5 0 01-2.5-2.5V105a10 10 0 00-20 0v15a20 20 0 0020 20h100a20 20 0 0020-20v-15a10 10 0 00-10-10z' fill='currentColor'/></svg>Descargar modelo</a>"
+      },
+      "caller": "<button class='c-button c-button--transparent'>Aportar<span class='sr-only'> Autorización para la consulta de datos de las personas de la unidad familiar</span></button>"
+    },
+    "visualDescription": "Contenedor con borde gris claro de 1px, fondo blanco, y padding interno. Contiene un texto descriptivo gris oscuro alineado a la izquierda, un enlace azul en la esquina superior derecha, y un enlace de acción con icono en la parte inferior izquierda en color azul.",
+    "_generated": {
+      "hash": "17dbc44a0f77a35da8adf93090b4f833",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:26.932Z"
+    }
+  },
+  {
+    "name": "con estado simple",
+    "data": {
+      "id": "with-status-simple",
+      "title": {
+        "text": "Datos adicionales del solicitante"
+      },
+      "status": {
+        "text": "Iniciado"
+      },
+      "caller": "<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>"
+    },
+    "visualDescription": "Contenedor con borde gris claro de 1px, fondo blanco, y padding interno. Presenta un texto descriptivo gris oscuro alineado a la izquierda y dos elementos en la esquina superior derecha: un enlace azul seguido de una etiqueta de estado en mayúsculas.",
+    "_generated": {
+      "hash": "1f36aff4510da5a8e3888d00c2602517",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:26.932Z"
+    }
+  },
+  {
+    "name": "con estado éxito",
+    "data": {
+      "id": "with-status-success",
+      "title": {
+        "text": "Datos adicionales del solicitante"
+      },
+      "status": {
+        "text": "Aportado",
+        "icon": {
+          "type": "success"
+        }
+      },
+      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro. Encabezado de texto gris oscuro peso normal alineado a la izquierda. Lado derecho contiene enlace azul y badge negro con icono de verificación verde.",
+    "_generated": {
+      "hash": "f35487c1634fee9714f63c2436027155",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:36.250Z"
+    }
+  },
+  {
+    "name": "con estado alerta",
+    "data": {
+      "id": "with-status-alert",
+      "title": {
+        "text": "Datos adicionales del solicitante"
+      },
+      "errorMessage": {
+        "text": "Es necesario aportar este documento para enviar el trámite",
+        "classes": "my-sm text-alert-base"
+      },
+      "status": {
+        "text": "Incompleto",
+        "icon": {
+          "type": "alert"
+        },
+        "classes": "text-alert-base"
+      },
+      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>",
+      "classes": "border-l-4 border-alert-base"
+    },
+    "visualDescription": "Contenedor rectangular con fondo rosa muy claro y borde rojo fino. Encabezado de texto gris oscuro peso normal arriba, mensaje de error en rojo debajo. Lado derecho contiene enlace azul y badge rojo con icono de advertencia triangular.",
+    "_generated": {
+      "hash": "3f3cb8f24e62daa2416667b71b2d51ba",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:36.250Z"
+    }
+  },
+  {
+    "name": "con estado cargando",
+    "data": {
+      "id": "with-status-loading",
+      "title": {
+        "text": "Datos adicionales del solicitante"
+      },
+      "status": {
+        "text": "Subiendo (20%)",
+        "icon": {
+          "type": "loading"
+        }
+      },
+      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> datos adicionales del solicitante</span></button>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro. Encabezado de texto gris oscuro peso normal alineado a la izquierda. Lado derecho contiene enlace azul y texto negro con indicador de carga circular animado.",
+    "_generated": {
+      "hash": "234716fffbdcc293e8455c94686a5ec0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:36.250Z"
+    }
+  },
+  {
+    "name": "con estado error",
+    "data": {
+      "id": "with-status-error",
+      "title": {
+        "text": "Datos adicionales del solicitante"
+      },
+      "errorMessage": {
+        "text": "Se ha producido un error al subir el archivo",
+        "classes": "my-sm text-alert-base"
+      },
+      "status": {
+        "text": "Error",
+        "icon": {
+          "type": "error"
+        },
+        "classes": "text-alert-base"
+      },
+      "caller": "<button class='c-button c-button--transparent'>Ver<span class='sr-only'> datos adicionales del solicitante</span></button>",
+      "classes": "border-l-4 border-alert-base"
+    },
+    "visualDescription": "Bloque con borde rojo en el lateral izquierdo y fondo rosado claro. Contiene un encabezado en texto negro, texto descriptivo gris, y un enlace azul subrayado. En la esquina superior derecha aparecen dos elementos: un enlace azul y una etiqueta roja.",
+    "_generated": {
+      "hash": "d1bdc62cec77ee077854e1334914f694",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:46.799Z"
+    }
+  },
+  {
+    "name": "con HTML en la definición",
+    "data": {
+      "id": "with-html-in-definition",
+      "items": [
+        {
+          "term": {
+            "text": "Acreditación"
+          },
+          "definition": {
+            "html": "Mediante archivo adjunto <a href='#' class='c-link inline-block'>Modelo de solicitud (PDF, 200Kb)</a>"
+          }
+        }
+      ],
+      "status": {
+        "text": "Completo",
+        "icon": {
+          "type": "success"
+        }
+      },
+      "caller": "<button class='c-button c-button--transparent'>Modificar<span class='sr-only'> acreditación</span></button>"
+    },
+    "visualDescription": "Bloque rectangular con fondo blanco y borde gris claro. Fila horizontal dividida en tres secciones: etiqueta gris a la izquierda, texto negro con enlace azul en el centro, y dos elementos a la derecha (enlace azul y etiqueta verde con icono de verificación). Layout en disposición horizontal con alineación vertical centrada.",
+    "_generated": {
+      "hash": "be7510c93bda846675b2c0883e5719ba",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:46.799Z"
+    }
+  },
+  {
+    "name": "incompleto",
+    "data": {
+      "id": "incompleto-status-item",
+      "items": [
+        {
+          "term": {
+            "text": "Nombre"
+          },
+          "definition": {
+            "text": "Ana"
+          }
+        },
+        {
+          "term": {
+            "text": "Apellidos"
+          },
+          "definition": {
+            "text": "Pérez Escribano"
+          }
+        },
+        {
+          "term": {
+            "text": "Número de identificación"
+          },
+          "definition": {
+            "text": "72882918B"
+          }
+        }
+      ],
+      "status": {
+        "text": "Incompleto",
+        "icon": {
+          "type": "alert"
+        }
+      },
+      "caller": "<button class='c-button c-button--transparent'>Rellenar<span class='sr-only'> datos adicionales del solicitante</span></button>",
+      "classes": "border-l-4 border-alert-base"
+    },
+    "visualDescription": "Bloque con borde rosa claro en el lateral izquierdo y fondo blanco. Contiene tres filas de información en formato clave-valor: etiquetas grises a la izquierda y valores negros a la derecha. En la esquina superior derecha aparecen un enlace azul y una etiqueta roja con icono de advertencia.",
+    "_generated": {
+      "hash": "7e69dd0caea1b30c605e06255fc99720",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:14:46.799Z"
+    }
+  }
+] %}

package/src/templates/components/status-item/_macro.status-item.njk

@@ -1,3 +1,3 @@
-{% macro componentStatusItem(params) %}
-{% include "./_template.status-item.njk" %}
-{% endmacro %}
+{% macro componentStatusItem(params) %}
+{% include "./_template.status-item.njk" %}
+{% endmacro %}