desy-html 16.0.4 → 17.0.1

package/src/templates/components/menu-vertical/_examples.menu-vertical.njk

@@ -1,836 +1,836 @@
-{% set exampleComponent = "menu-vertical" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "idPrefix": "default",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "href": "#",
-          "text": "Item 2"
-        },
-        {
-          "href": "#",
-          "text": "Item 3"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu vertical"
-      }
-    },
-    "visualDescription": "Menú vertical con fondo blanco, borde gris de 1px, y esquinas redondeadas. Contiene tres items de menú con texto negro en peso normal, espaciados verticalmente de forma uniforme. El título del menú aparece en la parte superior en texto negro de menor tamaño.",
-    "_generated": {
-      "hash": "fd8df4fb2bff2b38514e179e8e08904f",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:07:23.811Z"
-    }
-  },
-  {
-    "name": "con item deshabilitado",
-    "data": {
-      "idPrefix": "disabled-item",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "href": "#",
-          "text": "Item 2"
-        },
-        {
-          "text": "Item 3",
-          "disabled": true
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu vertical"
-      }
-    },
-    "visualDescription": "Menú vertical con fondo blanco, borde gris de 1px, y esquinas redondeadas. Contiene tres items de menú: dos con texto negro en peso normal y uno con texto gris claro indicando estado deshabilitado. El título del menú aparece en la parte superior en texto negro de menor tamaño.",
-    "_generated": {
-      "hash": "39609c3fd5146f55f9b7e867bb2c80ab",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:07:23.811Z"
-    }
-  },
-  {
-    "name": "con item activo",
-    "description": "Añade <code>active: true</code> a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuVertical(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuVertical('mi-menu', 'active-item-3')</code> para desactivar el item actual y activar el tercer item de este ejemplo.",
-    "data": {
-      "idPrefix": "active-item",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "active": true
-        },
-        {
-          "href": "#",
-          "text": "Item 3"
-        }
-      ],
-      "attributes": {
-        "id": "mi-menu",
-        "aria-label": "Menu vertical"
-      }
-    },
-    "visualDescription": "Menú vertical con fondo blanco, borde gris de 1px, y esquinas redondeadas. Contiene tres items de menú: dos con texto negro en peso normal y uno con texto negro en peso negrita indicando estado activo. El título del menú aparece en la parte superior en texto negro de menor tamaño.",
-    "_generated": {
-      "hash": "601486139c1239ccf1f34160c72b5d5e",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:07:23.811Z"
-    }
-  },
-  {
-    "name": "con target en enlaces",
-    "data": {
-      "idPrefix": "target",
-      "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": "Menu vertical"
-      }
-    },
-    "visualDescription": "Lista vertical de tres ítems de texto negro sobre fondo blanco. Cada ítem presenta padding vertical uniforme sin separadores visuales entre elementos. Borde gris claro de 1px rodea todo el contenedor rectangular.",
-    "_generated": {
-      "hash": "f85c13be5455f032dd7253c03728d901",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:07:32.824Z"
-    }
-  },
-  {
-    "name": "con divisor",
-    "data": {
-      "idPrefix": "with-divisor",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1"
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "divider": true
-        },
-        {
-          "href": "#",
-          "text": "Item 3"
-        },
-        {
-          "href": "#",
-          "text": "Item 4"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu vertical"
-      }
-    },
-    "visualDescription": "Lista vertical de cuatro ítems de texto negro sobre fondo blanco con línea divisoria gris horizontal de 1px entre el segundo y tercer ítem. Cada ítem presenta padding vertical uniforme. Borde gris claro de 1px rodea todo el contenedor rectangular.",
-    "_generated": {
-      "hash": "8620dd3615ff5e5bfcd38790451ed960",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:07:32.824Z"
-    }
-  },
-  {
-    "name": "con un texto de item muy largo",
-    "data": {
-      "idPrefix": "long-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": "Menu vertical"
-      }
-    },
-    "visualDescription": "Lista vertical de tres ítems con párrafos de texto negro extenso sobre fondo blanco. Cada ítem contiene múltiples líneas de texto justificado que ocupa todo el ancho disponible. Borde gris claro de 1px rodea todo el contenedor rectangular con padding interno generoso.",
-    "_generated": {
-      "hash": "74aae777ae46646d22cac5847e6b1fd0",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:07:32.824Z"
-    }
-  },
-  {
-    "name": "con todos los items padres",
-    "data": {
-      "idPrefix": "parent-example",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1",
-          "id": "parent-example-item-1",
-          "sub": {
-            "items": [
-              {
-                "href": "#",
-                "text": "Subitem 1"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 2"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 3"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "parent-example-item-1"
-            }
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "id": "parent-example-item-2",
-          "sub": {
-            "items": [
-              {
-                "href": "#",
-                "text": "Subitem 1"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 2"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 3"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "parent-example-item-2"
-            }
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 3",
-          "id": "parent-example-item-3",
-          "sub": {
-            "items": [
-              {
-                "href": "#",
-                "text": "Subitem 1"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 2"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 3"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "parent-example-item-3"
-            }
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu vertical"
-      }
-    },
-    "visualDescription": "Menú vertical con fondo blanco y borde gris claro de 1px. Contiene tres ítems padres en texto negro estándar, cada uno seguido de tres subítems en texto gris oscuro con menor tamaño de fuente. Los subítems están indentados hacia la derecha respecto a sus padres.",
-    "_generated": {
-      "hash": "b40eda406588d49672663105d9652c63",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:07:41.719Z"
-    }
-  },
-  {
-    "name": "items con contenido descriptivo",
-    "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": "Menu vertical"
-      }
-    },
-    "visualDescription": "Menú vertical con fondo blanco y borde gris claro de 1px. Presenta tres ítems principales en texto negro negrita, cada uno acompañado de texto descriptivo gris en tamaño menor debajo. El espaciado vertical entre grupos de ítem-descripción es uniforme.",
-    "_generated": {
-      "hash": "228739a63de4455ede04026f8897c711",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:07:41.719Z"
-    }
-  },
-  {
-    "name": "con un item hijo activo",
-    "data": {
-      "idPrefix": "nav-item-with-children-active",
-      "items": [
-        {
-          "href": "#",
-          "text": "Item 1",
-          "id": "nav-item-item-1-a",
-          "sub": {
-            "items": [
-              {
-                "href": "#",
-                "text": "Subitem 1"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 2",
-                "active": true
-              },
-              {
-                "href": "#",
-                "text": "Subitem 3"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "nav-item-item-1-a"
-            }
-          }
-        },
-        {
-          "href": "#",
-          "text": "Item 2",
-          "id": "nav-item-item-2-a",
-          "sub": {
-            "items": [
-              {
-                "href": "#",
-                "text": "Subitem 1"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 2"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 3"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "nav-item-item-2-a"
-            }
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu vertical"
-      }
-    },
-    "visualDescription": "Menú vertical con fondo blanco y borde gris claro de 1px. Muestra dos ítems padres en texto negro estándar, cada uno con tres subítems indentados. Los subítems están en texto gris oscuro con tamaño de fuente reducido, manteniendo alineación vertical consistente.",
-    "_generated": {
-      "hash": "90be1cf579fa69ec1819716f36ad0609",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:07:41.719Z"
-    }
-  },
-  {
-    "name": "con hasUnderline, con deshabilitado o sin href en un padre e hijo",
-    "description": "Usa <code>'hasUnderline': true</code> cuando tienes mezclados, items deshabilitados o sin href e items normales.",
-    "data": {
-      "idPrefix": "nav-item-without-href",
-      "hasUnderline": true,
-      "items": [
-        {
-          "text": "Item 1 deshabilitado o sin href",
-          "id": "nav-item-item-1-b",
-          "disabled": true,
-          "sub": {
-            "items": [
-              {
-                "href": "#",
-                "text": "Subitem 1"
-              },
-              {
-                "text": "Subitem 2 deshabilitado o sin href",
-                "disabled": true
-              },
-              {
-                "href": "#",
-                "text": "Subitem 3"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "nav-item-item-1-b"
-            }
-          }
-        },
-        {
-          "text": "Item 2 sin href",
-          "id": "nav-item-item-2-b",
-          "sub": {
-            "items": [
-              {
-                "href": "#",
-                "text": "Subitem 1"
-              },
-              {
-                "text": "Subitem 2 sin href"
-              },
-              {
-                "href": "#",
-                "text": "Subitem 3"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "nav-item-item-2-b"
-            }
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu vertical"
-      }
-    },
-    "visualDescription": "Menú vertical con fondo blanco que contiene dos ítems principales en texto negro, cada uno con tres sub-ítems indentados. Los sub-ítems aparecen como enlaces azules subrayados con texto de peso normal, organizados en una lista jerárquica vertical.",
-    "_generated": {
-      "hash": "1238ac510565b0b1435096e7299c995d",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:07:51.975Z"
-    }
-  },
-  {
-    "name": "con clases de css aplicadas",
-    "data": {
-      "classes": "p-base bg-primary-light",
-      "items": [
-        {
-          "href": "#",
-          "text": "Opción 1"
-        },
-        {
-          "href": "#",
-          "text": "Opción 2",
-          "id": "classes-1",
-          "classes": "bg-white",
-          "sub": {
-            "classes": " p-sm border-l-4 border-alert-base bg-alert-light",
-            "items": [
-              {
-                "href": "#",
-                "text": "Enlace simple"
-              },
-              {
-                "text": "Enlace simple",
-                "classes": "text-alert-base bg-white",
-                "active": true
-              },
-              {
-                "href": "#",
-                "text": "Enlace simple"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "classes-1"
-            }
-          }
-        },
-        {
-          "href": "#",
-          "text": "Opción 3"
-        },
-        {
-          "href": "#",
-          "text": "Opción 4"
-        },
-        {
-          "href": "#",
-          "text": "Opción 5"
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu vertical"
-      }
-    },
-    "visualDescription": "Menú vertical con cinco opciones numeradas sobre fondo azul celeste claro. La segunda opción tiene fondo rosa salmón y contiene tres sub-ítems con borde vertical rojo a la izquierda, donde el sub-ítem del medio presenta fondo blanco mientras los otros dos mantienen el fondo rosa.",
-    "_generated": {
-      "hash": "f2d1bd6f6e2377cb8b5895cb22278d8a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:07:51.975Z"
-    }
-  },
-  {
-    "name": "con iconos en items",
-    "data": {
-      "idPrefix": "with-icons",
-      "items": [
-        {
-          "href": "#",
-          "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Archivo' focusable='false' role='img'><g id='new-file--empty-common-file-content'><path id='Subtract' fill='currentColor' fill-rule='evenodd' d='M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z' clip-rule='evenodd'></path></g></svg> Opción 1"
-        },
-        {
-          "href": "#",
-          "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'  width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Link' focusable='false' role='img'><g id='link-chain--create-hyperlink-link-make-unlink-connection-chain'><path id='Union-1' fill='currentColor' fill-rule='evenodd' d='M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z' clip-rule='evenodd'></path></g></svg> Opción 2"
-        },
-        {
-          "href": "#",
-          "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Solicitud' focusable='false' role='img'><g id='clipboard-text--edition-form-task-checklist-edit-clipboard'><path id='Union-2' fill='currentColor' fill-rule='evenodd' d='M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z' clip-rule='evenodd'></path></g></svg> Opción 3"
-        }
-      ],
-      "attributes": {
-        "id": "mi-menu-icons",
-        "aria-label": "Menu vertical"
-      }
-    },
-    "visualDescription": "Lista vertical de tres opciones en texto negro sobre fondo blanco, cada una precedida por un icono distintivo. La primera opción tiene un icono cuadrado negro, la segunda un icono de enlace o cadena gris, y la tercera un icono de documento o archivo negro.",
-    "_generated": {
-      "hash": "3982934ab1ff345b342bbaccadc6db20",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:07:51.975Z"
-    }
-  },
-  {
-    "name": "con idPrefix",
-    "description": "Mostrar código para ver el <code>idPrefix</code> 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": "Menu vertical"
-      }
-    },
-    "visualDescription": "Menú vertical con fondo blanco y borde gris claro de 1px. Contiene 5 opciones listadas verticalmente con texto negro de tamaño estándar y peso regular. Espaciado uniforme entre elementos, diseño minimalista sin iconos ni decoración adicional.",
-    "_generated": {
-      "hash": "2dedb9c1d0071f7180739efd46810701",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:01.086Z"
-    }
-  },
-  {
-    "name": "con ids individuales",
-    "description": "Mostrar código para ver los <code>id</code> 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": "Menu vertical"
-      }
-    },
-    "visualDescription": "Menú vertical con fondo blanco y borde gris claro de 1px. Presenta 5 opciones listadas verticalmente con texto negro de tamaño estándar y peso regular. Estructura de lista con espaciado consistente entre ítems, sin elementos gráficos adicionales.",
-    "_generated": {
-      "hash": "2b319939b306a84b7fb79eec92ef71a3",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:01.086Z"
-    }
-  },
-  {
-    "name": "con atributos",
-    "description": "Muestra el código para ver cómo se aplican los atributos",
-    "data": {
-      "idPrefix": "with-attributes",
-      "attributes": {
-        "id": "nav-id-example"
-      },
-      "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"
-            },
-            "items": [
-              {
-                "href": "#",
-                "text": "Enlace simple",
-                "attributes": {
-                  "data-attribute-1": "value-A",
-                  "data-attribute-2": "value-B",
-                  "data-attribute-3": "value-C"
-                }
-              },
-              {
-                "href": "#",
-                "text": "Enlace simple"
-              },
-              {
-                "href": "#",
-                "text": "Enlace simple"
-              }
-            ]
-          }
-        },
-        {
-          "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": "Menu vertical"
-      }
-    },
-    "visualDescription": "Menú vertical con fondo blanco y borde gris claro de 1px. Incluye 5 opciones listadas verticalmente con texto negro de tamaño estándar y peso regular, donde la opción 3 contiene 3 sub-elementos anidados con sangría a la izquierda y texto gris claro. Estructura jerárquica con espaciado vertical consistente entre todos los elementos.",
-    "_generated": {
-      "hash": "dcd66ac372f6612706f65d3543e7da9e",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:01.086Z"
-    }
-  },
-  {
-    "name": "con items mixtos",
-    "data": {
-      "name": "with-sub-items",
-      "idPrefix": "with-mixed-items",
-      "items": [
-        {
-          "href": "#",
-          "text": "Enlace simple"
-        },
-        {
-          "text": "Item sin href o deshabilitado",
-          "disabled": true
-        },
-        {
-          "href": "#",
-          "text": "Enlace simple"
-        },
-        {
-          "href": "#",
-          "text": "Padre con divisor",
-          "divider": true,
-          "id": "with-sub-items-1",
-          "sub": {
-            "items": [
-              {
-                "href": "#",
-                "text": "Enlace simple"
-              },
-              {
-                "href": "#",
-                "text": "Enlace simple",
-                "target": "_blank",
-                "attributes": {
-                  "title": "Se abre en ventana nueva"
-                }
-              },
-              {
-                "href": "#",
-                "text": "Enlace simple"
-              },
-              {
-                "href": "#",
-                "text": "Enlace simple",
-                "divider": true
-              },
-              {
-                "href": "#",
-                "text": "Enlace simple"
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "with-sub-items-1"
-            }
-          }
-        },
-        {
-          "href": "#",
-          "text": "Enlace simple"
-        },
-        {
-          "href": "#",
-          "text": "Enlace simple"
-        },
-        {
-          "href": "#",
-          "text": "Con HTML dentro",
-          "sub": {
-            "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": "Enlace simple"
-        },
-        {
-          "href": "#",
-          "text": "Enlace simple"
-        },
-        {
-          "href": "#",
-          "text": "Enlace simple"
-        },
-        {
-          "text": "Padre sin href",
-          "id": "with-sub-items-2",
-          "sub": {
-            "items": [
-              {
-                "href": "#",
-                "text": "Subitem"
-              },
-              {
-                "href": "#",
-                "text": "Subitem activo",
-                "active" : true
-              },
-              {
-                "text": "Subitem sin href o deshabilitado",
-                "disabled": true
-              }
-            ],
-            "attributes": {
-              "aria-labelledby": "with-sub-items-2"
-            }
-          }
-        }
-      ],
-      "attributes": {
-        "aria-label": "Menu vertical"
-      }
-    },
-    "visualDescription": "Menú vertical con fondo blanco que contiene ítems de texto en diferentes niveles de jerarquía y estados. Los ítems incluyen enlaces simples en texto negro regular, ítems con href deshabilitado en gris, padre con divisor en negro regular, subítems indentados hacia la derecha, subítem activo con fondo gris claro, y sección HTML dentro con texto explicativo en gris. El menú presenta separadores horizontales grises tenues entre algunas secciones para agrupar contenido relacionado.",
-    "_generated": {
-      "hash": "a9ac5ea96e6804c7da95ab5aeb7ede1b",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:09.889Z"
-    }
-  }
+{% set exampleComponent = "menu-vertical" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "idPrefix": "default",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu vertical"
+      }
+    },
+    "visualDescription": "Menú vertical con fondo blanco, borde gris de 1px, y esquinas redondeadas. Contiene tres items de menú con texto negro en peso normal, espaciados verticalmente de forma uniforme. El título del menú aparece en la parte superior en texto negro de menor tamaño.",
+    "_generated": {
+      "hash": "fd8df4fb2bff2b38514e179e8e08904f",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:07:23.811Z"
+    }
+  },
+  {
+    "name": "con item deshabilitado",
+    "data": {
+      "idPrefix": "disabled-item",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2"
+        },
+        {
+          "text": "Item 3",
+          "disabled": true
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu vertical"
+      }
+    },
+    "visualDescription": "Menú vertical con fondo blanco, borde gris de 1px, y esquinas redondeadas. Contiene tres items de menú: dos con texto negro en peso normal y uno con texto gris claro indicando estado deshabilitado. El título del menú aparece en la parte superior en texto negro de menor tamaño.",
+    "_generated": {
+      "hash": "39609c3fd5146f55f9b7e867bb2c80ab",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:07:23.811Z"
+    }
+  },
+  {
+    "name": "con item activo",
+    "description": "Añade <code>active: true</code> a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuVertical(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuVertical('mi-menu', 'active-item-3')</code> para desactivar el item actual y activar el tercer item de este ejemplo.",
+    "data": {
+      "idPrefix": "active-item",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "active": true
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        }
+      ],
+      "attributes": {
+        "id": "mi-menu",
+        "aria-label": "Menu vertical"
+      }
+    },
+    "visualDescription": "Menú vertical con fondo blanco, borde gris de 1px, y esquinas redondeadas. Contiene tres items de menú: dos con texto negro en peso normal y uno con texto negro en peso negrita indicando estado activo. El título del menú aparece en la parte superior en texto negro de menor tamaño.",
+    "_generated": {
+      "hash": "601486139c1239ccf1f34160c72b5d5e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:07:23.811Z"
+    }
+  },
+  {
+    "name": "con target en enlaces",
+    "data": {
+      "idPrefix": "target",
+      "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": "Menu vertical"
+      }
+    },
+    "visualDescription": "Lista vertical de tres ítems de texto negro sobre fondo blanco. Cada ítem presenta padding vertical uniforme sin separadores visuales entre elementos. Borde gris claro de 1px rodea todo el contenedor rectangular.",
+    "_generated": {
+      "hash": "f85c13be5455f032dd7253c03728d901",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:07:32.824Z"
+    }
+  },
+  {
+    "name": "con divisor",
+    "data": {
+      "idPrefix": "with-divisor",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1"
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "divider": true
+        },
+        {
+          "href": "#",
+          "text": "Item 3"
+        },
+        {
+          "href": "#",
+          "text": "Item 4"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu vertical"
+      }
+    },
+    "visualDescription": "Lista vertical de cuatro ítems de texto negro sobre fondo blanco con línea divisoria gris horizontal de 1px entre el segundo y tercer ítem. Cada ítem presenta padding vertical uniforme. Borde gris claro de 1px rodea todo el contenedor rectangular.",
+    "_generated": {
+      "hash": "8620dd3615ff5e5bfcd38790451ed960",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:07:32.824Z"
+    }
+  },
+  {
+    "name": "con un texto de item muy largo",
+    "data": {
+      "idPrefix": "long-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": "Menu vertical"
+      }
+    },
+    "visualDescription": "Lista vertical de tres ítems con párrafos de texto negro extenso sobre fondo blanco. Cada ítem contiene múltiples líneas de texto justificado que ocupa todo el ancho disponible. Borde gris claro de 1px rodea todo el contenedor rectangular con padding interno generoso.",
+    "_generated": {
+      "hash": "74aae777ae46646d22cac5847e6b1fd0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:07:32.824Z"
+    }
+  },
+  {
+    "name": "con todos los items padres",
+    "data": {
+      "idPrefix": "parent-example",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "id": "parent-example-item-1",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "parent-example-item-1"
+            }
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "id": "parent-example-item-2",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "parent-example-item-2"
+            }
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 3",
+          "id": "parent-example-item-3",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "parent-example-item-3"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu vertical"
+      }
+    },
+    "visualDescription": "Menú vertical con fondo blanco y borde gris claro de 1px. Contiene tres ítems padres en texto negro estándar, cada uno seguido de tres subítems en texto gris oscuro con menor tamaño de fuente. Los subítems están indentados hacia la derecha respecto a sus padres.",
+    "_generated": {
+      "hash": "b40eda406588d49672663105d9652c63",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:07:41.719Z"
+    }
+  },
+  {
+    "name": "items con contenido descriptivo",
+    "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": "Menu vertical"
+      }
+    },
+    "visualDescription": "Menú vertical con fondo blanco y borde gris claro de 1px. Presenta tres ítems principales en texto negro negrita, cada uno acompañado de texto descriptivo gris en tamaño menor debajo. El espaciado vertical entre grupos de ítem-descripción es uniforme.",
+    "_generated": {
+      "hash": "228739a63de4455ede04026f8897c711",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:07:41.719Z"
+    }
+  },
+  {
+    "name": "con un item hijo activo",
+    "data": {
+      "idPrefix": "nav-item-with-children-active",
+      "items": [
+        {
+          "href": "#",
+          "text": "Item 1",
+          "id": "nav-item-item-1-a",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2",
+                "active": true
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "nav-item-item-1-a"
+            }
+          }
+        },
+        {
+          "href": "#",
+          "text": "Item 2",
+          "id": "nav-item-item-2-a",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 2"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "nav-item-item-2-a"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu vertical"
+      }
+    },
+    "visualDescription": "Menú vertical con fondo blanco y borde gris claro de 1px. Muestra dos ítems padres en texto negro estándar, cada uno con tres subítems indentados. Los subítems están en texto gris oscuro con tamaño de fuente reducido, manteniendo alineación vertical consistente.",
+    "_generated": {
+      "hash": "90be1cf579fa69ec1819716f36ad0609",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:07:41.719Z"
+    }
+  },
+  {
+    "name": "con hasUnderline, con deshabilitado o sin href en un padre e hijo",
+    "description": "Usa <code>'hasUnderline': true</code> cuando tienes mezclados, items deshabilitados o sin href e items normales.",
+    "data": {
+      "idPrefix": "nav-item-without-href",
+      "hasUnderline": true,
+      "items": [
+        {
+          "text": "Item 1 deshabilitado o sin href",
+          "id": "nav-item-item-1-b",
+          "disabled": true,
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "text": "Subitem 2 deshabilitado o sin href",
+                "disabled": true
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "nav-item-item-1-b"
+            }
+          }
+        },
+        {
+          "text": "Item 2 sin href",
+          "id": "nav-item-item-2-b",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem 1"
+              },
+              {
+                "text": "Subitem 2 sin href"
+              },
+              {
+                "href": "#",
+                "text": "Subitem 3"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "nav-item-item-2-b"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu vertical"
+      }
+    },
+    "visualDescription": "Menú vertical con fondo blanco que contiene dos ítems principales en texto negro, cada uno con tres sub-ítems indentados. Los sub-ítems aparecen como enlaces azules subrayados con texto de peso normal, organizados en una lista jerárquica vertical.",
+    "_generated": {
+      "hash": "1238ac510565b0b1435096e7299c995d",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:07:51.975Z"
+    }
+  },
+  {
+    "name": "con clases de css aplicadas",
+    "data": {
+      "classes": "p-base bg-primary-light",
+      "items": [
+        {
+          "href": "#",
+          "text": "Opción 1"
+        },
+        {
+          "href": "#",
+          "text": "Opción 2",
+          "id": "classes-1",
+          "classes": "bg-white",
+          "sub": {
+            "classes": " p-sm border-l-4 border-alert-base bg-alert-light",
+            "items": [
+              {
+                "href": "#",
+                "text": "Enlace simple"
+              },
+              {
+                "text": "Enlace simple",
+                "classes": "text-alert-base bg-white",
+                "active": true
+              },
+              {
+                "href": "#",
+                "text": "Enlace simple"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "classes-1"
+            }
+          }
+        },
+        {
+          "href": "#",
+          "text": "Opción 3"
+        },
+        {
+          "href": "#",
+          "text": "Opción 4"
+        },
+        {
+          "href": "#",
+          "text": "Opción 5"
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu vertical"
+      }
+    },
+    "visualDescription": "Menú vertical con cinco opciones numeradas sobre fondo azul celeste claro. La segunda opción tiene fondo rosa salmón y contiene tres sub-ítems con borde vertical rojo a la izquierda, donde el sub-ítem del medio presenta fondo blanco mientras los otros dos mantienen el fondo rosa.",
+    "_generated": {
+      "hash": "f2d1bd6f6e2377cb8b5895cb22278d8a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:07:51.975Z"
+    }
+  },
+  {
+    "name": "con iconos en items",
+    "data": {
+      "idPrefix": "with-icons",
+      "items": [
+        {
+          "href": "#",
+          "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Archivo' focusable='false' role='img'><g id='new-file--empty-common-file-content'><path id='Subtract' fill='currentColor' fill-rule='evenodd' d='M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z' clip-rule='evenodd'></path></g></svg> Opción 1"
+        },
+        {
+          "href": "#",
+          "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14'  width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Link' focusable='false' role='img'><g id='link-chain--create-hyperlink-link-make-unlink-connection-chain'><path id='Union-1' fill='currentColor' fill-rule='evenodd' d='M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z' clip-rule='evenodd'></path></g></svg> Opción 2"
+        },
+        {
+          "href": "#",
+          "html": "<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 14 14' width='1em' height='1em' class='inline-block align-baseline mr-sm' aria-label='Solicitud' focusable='false' role='img'><g id='clipboard-text--edition-form-task-checklist-edit-clipboard'><path id='Union-2' fill='currentColor' fill-rule='evenodd' d='M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z' clip-rule='evenodd'></path></g></svg> Opción 3"
+        }
+      ],
+      "attributes": {
+        "id": "mi-menu-icons",
+        "aria-label": "Menu vertical"
+      }
+    },
+    "visualDescription": "Lista vertical de tres opciones en texto negro sobre fondo blanco, cada una precedida por un icono distintivo. La primera opción tiene un icono cuadrado negro, la segunda un icono de enlace o cadena gris, y la tercera un icono de documento o archivo negro.",
+    "_generated": {
+      "hash": "3982934ab1ff345b342bbaccadc6db20",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:07:51.975Z"
+    }
+  },
+  {
+    "name": "con idPrefix",
+    "description": "Mostrar código para ver el <code>idPrefix</code> 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": "Menu vertical"
+      }
+    },
+    "visualDescription": "Menú vertical con fondo blanco y borde gris claro de 1px. Contiene 5 opciones listadas verticalmente con texto negro de tamaño estándar y peso regular. Espaciado uniforme entre elementos, diseño minimalista sin iconos ni decoración adicional.",
+    "_generated": {
+      "hash": "2dedb9c1d0071f7180739efd46810701",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:01.086Z"
+    }
+  },
+  {
+    "name": "con ids individuales",
+    "description": "Mostrar código para ver los <code>id</code> 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": "Menu vertical"
+      }
+    },
+    "visualDescription": "Menú vertical con fondo blanco y borde gris claro de 1px. Presenta 5 opciones listadas verticalmente con texto negro de tamaño estándar y peso regular. Estructura de lista con espaciado consistente entre ítems, sin elementos gráficos adicionales.",
+    "_generated": {
+      "hash": "2b319939b306a84b7fb79eec92ef71a3",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:01.086Z"
+    }
+  },
+  {
+    "name": "con atributos",
+    "description": "Muestra el código para ver cómo se aplican los atributos",
+    "data": {
+      "idPrefix": "with-attributes",
+      "attributes": {
+        "id": "nav-id-example"
+      },
+      "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"
+            },
+            "items": [
+              {
+                "href": "#",
+                "text": "Enlace simple",
+                "attributes": {
+                  "data-attribute-1": "value-A",
+                  "data-attribute-2": "value-B",
+                  "data-attribute-3": "value-C"
+                }
+              },
+              {
+                "href": "#",
+                "text": "Enlace simple"
+              },
+              {
+                "href": "#",
+                "text": "Enlace simple"
+              }
+            ]
+          }
+        },
+        {
+          "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": "Menu vertical"
+      }
+    },
+    "visualDescription": "Menú vertical con fondo blanco y borde gris claro de 1px. Incluye 5 opciones listadas verticalmente con texto negro de tamaño estándar y peso regular, donde la opción 3 contiene 3 sub-elementos anidados con sangría a la izquierda y texto gris claro. Estructura jerárquica con espaciado vertical consistente entre todos los elementos.",
+    "_generated": {
+      "hash": "dcd66ac372f6612706f65d3543e7da9e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:01.086Z"
+    }
+  },
+  {
+    "name": "con items mixtos",
+    "data": {
+      "name": "with-sub-items",
+      "idPrefix": "with-mixed-items",
+      "items": [
+        {
+          "href": "#",
+          "text": "Enlace simple"
+        },
+        {
+          "text": "Item sin href o deshabilitado",
+          "disabled": true
+        },
+        {
+          "href": "#",
+          "text": "Enlace simple"
+        },
+        {
+          "href": "#",
+          "text": "Padre con divisor",
+          "divider": true,
+          "id": "with-sub-items-1",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Enlace simple"
+              },
+              {
+                "href": "#",
+                "text": "Enlace simple",
+                "target": "_blank",
+                "attributes": {
+                  "title": "Se abre en ventana nueva"
+                }
+              },
+              {
+                "href": "#",
+                "text": "Enlace simple"
+              },
+              {
+                "href": "#",
+                "text": "Enlace simple",
+                "divider": true
+              },
+              {
+                "href": "#",
+                "text": "Enlace simple"
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-sub-items-1"
+            }
+          }
+        },
+        {
+          "href": "#",
+          "text": "Enlace simple"
+        },
+        {
+          "href": "#",
+          "text": "Enlace simple"
+        },
+        {
+          "href": "#",
+          "text": "Con HTML dentro",
+          "sub": {
+            "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": "Enlace simple"
+        },
+        {
+          "href": "#",
+          "text": "Enlace simple"
+        },
+        {
+          "href": "#",
+          "text": "Enlace simple"
+        },
+        {
+          "text": "Padre sin href",
+          "id": "with-sub-items-2",
+          "sub": {
+            "items": [
+              {
+                "href": "#",
+                "text": "Subitem"
+              },
+              {
+                "href": "#",
+                "text": "Subitem activo",
+                "active" : true
+              },
+              {
+                "text": "Subitem sin href o deshabilitado",
+                "disabled": true
+              }
+            ],
+            "attributes": {
+              "aria-labelledby": "with-sub-items-2"
+            }
+          }
+        }
+      ],
+      "attributes": {
+        "aria-label": "Menu vertical"
+      }
+    },
+    "visualDescription": "Menú vertical con fondo blanco que contiene ítems de texto en diferentes niveles de jerarquía y estados. Los ítems incluyen enlaces simples en texto negro regular, ítems con href deshabilitado en gris, padre con divisor en negro regular, subítems indentados hacia la derecha, subítem activo con fondo gris claro, y sección HTML dentro con texto explicativo en gris. El menú presenta separadores horizontales grises tenues entre algunas secciones para agrupar contenido relacionado.",
+    "_generated": {
+      "hash": "a9ac5ea96e6804c7da95ab5aeb7ede1b",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:09.889Z"
+    }
+  }
 ] %}