desy-html 16.0.4 → 17.0.1

package/src/templates/components/links-list/_examples.links-list.njk

@@ -1,761 +1,761 @@
-{% set exampleComponent = "links-list" %}
-
-{% set iconSimple %}
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle" aria-label="Carpeta de documentos"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg>
-{% endset %}
-
-{% set iconComplex %}
-  <div class="flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle" aria-label="Carpeta de documentos"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg></div>
-{% endset %}
-
-{% set subitems %}
-  <ul class="-mr-lg -mb-base bg-white">
-    <li class="relative p-base border-t border-neutral-base hover:bg-neutral-light"><a href="#" class="c-link c-link--full c-link--no-underline flex items-center"><span class="flex-1">Subitem 1</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center inline-block" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a></li>
-    <li class="relative p-base border-t border-neutral-base hover:bg-neutral-light"><a href="#" class="c-link c-link--full c-link--no-underline flex items-center"><span class="flex-1">Subitem 2</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center inline-block" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a></li>
-    <li class="relative p-base border-t border-neutral-base hover:bg-neutral-light"><a href="#" class="c-link c-link--full c-link--no-underline flex items-center"><span class="flex-1">Subitem 3</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center inline-block" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a></li>
-  </ul>
-{% endset %}
-
-
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "idPrefix": "default",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "href": "#",
-          "text": "Item 2"
-        },
-        {
-          "href": "#",
-          "text": "Item 3"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista de tres enlaces de texto en color azul turquesa, cada uno alineado a la izquierda con una flecha azul turquesa a la derecha. Los elementos están separados por líneas divisorias grises horizontales de 1px. El contenedor tiene un borde gris claro de 1px y fondo blanco, con un título en negro en la parte superior.",
-    "_generated": {
-      "hash": "d272d16a88348c250dab89e321f1b054",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:03:25.807Z"
-    }
-  },
-  {
-    "name": "Con varios tipos de icono a la derecha",
-    "description": "Utiliza el parámetro `iconRight` y sus parámetro: `type`, `html` y `containerClasses` para cambiar el tipo de icono de la derecha.",
-    "data": {
-      "idPrefix": "iconright",
-      "items": [
-        {
-          "href": "#",
-          "text": "Sin iconRight (arrow por defecto)"
-        },
-        {
-          "href": "#",
-          "text": "iconRight.type: arrow",
-          "iconRight": {
-            "type": "arrow"
-          }
-        },
-        {
-          "href": "#",
-          "text": "iconRight.type: chevron",
-          "iconRight": {
-            "type": "chevron"
-          }
-        },
-        {
-          "href": "#",
-          "text": "iconRight.type: none",
-          "iconRight": {
-            "type": "none"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Con icono pesonalizado usando iconRight.html",
-          "iconRight": {
-            "html": "<svg class='self-center' aria-hidden='true' focusable='false' width='1em' height='1em' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
-            <g>
-            <path fill-rule='evenodd' clip-rule='evenodd' d='M6.28572 1.71429C6.12793 1.71429 6.00001 1.84221 6.00001 2V3.14286H10V2C10 1.84221 9.87209 1.71429 9.71429 1.71429H6.28572ZM11.7143 3.14286V2C11.7143 0.895431 10.8189 0 9.71429 0H6.28572C5.18115 0 4.28572 0.895431 4.28572 2V3.14286H1.14286C0.669476 3.14286 0.285721 3.52662 0.285721 4C0.285721 4.47338 0.669476 4.85714 1.14286 4.85714H5.14286H10.8572H14.8572C15.3305 4.85714 15.7143 4.47338 15.7143 4C15.7143 3.52662 15.3305 3.14286 14.8572 3.14286H11.7143ZM2.85715 6.28571C2.69243 6.28571 2.53572 6.3568 2.42722 6.48073C2.31872 6.60466 2.26897 6.76939 2.29074 6.93266L3.4336 15.5041C3.47145 15.788 3.71361 16 4.00001 16H12C12.2864 16 12.5286 15.788 12.5664 15.5041L13.7093 6.93266C13.7311 6.76939 13.6813 6.60466 13.5728 6.48073C13.4642 6.3568 13.3076 6.28571 13.1429 6.28571H2.85715Z' fill='currentColor'></path>
-            </g></svg>"
-          }
-        },
-        {
-          "href": "#",
-          "text": "iconRight.containerClasses para posicionar el icono",
-          "sub": {
-            "html": "<p>También se puede usar item.containerClasses para quitar el padding lateral del item.</p><p>Lorem, ipsum, dolor sit amet consectetur adipisicing elit. Esse consequuntur rem, unde doloribus eaque accusantium? Distinctio recusandae laudantium tenetur explicabo, vero, repellat, earum debitis voluptatem maxime perspiciatis doloribus adipisci qui?</p>"
-          },
-          "iconRight": {
-            "type": "arrow",
-            "containerClasses": "absolute right-0 top-[50%] -mt-[0.5em]"
-          },
-          "containerClasses": "relative border-y border-neutral-base -my-px"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista de enlaces con texto en azul turquesa, donde cada elemento tiene un icono diferente a la derecha. Los elementos están separados por líneas divisorias grises horizontales de 1px, en un contenedor con borde gris claro y fondo blanco. El último elemento contiene un bloque de texto largo en negro, con múltiples líneas y un icono de flecha a la derecha.",
-    "_generated": {
-      "hash": "71f4c9c91366a7312b7e438b59370c62",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:03:25.807Z"
-    }
-  },
-  {
-    "name": "con icono",
-    "data": {
-      "idPrefix": "with-icon",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 3",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista de tres enlaces con íconos de enlace externo en gris a la izquierda, texto en azul turquesa en el centro, y flechas azul turquesa a la derecha. Los elementos están separados por líneas divisorias grises horizontales de 1px. El contenedor tiene un borde gris claro de 1px y fondo blanco, con un título en negro en la parte superior.",
-    "_generated": {
-      "hash": "ecbcb0360e11f695118663cc1dc14d8b",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:03:25.807Z"
-    }
-  },
-  {
-    "name": "con clases de css aplicadas",
-    "data": {
-      "idPrefix": "with-classes-applied",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item grande con icono",
-          "classes": "flex justify-between items-center py-base text-2xl",
-          "icon": {
-            "html": iconComplex | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item grande con icono",
-          "classes": "flex justify-between items-center py-base text-2xl",
-          "icon": {
-            "html": iconComplex | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item grande con icono",
-          "classes": "flex justify-between items-center py-base text-2xl",
-          "icon": {
-            "html": iconComplex | trim
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista vertical de tres elementos, cada uno con icono de carpeta azul oscuro a la izquierda, texto del enlace azul oscuro subrayado en el centro, y flecha azul oscuro a la derecha. Fondo blanco, separación vertical entre elementos, alineación horizontal distribuida con espaciado interno generoso.",
-    "_generated": {
-      "hash": "a39c3890629a18b2e5228fff4e67f98c",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:03:35.047Z"
-    }
-  },
-  {
-    "name": "con listClasses aplicado: con líneas horizontales arriba y abajo",
-    "data": {
-      "idPrefix": "with-listclasses",
-      "listClasses": "divide-y divide-neutral-base border-t border-b border-neutral-base",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 3",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista vertical de tres elementos con líneas divisorias grises horizontales entre cada ítem. Cada elemento tiene icono de carpeta azul oscuro a la izquierda, texto del enlace azul oscuro subrayado en el centro, y flecha azul oscuro a la derecha. Fondo blanco con espaciado interno moderado y bordes superior e inferior grises.",
-    "_generated": {
-      "hash": "5d690ee52d5e1b1352570c1260e159e3",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:03:35.047Z"
-    }
-  },
-  {
-    "name": "con containerClasses aplicado: con aspecto de cards",
-    "data": {
-      "idPrefix": "with-containerclasses",
-      "listClasses": "border border-transparent",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1",
-          "containerClasses": "my-sm px-base border border-neutral-base rounded-sm",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "containerClasses": "my-sm px-base border border-neutral-base rounded-sm",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 3",
-          "containerClasses": "px-base border border-neutral-base rounded-sm",
-          "icon": {
-            "html": iconSimple | trim
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista vertical de tres elementos presentados como tarjetas rectangulares con borde gris claro de 1px. Cada tarjeta tiene fondo blanco, icono de carpeta azul oscuro a la izquierda, texto del enlace azul oscuro subrayado en el centro, y flecha azul oscuro a la derecha. Separación vertical entre tarjetas y esquinas ligeramente redondeadas.",
-    "_generated": {
-      "hash": "741fe943716b16732c92380026d136d3",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:03:35.047Z"
-    }
-  },
-  {
-    "name": "con containerClasses aplicado: con aspecto de cards y subitems",
-    "data": {
-      "idPrefix": "with-containerclasses",
-      "listClasses": "border border-transparent",
-      "items": [
-        {
-          "html": '<div class="relative hover:bg-neutral-light c-link c-link--no-underline -mt-base pt-base"><div class="px-base pb-base w-full flex items-center"><div class="flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle" aria-label="Carpeta de documentos"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg></div><a href="#" class="mx-base w-full align-middle font-semibold c-link c-link--full c-link--no-underline text-lg">Item 1</a><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center inline-block flex-none" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></div>
-          </div>',
-          "containerClasses": "border border-neutral-base rounded-sm",
-          "iconRight": {
-            "type": "none"
-          },
-          "sub": {
-            "html": subitems | safe
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Contenedor rectangular con borde gris claro y fondo blanco. Contiene un elemento con ícono de carpeta azul a la izquierda, texto azul en negrita, y flecha chevron gris a la derecha. Debajo aparece texto gris claro de menor tamaño.",
-    "_generated": {
-      "hash": "686bd62d217b8a29ddd9b9416f938c5b",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:03:44.677Z"
-    }
-  },
-  {
-    "name": "con item deshabilitado",
-    "data": {
-      "idPrefix": "with-disabled-item",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "href": "#",
-          "text": "Item 2"
-        },
-        {
-          "href": "#",
-          "text": "Item 3",
-          "disabled": true
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista vertical de tres elementos con separadores horizontales grises claros. Los dos primeros elementos tienen texto azul en formato de enlace con flechas azules a la derecha. El tercer elemento muestra texto gris claro sin enlace y flecha gris desaturada, indicando estado inactivo.",
-    "_generated": {
-      "hash": "91186ae11902e6bd6d8d881c0b5399f8",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:03:44.677Z"
-    }
-  },
-  {
-    "name": "sin href",
-    "data": {
-      "idPrefix": "without-href",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "text": "Item 2"
-        },
-        {
-          "href": "#",
-          "text": "Item 3"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista vertical de tres elementos separados por líneas horizontales grises tenues. Primer elemento: texto azul con flecha azul a la derecha. Segundo elemento: texto negro sin formato de enlace y sin flecha. Tercer elemento: texto azul con flecha azul a la derecha.",
-    "_generated": {
-      "hash": "e3f5680595f77cd95a68a5bb92244087",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:03:44.677Z"
-    }
-  },
-  {
-    "name": "con item activo",
-    "data": {
-      "idPrefix": "with-active-item",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "active": true
-        },
-        {
-          "href": "#",
-          "text": "Item 3"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista vertical de tres enlaces de texto azul con iconos de flecha azul alineados a la derecha. Fondo blanco con bordes grises delgados, el primer enlace tiene fondo celeste claro indicando estado activo. Espaciado uniforme entre elementos.",
-    "_generated": {
-      "hash": "adcff09185265d85c267b59c7d3a9cc8",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:03:53.992Z"
-    }
-  },
-  {
-    "name": "con target en los enlaces",
-    "data": {
-      "idPrefix": "with-target-in-links",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1",
-          "target": "_blank",
-          "attributes": {
-            "title": "Se abre en ventana nueva"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "target": "_blank",
-          "attributes": {
-            "title": "Se abre en ventana nueva"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 3",
-          "target": "_blank",
-          "attributes": {
-            "title": "Se abre en ventana nueva"
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista vertical de tres enlaces de texto azul con iconos de flecha azul alineados a la derecha. Fondo blanco con bordes grises delgados, todos los elementos tienen fondo blanco sin estado activo visible. Espaciado uniforme entre filas.",
-    "_generated": {
-      "hash": "9b7cd59c77583fb4bbc562258a29932a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:03:53.993Z"
-    }
-  },
-  {
-    "name": "con un texto de item muy largo",
-    "data": {
-      "idPrefix": "with-very-long-option-text",
-      "items": [
-        {
-          "href": "#",
-          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. 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."
-        },
-        {
-          "href": "#",
-          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. 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."
-        },
-        {
-          "href": "#",
-          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. 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."
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista vertical de tres enlaces con texto extenso en color azul que ocupa múltiples líneas por ítem, cada uno con icono de flecha azul alineado a la derecha. Fondo blanco con bordes grises delgados, altura de cada fila expandida para acomodar el contenido largo. Los enlaces mantienen el texto azul estándar con peso de fuente normal.",
-    "_generated": {
-      "hash": "3ba4ef8819a59af0ca9dc6b74bf705f4",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:03:53.993Z"
-    }
-  },
-  {
-    "name": "con contenido descriptivo en cada item",
-    "data": {
-      "idPrefix": "descriptive-example",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1",
-          "sub": {
-            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "sub": {
-            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 3",
-          "sub": {
-            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista de tres elementos con fondo blanco y bordes grises finos. Cada elemento contiene un título en azul en peso negrita, seguido de texto descriptivo gris en línea inferior con peso normal. Flecha azul alineada a la derecha en cada fila indica interactividad.",
-    "_generated": {
-      "hash": "a8a7a7d3e59b93529494a2476ea7f0b6",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:04:03.415Z"
-    }
-  },
-  {
-    "name": "con idPrefix",
-    "description": "Muestra el código para ver el idPrefix aplicado.",
-    "data": {
-      "idPrefix": "site-menu-item",
-      "items": [
-        {
-          "href": "#",
-          "text": "Opción 1"
-        },
-        {
-          "href": "#",
-          "text": "Opción 2"
-        },
-        {
-          "href": "#",
-          "text": "Opción 3"
-        },
-        {
-          "href": "#",
-          "text": "Opción 4"
-        },
-        {
-          "href": "#",
-          "text": "Opción 5"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista de cinco elementos con fondo blanco y bordes grises finos. Cada fila muestra texto de enlace en azul con peso normal, alineado a la izquierda. Flecha azul posicionada en extremo derecho de cada elemento señala navegación.",
-    "_generated": {
-      "hash": "f2c64c635f9bc7f7dddd16cd4c0e7078",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:04:03.415Z"
-    }
-  },
-  {
-    "name": "con ids individuales",
-    "description": "Muestra el código para ver los ids aplicados.",
-    "data": {
-      "items": [
-        {
-          "href": "#",
-          "text": "Opción 1",
-          "id": "option-A"
-        },
-        {
-          "href": "#",
-          "text": "Opción 2",
-          "id": "option-B"
-        },
-        {
-          "href": "#",
-          "text": "Opción 3",
-          "id": "option-C"
-        },
-        {
-          "href": "#",
-          "text": "Opción 4",
-          "id": "option-D"
-        },
-        {
-          "href": "#",
-          "text": "Opción 5",
-          "id": "option-E"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista de cinco elementos con fondo blanco y separadores grises horizontales. Cada entrada presenta texto de enlace azul en peso normal, con flecha azul en lado derecho. Diseño vertical uniforme con espaciado consistente entre filas.",
-    "_generated": {
-      "hash": "7dbc406ba71526e8d4e9ab582e095707",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:04:03.415Z"
-    }
-  },
-  {
-    "name": "con atributos",
-    "description": "Muestra el código para ver cómo se aplican los atributos.",
-    "data": {
-      "items": [
-        {
-          "href": "#",
-          "text": "Opción 1",
-          "attributes": {
-            "data-attribute-1": "value-A",
-            "data-attribute-2": "value-B",
-            "data-attribute-3": "value-C"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Opción 2",
-          "attributes": {
-            "data-attribute-1": "value-A",
-            "data-attribute-2": "value-B",
-            "data-attribute-3": "value-C"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Opción 3",
-          "attributes": {
-            "data-attribute-1": "value-A",
-            "data-attribute-2": "value-B",
-            "data-attribute-3": "value-C"
-          },
-          "sub": {
-            "attributes": {
-              "data-attribute-1": "value-A",
-              "data-attribute-2": "value-B",
-              "data-attribute-3": "value-C"
-            },
-            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p><p>Este es otro párrafo.</p>"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Opción 4",
-          "attributes": {
-            "data-attribute-1": "value-A",
-            "data-attribute-2": "value-B",
-            "data-attribute-3": "value-C"
-          }
-        },
-        {
-          "href": "#",
-          "text": "Opción 5",
-          "attributes": {
-            "data-attribute-1": "value-A",
-            "data-attribute-2": "value-B",
-            "data-attribute-3": "value-C"
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado",
-        "id": "nav-id-example"
-      }
-    },
-    "visualDescription": "Lista de cinco enlaces en texto azul con peso normal, cada uno con una flecha azul alineada a la derecha. Fondo blanco con separadores grises horizontales de 1px entre elementos. Un elemento incluye texto descriptivo gris debajo del enlace principal.",
-    "_generated": {
-      "hash": "b7f0ea5ff3f7291a0d1031bd589334bf",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:04:13.336Z"
-    }
-  },
-  {
-    "name": "Sin nav",
-    "description": "Usa el parámetro <code>'hasNav': false</code> para no rodear el componente con una etiqueta <code>&lt;nav&gt;</code>, asumiendo que el componente estará rodeado con un nav personalizado con su propio <code>aria-label</code> si lo necesita.",
-    "data": {
-      "idPrefix": "hasnav-false",
-      "hasNav": false,
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "href": "#",
-          "text": "Item 2"
-        },
-        {
-          "href": "#",
-          "text": "Item 3"
-        }
-      ]
-    },
-    "visualDescription": "Lista de tres enlaces en texto azul con peso normal, cada uno con flecha azul alineada a la derecha. Fondo blanco con líneas divisorias grises horizontales de 1px entre elementos. Espaciado vertical uniforme entre cada enlace.",
-    "_generated": {
-      "hash": "3d03cf5fbc5824345392c3f43add7897",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:04:13.336Z"
-    }
-  },
-  {
-    "name": "ejemplo mixto",
-    "data": {
-      "idPrefix": "mixed-example",
-      "items": [
-        {
-          "href": "#",
-          "html": "<strong>Deudas</strong>",
-          "classes": "flex justify-between items-center py-base text-lg",
-          "sub": {
-            "html": "<p class='c-paragraph-base mb-0'>Tienes <span class='text-alert-base'>deudas fuera de plazo</span></p>"
-          }
-        },
-        {
-          "href": "#",
-          "html": "<strong>Historial de pagos</strong>",
-          "classes": "flex justify-between items-center py-base text-lg"
-        },
-        {
-          "href": "#",
-          "html": "<strong>Certificado de corriente de pago</strong>",
-          "classes": "flex justify-between items-center py-base text-lg",
-          "sub": {
-            "html": "<p class='c-paragraph-base mb-0'>Tienes <strong>1 certificado disponible</strong>.</p>"
-          }
-        },
-        {
-          "href": "#",
-          "html": "<strong>Valoraciones de inmuebles</strong>",
-          "classes": "flex justify-between items-center py-base text-lg"
-        },
-        {
-          "href": "#",
-          "html": "<strong>Aplazamiento y fraccionamiento</strong>",
-          "classes": "flex justify-between items-center py-base text-lg",
-          "sub": {
-            "html": "<p class='c-paragraph-base mb-0'>Tienes 1 deuda fraccionada, has pagado <strong>2 fracciones</strong> de 5.</p>"
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado"
-      }
-    },
-    "visualDescription": "Lista de seis elementos con enlaces azules, algunos con texto descriptivo gris debajo. Fondo blanco con separadores grises horizontales de 1px. Cada enlace tiene flecha azul a la derecha. Incluye texto rojo destacado en un elemento y texto gris secundario en varios elementos describiendo estados.",
-    "_generated": {
-      "hash": "8dbbd731583a7b6d445b03cac343beb0",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:04:13.336Z"
-    }
-  },
-  {
-    "name": "Activar un item con Javascript",
-    "description": "Puedes activar un item con Javascript, usa la función global <code>activateItemLinksList(elementWrapper, idItem)</code> para activar un item de la lista, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemLinksList('links-list-js', 'links-list-js-3')</code> para activar el último item de la lista.",
-    "data": {
-      "idPrefix": "links-list-js",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "href": "#",
-          "text": "Item 2"
-        },
-        {
-          "href": "#",
-          "text": "Item 3"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menú destacado",
-        "id": "links-list-js"
-      }
-    },
-    "visualDescription": "Lista de tres enlaces de texto en color azul claro (item 1, item 2, item 3) dispuestos verticalmente con separadores horizontales grises tenues entre ellos. Cada fila contiene el texto del enlace alineado a la izquierda y una flecha azul claro (→) alineada a la derecha. El conjunto está contenido en un recuadro con borde gris delgado y fondo blanco, con un encabezado en texto negro regular que dice \"Activar un item con Javascript\".",
-    "_generated": {
-      "hash": "e95ff247158f6585244d9321d846bf0e",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:04:21.129Z"
-    }
-  }
-] %}
+{% set exampleComponent = "links-list" %}
+
+{% set iconSimple %}
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle" aria-label="Carpeta de documentos"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg>
+{% endset %}
+
+{% set iconComplex %}
+  <div class="flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle" aria-label="Carpeta de documentos"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg></div>
+{% endset %}
+
+{% set subitems %}
+  <ul class="-mr-lg -mb-base bg-white">
+    <li class="relative p-base border-t border-neutral-base hover:bg-neutral-light"><a href="#" class="c-link c-link--full c-link--no-underline flex items-center"><span class="flex-1">Subitem 1</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center inline-block" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a></li>
+    <li class="relative p-base border-t border-neutral-base hover:bg-neutral-light"><a href="#" class="c-link c-link--full c-link--no-underline flex items-center"><span class="flex-1">Subitem 2</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center inline-block" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a></li>
+    <li class="relative p-base border-t border-neutral-base hover:bg-neutral-light"><a href="#" class="c-link c-link--full c-link--no-underline flex items-center"><span class="flex-1">Subitem 3</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center inline-block" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a></li>
+  </ul>
+{% endset %}
+
+
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "idPrefix": "default",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista de tres enlaces de texto en color azul turquesa, cada uno alineado a la izquierda con una flecha azul turquesa a la derecha. Los elementos están separados por líneas divisorias grises horizontales de 1px. El contenedor tiene un borde gris claro de 1px y fondo blanco, con un título en negro en la parte superior.",
+    "_generated": {
+      "hash": "d272d16a88348c250dab89e321f1b054",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:25.807Z"
+    }
+  },
+  {
+    "name": "Con varios tipos de icono a la derecha",
+    "description": "Utiliza el parámetro `iconRight` y sus parámetro: `type`, `html` y `containerClasses` para cambiar el tipo de icono de la derecha.",
+    "data": {
+      "idPrefix": "iconright",
+      "items": [
+        {
+          "href": "#",
+          "text": "Sin iconRight (arrow por defecto)"
+        },
+        {
+          "href": "#",
+          "text": "iconRight.type: arrow",
+          "iconRight": {
+            "type": "arrow"
+          }
+        },
+        {
+          "href": "#",
+          "text": "iconRight.type: chevron",
+          "iconRight": {
+            "type": "chevron"
+          }
+        },
+        {
+          "href": "#",
+          "text": "iconRight.type: none",
+          "iconRight": {
+            "type": "none"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Con icono pesonalizado usando iconRight.html",
+          "iconRight": {
+            "html": "<svg class='self-center' aria-hidden='true' focusable='false' width='1em' height='1em' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
+            <g>
+            <path fill-rule='evenodd' clip-rule='evenodd' d='M6.28572 1.71429C6.12793 1.71429 6.00001 1.84221 6.00001 2V3.14286H10V2C10 1.84221 9.87209 1.71429 9.71429 1.71429H6.28572ZM11.7143 3.14286V2C11.7143 0.895431 10.8189 0 9.71429 0H6.28572C5.18115 0 4.28572 0.895431 4.28572 2V3.14286H1.14286C0.669476 3.14286 0.285721 3.52662 0.285721 4C0.285721 4.47338 0.669476 4.85714 1.14286 4.85714H5.14286H10.8572H14.8572C15.3305 4.85714 15.7143 4.47338 15.7143 4C15.7143 3.52662 15.3305 3.14286 14.8572 3.14286H11.7143ZM2.85715 6.28571C2.69243 6.28571 2.53572 6.3568 2.42722 6.48073C2.31872 6.60466 2.26897 6.76939 2.29074 6.93266L3.4336 15.5041C3.47145 15.788 3.71361 16 4.00001 16H12C12.2864 16 12.5286 15.788 12.5664 15.5041L13.7093 6.93266C13.7311 6.76939 13.6813 6.60466 13.5728 6.48073C13.4642 6.3568 13.3076 6.28571 13.1429 6.28571H2.85715Z' fill='currentColor'></path>
+            </g></svg>"
+          }
+        },
+        {
+          "href": "#",
+          "text": "iconRight.containerClasses para posicionar el icono",
+          "sub": {
+            "html": "<p>También se puede usar item.containerClasses para quitar el padding lateral del item.</p><p>Lorem, ipsum, dolor sit amet consectetur adipisicing elit. Esse consequuntur rem, unde doloribus eaque accusantium? Distinctio recusandae laudantium tenetur explicabo, vero, repellat, earum debitis voluptatem maxime perspiciatis doloribus adipisci qui?</p>"
+          },
+          "iconRight": {
+            "type": "arrow",
+            "containerClasses": "absolute right-0 top-[50%] -mt-[0.5em]"
+          },
+          "containerClasses": "relative border-y border-neutral-base -my-px"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista de enlaces con texto en azul turquesa, donde cada elemento tiene un icono diferente a la derecha. Los elementos están separados por líneas divisorias grises horizontales de 1px, en un contenedor con borde gris claro y fondo blanco. El último elemento contiene un bloque de texto largo en negro, con múltiples líneas y un icono de flecha a la derecha.",
+    "_generated": {
+      "hash": "71f4c9c91366a7312b7e438b59370c62",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:25.807Z"
+    }
+  },
+  {
+    "name": "con icono",
+    "data": {
+      "idPrefix": "with-icon",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista de tres enlaces con íconos de enlace externo en gris a la izquierda, texto en azul turquesa en el centro, y flechas azul turquesa a la derecha. Los elementos están separados por líneas divisorias grises horizontales de 1px. El contenedor tiene un borde gris claro de 1px y fondo blanco, con un título en negro en la parte superior.",
+    "_generated": {
+      "hash": "ecbcb0360e11f695118663cc1dc14d8b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:25.807Z"
+    }
+  },
+  {
+    "name": "con clases de css aplicadas",
+    "data": {
+      "idPrefix": "with-classes-applied",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item grande con icono",
+          "classes": "flex justify-between items-center py-base text-2xl",
+          "icon": {
+            "html": iconComplex | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item grande con icono",
+          "classes": "flex justify-between items-center py-base text-2xl",
+          "icon": {
+            "html": iconComplex | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item grande con icono",
+          "classes": "flex justify-between items-center py-base text-2xl",
+          "icon": {
+            "html": iconComplex | trim
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista vertical de tres elementos, cada uno con icono de carpeta azul oscuro a la izquierda, texto del enlace azul oscuro subrayado en el centro, y flecha azul oscuro a la derecha. Fondo blanco, separación vertical entre elementos, alineación horizontal distribuida con espaciado interno generoso.",
+    "_generated": {
+      "hash": "a39c3890629a18b2e5228fff4e67f98c",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:35.047Z"
+    }
+  },
+  {
+    "name": "con listClasses aplicado: con líneas horizontales arriba y abajo",
+    "data": {
+      "idPrefix": "with-listclasses",
+      "listClasses": "divide-y divide-neutral-base border-t border-b border-neutral-base",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista vertical de tres elementos con líneas divisorias grises horizontales entre cada ítem. Cada elemento tiene icono de carpeta azul oscuro a la izquierda, texto del enlace azul oscuro subrayado en el centro, y flecha azul oscuro a la derecha. Fondo blanco con espaciado interno moderado y bordes superior e inferior grises.",
+    "_generated": {
+      "hash": "5d690ee52d5e1b1352570c1260e159e3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:35.047Z"
+    }
+  },
+  {
+    "name": "con containerClasses aplicado: con aspecto de cards",
+    "data": {
+      "idPrefix": "with-containerclasses",
+      "listClasses": "border border-transparent",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "containerClasses": "my-sm px-base border border-neutral-base rounded-sm",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "containerClasses": "my-sm px-base border border-neutral-base rounded-sm",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "containerClasses": "px-base border border-neutral-base rounded-sm",
+          "icon": {
+            "html": iconSimple | trim
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista vertical de tres elementos presentados como tarjetas rectangulares con borde gris claro de 1px. Cada tarjeta tiene fondo blanco, icono de carpeta azul oscuro a la izquierda, texto del enlace azul oscuro subrayado en el centro, y flecha azul oscuro a la derecha. Separación vertical entre tarjetas y esquinas ligeramente redondeadas.",
+    "_generated": {
+      "hash": "741fe943716b16732c92380026d136d3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:35.047Z"
+    }
+  },
+  {
+    "name": "con containerClasses aplicado: con aspecto de cards y subitems",
+    "data": {
+      "idPrefix": "with-containerclasses",
+      "listClasses": "border border-transparent",
+      "items": [
+        {
+          "html": '<div class="relative hover:bg-neutral-light c-link c-link--no-underline -mt-base pt-base"><div class="px-base pb-base w-full flex items-center"><div class="flex items-center justify-center p-sm -ml-sm bg-neutral-lighter rounded-full text-4xl"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" class="inline-block align-middle" aria-label="Carpeta de documentos"><path d="M19.71,20H4.29A2.28,2.28,0,0,1,2,17.71V6.29A2.28,2.28,0,0,1,4.29,4H7.72a2,2,0,0,1,1.44.61l1.19,1.24a.51.51,0,0,0,.36.15H20a2,2,0,0,1,2,2v9.71A2.28,2.28,0,0,1,19.71,20ZM4.29,6A.29.29,0,0,0,4,6.29V17.71a.29.29,0,0,0,.29.29H19.71a.29.29,0,0,0,.29-.29V8.5a.5.5,0,0,0-.5-.5h-9a2,2,0,0,1-1.44-.61L7.87,6.15A.55.55,0,0,0,7.51,6Z" fill="currentColor"></path></svg></div><a href="#" class="mx-base w-full align-middle font-semibold c-link c-link--full c-link--no-underline text-lg">Item 1</a><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" class="self-center inline-block flex-none" aria-hidden="true" focusable="false" width="1em" height="1em"><g><path fill="currentColor" fill-rule="evenodd" d="M3.4685 0.427C3.8512 0.0443 4.4717 0.0443 4.8545 0.427L10.388 5.9606C10.962 6.5346 10.962 7.4654 10.388 8.0395L4.8545 13.573C4.4717 13.9557 3.8512 13.9557 3.4685 13.573C3.0858 13.1903 3.0858 12.5698 3.4685 12.1871L8.6556 7L3.4685 1.813C3.0858 1.4303 3.0858 0.8098 3.4685 0.427Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></div>
+          </div>',
+          "containerClasses": "border border-neutral-base rounded-sm",
+          "iconRight": {
+            "type": "none"
+          },
+          "sub": {
+            "html": subitems | safe
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Contenedor rectangular con borde gris claro y fondo blanco. Contiene un elemento con ícono de carpeta azul a la izquierda, texto azul en negrita, y flecha chevron gris a la derecha. Debajo aparece texto gris claro de menor tamaño.",
+    "_generated": {
+      "hash": "686bd62d217b8a29ddd9b9416f938c5b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:44.677Z"
+    }
+  },
+  {
+    "name": "con item deshabilitado",
+    "data": {
+      "idPrefix": "with-disabled-item",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "disabled": true
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista vertical de tres elementos con separadores horizontales grises claros. Los dos primeros elementos tienen texto azul en formato de enlace con flechas azules a la derecha. El tercer elemento muestra texto gris claro sin enlace y flecha gris desaturada, indicando estado inactivo.",
+    "_generated": {
+      "hash": "91186ae11902e6bd6d8d881c0b5399f8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:44.677Z"
+    }
+  },
+  {
+    "name": "sin href",
+    "data": {
+      "idPrefix": "without-href",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista vertical de tres elementos separados por líneas horizontales grises tenues. Primer elemento: texto azul con flecha azul a la derecha. Segundo elemento: texto negro sin formato de enlace y sin flecha. Tercer elemento: texto azul con flecha azul a la derecha.",
+    "_generated": {
+      "hash": "e3f5680595f77cd95a68a5bb92244087",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:44.677Z"
+    }
+  },
+  {
+    "name": "con item activo",
+    "data": {
+      "idPrefix": "with-active-item",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "active": true
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista vertical de tres enlaces de texto azul con iconos de flecha azul alineados a la derecha. Fondo blanco con bordes grises delgados, el primer enlace tiene fondo celeste claro indicando estado activo. Espaciado uniforme entre elementos.",
+    "_generated": {
+      "hash": "adcff09185265d85c267b59c7d3a9cc8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:53.992Z"
+    }
+  },
+  {
+    "name": "con target en los enlaces",
+    "data": {
+      "idPrefix": "with-target-in-links",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "target": "_blank",
+          "attributes": {
+            "title": "Se abre en ventana nueva"
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista vertical de tres enlaces de texto azul con iconos de flecha azul alineados a la derecha. Fondo blanco con bordes grises delgados, todos los elementos tienen fondo blanco sin estado activo visible. Espaciado uniforme entre filas.",
+    "_generated": {
+      "hash": "9b7cd59c77583fb4bbc562258a29932a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:53.993Z"
+    }
+  },
+  {
+    "name": "con un texto de item muy largo",
+    "data": {
+      "idPrefix": "with-very-long-option-text",
+      "items": [
+        {
+          "href": "#",
+          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. 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."
+        },
+        {
+          "href": "#",
+          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. 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."
+        },
+        {
+          "href": "#",
+          "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. 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."
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista vertical de tres enlaces con texto extenso en color azul que ocupa múltiples líneas por ítem, cada uno con icono de flecha azul alineado a la derecha. Fondo blanco con bordes grises delgados, altura de cada fila expandida para acomodar el contenido largo. Los enlaces mantienen el texto azul estándar con peso de fuente normal.",
+    "_generated": {
+      "hash": "3ba4ef8819a59af0ca9dc6b74bf705f4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:03:53.993Z"
+    }
+  },
+  {
+    "name": "con contenido descriptivo en cada item",
+    "data": {
+      "idPrefix": "descriptive-example",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "sub": {
+            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "sub": {
+            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "sub": {
+            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p>"
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista de tres elementos con fondo blanco y bordes grises finos. Cada elemento contiene un título en azul en peso negrita, seguido de texto descriptivo gris en línea inferior con peso normal. Flecha azul alineada a la derecha en cada fila indica interactividad.",
+    "_generated": {
+      "hash": "a8a7a7d3e59b93529494a2476ea7f0b6",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:03.415Z"
+    }
+  },
+  {
+    "name": "con idPrefix",
+    "description": "Muestra el código para ver el idPrefix aplicado.",
+    "data": {
+      "idPrefix": "site-menu-item",
+      "items": [
+        {
+          "href": "#",
+          "text": "Opción 1"
+        },
+        {
+          "href": "#",
+          "text": "Opción 2"
+        },
+        {
+          "href": "#",
+          "text": "Opción 3"
+        },
+        {
+          "href": "#",
+          "text": "Opción 4"
+        },
+        {
+          "href": "#",
+          "text": "Opción 5"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista de cinco elementos con fondo blanco y bordes grises finos. Cada fila muestra texto de enlace en azul con peso normal, alineado a la izquierda. Flecha azul posicionada en extremo derecho de cada elemento señala navegación.",
+    "_generated": {
+      "hash": "f2c64c635f9bc7f7dddd16cd4c0e7078",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:03.415Z"
+    }
+  },
+  {
+    "name": "con ids individuales",
+    "description": "Muestra el código para ver los ids aplicados.",
+    "data": {
+      "items": [
+        {
+          "href": "#",
+          "text": "Opción 1",
+          "id": "option-A"
+        },
+        {
+          "href": "#",
+          "text": "Opción 2",
+          "id": "option-B"
+        },
+        {
+          "href": "#",
+          "text": "Opción 3",
+          "id": "option-C"
+        },
+        {
+          "href": "#",
+          "text": "Opción 4",
+          "id": "option-D"
+        },
+        {
+          "href": "#",
+          "text": "Opción 5",
+          "id": "option-E"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista de cinco elementos con fondo blanco y separadores grises horizontales. Cada entrada presenta texto de enlace azul en peso normal, con flecha azul en lado derecho. Diseño vertical uniforme con espaciado consistente entre filas.",
+    "_generated": {
+      "hash": "7dbc406ba71526e8d4e9ab582e095707",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:03.415Z"
+    }
+  },
+  {
+    "name": "con atributos",
+    "description": "Muestra el código para ver cómo se aplican los atributos.",
+    "data": {
+      "items": [
+        {
+          "href": "#",
+          "text": "Opción 1",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Opción 2",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Opción 3",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          },
+          "sub": {
+            "attributes": {
+              "data-attribute-1": "value-A",
+              "data-attribute-2": "value-B",
+              "data-attribute-3": "value-C"
+            },
+            "html": "<p>Este es un párrafo explicativo metido con un sub.html dentro del Item</p><p>Este es otro párrafo.</p>"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Opción 4",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        },
+        {
+          "href": "#",
+          "text": "Opción 5",
+          "attributes": {
+            "data-attribute-1": "value-A",
+            "data-attribute-2": "value-B",
+            "data-attribute-3": "value-C"
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado",
+        "id": "nav-id-example"
+      }
+    },
+    "visualDescription": "Lista de cinco enlaces en texto azul con peso normal, cada uno con una flecha azul alineada a la derecha. Fondo blanco con separadores grises horizontales de 1px entre elementos. Un elemento incluye texto descriptivo gris debajo del enlace principal.",
+    "_generated": {
+      "hash": "b7f0ea5ff3f7291a0d1031bd589334bf",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:13.336Z"
+    }
+  },
+  {
+    "name": "Sin nav",
+    "description": "Usa el parámetro <code>'hasNav': false</code> para no rodear el componente con una etiqueta <code>&lt;nav&gt;</code>, asumiendo que el componente estará rodeado con un nav personalizado con su propio <code>aria-label</code> si lo necesita.",
+    "data": {
+      "idPrefix": "hasnav-false",
+      "hasNav": false,
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ]
+    },
+    "visualDescription": "Lista de tres enlaces en texto azul con peso normal, cada uno con flecha azul alineada a la derecha. Fondo blanco con líneas divisorias grises horizontales de 1px entre elementos. Espaciado vertical uniforme entre cada enlace.",
+    "_generated": {
+      "hash": "3d03cf5fbc5824345392c3f43add7897",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:13.336Z"
+    }
+  },
+  {
+    "name": "ejemplo mixto",
+    "data": {
+      "idPrefix": "mixed-example",
+      "items": [
+        {
+          "href": "#",
+          "html": "<strong>Deudas</strong>",
+          "classes": "flex justify-between items-center py-base text-lg",
+          "sub": {
+            "html": "<p class='c-paragraph-base mb-0'>Tienes <span class='text-alert-base'>deudas fuera de plazo</span></p>"
+          }
+        },
+        {
+          "href": "#",
+          "html": "<strong>Historial de pagos</strong>",
+          "classes": "flex justify-between items-center py-base text-lg"
+        },
+        {
+          "href": "#",
+          "html": "<strong>Certificado de corriente de pago</strong>",
+          "classes": "flex justify-between items-center py-base text-lg",
+          "sub": {
+            "html": "<p class='c-paragraph-base mb-0'>Tienes <strong>1 certificado disponible</strong>.</p>"
+          }
+        },
+        {
+          "href": "#",
+          "html": "<strong>Valoraciones de inmuebles</strong>",
+          "classes": "flex justify-between items-center py-base text-lg"
+        },
+        {
+          "href": "#",
+          "html": "<strong>Aplazamiento y fraccionamiento</strong>",
+          "classes": "flex justify-between items-center py-base text-lg",
+          "sub": {
+            "html": "<p class='c-paragraph-base mb-0'>Tienes 1 deuda fraccionada, has pagado <strong>2 fracciones</strong> de 5.</p>"
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado"
+      }
+    },
+    "visualDescription": "Lista de seis elementos con enlaces azules, algunos con texto descriptivo gris debajo. Fondo blanco con separadores grises horizontales de 1px. Cada enlace tiene flecha azul a la derecha. Incluye texto rojo destacado en un elemento y texto gris secundario en varios elementos describiendo estados.",
+    "_generated": {
+      "hash": "8dbbd731583a7b6d445b03cac343beb0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:13.336Z"
+    }
+  },
+  {
+    "name": "Activar un item con Javascript",
+    "description": "Puedes activar un item con Javascript, usa la función global <code>activateItemLinksList(elementWrapper, idItem)</code> para activar un item de la lista, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemLinksList('links-list-js', 'links-list-js-3')</code> para activar el último item de la lista.",
+    "data": {
+      "idPrefix": "links-list-js",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menú destacado",
+        "id": "links-list-js"
+      }
+    },
+    "visualDescription": "Lista de tres enlaces de texto en color azul claro (item 1, item 2, item 3) dispuestos verticalmente con separadores horizontales grises tenues entre ellos. Cada fila contiene el texto del enlace alineado a la izquierda y una flecha azul claro (→) alineada a la derecha. El conjunto está contenido en un recuadro con borde gris delgado y fondo blanco, con un encabezado en texto negro regular que dice \"Activar un item con Javascript\".",
+    "_generated": {
+      "hash": "e95ff247158f6585244d9321d846bf0e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:04:21.129Z"
+    }
+  }
+] %}