desy-html 16.0.4 → 17.0.0

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

@@ -1,1843 +1,1843 @@
-{% set exampleComponent = "menubar" %}
-{% set examples =  [
-  {
-    "name": "Por defecto",
-    "description": "El menubar se usa para interactuar con él y realizar cambios en otra parte de la página, no como menú de navegación. Si necesitas una navegación con enlaces, debes usas el componente Menu navigation en vez de este Menubar. Este ejemplo muestra parámetros mixtos.",
-    "data": {
-      "id": "with-all-parent-items-1",
-      "idPrefix": "parent-example",
-      "ariaLabel": "Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "menuitems-example-item-1-1",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-example-item-2-1",
-          "classes": "mb-base mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "menuitems-example-item-3-1",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "menuitems-example-item-4-1",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "menuitems-example-item-6-1",
-          "classes": "c-menubar__button--transparent mb-base mr-base",
-          "href": "javascript:void(0)"
-        }
-      ]
-    },
-    "visualDescription": "Barra horizontal con fondo blanco que contiene cinco elementos interactivos alineados a la izquierda. Cuatro botones con texto azul oscuro(color #0969DA) y flechas desplegables, seguidos de un enlace de texto azul sin flecha. Bordes grises claros de 1px rodean cada botón, con espaciado uniforme entre elementos.",
-    "_generated": {
-      "hash": "daf08d1cbb1e9bfecd64b6da6a3b6720",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:17.874Z"
-    }
-  },
-  {
-    "name": "Tiene selección en items padres",
-    "description": "Cuando se ha seleccionado algún elemento hijo, si se desea, el padre se puede mostrar con color usando la clase <code>.c-menubar__button--has-selection</code>.",
-    "data": {
-      "id": "with-all-parent-items-2",
-      "idPrefix": "parent-example",
-      "ariaLabel": "Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "menuitems-example-item-1-2",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-example-item-2-2",
-          "classes": "c-menubar__button--has-selection mb-base mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "checked": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "menuitems-example-item-3-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--has-selection mb-base mr-base"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "menuitems-example-item-4-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--has-selection mb-base mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "menuitems-example-item-6-2",
-          "classes": "c-menubar__button--transparent mb-base mr-base",
-          "href": "javascript:void(0)"
-        }
-      ]
-    },
-    "visualDescription": "Barra horizontal con fondo blanco que contiene cinco elementos interactivos alineados a la izquierda. Cuatro botones con texto azul oscuro(color #0969DA) y flechas desplegables, seguidos de un enlace de texto azul sin flecha. Bordes grises claros de 1px rodean cada botón, con espaciado uniforme entre elementos.",
-    "_generated": {
-      "hash": "bae9190780ad5e0dda53356adc5cced8",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:17.874Z"
-    }
-  },
-  {
-    "name": "Con sub-item activo",
-    "description": "Cuando se ha seleccionado algún elemento hijo, el padre se muestra con color. Añade <code>active: true</code> a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuBarAction(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item o varios sub-items de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuBarAction('mi-menubar', 'sub-sub-menuitems-example-item-3-2-1-1')</code> para desactivar el sub-item actual y activar el primer sub-item del tercer menú de este ejemplo. Si quieres activar varios sub-items, abre la consola del navegador y escribe <code>activateItemMenuBarAction('mi-menubar', ['sub-menuitems-example-item-2-2-1', 'sub-menuitems-example-item-2-2-2', 'sub-menuitems-example-item-2-2-3'])</code>.",
-    "data": {
-      "id": "mi-menubar",
-      "idPrefix": "parent-example",
-      "ariaLabel": "Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "menuitems-example-item-1-2",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-example-item-2-2",
-          "classes": "mb-base mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "active": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "menuitems-example-item-3-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "menuitems-example-item-4-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "menuitems-example-item-6-2",
-          "classes": "c-menubar__button--transparent mb-base mr-base",
-          "href": "javascript:void(0)"
-        }
-      ]
-    },
-    "visualDescription": "Barra horizontal con fondo blanco que contiene cinco elementos interactivos alineados a la izquierda. Cuatro botones con texto azul oscuro(color #0969DA) y flechas desplegables, seguidos de un enlace de texto azul sin flecha. Bordes grises claros de 1px rodean cada botón, con espaciado uniforme entre elementos.",
-    "_generated": {
-      "hash": "003b90b0c6bb483641e7260f61d26856",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:17.874Z"
-    }
-  },
-  {
-    "name": "con un item padre deshabilitado",
-    "data": {
-      "id": "with-disabled",
-      "idPrefix": "disabled-example",
-      "ariaLabel": "Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "menuitems-disabled-example-item-1-2",
-          "disabled": true,
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-disabled-example-item-2-2",
-          "classes": "mb-base mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "checked": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "menuitems-disabled-example-item-3-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "menuitems-disabled-example-item-4-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "menuitems-disabled-example-item-6-2",
-          "classes": "c-menubar__button--transparent mb-base mr-base",
-          "href": "javascript:void(0)"
-        }
-      ]
-    },
-    "visualDescription": "Menubar horizontal con cinco botones de tamaño pequeño alineados en fila. Los botones muestran texto azul oscuro con bordes azules de 1px y fondo blanco. Cuatro botones incluyen iconos de flecha hacia abajo indicando desplegables, el quinto botón carece de flecha.",
-    "_generated": {
-      "hash": "f44d7f0356658b1412b8f9de345f6ebe",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:26.277Z"
-    }
-  },
-  {
-    "name": "con un item padre activo",
-    "data": {
-      "id": "with-active",
-      "idPrefix": "active-example",
-      "ariaLabel": "Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "menuitems-active-example-item-1-2",
-          "active": true,
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-active-example-item-2-2",
-          "classes": "mb-base mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "checked": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "menuitems-active-example-item-3-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "menuitems-active-example-item-4-2",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "menuitems-active-example-item-6-2",
-          "classes": "c-menubar__button--transparent mb-base mr-base",
-          "href": "javascript:void(0)"
-        }
-      ]
-    },
-    "visualDescription": "Menubar horizontal con cinco botones de tamaño pequeño alineados en fila. Los botones presentan texto azul oscuro con bordes azules de 1px y fondo blanco. Cuatro botones contienen iconos de flecha hacia abajo para menús desplegables, el último botón no tiene flecha.",
-    "_generated": {
-      "hash": "d0d8be038c2859fe8a2449bbf4794b87",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:26.277Z"
-    }
-  },
-  {
-    "name": "grande",
-    "description": "Usando clases modificadoras en los items.",
-    "data": {
-      "id": "large-items",
-      "idPrefix": "large-example",
-      "ariaLabel": "Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "large-example-item-1",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "c-menubar__button--lg mb-sm mr-sm"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "large-example-item-2",
-          "classes": "c-menubar__button--lg mb-sm mr-sm",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "checked": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "large-example-item-3",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--lg mb-sm mr-sm"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "large-example-item-4",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--lg mb-sm mr-sm"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "large-example-item-6",
-          "classes": "c-menubar__button--transparent c-menubar__button--lg mb-sm mr-sm",
-          "href": "javascript:void(0)"
-        }
-      ]
-    },
-    "visualDescription": "Menubar horizontal con cinco botones de tamaño mediano espaciados uniformemente. Los botones muestran texto azul oscuro con bordes azules de 1px y fondo blanco. Cuatro botones incluyen iconos de flecha hacia abajo indicando funcionalidad de menú desplegable, el botón final carece de icono.",
-    "_generated": {
-      "hash": "c143f35ab8c4bc76933779b8e2d3c277",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:26.277Z"
-    }
-  },
-  {
-    "name": "peque",
-    "description": "Usando clases modificadoras en los items.",
-    "data": {
-      "id": "small-items",
-      "idPrefix": "small-example",
-      "ariaLabel": "Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "small-example-item-1",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "c-menubar__button--sm mb-sm mr-sm"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "small-example-item-2",
-          "classes": "c-menubar__button--sm mb-sm mr-sm",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "checked": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "small-example-item-3",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--sm mb-sm mr-sm"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "small-example-item-4",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--sm mb-sm mr-sm"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "small-example-item-6",
-          "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
-          "href": "javascript:void(0)"
-        }
-      ]
-    },
-    "visualDescription": "Barra de navegación horizontal con fondo blanco y borde gris claro. Contiene cinco botones dropdown con texto azul y flechas descendentes, alineados de izquierda a derecha con espaciado uniforme. Los botones tienen apariencia de enlaces con texto de tamaño pequeño.",
-    "_generated": {
-      "hash": "3edb0a8bd4d23f89f54e8b5e1d32da38",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:34.675Z"
-    }
-  },
-  {
-    "name": "transparente",
-    "description": "Usando clases modificadoras en los items.",
-    "data": {
-      "id": "transparent-items",
-      "idPrefix": "transparent-example",
-      "ariaLabel": "Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "transparent-example-item-1",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "c-menubar__button--transparent mb-sm mr-sm"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "transparent-example-item-2",
-          "classes": "c-menubar__button--transparent mb-sm mr-sm",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "checked": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "transparent-example-item-3",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--transparent mb-sm mr-sm"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "transparent-example-item-4",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--transparent mb-sm mr-sm"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "transparent-example-item-6",
-          "classes": "c-menubar__button--transparent mb-sm mr-sm",
-          "href": "javascript:void(0)"
-        }
-      ]
-    },
-    "visualDescription": "Barra de navegación horizontal sin fondo visible ni bordes. Contiene cinco botones dropdown con texto negro y flechas descendentes, alineados horizontalmente con espaciado regular. Los elementos mantienen formato de texto plano sin estilos de botón visibles.",
-    "_generated": {
-      "hash": "0ea3f0bf8c440388950a9599d140d442",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:34.675Z"
-    }
-  },
-  {
-    "name": "con estilos de cabecera",
-    "description": "En casos especiales, una cabecera fija con un Menubar puede ser útil. Si necesitas una navegación con enlaces, debes usas el componente Menu navigation en vez de este Menubar.",
-    "data": {
-      "id": "header-items",
-      "idPrefix": "header-example",
-      "ariaLabel": "Menubar descrición",
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "header-example-item-1",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "c-menubar__button--header mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "header-example-item-2",
-          "classes": "c-menubar__button--header mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2",
-                "checked": true
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "header-example-item-3",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--header mr-base"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "header-example-item-4",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--header mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "header-example-item-6",
-          "classes": "c-menubar__button--header mr-base",
-          "href": "javascript:void(0)"
-        }
-      ],
-      "classes": "bg-neutral-lighter"
-    },
-    "visualDescription": "Barra de navegación horizontal con fondo blanco y borde inferior gris. Contiene cinco botones dropdown con texto negro en negrita y flechas descendentes, distribuidos horizontalmente con espaciado equilibrado. Los botones presentan formato de encabezado con tipografía de peso medio.",
-    "_generated": {
-      "hash": "80cbb1e3f38434ec968378c30c868b07",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:34.675Z"
-    }
-  },
-  {
-    "name": "Ejemplo de filtros",
-    "description": "Usa el Menubar sobre una lista de items para filtrarlos u ordenarlos. Usa la clase modificadora <code>.c-menubar--last-right</code> para posicionar el último item a la derecha en breakpoints grandes.",
-    "data": {
-      "id": "filter-items",
-      "idPrefix": "filter-example",
-      "ariaLabel": "Menubar descrición",
-      "items": [
-        {
-          "text": "Estados y trámites",
-          "ariaLabel": "Estados y trámites",
-          "id": "filter-example-item-2",
-          "classes": "c-menubar__button--sm mb-sm mr-sm",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Filtrar",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Filtrar servicios"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Filtrar procesos y convocatorias"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "none",
-                "html": "<span class='inline-block px-base py-sm text-neutral-dark focus:outline-hidden'>Estados</span>"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estados",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Borrador"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Borrador rechazado"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "En validación"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Publicado"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Con cambios"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Dados de baja"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "none",
-                "html": "<span class='inline-block px-base py-sm text-neutral-dark focus:outline-hidden'>Plazos (sólo aplican a convocatorias y procesos)</span>"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Plazos (sólo aplican a convocatorias y procesos)",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Plazo permanente"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Plazo temporal indefinido"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Plazo temporal abierto"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Plazo temporal finalizado"
-                  }
-                ]
-              }
-            ]
-          }
-        },
-        {
-          "text": "Tipología",
-          "ariaLabel": "Tipología",
-          "id": "filter-example-item-3",
-          "classes": "c-menubar__button--sm mb-sm mr-sm",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Filtrar por procedimiento",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Procedimiento"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Servicio sin tramitación de procedimiento"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Filtrar por interno/externo",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Interno"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Externo"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Filtrar por común/específico",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Común, horizontal"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Específico, sectorial"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Específico de uso común"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Filtrar por tipo de inicio",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Inicio de oficio"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Inicio a instancia"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Con convocatorias"
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Tramitación íntegra digital"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Eliminar filtros",
-          "ariaLabel": "Eliminar filtros",
-          "id": "filter-example-item-6",
-          "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
-          "href": "javascript:void(0)"
-        },
-        {
-          "text": "Orden: Actividad reciente",
-          "ariaLabel": "Orden: Actividad reciente",
-          "id": "filter-example-item-4",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tipos de ordenación",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Actividad reciente",
-                    "checked": true
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Publicación reciente"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Creación reciente"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "html": "Número de servicio (de mayor a menor)"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "c-menubar__button--sm mb-sm"
-        }
-      ],
-      "classes": "c-menubar--last-right"
-    },
-    "visualDescription": "Barra de filtros con fondo blanco y borde gris claro de 1px. Contiene tres botones con texto azul oscuro(\"Estadios y trámites\", \"Tipologías\", \"Eliminar filtros\") alineados a la izquierda, y un dropdown con texto negro (\"Orden: Actividad reciente\") alineado a la derecha. Los botones tienen bordes azules y fondo blanco.",
-    "_generated": {
-      "hash": "71019a86d88c0fa7e0e97c738caf435e",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:44.899Z"
-    }
-  },
-  {
-    "name": "con label",
-    "description": "Con label que explica que este menú actúa sobre otro elemento. Puedes usar las clases <code>.sr-only</code> para que se vea sólo en lectores de pantalla.",
-    "data": {
-      "id": "with-label-items",
-      "idPrefix": "label-example",
-      "ariaLabel": "Menubar descrición",
-      "label": {
-        "text": "Esto es un label"
-      },
-      "items": [
-        {
-          "text": "Menuitem",
-          "ariaLabel": "Menuitem",
-          "id": "menuitems-example-item-1-3",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitem",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitem",
-                "text": "Subitem 3"
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitemcheckbox",
-          "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-example-item-2-3",
-          "classes": "mb-base mr-base",
-          "sub": {
-            "items": [
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 1"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 2"
-              },
-              {
-                "role": "menuitemcheckbox",
-                "text": "Subitem 3"
-              }
-            ]
-          }
-        },
-        {
-          "text": "Menuitemradio",
-          "ariaLabel": "Menuitemradio",
-          "id": "menuitems-example-item-3-3",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "group label",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 1"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 2"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Radio 3"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Items mixtos",
-          "ariaLabel": "Items mixtos",
-          "id": "menuitems-example-item-4-3",
-          "sub": {
-            "items": [
-              {
-                "role": "group",
-                "ariaLabel": "Tamaño de letra",
-                "items": [
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño mayor"
-                  },
-                  {
-                    "role": "menuitem",
-                    "text": "Tamaño menor"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de letra",
-                "items": [
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Negritas"
-                  },
-                  {
-                    "role": "menuitemcheckbox",
-                    "text": "Itálicas"
-                  }
-                ]
-              },
-              {
-                "role": "separator"
-              },
-              {
-                "role": "group",
-                "ariaLabel": "Estilo de texto",
-                "items": [
-                  {
-                    "role": "menuitemradio",
-                    "text": "Ninguno"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Tachado"
-                  },
-                  {
-                    "role": "menuitemradio",
-                    "text": "Subrayado"
-                  }
-                ]
-              }
-            ]
-          },
-          "classes": "mb-base mr-base"
-        },
-        {
-          "text": "Menuitem solo",
-          "ariaLabel": "Menuitem solo",
-          "id": "menuitems-example-item-6-3",
-          "classes": "c-menubar__button--transparent mb-base mr-base",
-          "href": "javascript:void(0)"
-        }
-      ]
-    },
-    "visualDescription": "Sección con fondo blanco y borde gris claro de 1px. Incluye un título negro pequeño \"con label\", seguido de texto gris \"Esto es un label\". Debajo hay una fila de cinco botones: cuatro dropdowns con texto negro sobre fondo blanco y bordes azules (\"Menuitem\", \"MenuItemcheckbox\", \"MenuItemradio\", \"Items mixtos\"), y un enlace azul sin borde (\"Menuitem solo\").",
-    "_generated": {
-      "hash": "b661f2b0cafa7e4adcd4607eda959333",
-      "version": "15.0.3",
-      "timestamp": "2026-01-30T19:08:44.899Z"
-    }
-  }
-] %}
+{% set exampleComponent = "menubar" %}
+{% set examples =  [
+  {
+    "name": "Por defecto",
+    "description": "El menubar se usa para interactuar con él y realizar cambios en otra parte de la página, no como menú de navegación. Si necesitas una navegación con enlaces, debes usas el componente Menu navigation en vez de este Menubar. Este ejemplo muestra parámetros mixtos.",
+    "data": {
+      "id": "with-all-parent-items-1",
+      "idPrefix": "parent-example",
+      "ariaLabel": "Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-example-item-1-1",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-example-item-2-1",
+          "classes": "mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-example-item-3-1",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "menuitems-example-item-4-1",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-example-item-6-1",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "javascript:void(0)"
+        }
+      ]
+    },
+    "visualDescription": "Barra horizontal con fondo blanco que contiene cinco elementos interactivos alineados a la izquierda. Cuatro botones con texto azul oscuro(color #0969DA) y flechas desplegables, seguidos de un enlace de texto azul sin flecha. Bordes grises claros de 1px rodean cada botón, con espaciado uniforme entre elementos.",
+    "_generated": {
+      "hash": "daf08d1cbb1e9bfecd64b6da6a3b6720",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:17.874Z"
+    }
+  },
+  {
+    "name": "Tiene selección en items padres",
+    "description": "Cuando se ha seleccionado algún elemento hijo, si se desea, el padre se puede mostrar con color usando la clase <code>.c-menubar__button--has-selection</code>.",
+    "data": {
+      "id": "with-all-parent-items-2",
+      "idPrefix": "parent-example",
+      "ariaLabel": "Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-example-item-1-2",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-example-item-2-2",
+          "classes": "c-menubar__button--has-selection mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-example-item-3-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--has-selection mb-base mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "menuitems-example-item-4-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--has-selection mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-example-item-6-2",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "javascript:void(0)"
+        }
+      ]
+    },
+    "visualDescription": "Barra horizontal con fondo blanco que contiene cinco elementos interactivos alineados a la izquierda. Cuatro botones con texto azul oscuro(color #0969DA) y flechas desplegables, seguidos de un enlace de texto azul sin flecha. Bordes grises claros de 1px rodean cada botón, con espaciado uniforme entre elementos.",
+    "_generated": {
+      "hash": "bae9190780ad5e0dda53356adc5cced8",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:17.874Z"
+    }
+  },
+  {
+    "name": "Con sub-item activo",
+    "description": "Cuando se ha seleccionado algún elemento hijo, el padre se muestra con color. Añade <code>active: true</code> a un sub-item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuBarAction(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item o varios sub-items de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuBarAction('mi-menubar', 'sub-sub-menuitems-example-item-3-2-1-1')</code> para desactivar el sub-item actual y activar el primer sub-item del tercer menú de este ejemplo. Si quieres activar varios sub-items, abre la consola del navegador y escribe <code>activateItemMenuBarAction('mi-menubar', ['sub-menuitems-example-item-2-2-1', 'sub-menuitems-example-item-2-2-2', 'sub-menuitems-example-item-2-2-3'])</code>.",
+    "data": {
+      "id": "mi-menubar",
+      "idPrefix": "parent-example",
+      "ariaLabel": "Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-example-item-1-2",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-example-item-2-2",
+          "classes": "mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "active": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-example-item-3-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "menuitems-example-item-4-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-example-item-6-2",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "javascript:void(0)"
+        }
+      ]
+    },
+    "visualDescription": "Barra horizontal con fondo blanco que contiene cinco elementos interactivos alineados a la izquierda. Cuatro botones con texto azul oscuro(color #0969DA) y flechas desplegables, seguidos de un enlace de texto azul sin flecha. Bordes grises claros de 1px rodean cada botón, con espaciado uniforme entre elementos.",
+    "_generated": {
+      "hash": "003b90b0c6bb483641e7260f61d26856",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:17.874Z"
+    }
+  },
+  {
+    "name": "con un item padre deshabilitado",
+    "data": {
+      "id": "with-disabled",
+      "idPrefix": "disabled-example",
+      "ariaLabel": "Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-disabled-example-item-1-2",
+          "disabled": true,
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-disabled-example-item-2-2",
+          "classes": "mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-disabled-example-item-3-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "menuitems-disabled-example-item-4-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-disabled-example-item-6-2",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "javascript:void(0)"
+        }
+      ]
+    },
+    "visualDescription": "Menubar horizontal con cinco botones de tamaño pequeño alineados en fila. Los botones muestran texto azul oscuro con bordes azules de 1px y fondo blanco. Cuatro botones incluyen iconos de flecha hacia abajo indicando desplegables, el quinto botón carece de flecha.",
+    "_generated": {
+      "hash": "f44d7f0356658b1412b8f9de345f6ebe",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:26.277Z"
+    }
+  },
+  {
+    "name": "con un item padre activo",
+    "data": {
+      "id": "with-active",
+      "idPrefix": "active-example",
+      "ariaLabel": "Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-active-example-item-1-2",
+          "active": true,
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-active-example-item-2-2",
+          "classes": "mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-active-example-item-3-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "menuitems-active-example-item-4-2",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-active-example-item-6-2",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "javascript:void(0)"
+        }
+      ]
+    },
+    "visualDescription": "Menubar horizontal con cinco botones de tamaño pequeño alineados en fila. Los botones presentan texto azul oscuro con bordes azules de 1px y fondo blanco. Cuatro botones contienen iconos de flecha hacia abajo para menús desplegables, el último botón no tiene flecha.",
+    "_generated": {
+      "hash": "d0d8be038c2859fe8a2449bbf4794b87",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:26.277Z"
+    }
+  },
+  {
+    "name": "grande",
+    "description": "Usando clases modificadoras en los items.",
+    "data": {
+      "id": "large-items",
+      "idPrefix": "large-example",
+      "ariaLabel": "Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "large-example-item-1",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "c-menubar__button--lg mb-sm mr-sm"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "large-example-item-2",
+          "classes": "c-menubar__button--lg mb-sm mr-sm",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "large-example-item-3",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--lg mb-sm mr-sm"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "large-example-item-4",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--lg mb-sm mr-sm"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "large-example-item-6",
+          "classes": "c-menubar__button--transparent c-menubar__button--lg mb-sm mr-sm",
+          "href": "javascript:void(0)"
+        }
+      ]
+    },
+    "visualDescription": "Menubar horizontal con cinco botones de tamaño mediano espaciados uniformemente. Los botones muestran texto azul oscuro con bordes azules de 1px y fondo blanco. Cuatro botones incluyen iconos de flecha hacia abajo indicando funcionalidad de menú desplegable, el botón final carece de icono.",
+    "_generated": {
+      "hash": "c143f35ab8c4bc76933779b8e2d3c277",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:26.277Z"
+    }
+  },
+  {
+    "name": "peque",
+    "description": "Usando clases modificadoras en los items.",
+    "data": {
+      "id": "small-items",
+      "idPrefix": "small-example",
+      "ariaLabel": "Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "small-example-item-1",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "c-menubar__button--sm mb-sm mr-sm"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "small-example-item-2",
+          "classes": "c-menubar__button--sm mb-sm mr-sm",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "small-example-item-3",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--sm mb-sm mr-sm"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "small-example-item-4",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--sm mb-sm mr-sm"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "small-example-item-6",
+          "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
+          "href": "javascript:void(0)"
+        }
+      ]
+    },
+    "visualDescription": "Barra de navegación horizontal con fondo blanco y borde gris claro. Contiene cinco botones dropdown con texto azul y flechas descendentes, alineados de izquierda a derecha con espaciado uniforme. Los botones tienen apariencia de enlaces con texto de tamaño pequeño.",
+    "_generated": {
+      "hash": "3edb0a8bd4d23f89f54e8b5e1d32da38",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:34.675Z"
+    }
+  },
+  {
+    "name": "transparente",
+    "description": "Usando clases modificadoras en los items.",
+    "data": {
+      "id": "transparent-items",
+      "idPrefix": "transparent-example",
+      "ariaLabel": "Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "transparent-example-item-1",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "c-menubar__button--transparent mb-sm mr-sm"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "transparent-example-item-2",
+          "classes": "c-menubar__button--transparent mb-sm mr-sm",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "transparent-example-item-3",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--transparent mb-sm mr-sm"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "transparent-example-item-4",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--transparent mb-sm mr-sm"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "transparent-example-item-6",
+          "classes": "c-menubar__button--transparent mb-sm mr-sm",
+          "href": "javascript:void(0)"
+        }
+      ]
+    },
+    "visualDescription": "Barra de navegación horizontal sin fondo visible ni bordes. Contiene cinco botones dropdown con texto negro y flechas descendentes, alineados horizontalmente con espaciado regular. Los elementos mantienen formato de texto plano sin estilos de botón visibles.",
+    "_generated": {
+      "hash": "0ea3f0bf8c440388950a9599d140d442",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:34.675Z"
+    }
+  },
+  {
+    "name": "con estilos de cabecera",
+    "description": "En casos especiales, una cabecera fija con un Menubar puede ser útil. Si necesitas una navegación con enlaces, debes usas el componente Menu navigation en vez de este Menubar.",
+    "data": {
+      "id": "header-items",
+      "idPrefix": "header-example",
+      "ariaLabel": "Menubar descrición",
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "header-example-item-1",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "c-menubar__button--header mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "header-example-item-2",
+          "classes": "c-menubar__button--header mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2",
+                "checked": true
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "header-example-item-3",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--header mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "header-example-item-4",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--header mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "header-example-item-6",
+          "classes": "c-menubar__button--header mr-base",
+          "href": "javascript:void(0)"
+        }
+      ],
+      "classes": "bg-neutral-lighter"
+    },
+    "visualDescription": "Barra de navegación horizontal con fondo blanco y borde inferior gris. Contiene cinco botones dropdown con texto negro en negrita y flechas descendentes, distribuidos horizontalmente con espaciado equilibrado. Los botones presentan formato de encabezado con tipografía de peso medio.",
+    "_generated": {
+      "hash": "80cbb1e3f38434ec968378c30c868b07",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:34.675Z"
+    }
+  },
+  {
+    "name": "Ejemplo de filtros",
+    "description": "Usa el Menubar sobre una lista de items para filtrarlos u ordenarlos. Usa la clase modificadora <code>.c-menubar--last-right</code> para posicionar el último item a la derecha en breakpoints grandes.",
+    "data": {
+      "id": "filter-items",
+      "idPrefix": "filter-example",
+      "ariaLabel": "Menubar descrición",
+      "items": [
+        {
+          "text": "Estados y trámites",
+          "ariaLabel": "Estados y trámites",
+          "id": "filter-example-item-2",
+          "classes": "c-menubar__button--sm mb-sm mr-sm",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Filtrar",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Filtrar servicios"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Filtrar procesos y convocatorias"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "none",
+                "html": "<span class='inline-block px-base py-sm text-neutral-dark focus:outline-hidden'>Estados</span>"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estados",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Borrador"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Borrador rechazado"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "En validación"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Publicado"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Con cambios"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Dados de baja"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "none",
+                "html": "<span class='inline-block px-base py-sm text-neutral-dark focus:outline-hidden'>Plazos (sólo aplican a convocatorias y procesos)</span>"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Plazos (sólo aplican a convocatorias y procesos)",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Plazo permanente"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Plazo temporal indefinido"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Plazo temporal abierto"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Plazo temporal finalizado"
+                  }
+                ]
+              }
+            ]
+          }
+        },
+        {
+          "text": "Tipología",
+          "ariaLabel": "Tipología",
+          "id": "filter-example-item-3",
+          "classes": "c-menubar__button--sm mb-sm mr-sm",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Filtrar por procedimiento",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Procedimiento"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Servicio sin tramitación de procedimiento"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Filtrar por interno/externo",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Interno"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Externo"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Filtrar por común/específico",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Común, horizontal"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Específico, sectorial"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Específico de uso común"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Filtrar por tipo de inicio",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Inicio de oficio"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Inicio a instancia"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Con convocatorias"
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Tramitación íntegra digital"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Eliminar filtros",
+          "ariaLabel": "Eliminar filtros",
+          "id": "filter-example-item-6",
+          "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
+          "href": "javascript:void(0)"
+        },
+        {
+          "text": "Orden: Actividad reciente",
+          "ariaLabel": "Orden: Actividad reciente",
+          "id": "filter-example-item-4",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tipos de ordenación",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Actividad reciente",
+                    "checked": true
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Publicación reciente"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Creación reciente"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "html": "Número de servicio (de mayor a menor)"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "c-menubar__button--sm mb-sm"
+        }
+      ],
+      "classes": "c-menubar--last-right"
+    },
+    "visualDescription": "Barra de filtros con fondo blanco y borde gris claro de 1px. Contiene tres botones con texto azul oscuro(\"Estadios y trámites\", \"Tipologías\", \"Eliminar filtros\") alineados a la izquierda, y un dropdown con texto negro (\"Orden: Actividad reciente\") alineado a la derecha. Los botones tienen bordes azules y fondo blanco.",
+    "_generated": {
+      "hash": "71019a86d88c0fa7e0e97c738caf435e",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:44.899Z"
+    }
+  },
+  {
+    "name": "con label",
+    "description": "Con label que explica que este menú actúa sobre otro elemento. Puedes usar las clases <code>.sr-only</code> para que se vea sólo en lectores de pantalla.",
+    "data": {
+      "id": "with-label-items",
+      "idPrefix": "label-example",
+      "ariaLabel": "Menubar descrición",
+      "label": {
+        "text": "Esto es un label"
+      },
+      "items": [
+        {
+          "text": "Menuitem",
+          "ariaLabel": "Menuitem",
+          "id": "menuitems-example-item-1-3",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitem",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitem",
+                "text": "Subitem 3"
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitemcheckbox",
+          "ariaLabel": "Menuitemcheckbox",
+          "id": "menuitems-example-item-2-3",
+          "classes": "mb-base mr-base",
+          "sub": {
+            "items": [
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 1"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 2"
+              },
+              {
+                "role": "menuitemcheckbox",
+                "text": "Subitem 3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Menuitemradio",
+          "ariaLabel": "Menuitemradio",
+          "id": "menuitems-example-item-3-3",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "group label",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 1"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 2"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Radio 3"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Items mixtos",
+          "ariaLabel": "Items mixtos",
+          "id": "menuitems-example-item-4-3",
+          "sub": {
+            "items": [
+              {
+                "role": "group",
+                "ariaLabel": "Tamaño de letra",
+                "items": [
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño mayor"
+                  },
+                  {
+                    "role": "menuitem",
+                    "text": "Tamaño menor"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de letra",
+                "items": [
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Negritas"
+                  },
+                  {
+                    "role": "menuitemcheckbox",
+                    "text": "Itálicas"
+                  }
+                ]
+              },
+              {
+                "role": "separator"
+              },
+              {
+                "role": "group",
+                "ariaLabel": "Estilo de texto",
+                "items": [
+                  {
+                    "role": "menuitemradio",
+                    "text": "Ninguno"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Tachado"
+                  },
+                  {
+                    "role": "menuitemradio",
+                    "text": "Subrayado"
+                  }
+                ]
+              }
+            ]
+          },
+          "classes": "mb-base mr-base"
+        },
+        {
+          "text": "Menuitem solo",
+          "ariaLabel": "Menuitem solo",
+          "id": "menuitems-example-item-6-3",
+          "classes": "c-menubar__button--transparent mb-base mr-base",
+          "href": "javascript:void(0)"
+        }
+      ]
+    },
+    "visualDescription": "Sección con fondo blanco y borde gris claro de 1px. Incluye un título negro pequeño \"con label\", seguido de texto gris \"Esto es un label\". Debajo hay una fila de cinco botones: cuatro dropdowns con texto negro sobre fondo blanco y bordes azules (\"Menuitem\", \"MenuItemcheckbox\", \"MenuItemradio\", \"Items mixtos\"), y un enlace azul sin borde (\"Menuitem solo\").",
+    "_generated": {
+      "hash": "b661f2b0cafa7e4adcd4607eda959333",
+      "version": "15.0.3",
+      "timestamp": "2026-01-30T19:08:44.899Z"
+    }
+  }
+] %}