desy-html 16.0.4 → 17.0.0

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

@@ -1,371 +1,371 @@
-{% set exampleComponent = "item" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "description": "Recuerda que los pills, por accesibilidad, deben estar rodeados de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code>.",
-    "data": {
-      "title": {
-        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
-      }
-    },
-    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene texto negro de tamaño estándar alineado a la izquierda con padding interno moderado. Esquinas ligeramente redondeadas.",
-    "_generated": {
-      "hash": "6c0453b32f6869954186fc6e57654f96",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:18.313Z"
-    }
-  },
-  {
-    "name": "por defecto con HTML",
-    "data": {
-      "title":{
-        "html": "Las entidades beneficiarias deberán tener su sede y actividad <strong class=' font-bold '>principal en Aragón.</strong>"
-      }
-    },
-    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene texto negro de tamaño estándar con una palabra en negrita seguida de texto normal, alineado a la izquierda con padding interno moderado. Esquinas ligeramente redondeadas.",
-    "_generated": {
-      "hash": "fb0ca4264625b158e6ba9e517f6aca85",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:18.313Z"
-    }
-  },
-  {
-    "name": "Con encabezado",
-    "description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. En este ejemplo: <code>'headingLevel': 4</code> creará un encabezado <code>&lt;h4&gt;</code>.",
-    "data": {
-      "headingLevel": 4,
-      "title": {
-        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
-      }
-    },
-    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Incluye encabezado en texto gris oscuro de tamaño pequeño en la parte superior, seguido de texto negro de tamaño estándar en la línea inferior, ambos alineados a la izquierda con padding interno moderado. Esquinas ligeramente redondeadas.",
-    "_generated": {
-      "hash": "77fa2fabe1520437f126bb027518118a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:18.313Z"
-    }
-  },
-  {
-    "name": "con descripción",
-    "data": {
-      "headingLevel": 4,
-      "title":{
-        "html": "Registro de alta de la asociación"
-      },
-      "description":{
-        "html": "Documento acreditativo de registro de alta de la <strong class=' font-bold '>asociación</strong>"
-      }
-    },
-    "visualDescription": "Contenedor rectangular con borde gris claro de 1px y fondo blanco. Título en negrita negro seguido de dos líneas de texto en peso normal, negro, tamaño mediano. Espaciado vertical consistente entre elementos de texto.",
-    "_generated": {
-      "hash": "1d273843eaa8d25c386548c444a3ea07",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:26.662Z"
-    }
-  },
-  {
-    "name": "con items",
-    "data": {
-      "headingLevel": 4,
-      "title":{
-        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
-      },
-      "items": [
-        {
-          "text": "Desde modelo"
-        },
-        {
-          "text": "Obligatorio previo a resolución"
-        },
-        {
-          "text": "Condicionado"
-        }
-      ]
-    },
-    "visualDescription": "Contenedor rectangular con borde gris claro de 1px y fondo blanco. Título en negrita negro seguido de caja interna con fondo gris muy claro, conteniendo texto negro en múltiples segmentos separados por líneas verticales grises. Espaciado interno generoso en la caja gris.",
-    "_generated": {
-      "hash": "6a8ed81ed2e755538556f3a0d03249df",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:26.662Z"
-    }
-  },
-  {
-    "name": "con contenido",
-    "data": {
-      "headingLevel": 4,
-      "title":{
-        "text": "Registro de alta de la asociación"
-      },
-      "content":{
-        "html": "Modelo: <a class=' c-link break-all ' href=' # '>Modelo de fianza (PDF, 20Kb)</a> ",
-        "classes": "text-neutral-dark"
-      }
-    },
-    "visualDescription": "Contenedor rectangular con borde gris claro de 1px y fondo blanco. Título en negrita negro seguido de subtexto gris en peso normal. Enlace azul subrayado debajo del subtexto. Espaciado vertical uniforme entre todos los elementos.",
-    "_generated": {
-      "hash": "da938df58b02dfcb25e103b4197a0723",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:26.662Z"
-    }
-  },
-  {
-    "name": "con acciones",
-    "description": "Utiliza el componente como un caller para anidar contenido. En este ejemplo el contenido es una lista de 2 botones de acciones. Para que sea accesible, cada botón debe tener un <code>aria-labelledby</code> que apunte al <code>id</code> de si mismo y al <code>id</code> del título. Muestra el código para verlo.",
-    "data": {
-      "headingLevel": 4,
-      "title":{
-        "text": "Registro de alta de la asociación",
-        "attributes": {
-          "id": "t1"
-        }
-      },
-      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-1a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-1a t1'>Eliminar</button></li><li><button id='b-1b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-1b t1'>Editar</button></li></ul>"
-    },
-    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, altura aproximada de 60px. Contiene texto negro alineado a la izquierda y dos enlaces azules (\"Eliminar\" y \"Editar\") alineados a la derecha en la misma línea. Los enlaces azules son interactivos y están separados por un pequeño espacio.",
-    "_generated": {
-      "hash": "f7d00a75e4cfba41d55006c6cecdaff6",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:36.374Z"
-    }
-  },
-  {
-    "name": "arrastrable",
-    "description": "Usa el parámetro <code>'isDraggable': true</code> para mostrar un icono de arrastrar.",
-    "data": {
-      "title": {
-        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
-      },
-      "isDraggable": true
-    },
-    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, altura aproximada de 50px. Incluye un icono de líneas horizontales (handle de arrastre) alineado a la izquierda, seguido de texto negro. Fondo blanco uniforme sin elementos adicionales visibles en el área derecha.",
-    "_generated": {
-      "hash": "91fef49fe4de062072c13ff03badcfc4",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:36.374Z"
-    }
-  },
-  {
-    "name": "bloqueado",
-    "description": "Usa el parámetro <code>'isLocked': true</code> para mostrar un icono de bloqueado.",
-    "data": {
-      "title": {
-        "text": "Entidades locales de la Comunidad Autónoma de Aragón",
-        "attributes": {
-          "id": "t2"
-        }
-      },
-      "isLocked": true,
-      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-2a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-2a t2'>Eliminar</button></li><li><button id='b-2b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-2b t2'>Editar</button></li></ul>"
-    },
-    "visualDescription": "Caja rectangular con borde gris claro, fondo gris muy claro (casi blanco), altura aproximada de 60px. Presenta un icono de candado gris a la izquierda, texto negro en el centro, y dos enlaces azules (\"Eliminar\" y \"Editar\") alineados a la derecha. Fondo sutilmente diferenciado del blanco puro indica estado bloqueado.",
-    "_generated": {
-      "hash": "364ac6c9faf81a4f4c14eef4f1cf4716",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:36.374Z"
-    }
-  },
-  {
-    "name": "con icono tipo: documento",
-    "data": {
-      "headingLevel": 4,
-      "title": {
-        "text": "Resolución de años anteriores",
-        "attributes": {
-          "id": "t3"
-        }
-      },
-      "content":{
-        "html": "<a class=' c-link break-all ' href=' # '>Resolución años anteriores (PDF, 20Kb)</a> "
-      },
-      "icon": {
-        "type": "document"
-      },
-      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-3a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-3a t3'>Eliminar</button></li><li><button id='b-3b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-3b t3'>Editar</button></li></ul>"
-    },
-    "visualDescription": "Elemento rectangular con fondo blanco y borde gris claro de 1px. Contiene un icono de documento gris a la izquierda, título en negrita negro, subtítulo en texto azul subrayado (enlace), y dos botones de texto azul alineados a la derecha.",
-    "_generated": {
-      "hash": "7f2c45cc466cd8191d3ab9c426a3c880",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:45.143Z"
-    }
-  },
-  {
-    "name": "con icono tipo: enlace",
-    "data": {
-      "headingLevel": 4,
-      "title": {
-        "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA",
-        "attributes": {
-          "id": "t4"
-        }
-      },
-      "content":{
-        "html": "<a class=' c-link break-all ' href=' # '>Lista completa de admitidos (PDF, 20Kb)</a> "
-      },
-      "icon": {
-        "type": "link"
-      },
-      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-4a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-4a t4'>Eliminar</button></li><li><button id='b-4b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-4b t4'>Editar</button></li></ul>"
-    },
-    "visualDescription": "Elemento rectangular con fondo blanco y borde gris claro de 1px. Contiene un icono de enlace gris a la izquierda, título en negro peso normal, subtítulo en texto azul subrayado (enlace), y dos botones de texto azul alineados a la derecha.",
-    "_generated": {
-      "hash": "64e4d9b1e043e8caafafbd0c2c413916",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:45.143Z"
-    }
-  },
-  {
-    "name": "con icono tipo: portapapeles",
-    "data": {
-      "headingLevel": 4,
-      "title": {
-        "text": "Datos de la empresa",
-        "attributes": {
-          "id": "t5"
-        }
-      },
-      "items": [
-        {
-          "text": "12 campos"
-        },
-        {
-          "text": "Con dependencia"
-        },
-        {
-          "text": "Tabla de datos"
-        }
-      ],
-      "icon": {
-        "type": "clipboard"
-      },
-      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-5a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-5a t5'>Eliminar</button></li><li><button id='b-5b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-5b t5'>Editar</button></li></ul>"
-    },
-    "visualDescription": "Elemento rectangular con fondo blanco y borde gris claro de 1px. Contiene un icono de portapapeles gris a la izquierda, título en negrita negro, línea de metadatos con separadores verticales en texto gris, y dos botones de texto azul alineados a la derecha.",
-    "_generated": {
-      "hash": "9d540157f9073aeb54a21994d882ee24",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:45.143Z"
-    }
-  },
-  {
-    "name": "con icono personalizado",
-    "data": {
-      "headingLevel": 4,
-      "title": {
-        "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA",
-        "attributes": {
-          "id": "t6"
-        }
-      },
-      "content":{
-        "html": "<a class=' c-link break-all ' href=' # '>Lista completa de admitidos (PDF, 20Kb)</a> "
-      },
-      "icon": {
-        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'  width='1em' height='1em' class='w-8 h-8 text-neutral-dark' aria-label='Icono de papelera' focusable='false' role='img'><path d='M19.5 7.5h-15A.5.5 0 0 0 4 8v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a.5.5 0 0 0-.5-.5Zm-9.25 13a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0Zm5 0a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0ZM22 4h-4.75a.25.25 0 0 1-.25-.25V2.5A2.5 2.5 0 0 0 14.5 0h-5A2.5 2.5 0 0 0 7 2.5v1.25a.25.25 0 0 1-.25.25H2a1 1 0 0 0 0 2h20a1 1 0 0 0 0-2ZM9 3.75V2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v1.25a.25.25 0 0 1-.25.25h-5.5A.25.25 0 0 1 9 3.75Z' fill='currentColor' transform='scale(2)'/></svg>"
-      },
-      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-6a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-6a t6'>Eliminar</button></li><li><button id='b-6b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-6b t6'>Editar</button></li></ul>"
-    },
-    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Incluye un icono de carpeta gris a la izquierda, seguido de texto de título negro en peso normal y un enlace azul subrayado debajo. Botones en azul están alineados a la derecha del contenedor.",
-    "_generated": {
-      "hash": "310edc56b39f5dd0d91497c0ec7752eb",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:54.621Z"
-    }
-  },
-  {
-    "name": "con icono tipo: documento, alineado verticalmente arriba",
-    "description": "Usa el parámetro <code>containerClasses</code> del parámetro <code>icon</code> para añadir clases al contenedor del icono. Esto permite posicionarlo o cambiar de color. En este ejemplo el icono aparece alineado verticalmente arriba en vez de centrado.",
-    "data": {
-      "headingLevel": 4,
-      "title": {
-        "text": "Resolución de años anteriores",
-        "attributes": {
-          "id": "t3"
-        }
-      },
-      "content":{
-        "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
-        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-        proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-      },
-      "icon": {
-        "type": "document",
-        "containerClasses": "self-start h-full mr-base"
-      },
-      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-3a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-3a t3'>Eliminar</button></li><li><button id='b-3b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-3b t3'>Editar</button></li></ul>"
-    },
-    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Presenta un icono de documento gris alineado en la parte superior izquierda, con título negro en peso normal a su derecha y párrafo de texto gris en peso normal debajo que ocupa varias líneas. Botones en azul están posicionados en la esquina superior derecha.",
-    "_generated": {
-      "hash": "0c746baed8c9cb2e0828778c0e90d7cc",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:54.621Z"
-    }
-  },
-  {
-    "name": "arrastrable con icono tipo: documento",
-    "data": {
-      "headingLevel": 4,
-      "title": {
-        "text": "Resolución de años anteriores",
-        "attributes": {
-          "id": "t7"
-        }
-      },
-      "content":{
-        "html": "<a class=' c-link break-all ' href=' # '>Resolución años anteriores (PDF, 20Kb)</a> "
-      },
-      "icon": {
-        "type": "document"
-      },
-      "isDraggable": true,
-      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-7a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-7a t7'>Eliminar</button></li><li><button id='b-7b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-7b t7'>Editar</button></li></ul>"
-    },
-    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Muestra un icono de manejador de arrastre gris (seis puntos) a la izquierda, seguido de un icono de documento gris, título negro en peso normal y enlace azul subrayado debajo del título. Botones en azul están alineados a la derecha del contenedor.",
-    "_generated": {
-      "hash": "4736084104a58bad94f21e8afd10e596",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:02:54.621Z"
-    }
-  },
-  {
-    "name": "con clases, descripción, items, contenido y acciones",
-    "data": {
-      "headingLevel": 4,
-      "title":{
-        "text": "Registro de alta de la asociación",
-        "classes": "font-bold",
-        "attributes": {
-          "id": "t8"
-        }
-      },
-      "description":{
-        "text": "Documento acreditativo de registro de alta de la asociación"
-      },
-      "items": [
-        {
-          "text": "Desde modelo"
-        },
-        {
-          "text": "Obligatorio previo a resolución"
-        },
-        {
-          "text": "Condicionado"
-        }
-      ],
-      "content":{
-        "html": "Modelo: <a class=' c-link break-all ' href=' # '>Modelo de fianza (PDF, 20Kb)</a> ",
-        "classes": "text-neutral-dark"
-      },
-      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-8a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-8a t8'>Eliminar</button></li><li><button id='b-8b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-8b t8'>Editar</button></li></ul>"
-    },
-    "visualDescription": "Componente rectangular con borde gris claro, fondo blanco y encabezado con texto negro en negrita. Contiene título, subtítulo gris, metadatos con separadores verticales, y enlaces azules alineados a la derecha superior.",
-    "_generated": {
-      "hash": "5e1fd5ac697e4e67eb884526da610c51",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:03:02.178Z"
-    }
-  }
+{% set exampleComponent = "item" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "description": "Recuerda que los pills, por accesibilidad, deben estar rodeados de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code>.",
+    "data": {
+      "title": {
+        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
+      }
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene texto negro de tamaño estándar alineado a la izquierda con padding interno moderado. Esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "6c0453b32f6869954186fc6e57654f96",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:18.313Z"
+    }
+  },
+  {
+    "name": "por defecto con HTML",
+    "data": {
+      "title":{
+        "html": "Las entidades beneficiarias deberán tener su sede y actividad <strong class=' font-bold '>principal en Aragón.</strong>"
+      }
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Contiene texto negro de tamaño estándar con una palabra en negrita seguida de texto normal, alineado a la izquierda con padding interno moderado. Esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "fb0ca4264625b158e6ba9e517f6aca85",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:18.313Z"
+    }
+  },
+  {
+    "name": "Con encabezado",
+    "description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. En este ejemplo: <code>'headingLevel': 4</code> creará un encabezado <code>&lt;h4&gt;</code>.",
+    "data": {
+      "headingLevel": 4,
+      "title": {
+        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
+      }
+    },
+    "visualDescription": "Caja rectangular con borde gris claro de 1px y fondo blanco. Incluye encabezado en texto gris oscuro de tamaño pequeño en la parte superior, seguido de texto negro de tamaño estándar en la línea inferior, ambos alineados a la izquierda con padding interno moderado. Esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "77fa2fabe1520437f126bb027518118a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:18.313Z"
+    }
+  },
+  {
+    "name": "con descripción",
+    "data": {
+      "headingLevel": 4,
+      "title":{
+        "html": "Registro de alta de la asociación"
+      },
+      "description":{
+        "html": "Documento acreditativo de registro de alta de la <strong class=' font-bold '>asociación</strong>"
+      }
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro de 1px y fondo blanco. Título en negrita negro seguido de dos líneas de texto en peso normal, negro, tamaño mediano. Espaciado vertical consistente entre elementos de texto.",
+    "_generated": {
+      "hash": "1d273843eaa8d25c386548c444a3ea07",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:26.662Z"
+    }
+  },
+  {
+    "name": "con items",
+    "data": {
+      "headingLevel": 4,
+      "title":{
+        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
+      },
+      "items": [
+        {
+          "text": "Desde modelo"
+        },
+        {
+          "text": "Obligatorio previo a resolución"
+        },
+        {
+          "text": "Condicionado"
+        }
+      ]
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro de 1px y fondo blanco. Título en negrita negro seguido de caja interna con fondo gris muy claro, conteniendo texto negro en múltiples segmentos separados por líneas verticales grises. Espaciado interno generoso en la caja gris.",
+    "_generated": {
+      "hash": "6a8ed81ed2e755538556f3a0d03249df",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:26.662Z"
+    }
+  },
+  {
+    "name": "con contenido",
+    "data": {
+      "headingLevel": 4,
+      "title":{
+        "text": "Registro de alta de la asociación"
+      },
+      "content":{
+        "html": "Modelo: <a class=' c-link break-all ' href=' # '>Modelo de fianza (PDF, 20Kb)</a> ",
+        "classes": "text-neutral-dark"
+      }
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro de 1px y fondo blanco. Título en negrita negro seguido de subtexto gris en peso normal. Enlace azul subrayado debajo del subtexto. Espaciado vertical uniforme entre todos los elementos.",
+    "_generated": {
+      "hash": "da938df58b02dfcb25e103b4197a0723",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:26.662Z"
+    }
+  },
+  {
+    "name": "con acciones",
+    "description": "Utiliza el componente como un caller para anidar contenido. En este ejemplo el contenido es una lista de 2 botones de acciones. Para que sea accesible, cada botón debe tener un <code>aria-labelledby</code> que apunte al <code>id</code> de si mismo y al <code>id</code> del título. Muestra el código para verlo.",
+    "data": {
+      "headingLevel": 4,
+      "title":{
+        "text": "Registro de alta de la asociación",
+        "attributes": {
+          "id": "t1"
+        }
+      },
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-1a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-1a t1'>Eliminar</button></li><li><button id='b-1b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-1b t1'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, altura aproximada de 60px. Contiene texto negro alineado a la izquierda y dos enlaces azules (\"Eliminar\" y \"Editar\") alineados a la derecha en la misma línea. Los enlaces azules son interactivos y están separados por un pequeño espacio.",
+    "_generated": {
+      "hash": "f7d00a75e4cfba41d55006c6cecdaff6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:36.374Z"
+    }
+  },
+  {
+    "name": "arrastrable",
+    "description": "Usa el parámetro <code>'isDraggable': true</code> para mostrar un icono de arrastrar.",
+    "data": {
+      "title": {
+        "text": "Entidades locales de la Comunidad Autónoma de Aragón"
+      },
+      "isDraggable": true
+    },
+    "visualDescription": "Caja rectangular con borde gris claro, fondo blanco, altura aproximada de 50px. Incluye un icono de líneas horizontales (handle de arrastre) alineado a la izquierda, seguido de texto negro. Fondo blanco uniforme sin elementos adicionales visibles en el área derecha.",
+    "_generated": {
+      "hash": "91fef49fe4de062072c13ff03badcfc4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:36.374Z"
+    }
+  },
+  {
+    "name": "bloqueado",
+    "description": "Usa el parámetro <code>'isLocked': true</code> para mostrar un icono de bloqueado.",
+    "data": {
+      "title": {
+        "text": "Entidades locales de la Comunidad Autónoma de Aragón",
+        "attributes": {
+          "id": "t2"
+        }
+      },
+      "isLocked": true,
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-2a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-2a t2'>Eliminar</button></li><li><button id='b-2b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-2b t2'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Caja rectangular con borde gris claro, fondo gris muy claro (casi blanco), altura aproximada de 60px. Presenta un icono de candado gris a la izquierda, texto negro en el centro, y dos enlaces azules (\"Eliminar\" y \"Editar\") alineados a la derecha. Fondo sutilmente diferenciado del blanco puro indica estado bloqueado.",
+    "_generated": {
+      "hash": "364ac6c9faf81a4f4c14eef4f1cf4716",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:36.374Z"
+    }
+  },
+  {
+    "name": "con icono tipo: documento",
+    "data": {
+      "headingLevel": 4,
+      "title": {
+        "text": "Resolución de años anteriores",
+        "attributes": {
+          "id": "t3"
+        }
+      },
+      "content":{
+        "html": "<a class=' c-link break-all ' href=' # '>Resolución años anteriores (PDF, 20Kb)</a> "
+      },
+      "icon": {
+        "type": "document"
+      },
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-3a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-3a t3'>Eliminar</button></li><li><button id='b-3b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-3b t3'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Elemento rectangular con fondo blanco y borde gris claro de 1px. Contiene un icono de documento gris a la izquierda, título en negrita negro, subtítulo en texto azul subrayado (enlace), y dos botones de texto azul alineados a la derecha.",
+    "_generated": {
+      "hash": "7f2c45cc466cd8191d3ab9c426a3c880",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:45.143Z"
+    }
+  },
+  {
+    "name": "con icono tipo: enlace",
+    "data": {
+      "headingLevel": 4,
+      "title": {
+        "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA",
+        "attributes": {
+          "id": "t4"
+        }
+      },
+      "content":{
+        "html": "<a class=' c-link break-all ' href=' # '>Lista completa de admitidos (PDF, 20Kb)</a> "
+      },
+      "icon": {
+        "type": "link"
+      },
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-4a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-4a t4'>Eliminar</button></li><li><button id='b-4b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-4b t4'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Elemento rectangular con fondo blanco y borde gris claro de 1px. Contiene un icono de enlace gris a la izquierda, título en negro peso normal, subtítulo en texto azul subrayado (enlace), y dos botones de texto azul alineados a la derecha.",
+    "_generated": {
+      "hash": "64e4d9b1e043e8caafafbd0c2c413916",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:45.143Z"
+    }
+  },
+  {
+    "name": "con icono tipo: portapapeles",
+    "data": {
+      "headingLevel": 4,
+      "title": {
+        "text": "Datos de la empresa",
+        "attributes": {
+          "id": "t5"
+        }
+      },
+      "items": [
+        {
+          "text": "12 campos"
+        },
+        {
+          "text": "Con dependencia"
+        },
+        {
+          "text": "Tabla de datos"
+        }
+      ],
+      "icon": {
+        "type": "clipboard"
+      },
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-5a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-5a t5'>Eliminar</button></li><li><button id='b-5b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-5b t5'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Elemento rectangular con fondo blanco y borde gris claro de 1px. Contiene un icono de portapapeles gris a la izquierda, título en negrita negro, línea de metadatos con separadores verticales en texto gris, y dos botones de texto azul alineados a la derecha.",
+    "_generated": {
+      "hash": "9d540157f9073aeb54a21994d882ee24",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:45.143Z"
+    }
+  },
+  {
+    "name": "con icono personalizado",
+    "data": {
+      "headingLevel": 4,
+      "title": {
+        "text": "Lista de admitidos y excluidos de la convocatoria publicado en el BOA",
+        "attributes": {
+          "id": "t6"
+        }
+      },
+      "content":{
+        "html": "<a class=' c-link break-all ' href=' # '>Lista completa de admitidos (PDF, 20Kb)</a> "
+      },
+      "icon": {
+        "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'  width='1em' height='1em' class='w-8 h-8 text-neutral-dark' aria-label='Icono de papelera' focusable='false' role='img'><path d='M19.5 7.5h-15A.5.5 0 0 0 4 8v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a.5.5 0 0 0-.5-.5Zm-9.25 13a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0Zm5 0a.75.75 0 0 1-1.5 0v-9a.75.75 0 0 1 1.5 0ZM22 4h-4.75a.25.25 0 0 1-.25-.25V2.5A2.5 2.5 0 0 0 14.5 0h-5A2.5 2.5 0 0 0 7 2.5v1.25a.25.25 0 0 1-.25.25H2a1 1 0 0 0 0 2h20a1 1 0 0 0 0-2ZM9 3.75V2.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v1.25a.25.25 0 0 1-.25.25h-5.5A.25.25 0 0 1 9 3.75Z' fill='currentColor' transform='scale(2)'/></svg>"
+      },
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-6a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-6a t6'>Eliminar</button></li><li><button id='b-6b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-6b t6'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Incluye un icono de carpeta gris a la izquierda, seguido de texto de título negro en peso normal y un enlace azul subrayado debajo. Botones en azul están alineados a la derecha del contenedor.",
+    "_generated": {
+      "hash": "310edc56b39f5dd0d91497c0ec7752eb",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:54.621Z"
+    }
+  },
+  {
+    "name": "con icono tipo: documento, alineado verticalmente arriba",
+    "description": "Usa el parámetro <code>containerClasses</code> del parámetro <code>icon</code> para añadir clases al contenedor del icono. Esto permite posicionarlo o cambiar de color. En este ejemplo el icono aparece alineado verticalmente arriba en vez de centrado.",
+    "data": {
+      "headingLevel": 4,
+      "title": {
+        "text": "Resolución de años anteriores",
+        "attributes": {
+          "id": "t3"
+        }
+      },
+      "content":{
+        "text": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+        proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      },
+      "icon": {
+        "type": "document",
+        "containerClasses": "self-start h-full mr-base"
+      },
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-3a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-3a t3'>Eliminar</button></li><li><button id='b-3b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-3b t3'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Presenta un icono de documento gris alineado en la parte superior izquierda, con título negro en peso normal a su derecha y párrafo de texto gris en peso normal debajo que ocupa varias líneas. Botones en azul están posicionados en la esquina superior derecha.",
+    "_generated": {
+      "hash": "0c746baed8c9cb2e0828778c0e90d7cc",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:54.621Z"
+    }
+  },
+  {
+    "name": "arrastrable con icono tipo: documento",
+    "data": {
+      "headingLevel": 4,
+      "title": {
+        "text": "Resolución de años anteriores",
+        "attributes": {
+          "id": "t7"
+        }
+      },
+      "content":{
+        "html": "<a class=' c-link break-all ' href=' # '>Resolución años anteriores (PDF, 20Kb)</a> "
+      },
+      "icon": {
+        "type": "document"
+      },
+      "isDraggable": true,
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-7a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-7a t7'>Eliminar</button></li><li><button id='b-7b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-7b t7'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Contenedor rectangular con fondo blanco y borde gris claro de 1px. Muestra un icono de manejador de arrastre gris (seis puntos) a la izquierda, seguido de un icono de documento gris, título negro en peso normal y enlace azul subrayado debajo del título. Botones en azul están alineados a la derecha del contenedor.",
+    "_generated": {
+      "hash": "4736084104a58bad94f21e8afd10e596",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:02:54.621Z"
+    }
+  },
+  {
+    "name": "con clases, descripción, items, contenido y acciones",
+    "data": {
+      "headingLevel": 4,
+      "title":{
+        "text": "Registro de alta de la asociación",
+        "classes": "font-bold",
+        "attributes": {
+          "id": "t8"
+        }
+      },
+      "description":{
+        "text": "Documento acreditativo de registro de alta de la asociación"
+      },
+      "items": [
+        {
+          "text": "Desde modelo"
+        },
+        {
+          "text": "Obligatorio previo a resolución"
+        },
+        {
+          "text": "Condicionado"
+        }
+      ],
+      "content":{
+        "html": "Modelo: <a class=' c-link break-all ' href=' # '>Modelo de fianza (PDF, 20Kb)</a> ",
+        "classes": "text-neutral-dark"
+      },
+      "caller": "<ul class='flex flex-wrap gap-sm'><li><button id='b-8a' class=' c-button c-button--sm c-button--transparent ' aria-labelledby='b-8a t8'>Eliminar</button></li><li><button id='b-8b' class='c-button c-button--sm c-button--transparent' aria-labelledby='b-8b t8'>Editar</button></li></ul>"
+    },
+    "visualDescription": "Componente rectangular con borde gris claro, fondo blanco y encabezado con texto negro en negrita. Contiene título, subtítulo gris, metadatos con separadores verticales, y enlaces azules alineados a la derecha superior.",
+    "_generated": {
+      "hash": "5e1fd5ac697e4e67eb884526da610c51",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:02.178Z"
+    }
+  }
 ] %}