desy-html 16.0.3 → 17.0.0

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

@@ -1,469 +1,469 @@
-{% set exampleComponent = "nav" %}
-{% set examples =  [
-  {
-    "name": "por defecto",
-    "data": {
-      "idPrefix": "nav-default",
-      "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": "Navegación local"
-      }
-    },
-    "visualDescription": "Lista de navegación con cinco ítems de texto en color negro, tamaño mediano, peso normal. Fondo blanco con borde gris claro de 1px redondeado. Espaciado vertical uniforme entre ítems, padding interno generoso.",
-    "_generated": {
-      "hash": "9c8ba176bf672a0ccb4d2d2f30a558e2",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:40.510Z"
-    }
-  },
-  {
-    "name": "con item deshabilitado",
-    "data": {
-      "idPrefix": "nav-with-disabled-item",
-      "items": [
-      {
-        "href": "#",
-        "text": "Opción 1"
-      },
-      {
-        "href": "#",
-        "text": "Opción 2"
-      },
-      {
-        "href": "#",
-        "text": "Opción deshabilitada 3",
-        "disabled": true
-      },
-      {
-        "href": "#",
-        "text": "Opción 4"
-      },
-      {
-        "href": "#",
-        "text": "Opción 5"
-      }
-      ],
-      "attributes": {
-        "aria-label": "Navegación local"
-      }
-    },
-    "visualDescription": "Lista de navegación con cinco ítems verticales dentro de contenedor con borde gris claro de 1px redondeado, fondo blanco. Tercer ítem muestra texto gris claro acompañado de ícono circular informativo a la derecha. Resto de ítems en texto negro de tamaño mediano con espaciado vertical uniforme.",
-    "_generated": {
-      "hash": "a9c9d4785243ebb8cc6d5757b708b358",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:40.510Z"
-    }
-  },
-  {
-    "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>activateItemNav(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemNav('mi-menu', 'nav-with-active-item-3')</code> para desactivar el item actual y activar el tercer item de este ejemplo.",
-    "data": {
-      "idPrefix": "nav-with-active-item",
-      "items": [
-      {
-        "href": "#",
-        "text": "Opción 1"
-      },
-      {
-        "href": "#",
-        "text": "Opción 2"
-      },
-      {
-        "href": "#",
-        "text": "Opción 3"
-      },
-      {
-        "href": "#",
-        "text": "Opción 4",
-        "active": true
-      },
-      {
-        "href": "#",
-        "text": "Opción 5"
-      }
-      ],
-      "attributes": {
-        "id": "mi-menu",
-        "aria-label": "Navegación local"
-      }
-    },
-    "visualDescription": "Lista de navegación vertical con cinco ítems en contenedor bordeado gris claro de 1px, fondo blanco. Cuarto ítem presenta texto negro en negrita indicando estado activo. Ítems restantes muestran texto negro peso normal, tamaño mediano, con espaciado vertical consistente.",
-    "_generated": {
-      "hash": "6187d8c94c6a5c202cbfcd2062d88e1a",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:40.510Z"
-    }
-  },{
-    "name": "con target en enlaces",
-    "data": {
-      "idPrefix": "nav-with-target-in-links",
-      "items": [
-      {
-        "href": "#",
-        "text": "Opción 1",
-        "target": "_blank",
-        "attributes": {
-          "title": "Se abre en pestaña nueva"
-        }
-      },
-      {
-        "href": "#",
-        "text": "Opción 2",
-        "target": "_blank",
-        "attributes": {
-          "title": "Se abre en pestaña nueva"
-        }
-      },
-      {
-        "href": "#",
-        "text": "Opción 3",
-        "target": "_blank",
-        "attributes": {
-          "title": "Se abre en pestaña nueva"
-        }
-      },
-      {
-        "href": "#",
-        "text": "Opción 4",
-        "target": "_blank",
-        "attributes": {
-          "title": "Se abre en pestaña nueva"
-        }
-      },
-      {
-        "href": "#",
-        "text": "Opción 5",
-        "target": "_blank",
-        "attributes": {
-          "title": "Se abre en pestaña nueva"
-        }
-      }
-      ],
-      "attributes": {
-        "aria-label": "Navegación local"
-      }
-    },
-    "visualDescription": "Lista vertical de cinco elementos de navegación con texto negro sobre fondo blanco. Cada elemento presenta texto alineado a la izquierda con espaciado vertical uniforme entre ítems. Borde gris claro de 1px rodea el contenedor completo.",
-    "_generated": {
-      "hash": "4d25739e2209b00ddc182d04038cc2a8",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:48.510Z"
-    }
-  },
-  {
-    "name": "con divisor",
-    "data": {
-      "idPrefix": "nav-with-divider",
-      "items": [
-      {
-        "href": "#",
-        "text": "Opción 1"
-      },
-      {
-        "href": "#",
-        "text": "Opción 2"
-      },
-      {
-        "href": "#",
-        "text": "Opción 3 con divisor",
-        "divider": true
-      },
-      {
-        "href": "#",
-        "text": "Opción 4"
-      },
-      {
-        "href": "#",
-        "text": "Opción 5"
-      }
-      ],
-      "attributes": {
-        "aria-label": "Navegación local"
-      }
-    },
-    "visualDescription": "Lista vertical de cinco elementos de navegación con texto negro sobre fondo blanco. Línea divisoria gris clara horizontal separa el tercer elemento de los elementos cuarto y quinto. Borde gris claro de 1px rodea el contenedor completo.",
-    "_generated": {
-      "hash": "8c693aa241211a0402dcfbbffdd63909",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:48.510Z"
-    }
-  },
-  {
-    "name": "con clases de css aplicadas",
-    "data": {
-      "idPrefix": "nav-with-classes-applied",
-      "classes": "p-base bg-primary-light",
-      "items": [
-      {
-        "href": "#",
-        "text": "Opción 1"
-      },
-      {
-        "href": "#",
-        "text": "Opción 2",
-        "classes": "bg-white"
-      },
-      {
-        "href": "#",
-        "text": "Opción 3"
-      },
-      {
-        "href": "#",
-        "text": "Opción 4"
-      },
-      {
-        "href": "#",
-        "text": "Opción 5"
-      }
-      ],
-      "attributes": {
-        "aria-label": "Navegación local"
-      }
-    },
-    "visualDescription": "Lista vertical de cinco elementos de navegación con texto negro sobre fondo celeste claro. Cada elemento presenta texto alineado a la izquierda con espaciado vertical uniforme entre ítems. Borde gris claro de 1px rodea el contenedor completo.",
-    "_generated": {
-      "hash": "e65f346526fcb4232819fba29ea4d9ba",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:48.510Z"
-    }
-  },
-  {
-    "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": "Navegación local"
-      }
-    },
-    "visualDescription": "Lista vertical con tres elementos de navegación, cada uno con un icono negro a la izquierda(círculo, llave, cuadrado) seguido de texto negro. Fondo blanco, sin bordes visibles entre elementos. Espaciado uniforme vertical entre los tres ítems.",
-    "_generated": {
-      "hash": "0b07a28108d22e46ca3b639913c465a0",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:57.139Z"
-    }
-  },
-  {
-    "name": "con idPrefix",
-    "description": "Mostrar código para ver el <code>idPrefix</code> aplicado.",
-    "data": {
-      "idPrefix": "site-menu-item-1",
-      "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": "Navegación local"
-      }
-    },
-    "visualDescription": "Lista vertical con cinco opciones de texto negro sobre fondo blanco. Sin iconos ni elementos decorativos. Espaciado vertical consistente entre elementos. Texto alineado a la izquierda, sin marcadores ni bordes visibles.",
-    "_generated": {
-      "hash": "cf352e0078848bddacd8ede5bb77d556",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:57.139Z"
-    }
-  },
-  {
-    "name": "con ids individuales",
-    "description": "Mostrar código para ver los <code>id</code> aplicados.",
-    "data": {
-      "idPrefix": "nav-with-individual-ids",
-      "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": "Navegación local"
-      }
-    },
-    "visualDescription": "Lista vertical con cinco opciones de texto negro sobre fondo blanco. Sin iconos, marcadores ni bordes entre elementos. Espaciado vertical uniforme. Texto alineado a la izquierda con apariencia de navegación simple.",
-    "_generated": {
-      "hash": "38b58ce7befa2cdf66aacfa6a70e5229",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:09:57.139Z"
-    }
-  },
-  {
-    "name": "con atributos",
-    "description": "Muestra el código para ver cómo se aplican los atributos.",
-    "data": {
-      "idPrefix": "nav-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"
-        }
-      },
-      {
-        "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": "Navegación local"
-      }
-    },
-    "visualDescription": "Lista de navegación con borde gris claro de 1px y fondo blanco. Contiene título \"con atributos\" en texto negro pequeño seguido de 5 opciones de navegación (Opción 1 a Opción 5) en texto negro regular, cada una en línea separada con espaciado vertical uniforme.",
-    "_generated": {
-      "hash": "99cd1885d81538cca9ea6129d72e39e4",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:05.539Z"
-    }
-  },
-  {
-    "name": "Sin nav",
-    "description": "Usa <code>'hasNav': false</code> si el Nav se abre con un Dropdown. No se usará el tag <code>&lt;nav&gt;</code>, sólo un simple <code>&lt;ul&gt;</code>, asumiendo que rodearás a tu componente manualmente con un <code>&lt;nav&gt;</code> personalizado con su propio <code>aria-label</code> si es necesario. También podemos usar clases para controlar la anchura del nav dentro del Dropdown.",
-    "data": {
-      "hasNav": false,
-      "idPrefix": "site-menu-item-2",
-      "items": [
-      {
-        "href": "#",
-        "text": "Opción 1"
-      },
-      {
-        "href": "#",
-        "text": "Opción 2"
-      },
-      {
-        "href": "#",
-        "text": "Opción 3",
-        "active": true
-      },
-      {
-        "href": "#",
-        "text": "Opción 4"
-      },
-      {
-        "href": "#",
-        "text": "Clases max-width aplicadas para evitar demasiada anchura dentro de los menus y forzar a saltos de línea"
-      }
-      ],
-      "classes": "w-max max-w-64",
-      "attributes": {
-        "aria-label": "Navegación local"
-      }
-    },
-    "visualDescription": "Lista de navegación con borde gris claro de 1px y fondo blanco. Incluye título \"Sin nav\" en texto negro pequeño, seguido de 4 opciones numeradas (Opción 1 a Opción 4) en texto negro, donde \"Opción 3\" aparece en negrita. Debajo presenta texto adicional en color gris oscuro con descripción extendida sobre clases aplicadas para animación de menús.",
-    "_generated": {
-      "hash": "77efdb3ad6b59734bc77bee74c1b5aea",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:10:05.540Z"
-    }
-  }
+{% set exampleComponent = "nav" %}
+{% set examples =  [
+  {
+    "name": "por defecto",
+    "data": {
+      "idPrefix": "nav-default",
+      "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": "Navegación local"
+      }
+    },
+    "visualDescription": "Lista de navegación con cinco ítems de texto en color negro, tamaño mediano, peso normal. Fondo blanco con borde gris claro de 1px redondeado. Espaciado vertical uniforme entre ítems, padding interno generoso.",
+    "_generated": {
+      "hash": "9c8ba176bf672a0ccb4d2d2f30a558e2",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:40.510Z"
+    }
+  },
+  {
+    "name": "con item deshabilitado",
+    "data": {
+      "idPrefix": "nav-with-disabled-item",
+      "items": [
+      {
+        "href": "#",
+        "text": "Opción 1"
+      },
+      {
+        "href": "#",
+        "text": "Opción 2"
+      },
+      {
+        "href": "#",
+        "text": "Opción deshabilitada 3",
+        "disabled": true
+      },
+      {
+        "href": "#",
+        "text": "Opción 4"
+      },
+      {
+        "href": "#",
+        "text": "Opción 5"
+      }
+      ],
+      "attributes": {
+        "aria-label": "Navegación local"
+      }
+    },
+    "visualDescription": "Lista de navegación con cinco ítems verticales dentro de contenedor con borde gris claro de 1px redondeado, fondo blanco. Tercer ítem muestra texto gris claro acompañado de ícono circular informativo a la derecha. Resto de ítems en texto negro de tamaño mediano con espaciado vertical uniforme.",
+    "_generated": {
+      "hash": "a9c9d4785243ebb8cc6d5757b708b358",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:40.510Z"
+    }
+  },
+  {
+    "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>activateItemNav(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemNav('mi-menu', 'nav-with-active-item-3')</code> para desactivar el item actual y activar el tercer item de este ejemplo.",
+    "data": {
+      "idPrefix": "nav-with-active-item",
+      "items": [
+      {
+        "href": "#",
+        "text": "Opción 1"
+      },
+      {
+        "href": "#",
+        "text": "Opción 2"
+      },
+      {
+        "href": "#",
+        "text": "Opción 3"
+      },
+      {
+        "href": "#",
+        "text": "Opción 4",
+        "active": true
+      },
+      {
+        "href": "#",
+        "text": "Opción 5"
+      }
+      ],
+      "attributes": {
+        "id": "mi-menu",
+        "aria-label": "Navegación local"
+      }
+    },
+    "visualDescription": "Lista de navegación vertical con cinco ítems en contenedor bordeado gris claro de 1px, fondo blanco. Cuarto ítem presenta texto negro en negrita indicando estado activo. Ítems restantes muestran texto negro peso normal, tamaño mediano, con espaciado vertical consistente.",
+    "_generated": {
+      "hash": "6187d8c94c6a5c202cbfcd2062d88e1a",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:40.510Z"
+    }
+  },{
+    "name": "con target en enlaces",
+    "data": {
+      "idPrefix": "nav-with-target-in-links",
+      "items": [
+      {
+        "href": "#",
+        "text": "Opción 1",
+        "target": "_blank",
+        "attributes": {
+          "title": "Se abre en pestaña nueva"
+        }
+      },
+      {
+        "href": "#",
+        "text": "Opción 2",
+        "target": "_blank",
+        "attributes": {
+          "title": "Se abre en pestaña nueva"
+        }
+      },
+      {
+        "href": "#",
+        "text": "Opción 3",
+        "target": "_blank",
+        "attributes": {
+          "title": "Se abre en pestaña nueva"
+        }
+      },
+      {
+        "href": "#",
+        "text": "Opción 4",
+        "target": "_blank",
+        "attributes": {
+          "title": "Se abre en pestaña nueva"
+        }
+      },
+      {
+        "href": "#",
+        "text": "Opción 5",
+        "target": "_blank",
+        "attributes": {
+          "title": "Se abre en pestaña nueva"
+        }
+      }
+      ],
+      "attributes": {
+        "aria-label": "Navegación local"
+      }
+    },
+    "visualDescription": "Lista vertical de cinco elementos de navegación con texto negro sobre fondo blanco. Cada elemento presenta texto alineado a la izquierda con espaciado vertical uniforme entre ítems. Borde gris claro de 1px rodea el contenedor completo.",
+    "_generated": {
+      "hash": "4d25739e2209b00ddc182d04038cc2a8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:48.510Z"
+    }
+  },
+  {
+    "name": "con divisor",
+    "data": {
+      "idPrefix": "nav-with-divider",
+      "items": [
+      {
+        "href": "#",
+        "text": "Opción 1"
+      },
+      {
+        "href": "#",
+        "text": "Opción 2"
+      },
+      {
+        "href": "#",
+        "text": "Opción 3 con divisor",
+        "divider": true
+      },
+      {
+        "href": "#",
+        "text": "Opción 4"
+      },
+      {
+        "href": "#",
+        "text": "Opción 5"
+      }
+      ],
+      "attributes": {
+        "aria-label": "Navegación local"
+      }
+    },
+    "visualDescription": "Lista vertical de cinco elementos de navegación con texto negro sobre fondo blanco. Línea divisoria gris clara horizontal separa el tercer elemento de los elementos cuarto y quinto. Borde gris claro de 1px rodea el contenedor completo.",
+    "_generated": {
+      "hash": "8c693aa241211a0402dcfbbffdd63909",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:48.510Z"
+    }
+  },
+  {
+    "name": "con clases de css aplicadas",
+    "data": {
+      "idPrefix": "nav-with-classes-applied",
+      "classes": "p-base bg-primary-light",
+      "items": [
+      {
+        "href": "#",
+        "text": "Opción 1"
+      },
+      {
+        "href": "#",
+        "text": "Opción 2",
+        "classes": "bg-white"
+      },
+      {
+        "href": "#",
+        "text": "Opción 3"
+      },
+      {
+        "href": "#",
+        "text": "Opción 4"
+      },
+      {
+        "href": "#",
+        "text": "Opción 5"
+      }
+      ],
+      "attributes": {
+        "aria-label": "Navegación local"
+      }
+    },
+    "visualDescription": "Lista vertical de cinco elementos de navegación con texto negro sobre fondo celeste claro. Cada elemento presenta texto alineado a la izquierda con espaciado vertical uniforme entre ítems. Borde gris claro de 1px rodea el contenedor completo.",
+    "_generated": {
+      "hash": "e65f346526fcb4232819fba29ea4d9ba",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:48.510Z"
+    }
+  },
+  {
+    "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": "Navegación local"
+      }
+    },
+    "visualDescription": "Lista vertical con tres elementos de navegación, cada uno con un icono negro a la izquierda(círculo, llave, cuadrado) seguido de texto negro. Fondo blanco, sin bordes visibles entre elementos. Espaciado uniforme vertical entre los tres ítems.",
+    "_generated": {
+      "hash": "0b07a28108d22e46ca3b639913c465a0",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:57.139Z"
+    }
+  },
+  {
+    "name": "con idPrefix",
+    "description": "Mostrar código para ver el <code>idPrefix</code> aplicado.",
+    "data": {
+      "idPrefix": "site-menu-item-1",
+      "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": "Navegación local"
+      }
+    },
+    "visualDescription": "Lista vertical con cinco opciones de texto negro sobre fondo blanco. Sin iconos ni elementos decorativos. Espaciado vertical consistente entre elementos. Texto alineado a la izquierda, sin marcadores ni bordes visibles.",
+    "_generated": {
+      "hash": "cf352e0078848bddacd8ede5bb77d556",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:57.139Z"
+    }
+  },
+  {
+    "name": "con ids individuales",
+    "description": "Mostrar código para ver los <code>id</code> aplicados.",
+    "data": {
+      "idPrefix": "nav-with-individual-ids",
+      "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": "Navegación local"
+      }
+    },
+    "visualDescription": "Lista vertical con cinco opciones de texto negro sobre fondo blanco. Sin iconos, marcadores ni bordes entre elementos. Espaciado vertical uniforme. Texto alineado a la izquierda con apariencia de navegación simple.",
+    "_generated": {
+      "hash": "38b58ce7befa2cdf66aacfa6a70e5229",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:09:57.139Z"
+    }
+  },
+  {
+    "name": "con atributos",
+    "description": "Muestra el código para ver cómo se aplican los atributos.",
+    "data": {
+      "idPrefix": "nav-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"
+        }
+      },
+      {
+        "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": "Navegación local"
+      }
+    },
+    "visualDescription": "Lista de navegación con borde gris claro de 1px y fondo blanco. Contiene título en texto negro pequeño seguido de varias opciones de navegación en texto negro regular, cada una en línea separada con espaciado vertical uniforme.",
+    "_generated": {
+      "hash": "99cd1885d81538cca9ea6129d72e39e4",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:05.539Z"
+    }
+  },
+  {
+    "name": "Sin nav",
+    "description": "Usa <code>'hasNav': false</code> si el Nav se abre con un Dropdown. No se usará el tag <code>&lt;nav&gt;</code>, sólo un simple <code>&lt;ul&gt;</code>, asumiendo que rodearás a tu componente manualmente con un <code>&lt;nav&gt;</code> personalizado con su propio <code>aria-label</code> si es necesario. También podemos usar clases para controlar la anchura del nav dentro del Dropdown.",
+    "data": {
+      "hasNav": false,
+      "idPrefix": "site-menu-item-2",
+      "items": [
+      {
+        "href": "#",
+        "text": "Opción 1"
+      },
+      {
+        "href": "#",
+        "text": "Opción 2"
+      },
+      {
+        "href": "#",
+        "text": "Opción 3",
+        "active": true
+      },
+      {
+        "href": "#",
+        "text": "Opción 4"
+      },
+      {
+        "href": "#",
+        "text": "Clases max-width aplicadas para evitar demasiada anchura dentro de los menus y forzar a saltos de línea"
+      }
+      ],
+      "classes": "w-max max-w-64",
+      "attributes": {
+        "aria-label": "Navegación local"
+      }
+    },
+    "visualDescription": "Lista de navegación con borde gris claro de 1px y fondo blanco. Incluye título en texto negro pequeño, seguido de varias opciones en texto negro, donde una opción aparece en negrita. Debajo presenta texto adicional en color gris oscuro con descripción extendida sobre clases aplicadas para animación de menús.",
+    "_generated": {
+      "hash": "77efdb3ad6b59734bc77bee74c1b5aea",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:10:05.540Z"
+    }
+  }
 ] %}