desy-html 12.1.0 → 13.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (508) hide show
  1. package/README.md +36 -36
  2. package/config/tailwind.config.js +218 -218
  3. package/docs/_global.content-placeholder.njk +7 -7
  4. package/docs/_global.foot.njk +14 -14
  5. package/docs/_global.head.njk +28 -28
  6. package/docs/_include.template-header.njk +381 -381
  7. package/docs/_macro.component-example.njk +6 -6
  8. package/docs/_macro.example-render.njk +376 -376
  9. package/docs/_macro.load-component-params.njk +2 -2
  10. package/docs/_macro.load-component-template.njk +3 -3
  11. package/docs/_macro.render-caller.njk +3 -3
  12. package/docs/_macro.show-code-from-file.njk +57 -57
  13. package/docs/_macro.show-html-from-file.njk +42 -42
  14. package/docs/_template.default.njk +8 -8
  15. package/docs/_template.examples.njk +13 -13
  16. package/docs/catalogo.html +26 -26
  17. package/docs/componentes.html +180 -180
  18. package/docs/ds/_ds.example.accordion.njk +109 -109
  19. package/docs/ds/_ds.example.border.njk +39 -39
  20. package/docs/ds/_ds.example.botones-alert-sm.njk +264 -264
  21. package/docs/ds/_ds.example.botones-alert.njk +264 -264
  22. package/docs/ds/_ds.example.botones-default-sm.njk +264 -264
  23. package/docs/ds/_ds.example.botones-default.njk +258 -258
  24. package/docs/ds/_ds.example.botones-primary-lg.njk +264 -264
  25. package/docs/ds/_ds.example.botones-primary-sm.njk +264 -264
  26. package/docs/ds/_ds.example.botones-primary.njk +264 -264
  27. package/docs/ds/_ds.example.botones-transparent-sm.njk +264 -264
  28. package/docs/ds/_ds.example.botones-transparent.njk +264 -264
  29. package/docs/ds/_ds.example.breadcrumbs.njk +65 -65
  30. package/docs/ds/_ds.example.card.njk +198 -198
  31. package/docs/ds/_ds.example.checkboxes.njk +377 -377
  32. package/docs/ds/_ds.example.collapsible.njk +18 -18
  33. package/docs/ds/_ds.example.color-de-interaccion.njk +16 -16
  34. package/docs/ds/_ds.example.colores-cabecera.njk +15 -15
  35. package/docs/ds/_ds.example.colores-de-soporte.njk +82 -82
  36. package/docs/ds/_ds.example.colores-neutros.njk +26 -26
  37. package/docs/ds/_ds.example.date-input.njk +363 -363
  38. package/docs/ds/_ds.example.description-list.njk +289 -289
  39. package/docs/ds/_ds.example.details.njk +23 -23
  40. package/docs/ds/_ds.example.dropdowns-default.njk +186 -186
  41. package/docs/ds/_ds.example.dropdowns-en-uso.njk +105 -105
  42. package/docs/ds/_ds.example.dropdowns-variaciones.njk +224 -224
  43. package/docs/ds/_ds.example.error-summary.njk +34 -34
  44. package/docs/ds/_ds.example.file-upload.njk +54 -54
  45. package/docs/ds/_ds.example.footer.njk +28 -28
  46. package/docs/ds/_ds.example.header-advanced.njk +70 -70
  47. package/docs/ds/_ds.example.header.njk +211 -211
  48. package/docs/ds/_ds.example.input-group.njk +242 -242
  49. package/docs/ds/_ds.example.input.njk +164 -164
  50. package/docs/ds/_ds.example.item.njk +176 -176
  51. package/docs/ds/_ds.example.layout-escritorio.njk +38 -38
  52. package/docs/ds/_ds.example.layout-movil.njk +14 -14
  53. package/docs/ds/_ds.example.layout-sidebar.njk +11 -11
  54. package/docs/ds/_ds.example.links-list.njk +170 -170
  55. package/docs/ds/_ds.example.listbox-default.njk +677 -677
  56. package/docs/ds/_ds.example.listbox-variaciones.njk +824 -824
  57. package/docs/ds/_ds.example.menu-horizontal.njk +66 -66
  58. package/docs/ds/_ds.example.menu-navigation.njk +493 -493
  59. package/docs/ds/_ds.example.menu-vertical.njk +129 -129
  60. package/docs/ds/_ds.example.menubar-en-uso.njk +244 -244
  61. package/docs/ds/_ds.example.menubar-variaciones.njk +785 -785
  62. package/docs/ds/_ds.example.modal.njk +210 -210
  63. package/docs/ds/_ds.example.nav.njk +158 -158
  64. package/docs/ds/_ds.example.notification.njk +122 -122
  65. package/docs/ds/_ds.example.pagination.njk +190 -190
  66. package/docs/ds/_ds.example.pills.njk +215 -215
  67. package/docs/ds/_ds.example.radios.njk +419 -419
  68. package/docs/ds/_ds.example.searchbar.njk +87 -87
  69. package/docs/ds/_ds.example.select.njk +390 -390
  70. package/docs/ds/_ds.example.status-item.njk +239 -239
  71. package/docs/ds/_ds.example.status.njk +47 -47
  72. package/docs/ds/_ds.example.table.njk +740 -740
  73. package/docs/ds/_ds.example.tabs.njk +136 -136
  74. package/docs/ds/_ds.example.textarea.njk +237 -237
  75. package/docs/ds/_ds.example.textos.njk +32 -32
  76. package/docs/ds/_ds.example.toggle.njk +75 -75
  77. package/docs/ds/_ds.example.tree.njk +456 -456
  78. package/docs/ds/_ds.example.typography.njk +225 -225
  79. package/docs/ds/_ds.macro.code-snippet.njk +32 -32
  80. package/docs/ds/_ds.macro.section-title.njk +2 -2
  81. package/docs/ds/_ds.macro.subsection-title.njk +2 -2
  82. package/docs/ds/_ds.section.avisos.njk +22 -22
  83. package/docs/ds/_ds.section.botones.njk +53 -53
  84. package/docs/ds/_ds.section.campo-y-area-de-texto.njk +19 -19
  85. package/docs/ds/_ds.section.color.njk +147 -147
  86. package/docs/ds/_ds.section.datos.njk +37 -37
  87. package/docs/ds/_ds.section.dropdowns.njk +23 -23
  88. package/docs/ds/_ds.section.espaciado.njk +296 -296
  89. package/docs/ds/_ds.section.forms.njk +68 -68
  90. package/docs/ds/_ds.section.informacion.njk +12 -12
  91. package/docs/ds/_ds.section.layout.njk +63 -63
  92. package/docs/ds/_ds.section.menubar.njk +18 -18
  93. package/docs/ds/_ds.section.mostrar-ocultar.njk +33 -33
  94. package/docs/ds/_ds.section.navigation.njk +57 -57
  95. package/docs/ds/_ds.section.textos.njk +287 -287
  96. package/docs/ds/_ds.section.typography.njk +28 -28
  97. package/docs/estilos.html +37 -37
  98. package/docs/examples-accordion-history.html +8 -8
  99. package/docs/examples-accordion.html +8 -8
  100. package/docs/examples-alert.html +8 -8
  101. package/docs/examples-breadcrumbs.html +8 -8
  102. package/docs/examples-button-loader.html +8 -8
  103. package/docs/examples-button.html +8 -8
  104. package/docs/examples-card.html +7 -7
  105. package/docs/examples-character-count.html +8 -8
  106. package/docs/examples-checkboxes.html +7 -7
  107. package/docs/examples-collapsible.html +7 -7
  108. package/docs/examples-date-input.html +8 -8
  109. package/docs/examples-datepicker.html +8 -8
  110. package/docs/examples-description-list.html +8 -8
  111. package/docs/examples-details.html +8 -8
  112. package/docs/examples-dialog.html +7 -7
  113. package/docs/examples-dropdown.html +8 -8
  114. package/docs/examples-error-message.html +8 -8
  115. package/docs/examples-error-summary.html +8 -8
  116. package/docs/examples-fieldset.html +8 -8
  117. package/docs/examples-file-upload.html +8 -8
  118. package/docs/examples-footer.html +8 -8
  119. package/docs/examples-header-advanced.html +8 -8
  120. package/docs/examples-header-mini.html +8 -8
  121. package/docs/examples-header.html +8 -8
  122. package/docs/examples-hint.html +8 -8
  123. package/docs/examples-input-group.html +8 -8
  124. package/docs/examples-input.html +8 -8
  125. package/docs/examples-item.html +8 -8
  126. package/docs/examples-label.html +8 -8
  127. package/docs/examples-links-list.html +7 -7
  128. package/docs/examples-listbox.html +8 -8
  129. package/docs/examples-media-object.html +7 -7
  130. package/docs/examples-menu-horizontal.html +8 -8
  131. package/docs/examples-menu-navigation.html +8 -8
  132. package/docs/examples-menu-vertical.html +7 -7
  133. package/docs/examples-menubar.html +7 -7
  134. package/docs/examples-modal.html +7 -7
  135. package/docs/examples-nav.html +8 -8
  136. package/docs/examples-notification.html +8 -8
  137. package/docs/examples-pagination.html +8 -8
  138. package/docs/examples-pill.html +8 -8
  139. package/docs/examples-radios.html +8 -8
  140. package/docs/examples-searchbar.html +8 -8
  141. package/docs/examples-select.html +9 -9
  142. package/docs/examples-skip-link.html +8 -8
  143. package/docs/examples-spinner.html +8 -8
  144. package/docs/examples-status-item.html +8 -8
  145. package/docs/examples-status.html +8 -8
  146. package/docs/examples-table-advanced.html +8 -8
  147. package/docs/examples-table.html +8 -8
  148. package/docs/examples-tabs.html +8 -8
  149. package/docs/examples-textarea.html +8 -8
  150. package/docs/examples-toggle.html +8 -8
  151. package/docs/examples-tooltip.html +8 -8
  152. package/docs/examples-tree.html +8 -8
  153. package/docs/index.html +747 -739
  154. package/docs/pagina-accesibilidad.html +109 -109
  155. package/docs/pagina-mapa-web.html +136 -136
  156. package/docs/pagina-prueba.html +94 -94
  157. package/docs/plantilla-con-header-advanced.html +13 -13
  158. package/docs/plantilla-editar-con-cabecera-fija-y-sidebar-sticky.html +153 -153
  159. package/docs/plantilla-editar-con-cabecera-fija.html +16 -16
  160. package/docs/plantilla-logueado-con-cabecera-fija-headroom.html +14 -14
  161. package/docs/plantilla-logueado-con-cabecera-fija.html +14 -14
  162. package/docs/plantilla-logueado-con-selector-de-app-y-sidebar.html +163 -163
  163. package/docs/plantilla-logueado-con-selector-de-app-y-subheader.html +15 -15
  164. package/docs/plantilla-logueado-con-selector-de-app.html +13 -13
  165. package/docs/plantilla-logueado-con-titulo-de-app.html +13 -13
  166. package/docs/plantilla-sin-loguear.html +13 -13
  167. package/docs/plantillas.html +88 -88
  168. package/docs/spinner-plantilla-con-header-advanced.html +1 -1
  169. package/docs/spinner-plantilla-editar-con-cabecera-fija.html +5 -5
  170. package/docs/spinner-plantilla-logueado-con-cabecera-fija.html +1 -1
  171. package/docs/spinner-plantilla-logueado-con-selector-de-app-y-subheader.html +4 -4
  172. package/docs/spinner-plantilla-logueado-con-titulo-de-app.html +1 -1
  173. package/docs/spinner-plantilla-sin-loguear.html +17 -17
  174. package/gulpfile.js +127 -127
  175. package/package.json +67 -67
  176. package/src/EUPL-1.2.txt +287 -287
  177. package/src/css/base.css +44 -44
  178. package/src/css/component.form-group.css +23 -23
  179. package/src/css/component.headroom.css +31 -31
  180. package/src/css/component.text.css +165 -165
  181. package/src/css/component.tippy-box.css +11 -11
  182. package/src/css/styles.css +51 -51
  183. package/src/js/aria/MenuHorizontal.js +63 -63
  184. package/src/js/aria/MenuNavigation.js +4 -1
  185. package/src/js/aria/MenuVertical.js +60 -60
  186. package/src/js/aria/MenubarAction.js +100 -25
  187. package/src/js/aria/Nav.js +60 -60
  188. package/src/js/aria/accordion.js +264 -264
  189. package/src/js/aria/checkBoxes.js +52 -52
  190. package/src/js/aria/collapsible.js +44 -44
  191. package/src/js/aria/dataGrid.js +950 -950
  192. package/src/js/aria/linksList.js +42 -42
  193. package/src/js/aria/listbox.js +1 -1
  194. package/src/js/aria/notification.js +56 -56
  195. package/src/js/aria/radioButton.js +50 -50
  196. package/src/js/aria/tabs.js +0 -2
  197. package/src/js/aria/toggle.js +61 -61
  198. package/src/js/aria/utils.js +193 -193
  199. package/src/js/cally.js +1114 -1114
  200. package/src/js/desy-html.js +564 -573
  201. package/src/js/filters/filter-caller.js +8 -8
  202. package/src/js/filters/filter-escape-ltgt.js +6 -6
  203. package/src/js/filters/filter-quotes.js +49 -49
  204. package/src/js/filters/filter-slugify.js +11 -11
  205. package/src/js/filters/filter-version.js +8 -8
  206. package/src/js/filters/highlight.js +14 -14
  207. package/src/js/filters/index.js +19 -19
  208. package/src/js/globals/get-html-code-from-example.js +31 -31
  209. package/src/js/globals/get-html-code-from-file.js +26 -26
  210. package/src/js/globals/get-nunjucks-code-from-example.js +31 -31
  211. package/src/js/globals/get-nunjucks-code-from-file.js +24 -24
  212. package/src/js/globals/index.js +14 -14
  213. package/src/js/headroom.min.js +6 -6
  214. package/src/js/index.js +73 -75
  215. package/src/js/popper.min.js +6 -6
  216. package/src/js/tippy-bundle.umd.min.js +2 -2
  217. package/src/templates/components/accordion/_examples.accordion.njk +398 -398
  218. package/src/templates/components/accordion/_macro.accordion.njk +3 -3
  219. package/src/templates/components/accordion/_template.accordion.njk +131 -131
  220. package/src/templates/components/accordion/params.accordion.yaml +125 -125
  221. package/src/templates/components/accordion-history/_examples.accordion-history.njk +431 -431
  222. package/src/templates/components/accordion-history/_macro.accordion-history.njk +3 -3
  223. package/src/templates/components/accordion-history/_template.accordion-history.njk +193 -193
  224. package/src/templates/components/accordion-history/params.accordion-history.yaml +129 -129
  225. package/src/templates/components/alert/_examples.alert.njk +79 -79
  226. package/src/templates/components/alert/_macro.alert.njk +3 -3
  227. package/src/templates/components/alert/_styles.alert.css +9 -9
  228. package/src/templates/components/alert/_template.alert.njk +16 -16
  229. package/src/templates/components/alert/params.alert.yaml +25 -25
  230. package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +374 -374
  231. package/src/templates/components/breadcrumbs/_macro.breadcrumbs.njk +3 -3
  232. package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css +81 -78
  233. package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +77 -77
  234. package/src/templates/components/breadcrumbs/params.breadcrumbs.yaml +44 -44
  235. package/src/templates/components/button/_examples.button.njk +295 -296
  236. package/src/templates/components/button/_macro.button.njk +3 -3
  237. package/src/templates/components/button/_styles.button.css +189 -189
  238. package/src/templates/components/button/_template.button.njk +49 -49
  239. package/src/templates/components/button/params.button.yaml +48 -48
  240. package/src/templates/components/button-loader/_examples.button-loader.njk +288 -288
  241. package/src/templates/components/button-loader/_macro.button-loader.njk +3 -3
  242. package/src/templates/components/button-loader/_styles.button-loader.css +204 -204
  243. package/src/templates/components/button-loader/_template.button-loader.njk +84 -84
  244. package/src/templates/components/button-loader/params.button-loader.yaml +74 -74
  245. package/src/templates/components/card/_examples.card.njk +303 -303
  246. package/src/templates/components/card/_macro.card.njk +3 -3
  247. package/src/templates/components/card/_template.card.njk +34 -34
  248. package/src/templates/components/card/params.card.yaml +112 -112
  249. package/src/templates/components/character-count/_examples.character-count.njk +147 -147
  250. package/src/templates/components/character-count/_macro.character-count.njk +5 -5
  251. package/src/templates/components/character-count/_template.character-count.njk +38 -38
  252. package/src/templates/components/character-count/params.character-count.yaml +77 -77
  253. package/src/templates/components/checkboxes/_examples.checkboxes.njk +734 -734
  254. package/src/templates/components/checkboxes/_macro.checkboxes.njk +3 -3
  255. package/src/templates/components/checkboxes/_styles.checkboxes.css +31 -31
  256. package/src/templates/components/checkboxes/_template.checkboxes.njk +137 -138
  257. package/src/templates/components/checkboxes/params.checkboxes.yaml +116 -116
  258. package/src/templates/components/collapsible/_examples.collapsible.njk +77 -77
  259. package/src/templates/components/collapsible/_macro.collapsible.njk +3 -3
  260. package/src/templates/components/collapsible/_styles.collapsible.css +33 -33
  261. package/src/templates/components/collapsible/_template.collapsible.njk +17 -17
  262. package/src/templates/components/collapsible/params.collapsible.yaml +48 -48
  263. package/src/templates/components/date-input/_examples.date-input.njk +500 -500
  264. package/src/templates/components/date-input/_macro.date-input.njk +3 -3
  265. package/src/templates/components/date-input/_template.date-input.njk +125 -126
  266. package/src/templates/components/date-input/params.date-input.yaml +97 -97
  267. package/src/templates/components/datepicker/_examples.datepicker.njk +329 -329
  268. package/src/templates/components/datepicker/_macro.datepicker.njk +3 -3
  269. package/src/templates/components/datepicker/_styles.datepicker.css +89 -89
  270. package/src/templates/components/datepicker/_template.datepicker.njk +130 -131
  271. package/src/templates/components/datepicker/params.datepicker.yaml +104 -104
  272. package/src/templates/components/description-list/_examples.description-list.njk +436 -436
  273. package/src/templates/components/description-list/_macro.description-list.njk +3 -3
  274. package/src/templates/components/description-list/_template.description-list.njk +17 -17
  275. package/src/templates/components/description-list/params.description-list.yaml +61 -61
  276. package/src/templates/components/details/_examples.details.njk +44 -44
  277. package/src/templates/components/details/_macro.details.njk +3 -3
  278. package/src/templates/components/details/_template.details.njk +17 -17
  279. package/src/templates/components/details/params.details.yaml +40 -40
  280. package/src/templates/components/dialog/_examples.dialog.njk +138 -138
  281. package/src/templates/components/dialog/_macro.dialog.njk +3 -3
  282. package/src/templates/components/dialog/_styles.dialog.css +19 -19
  283. package/src/templates/components/dialog/_template.dialog.njk +12 -12
  284. package/src/templates/components/dialog/params.dialog.yaml +25 -25
  285. package/src/templates/components/dropdown/_examples.dropdown.njk +136 -136
  286. package/src/templates/components/dropdown/_macro.dropdown.njk +3 -3
  287. package/src/templates/components/dropdown/_styles.dropdown.css +203 -203
  288. package/src/templates/components/dropdown/_template.dropdown.njk +34 -34
  289. package/src/templates/components/dropdown/params.dropdown.yaml +32 -32
  290. package/src/templates/components/error-message/_examples.error-message.njk +14 -14
  291. package/src/templates/components/error-message/_macro.error-message.njk +5 -5
  292. package/src/templates/components/error-message/_template.error-message.njk +8 -8
  293. package/src/templates/components/error-message/params.error-message.yaml +23 -23
  294. package/src/templates/components/error-summary/_examples.error-summary.njk +81 -81
  295. package/src/templates/components/error-summary/_macro.error-summary.njk +5 -5
  296. package/src/templates/components/error-summary/_template.error-summary.njk +48 -48
  297. package/src/templates/components/error-summary/params.error-summary.yaml +52 -52
  298. package/src/templates/components/fieldset/_examples.fieldset.njk +88 -88
  299. package/src/templates/components/fieldset/_macro.fieldset.njk +2 -2
  300. package/src/templates/components/fieldset/_template.fieldset.njk +46 -46
  301. package/src/templates/components/fieldset/params.fieldset.yaml +49 -49
  302. package/src/templates/components/file-upload/_examples.file-upload.njk +84 -84
  303. package/src/templates/components/file-upload/_macro.file-upload.njk +2 -2
  304. package/src/templates/components/file-upload/_template.file-upload.njk +45 -46
  305. package/src/templates/components/file-upload/params.file-upload.yaml +48 -48
  306. package/src/templates/components/footer/_examples.footer.njk +450 -450
  307. package/src/templates/components/footer/_macro.footer.njk +3 -3
  308. package/src/templates/components/footer/_styles.footer.css +43 -43
  309. package/src/templates/components/footer/_template.footer.njk +115 -114
  310. package/src/templates/components/footer/params.footer.yaml +140 -140
  311. package/src/templates/components/header/_examples.header.njk +542 -542
  312. package/src/templates/components/header/_macro.header.header__dropdown.njk +3 -3
  313. package/src/templates/components/header/_macro.header.header__navigation.njk +3 -3
  314. package/src/templates/components/header/_macro.header.header__offcanvas.njk +3 -3
  315. package/src/templates/components/header/_macro.header.header__offcanvasButton.njk +3 -3
  316. package/src/templates/components/header/_macro.header.header__subnav.njk +3 -3
  317. package/src/templates/components/header/_macro.header.njk +3 -3
  318. package/src/templates/components/header/_styles.header.css +12 -12
  319. package/src/templates/components/header/_template.header.header__dropdown.njk +27 -27
  320. package/src/templates/components/header/_template.header.header__navigation.njk +26 -28
  321. package/src/templates/components/header/_template.header.header__offcanvas.njk +20 -20
  322. package/src/templates/components/header/_template.header.header__offcanvasButton.njk +10 -10
  323. package/src/templates/components/header/_template.header.header__subnav.njk +33 -33
  324. package/src/templates/components/header/_template.header.njk +139 -138
  325. package/src/templates/components/header/params.header.yaml +280 -280
  326. package/src/templates/components/header-advanced/_examples.header-advanced.njk +1033 -1023
  327. package/src/templates/components/header-advanced/_macro.header-advanced.njk +3 -3
  328. package/src/templates/components/header-advanced/_template.header-advanced.njk +168 -168
  329. package/src/templates/components/header-advanced/params.header-advanced.yaml +346 -346
  330. package/src/templates/components/header-mini/_examples.header-mini.njk +304 -304
  331. package/src/templates/components/header-mini/_macro.header-mini.njk +3 -3
  332. package/src/templates/components/header-mini/_template.header-mini.njk +39 -39
  333. package/src/templates/components/header-mini/params.header-mini.yaml +80 -80
  334. package/src/templates/components/hint/_examples.hint.njk +14 -14
  335. package/src/templates/components/hint/_macro.hint.njk +3 -3
  336. package/src/templates/components/hint/_template.hint.njk +3 -3
  337. package/src/templates/components/hint/params.hint.yaml +34 -34
  338. package/src/templates/components/input/_examples.input.njk +309 -309
  339. package/src/templates/components/input/_macro.input.njk +3 -3
  340. package/src/templates/components/input/_styles.input.css +18 -18
  341. package/src/templates/components/input/_template.input.njk +53 -54
  342. package/src/templates/components/input/params.input.yaml +80 -80
  343. package/src/templates/components/input-group/_examples.input-group.njk +503 -503
  344. package/src/templates/components/input-group/_macro.input-group.njk +3 -3
  345. package/src/templates/components/input-group/_template.input-group.njk +107 -108
  346. package/src/templates/components/input-group/params.input-group.yaml +123 -123
  347. package/src/templates/components/item/_examples.item.njk +273 -273
  348. package/src/templates/components/item/_macro.item.njk +3 -3
  349. package/src/templates/components/item/_template.item.njk +73 -73
  350. package/src/templates/components/item/params.item.yaml +101 -101
  351. package/src/templates/components/label/_examples.label.njk +34 -34
  352. package/src/templates/components/label/_macro.label.njk +5 -5
  353. package/src/templates/components/label/_template.label.njk +37 -37
  354. package/src/templates/components/label/params.label.yaml +28 -28
  355. package/src/templates/components/links-list/_examples.links-list.njk +647 -647
  356. package/src/templates/components/links-list/_macro.links-list.njk +3 -3
  357. package/src/templates/components/links-list/_template.links-list.njk +119 -119
  358. package/src/templates/components/links-list/params.links-list.yaml +101 -101
  359. package/src/templates/components/listbox/_examples.listbox.njk +691 -691
  360. package/src/templates/components/listbox/_macro.listbox.njk +3 -3
  361. package/src/templates/components/listbox/_styles.listbox.css +231 -231
  362. package/src/templates/components/listbox/_template.listbox.njk +90 -90
  363. package/src/templates/components/listbox/params.listbox.yaml +85 -85
  364. package/src/templates/components/media-object/_examples.media-object.njk +48 -48
  365. package/src/templates/components/media-object/_macro.media-object.njk +3 -3
  366. package/src/templates/components/media-object/_template.media-object.njk +21 -21
  367. package/src/templates/components/media-object/params.media-object.yaml +16 -16
  368. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +529 -529
  369. package/src/templates/components/menu-horizontal/_macro.menu-horizontal.njk +3 -3
  370. package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css +162 -162
  371. package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +36 -36
  372. package/src/templates/components/menu-horizontal/params.menu-horizontal.yaml +53 -53
  373. package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +1190 -1213
  374. package/src/templates/components/menu-navigation/_macro.menu-navigation.njk +3 -3
  375. package/src/templates/components/menu-navigation/_styles.menu-navigation.css +235 -235
  376. package/src/templates/components/menu-navigation/_template.menu-navigation.njk +87 -89
  377. package/src/templates/components/menu-navigation/params.menu-navigation.yaml +86 -86
  378. package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +739 -739
  379. package/src/templates/components/menu-vertical/_macro.menu-vertical.njk +3 -3
  380. package/src/templates/components/menu-vertical/_template.menu-vertical.njk +92 -92
  381. package/src/templates/components/menu-vertical/params.menu-vertical.yaml +77 -77
  382. package/src/templates/components/menubar/_examples.menubar.njk +1777 -1777
  383. package/src/templates/components/menubar/_macro.menubar.njk +3 -3
  384. package/src/templates/components/menubar/_styles.menubar.css +272 -262
  385. package/src/templates/components/menubar/_template.menubar.njk +106 -105
  386. package/src/templates/components/menubar/params.menubar.yaml +139 -139
  387. package/src/templates/components/modal/_examples.modal.njk +354 -354
  388. package/src/templates/components/modal/_macro.modal.njk +3 -3
  389. package/src/templates/components/modal/_template.modal.njk +129 -129
  390. package/src/templates/components/modal/params.modal.yaml +77 -77
  391. package/src/templates/components/nav/_examples.nav.njk +402 -402
  392. package/src/templates/components/nav/_macro.nav.njk +3 -3
  393. package/src/templates/components/nav/_template.nav.njk +53 -53
  394. package/src/templates/components/nav/params.nav.yaml +61 -61
  395. package/src/templates/components/notification/_examples.notification.njk +193 -193
  396. package/src/templates/components/notification/_macro.notification.njk +3 -3
  397. package/src/templates/components/notification/_styles.notification.css +28 -28
  398. package/src/templates/components/notification/_template.notification.njk +86 -86
  399. package/src/templates/components/notification/params.notification.yaml +101 -101
  400. package/src/templates/components/pagination/_examples.pagination.njk +402 -402
  401. package/src/templates/components/pagination/_macro.pagination.njk +3 -3
  402. package/src/templates/components/pagination/_template.pagination.njk +162 -162
  403. package/src/templates/components/pagination/params.pagination.yaml +150 -150
  404. package/src/templates/components/pill/_examples.pill.njk +101 -101
  405. package/src/templates/components/pill/_macro.pill.njk +3 -3
  406. package/src/templates/components/pill/_styles.pill.css +63 -63
  407. package/src/templates/components/pill/_template.pill.njk +38 -38
  408. package/src/templates/components/pill/params.pill.yaml +28 -28
  409. package/src/templates/components/radios/_examples.radios.njk +637 -637
  410. package/src/templates/components/radios/_macro.radios.njk +5 -5
  411. package/src/templates/components/radios/_styles.radios.css +31 -31
  412. package/src/templates/components/radios/_template.radios.njk +133 -134
  413. package/src/templates/components/radios/params.radios.yaml +104 -104
  414. package/src/templates/components/searchbar/_examples.searchbar.njk +98 -98
  415. package/src/templates/components/searchbar/_macro.searchbar.njk +3 -3
  416. package/src/templates/components/searchbar/_template.searchbar.njk +45 -46
  417. package/src/templates/components/searchbar/params.searchbar.yaml +46 -46
  418. package/src/templates/components/select/_examples.select.njk +336 -336
  419. package/src/templates/components/select/_macro.select.njk +5 -5
  420. package/src/templates/components/select/_styles.select.css +47 -47
  421. package/src/templates/components/select/_template.select.njk +67 -70
  422. package/src/templates/components/select/params.select.yaml +93 -93
  423. package/src/templates/components/skip-link/_examples.skip-link.njk +19 -19
  424. package/src/templates/components/skip-link/_macro.skip-link.njk +3 -3
  425. package/src/templates/components/skip-link/_styles.skip-link.css +13 -13
  426. package/src/templates/components/skip-link/_template.skip-link.njk +4 -4
  427. package/src/templates/components/skip-link/params.skip-link.yaml +20 -20
  428. package/src/templates/components/spinner/_examples.spinner.njk +52 -52
  429. package/src/templates/components/spinner/_macro.spinner.njk +3 -3
  430. package/src/templates/components/spinner/_styles.spinner.css +32 -32
  431. package/src/templates/components/spinner/_template.spinner.njk +12 -8
  432. package/src/templates/components/spinner/params.spinner.yaml +12 -12
  433. package/src/templates/components/status/_examples.status.njk +49 -49
  434. package/src/templates/components/status/_macro.status.njk +3 -3
  435. package/src/templates/components/status/_template.status.njk +23 -23
  436. package/src/templates/components/status/params.status.yaml +24 -24
  437. package/src/templates/components/status-item/_examples.status-item.njk +245 -245
  438. package/src/templates/components/status-item/_macro.status-item.njk +3 -3
  439. package/src/templates/components/status-item/_template.status-item.njk +99 -99
  440. package/src/templates/components/status-item/params.status-item.yaml +106 -106
  441. package/src/templates/components/table/_examples.table.njk +668 -668
  442. package/src/templates/components/table/_macro.table.njk +3 -3
  443. package/src/templates/components/table/_styles.table.css +20 -20
  444. package/src/templates/components/table/_template.table.njk +68 -68
  445. package/src/templates/components/table/params.table.yaml +130 -130
  446. package/src/templates/components/table-advanced/_examples.table-advanced.njk +785 -785
  447. package/src/templates/components/table-advanced/_macro.table-advanced.njk +3 -3
  448. package/src/templates/components/table-advanced/_styles.table-advanced.css +65 -65
  449. package/src/templates/components/table-advanced/_template.table-advanced.njk +210 -210
  450. package/src/templates/components/table-advanced/params.table-advanced.yaml +160 -160
  451. package/src/templates/components/tabs/_examples.tabs.njk +516 -516
  452. package/src/templates/components/tabs/_macro.tabs.njk +3 -3
  453. package/src/templates/components/tabs/_styles.tabs.css +78 -78
  454. package/src/templates/components/tabs/_template.tabs.njk +70 -70
  455. package/src/templates/components/tabs/params.tabs.yaml +83 -83
  456. package/src/templates/components/textarea/_examples.textarea.njk +131 -131
  457. package/src/templates/components/textarea/_macro.textarea.njk +5 -5
  458. package/src/templates/components/textarea/_template.textarea.njk +47 -48
  459. package/src/templates/components/textarea/params.textarea.yaml +64 -64
  460. package/src/templates/components/toggle/_examples.toggle.njk +188 -188
  461. package/src/templates/components/toggle/_macro.toggle.njk +3 -3
  462. package/src/templates/components/toggle/_styles.toggle.css +31 -31
  463. package/src/templates/components/toggle/_template.toggle.njk +27 -27
  464. package/src/templates/components/toggle/params.toggle.yaml +69 -69
  465. package/src/templates/components/tooltip/_examples.tooltip.njk +86 -86
  466. package/src/templates/components/tooltip/_macro.tooltip.njk +3 -3
  467. package/src/templates/components/tooltip/_styles.tooltip.css +12 -12
  468. package/src/templates/components/tooltip/_template.tooltip.njk +39 -39
  469. package/src/templates/components/tooltip/params.tooltip.yaml +40 -40
  470. package/src/templates/components/tree/_examples.tree.njk +2679 -2679
  471. package/src/templates/components/tree/_macro.tree.njk +3 -3
  472. package/src/templates/components/tree/_styles.tree.css +53 -53
  473. package/src/templates/components/tree/_template.tree.njk +222 -222
  474. package/src/templates/components/tree/params.tree.yaml +169 -169
  475. package/src/templates/includes/_abrir-notificaciones-extra.njk +2 -2
  476. package/src/templates/includes/_abrir-notificaciones.njk +2 -2
  477. package/src/templates/includes/_acciones-de-cabecera.njk +28 -28
  478. package/src/templates/includes/_ejemplo-titulo-h2-parrafo.njk +4 -4
  479. package/src/templates/includes/_ejemplo-titulo-parrafo.njk +4 -4
  480. package/src/templates/includes/_test-include.njk +13 -13
  481. package/src/templates/pages/_page.foot-headroom.njk +33 -33
  482. package/src/templates/pages/_page.foot.njk +8 -8
  483. package/src/templates/pages/_page.footer.njk +19 -19
  484. package/src/templates/pages/_page.head.njk +12 -12
  485. package/src/templates/pages/_page.notification-edit-inner-content.njk +31 -31
  486. package/src/templates/pages/_page.notification-edit.njk +30 -30
  487. package/src/templates/pages/_page.notification-footer.njk +32 -32
  488. package/src/templates/pages/_page.notification-header-fixed.njk +30 -30
  489. package/src/templates/pages/_page.notification-header.njk +31 -31
  490. package/src/templates/pages/_page.sidebar-content.njk +20 -20
  491. package/src/templates/pages/_page.spinner-block.njk +14 -14
  492. package/src/templates/pages/_page.spinner-show.njk +15 -15
  493. package/src/templates/pages/_page.spinner.njk +15 -15
  494. package/src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk +36 -36
  495. package/src/templates/pages/_template.edit-fixed.njk +74 -74
  496. package/src/templates/pages/_template.home.njk +111 -111
  497. package/src/templates/pages/_template.logged-out.njk +56 -56
  498. package/src/templates/pages/_template.logged-selector-fixed-headroom.njk +198 -198
  499. package/src/templates/pages/_template.logged-selector-fixed.njk +195 -195
  500. package/src/templates/pages/_template.logged-selector-subheader.njk +80 -80
  501. package/src/templates/pages/_template.logged-selector-with-sidebar.njk +28 -28
  502. package/src/templates/pages/_template.logged-selector.njk +195 -195
  503. package/src/templates/pages/_template.logged.njk +141 -141
  504. package/src/templates/pages/_template.mfe-iframe-content.njk +31 -31
  505. package/src/templates/pages/_template.mfe.njk +83 -83
  506. package/src/templates/pages/_template.test.njk +48 -48
  507. package/src/templates/pages/_template.with-header-advanced.njk +311 -311
  508. package/src/js/aria/HeaderNavigation.js +0 -55
package/src/templates/components/menu-navigation/_examples.menu-navigation.njk CHANGED
@@ -1,1213 +1,1190 @@
1
- {% set exampleComponent = "menu-navigation" %}
2
- {% set examples = [
3
- {
4
- "name": "por defecto",
5
- "data": {
6
- "idPrefix": "default-example",
7
- "items": [
8
- {
9
- "text": "Item 1",
10
- "id": "default-example-item-1",
11
- "sub": {
12
- "items": [
13
- {
14
- "href": "#",
15
- "text": "Subitem 1"
16
- },
17
- {
18
- "href": "#",
19
- "text": "Subitem 2"
20
- },
21
- {
22
- "href": "#",
23
- "text": "Subitem 3"
24
- }
25
- ],
26
- "attributes": {
27
- "aria-labelledby": "default-example-item-1"
28
- }
29
- }
30
- },
31
- {
32
- "text": "Item 2",
33
- "id": "default-example-item-2",
34
- "sub": {
35
- "items": [
36
- {
37
- "href": "#",
38
- "text": "Subitem 1"
39
- },
40
- {
41
- "href": "#",
42
- "text": "Subitem 2"
43
- },
44
- {
45
- "href": "#",
46
- "text": "Subitem 3"
47
- }
48
- ],
49
- "attributes": {
50
- "aria-labelledby": "default-example-item-2"
51
- }
52
- }
53
- },
54
- {
55
- "text": "Item 3",
56
- "id": "default-example-item-3",
57
- "sub": {
58
- "items": [
59
- {
60
- "href": "#",
61
- "text": "Subitem 1"
62
- },
63
- {
64
- "href": "#",
65
- "text": "Subitem 2"
66
- },
67
- {
68
- "href": "#",
69
- "text": "Subitem 3"
70
- }
71
- ],
72
- "attributes": {
73
- "aria-labelledby": "default-example-item-3"
74
- }
75
- }
76
- }
77
- ],
78
- "attributes": {
79
- "aria-label": "Menu navigation"
80
- }
81
- }
82
- },
83
- {
84
- "name": "con item deshabilitado",
85
- "data": {
86
- "idPrefix": "with-disabled-item-example",
87
- "items": [
88
- {
89
- "href": "#",
90
- "text": "Item 1"
91
- },
92
- {
93
- "href": "#",
94
- "text": "Item 2"
95
- },
96
- {
97
- "href": "#",
98
- "text": "Item 3",
99
- "disabled": true
100
- }
101
- ],
102
- "attributes": {
103
- "aria-label": "Menu navigation"
104
- }
105
- }
106
- },
107
- {
108
- "name": "con item activo",
109
- "description": "Añade <code>active: true</code> a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuNavigation('mi-menu', 'with-active-item-example-3')</code> para desactivar el item actual y activar el tercer item de este ejemplo.",
110
- "data": {
111
- "idPrefix": "with-active-item-example",
112
- "items": [
113
- {
114
- "href": "#",
115
- "text": "Item 1"
116
- },
117
- {
118
- "href": "#",
119
- "text": "Item 2",
120
- "active": true
121
- },
122
- {
123
- "href": "#",
124
- "text": "Item 3"
125
- }
126
- ],
127
- "attributes": {
128
- "aria-label": "Menu navigation",
129
- "id": "mi-menu"
130
- }
131
- }
132
- },
133
- {
134
- "name": "con sub-item activo",
135
- "description": "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>activateSubItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateSubItemMenuNavigation('mi-sub-menu', 'sub-active-sub-item-example-2-2')</code> para desactivar el sub-item actual y activar el tercer sub-item de este ejemplo.",
136
- "data": {
137
- "idPrefix": "with-active-sub-item-example",
138
- "items": [
139
- {
140
- "text": "Item 1",
141
- "id": "active-sub-item-example-1",
142
- "sub": {
143
- "items": [
144
- {
145
- "href": "#",
146
- "text": "Subitem 1"
147
- },
148
- {
149
- "href": "#",
150
- "text": "Subitem 2",
151
- "active": true
152
- },
153
- {
154
- "href": "#",
155
- "text": "Subitem 3"
156
- }
157
- ],
158
- "attributes": {
159
- "aria-labelledby": "active-sub-item-example-1"
160
- }
161
- }
162
- },
163
- {
164
- "text": "Item 2",
165
- "id": "active-sub-item-example-2",
166
- "sub": {
167
- "items": [
168
- {
169
- "href": "#",
170
- "text": "Subitem 1"
171
- },
172
- {
173
- "href": "#",
174
- "text": "Subitem 2"
175
- },
176
- {
177
- "href": "#",
178
- "text": "Subitem 3"
179
- }
180
- ],
181
- "attributes": {
182
- "aria-labelledby": "active-sub-item-example-2"
183
- }
184
- }
185
- },
186
- {
187
- "text": "Item 3",
188
- "id": "active-sub-item-example-3",
189
- "sub": {
190
- "items": [
191
- {
192
- "href": "#",
193
- "text": "Subitem 1"
194
- },
195
- {
196
- "href": "#",
197
- "text": "Subitem 2"
198
- },
199
- {
200
- "href": "#",
201
- "text": "Subitem 3"
202
- }
203
- ],
204
- "attributes": {
205
- "aria-labelledby": "active-sub-item-example-3"
206
- }
207
- }
208
- }
209
- ],
210
- "attributes": {
211
- "aria-label": "Menu navigation",
212
- "id": "mi-sub-menu"
213
- }
214
- }
215
- },
216
- {
217
- "name": "con target en enlaces",
218
- "data": {
219
- "idPrefix": "with-targets-in-links-example",
220
- "items": [
221
- {
222
- "href": "#",
223
- "text": "Item 1",
224
- "target": "_blank",
225
- "attributes": {
226
- "title": "Se abre en ventana nueva"
227
- }
228
- },
229
- {
230
- "href": "#",
231
- "text": "Item 2",
232
- "target": "_blank",
233
- "attributes": {
234
- "title": "Se abre en ventana nueva"
235
- }
236
- },
237
- {
238
- "href": "#",
239
- "text": "Item 3",
240
- "target": "_blank",
241
- "attributes": {
242
- "title": "Se abre en ventana nueva"
243
- }
244
- }
245
- ],
246
- "attributes": {
247
- "aria-label": "Menu navigation"
248
- }
249
- }
250
- },
251
- {
252
- "name": "con divisores",
253
- "data": {
254
- "idPrefix": "with-dividers-example",
255
- "items": [
256
- {
257
- "href": "#",
258
- "text": "Item 1"
259
- },
260
- {
261
- "href": "#",
262
- "text": "Item 2",
263
- "divider": {
264
- "html": "<div class='absolute h-11 border-l border-neutral-base'></div>"
265
- }
266
- },
267
- {
268
- "text": "Item 3",
269
- "id": "with-dividers-example-parent",
270
- "sub": {
271
- "items": [
272
- {
273
- "href": "#",
274
- "text": "Subitem 1"
275
- },
276
- {
277
- "href": "#",
278
- "text": "Subitem 2",
279
- "divider": true
280
- },
281
- {
282
- "href": "#",
283
- "text": "Subitem 3"
284
- }
285
- ],
286
- "attributes": {
287
- "aria-labelledby": "with-dividers-example-parent"
288
- }
289
- }
290
- },
291
- {
292
- "href": "#",
293
- "text": "Item 4"
294
- }
295
- ],
296
- "attributes": {
297
- "aria-label": "Menu navigation"
298
- }
299
- }
300
- },
301
- {
302
- "name": "grande",
303
- "description": "Usando clases para mostrar los items grandes.",
304
- "data": {
305
- "idPrefix": "large-example",
306
- "items": [
307
- {
308
- "text": "Item 1",
309
- "id": "large-example-item-1",
310
- "classes": "c-menu-navigation__button--lg -mr-sm",
311
- "sub": {
312
- "items": [
313
- {
314
- "href": "#",
315
- "text": "Subitem 1"
316
- },
317
- {
318
- "href": "#",
319
- "text": "Subitem 2"
320
- },
321
- {
322
- "href": "#",
323
- "text": "Subitem 3"
324
- }
325
- ],
326
- "attributes": {
327
- "aria-labelledby": "large-example-item-1"
328
- }
329
- }
330
- },
331
- {
332
- "text": "Item 2",
333
- "id": "large-example-item-2",
334
- "classes": "c-menu-navigation__button--lg -mr-sm",
335
- "sub": {
336
- "items": [
337
- {
338
- "href": "#",
339
- "text": "Subitem 1"
340
- },
341
- {
342
- "href": "#",
343
- "text": "Subitem 2"
344
- },
345
- {
346
- "href": "#",
347
- "text": "Subitem 3"
348
- }
349
- ],
350
- "attributes": {
351
- "aria-labelledby": "large-example-item-2"
352
- }
353
- }
354
- },
355
- {
356
- "text": "Item 3",
357
- "id": "large-example-item-3",
358
- "classes": "c-menu-navigation__button--lg -mr-sm",
359
- "sub": {
360
- "items": [
361
- {
362
- "href": "#",
363
- "text": "Subitem 1"
364
- },
365
- {
366
- "href": "#",
367
- "text": "Subitem 2"
368
- },
369
- {
370
- "href": "#",
371
- "text": "Subitem 3"
372
- }
373
- ],
374
- "attributes": {
375
- "aria-labelledby": "large-example-item-3"
376
- }
377
- }
378
- }
379
- ],
380
- "attributes": {
381
- "aria-label": "Menu navigation"
382
- }
383
- }
384
- },
385
- {
386
- "name": "peque",
387
- "description": "Usando clases para mostrar los items pequeños.",
388
- "data": {
389
- "idPrefix": "small-example",
390
- "items": [
391
- {
392
- "text": "Item 1",
393
- "id": "small-example-item-1",
394
- "classes": "c-menu-navigation__button--sm -mr-sm",
395
- "sub": {
396
- "items": [
397
- {
398
- "href": "#",
399
- "text": "Subitem 1"
400
- },
401
- {
402
- "href": "#",
403
- "text": "Subitem 2"
404
- },
405
- {
406
- "href": "#",
407
- "text": "Subitem 3"
408
- }
409
- ],
410
- "attributes": {
411
- "aria-labelledby": "small-example-item-1"
412
- }
413
- }
414
- },
415
- {
416
- "text": "Item 2",
417
- "id": "small-example-item-2",
418
- "classes": "c-menu-navigation__button--sm -mr-sm",
419
- "sub": {
420
- "items": [
421
- {
422
- "href": "#",
423
- "text": "Subitem 1"
424
- },
425
- {
426
- "href": "#",
427
- "text": "Subitem 2"
428
- },
429
- {
430
- "href": "#",
431
- "text": "Subitem 3"
432
- }
433
- ],
434
- "attributes": {
435
- "aria-labelledby": "small-example-item-2"
436
- }
437
- }
438
- },
439
- {
440
- "text": "Item 3",
441
- "id": "small-example-item-3",
442
- "classes": "c-menu-navigation__button--sm -mr-sm",
443
- "sub": {
444
- "items": [
445
- {
446
- "href": "#",
447
- "text": "Subitem 1"
448
- },
449
- {
450
- "href": "#",
451
- "text": "Subitem 2"
452
- },
453
- {
454
- "href": "#",
455
- "text": "Subitem 3"
456
- }
457
- ],
458
- "attributes": {
459
- "aria-labelledby": "small-example-item-3"
460
- }
461
- }
462
- }
463
- ],
464
- "attributes": {
465
- "aria-label": "Menu navigation"
466
- }
467
- }
468
- },
469
- {
470
- "name": "primario",
471
- "description": "Usando clases para mostrar los items primarios.",
472
- "data": {
473
- "idPrefix": "primary-example",
474
- "items": [
475
- {
476
- "text": "Item 1",
477
- "id": "primary-example-item-1",
478
- "classes": "c-menu-navigation__button--primary",
479
- "sub": {
480
- "items": [
481
- {
482
- "href": "#",
483
- "text": "Subitem 1"
484
- },
485
- {
486
- "href": "#",
487
- "text": "Subitem 2"
488
- },
489
- {
490
- "href": "#",
491
- "text": "Subitem 3"
492
- }
493
- ],
494
- "attributes": {
495
- "aria-labelledby": "primary-example-item-1"
496
- }
497
- }
498
- },
499
- {
500
- "text": "Item activo 2",
501
- "id": "primary-example-item-2",
502
- "classes": "c-menu-navigation__button--primary",
503
- "active": true,
504
- "sub": {
505
- "items": [
506
- {
507
- "href": "#",
508
- "text": "Subitem 1"
509
- },
510
- {
511
- "href": "#",
512
- "text": "Subitem 2",
513
- "active": true
514
- },
515
- {
516
- "href": "#",
517
- "text": "Subitem 3"
518
- }
519
- ],
520
- "attributes": {
521
- "aria-labelledby": "primary-example-item-2"
522
- }
523
- }
524
- },
525
- {
526
- "text": "Item deshabilitado 3",
527
- "id": "primary-example-item-3",
528
- "classes": "c-menu-navigation__button--primary",
529
- "disabled": true,
530
- "sub": {
531
- "items": [
532
- {
533
- "href": "#",
534
- "text": "Subitem 1"
535
- },
536
- {
537
- "href": "#",
538
- "text": "Subitem 2"
539
- },
540
- {
541
- "href": "#",
542
- "text": "Subitem 3"
543
- }
544
- ],
545
- "attributes": {
546
- "aria-labelledby": "primary-example-item-3"
547
- }
548
- }
549
- }
550
- ],
551
- "attributes": {
552
- "aria-label": "Menu navigation"
553
- }
554
- }
555
- },
556
- {
557
- "name": "transparente",
558
- "description": "Usando clases para mostrar los items transparentes.",
559
- "data": {
560
- "idPrefix": "transparent-example",
561
- "items": [
562
- {
563
- "text": "Item 1",
564
- "id": "transparent-example-item-1",
565
- "classes": "c-menu-navigation__button--transparent",
566
- "sub": {
567
- "items": [
568
- {
569
- "href": "#",
570
- "text": "Subitem 1"
571
- },
572
- {
573
- "href": "#",
574
- "text": "Subitem 2"
575
- },
576
- {
577
- "href": "#",
578
- "text": "Subitem 3"
579
- }
580
- ],
581
- "attributes": {
582
- "aria-labelledby": "transparent-example-item-1"
583
- }
584
- }
585
- },
586
- {
587
- "text": "Item activo 2",
588
- "id": "transparent-example-item-2",
589
- "classes": "c-menu-navigation__button--transparent",
590
- "active": true,
591
- "sub": {
592
- "items": [
593
- {
594
- "href": "#",
595
- "text": "Subitem 1"
596
- },
597
- {
598
- "href": "#",
599
- "text": "Subitem 2",
600
- "active": true
601
- },
602
- {
603
- "href": "#",
604
- "text": "Subitem 3"
605
- }
606
- ],
607
- "attributes": {
608
- "aria-labelledby": "transparent-example-item-2"
609
- }
610
- }
611
- },
612
- {
613
- "text": "Item deshabilitado 3",
614
- "id": "transparent-example-item-3",
615
- "classes": "c-menu-navigation__button--transparent",
616
- "disabled": true,
617
- "sub": {
618
- "items": [
619
- {
620
- "href": "#",
621
- "text": "Subitem 1"
622
- },
623
- {
624
- "href": "#",
625
- "text": "Subitem 2"
626
- },
627
- {
628
- "href": "#",
629
- "text": "Subitem 3"
630
- }
631
- ],
632
- "attributes": {
633
- "aria-labelledby": "transparent-example-item-3"
634
- }
635
- }
636
- }
637
- ],
638
- "attributes": {
639
- "aria-label": "Menu navigation"
640
- }
641
- }
642
- },
643
- {
644
- "name": "con el último item a la derecha",
645
- "data": {
646
- "idPrefix": "right-example",
647
- "classes": "c-menu-navigation--last-right",
648
- "items": [
649
- {
650
- "text": "Item 1",
651
- "id": "right-example-item-1",
652
- "sub": {
653
- "items": [
654
- {
655
- "href": "#",
656
- "text": "Subitem 1"
657
- },
658
- {
659
- "href": "#",
660
- "text": "Subitem 2"
661
- },
662
- {
663
- "href": "#",
664
- "text": "Subitem 3"
665
- }
666
- ],
667
- "attributes": {
668
- "aria-labelledby": "right-example-item-1"
669
- }
670
- }
671
- },
672
- {
673
- "text": "Item 2",
674
- "id": "right-example-item-2",
675
- "sub": {
676
- "items": [
677
- {
678
- "href": "#",
679
- "text": "Subitem 1"
680
- },
681
- {
682
- "href": "#",
683
- "text": "Subitem 2"
684
- },
685
- {
686
- "href": "#",
687
- "text": "Subitem 3"
688
- }
689
- ],
690
- "attributes": {
691
- "aria-labelledby": "right-example-item-2"
692
- }
693
- }
694
- },
695
- {
696
- "text": "Item 3",
697
- "id": "right-example-item-3",
698
- "sub": {
699
- "items": [
700
- {
701
- "href": "#",
702
- "text": "Subitem 1"
703
- },
704
- {
705
- "href": "#",
706
- "text": "Subitem 2"
707
- },
708
- {
709
- "href": "#",
710
- "text": "Subitem 3"
711
- }
712
- ],
713
- "attributes": {
714
- "aria-labelledby": "right-example-item-3"
715
- }
716
- }
717
- },
718
- {
719
- "text": "Item 4",
720
- "id": "right-example-item-4",
721
- "sub": {
722
- "items": [
723
- {
724
- "href": "#",
725
- "text": "Subitem 1"
726
- },
727
- {
728
- "href": "#",
729
- "text": "Subitem 2"
730
- },
731
- {
732
- "href": "#",
733
- "text": "Subitem 3"
734
- }
735
- ],
736
- "attributes": {
737
- "aria-labelledby": "right-example-item-4"
738
- }
739
- }
740
- }
741
- ],
742
- "attributes": {
743
- "aria-label": "Menu navigation"
744
- }
745
- }
746
- },
747
- {
748
- "name": "con un texto de item muy largo",
749
- "data": {
750
- "idPrefix": "with-very-ling-text-example",
751
- "items": [
752
- {
753
- "href": "#",
754
- "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Donec id elit non mi porta gravida at eget metus."
755
- },
756
- {
757
- "href": "#",
758
- "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum."
759
- },
760
- {
761
- "href": "#",
762
- "text": "No debe haber enlaces de más de 250 caracteres, que es el máximo admitido en accesibilidad, con excepción de nombres de leyes. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Sed posuere consectetur est at lobortis."
763
- }
764
- ],
765
- "attributes": {
766
- "aria-label": "Menu navigation"
767
- }
768
- }
769
- },
770
- {
771
- "name": "con deshabilitado o sin href en un padre e hijo",
772
- "data": {
773
- "idPrefix": "nav-item-without-href",
774
- "items": [
775
- {
776
- "text": "Item 1 deshabilitado",
777
- "id": "nav-item-item-1-b",
778
- "disabled": true,
779
- "sub": {
780
- "items": [
781
- {
782
- "href": "#",
783
- "text": "Subitem 1"
784
- },
785
- {
786
- "href": "#",
787
- "text": "Subitem 2 deshabilitado",
788
- "disabled": true
789
- },
790
- {
791
- "href": "#",
792
- "text": "Subitem 3"
793
- }
794
- ],
795
- "attributes": {
796
- "aria-labelledby": "nav-item-item-1-b"
797
- }
798
- }
799
- },
800
- {
801
- "text": "Item 2",
802
- "id": "nav-item-item-2-b",
803
- "sub": {
804
- "items": [
805
- {
806
- "href": "#",
807
- "text": "Subitem 1"
808
- },
809
- {
810
- "text": "Subitem 2 sin href"
811
- },
812
- {
813
- "href": "#",
814
- "text": "Subitem 3"
815
- }
816
- ],
817
- "attributes": {
818
- "aria-labelledby": "nav-item-item-2-b"
819
- }
820
- }
821
- }
822
- ],
823
- "attributes": {
824
- "aria-label": "Menu navigation"
825
- }
826
- }
827
- },
828
- {
829
- "name": "con estilos de cabecera",
830
- "description": "Un Menu navigation puede estar anidado en <code>customNavigationHtml</code> en el componente Header. 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>activateSubItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateSubItemMenuNavigation('mi-menu-header', 'sub-header-custom-nav-item-1-1')</code> para desactivar el sub-item actual y activar el primer sub-item del primer item de este ejemplo.",
831
- "data": {
832
- "idPrefix": "header-custom-nav",
833
- "classes": "bg-neutral-lighter c-menu-navigation--last-right w-full",
834
- "items": [
835
- {
836
- "text": "Item 1",
837
- "id": "header-custom-nav-item-1",
838
- "classes": "c-menu-navigation__button--header -mr-base",
839
- "sub": {
840
- "items": [
841
- {
842
- "href": "#",
843
- "text": "Subitem 1"
844
- },
845
- {
846
- "href": "#",
847
- "text": "Subitem 2"
848
- },
849
- {
850
- "href": "#",
851
- "text": "Subitem 3"
852
- }
853
- ],
854
- "attributes": {
855
- "aria-labelledby": "header-custom-nav-item-1"
856
- }
857
- }
858
- },
859
- {
860
- "text": "Item activo 2",
861
- "id": "header-custom-nav-item-2",
862
- "classes": "c-menu-navigation__button--header -mr-base",
863
- "active": true,
864
- "sub": {
865
- "items": [
866
- {
867
- "href": "#",
868
- "text": "Subitem 1"
869
- },
870
- {
871
- "href": "#",
872
- "text": "Subitem 2",
873
- "active": true
874
- },
875
- {
876
- "href": "#",
877
- "text": "Subitem 3"
878
- }
879
- ],
880
- "attributes": {
881
- "aria-labelledby": "header-custom-nav-item-2"
882
- }
883
- }
884
- },
885
- {
886
- "text": "Item deshabilitado 3",
887
- "id": "header-custom-nav-item-3",
888
- "classes": "c-menu-navigation__button--header -mr-base",
889
- "disabled": true,
890
- "sub": {
891
- "items": [
892
- {
893
- "href": "#",
894
- "text": "Subitem 1"
895
- },
896
- {
897
- "href": "#",
898
- "text": "Subitem 2"
899
- },
900
- {
901
- "href": "#",
902
- "text": "Subitem 3"
903
- }
904
- ],
905
- "attributes": {
906
- "aria-labelledby": "header-custom-nav-item-3"
907
- }
908
- }
909
- },
910
- {
911
- "text": "Item 4 right",
912
- "id": "header-custom-nav-item-4",
913
- "classes": "c-menu-navigation__button--header",
914
- "sub": {
915
- "items": [
916
- {
917
- "href": "#",
918
- "text": "Subitem 1"
919
- },
920
- {
921
- "href": "#",
922
- "text": "Subitem 2"
923
- },
924
- {
925
- "href": "#",
926
- "text": "Subitem 3"
927
- }
928
- ],
929
- "attributes": {
930
- "aria-labelledby": "header-custom-nav-item-4"
931
- }
932
- }
933
- }
934
- ],
935
- "attributes": {
936
- "aria-label": "Menu navigation",
937
- "id": "mi-menu-header"
938
- }
939
- }
940
- },
941
- {
942
- "name": "con idPrefix",
943
- "description": "Mostrar código para ver el <code>idPrefix</code> aplicado",
944
- "data": {
945
- "idPrefix": "with-id-prefix-example",
946
- "items": [
947
- {
948
- "href": "#",
949
- "text": "Opción 1"
950
- },
951
- {
952
- "href": "#",
953
- "text": "Opción 2"
954
- },
955
- {
956
- "href": "#",
957
- "text": "Opción 3"
958
- },
959
- {
960
- "href": "#",
961
- "text": "Opción 4"
962
- },
963
- {
964
- "href": "#",
965
- "text": "Opción 5"
966
- }
967
- ],
968
- "attributes": {
969
- "aria-label": "Menu navigation"
970
- }
971
- }
972
- },
973
- {
974
- "name": "con ids individuales",
975
- "data": {
976
- "idPrefix": "ids-example",
977
- "items": [
978
- {
979
- "text": "Definidos explícitamente",
980
- "id": "ids-item-1",
981
- "sub": {
982
- "items": [
983
- {
984
- "href": "#",
985
- "text": "Subitem 1",
986
- "id": "ids-subitem-1"
987
- },
988
- {
989
- "href": "#",
990
- "text": "Subitem 2",
991
- "id": "ids-subitem-2"
992
- },
993
- {
994
- "href": "#",
995
- "text": "Subitem 3",
996
- "id": "ids-subitem-3"
997
- }
998
- ],
999
- "attributes": {
1000
- "aria-labelledby": "ids-item-1"
1001
- }
1002
- }
1003
- },
1004
- {
1005
- "text": "Generados automáticamente",
1006
- "id": "ids-item-2",
1007
- "sub": {
1008
- "items": [
1009
- {
1010
- "href": "#",
1011
- "text": "Subitem 1"
1012
- },
1013
- {
1014
- "href": "#",
1015
- "text": "Subitem 2"
1016
- },
1017
- {
1018
- "href": "#",
1019
- "text": "Subitem 3"
1020
- }
1021
- ],
1022
- "attributes": {
1023
- "aria-labelledby": "ids-item-2"
1024
- }
1025
- }
1026
- }
1027
- ],
1028
- "attributes": {
1029
- "aria-label": "Menu navigation"
1030
- }
1031
- }
1032
- },
1033
- {
1034
- "name": "con atributos",
1035
- "description": "Muestra el código para ver cómo se aplican los atributos",
1036
- "data": {
1037
- "idPrefix": "with-attributes-example",
1038
- "attributes": {
1039
- "id": "nav-id-example"
1040
- },
1041
- "items": [
1042
- {
1043
- "href": "#",
1044
- "text": "Opción 1",
1045
- "attributes": {
1046
- "data-attribute-1": "value-A",
1047
- "data-attribute-2": "value-B",
1048
- "data-attribute-3": "value-C"
1049
- }
1050
- },
1051
- {
1052
- "href": "#",
1053
- "text": "Opción 2",
1054
- "attributes": {
1055
- "data-attribute-1": "value-A",
1056
- "data-attribute-2": "value-B",
1057
- "data-attribute-3": "value-C"
1058
- }
1059
- },
1060
- {
1061
- "text": "Opción 3",
1062
- "attributes": {
1063
- "data-attribute-1": "value-A",
1064
- "data-attribute-2": "value-B",
1065
- "data-attribute-3": "value-C"
1066
- },
1067
- "sub": {
1068
- "attributes": {
1069
- "data-attribute-1": "value-A",
1070
- "data-attribute-2": "value-B",
1071
- "data-attribute-3": "value-C"
1072
- },
1073
- "items": [
1074
- {
1075
- "href": "#",
1076
- "text": "Enlace simple",
1077
- "attributes": {
1078
- "data-attribute-1": "value-A",
1079
- "data-attribute-2": "value-B",
1080
- "data-attribute-3": "value-C"
1081
- }
1082
- },
1083
- {
1084
- "href": "#",
1085
- "text": "Enlace simple"
1086
- },
1087
- {
1088
- "href": "#",
1089
- "text": "Enlace simple"
1090
- }
1091
- ]
1092
- }
1093
- },
1094
- {
1095
- "href": "#",
1096
- "text": "Opción 4",
1097
- "attributes": {
1098
- "data-attribute-1": "value-A",
1099
- "data-attribute-2": "value-B",
1100
- "data-attribute-3": "value-C"
1101
- }
1102
- },
1103
- {
1104
- "href": "#",
1105
- "text": "Opción 5",
1106
- "attributes": {
1107
- "data-attribute-1": "value-A",
1108
- "data-attribute-2": "value-B",
1109
- "data-attribute-3": "value-C"
1110
- }
1111
- }
1112
- ],
1113
- "attributes": {
1114
- "aria-label": "Menu navigation"
1115
- }
1116
- }
1117
- },
1118
- {
1119
- "name": "con items mixtos",
1120
- "data": {
1121
- "name": "with-sub-items",
1122
- "idPrefix": "with-mixed-items-example",
1123
- "items": [
1124
- {
1125
- "href": "#",
1126
- "text": "Enlace simple"
1127
- },
1128
- {
1129
- "text": "Item sin href o deshabilitado",
1130
- "disabled": true
1131
- },
1132
- {
1133
- "href": "#",
1134
- "text": "Enlace simple"
1135
- },
1136
- {
1137
- "text": "Padre con divisor",
1138
- "divider": {
1139
- "html": "<div class='absolute h-11 border-l border-neutral-base'></div>"
1140
- },
1141
- "id": "with-sub-items-1",
1142
- "sub": {
1143
- "items": [
1144
- {
1145
- "href": "#",
1146
- "text": "Enlace simple"
1147
- },
1148
- {
1149
- "href": "#",
1150
- "text": "Enlace simple",
1151
- "target": "_blank",
1152
- "attributes": {
1153
- "title": "Se abre en ventana nueva"
1154
- }
1155
- },
1156
- {
1157
- "href": "#",
1158
- "text": "Enlace simple"
1159
- },
1160
- {
1161
- "href": "#",
1162
- "text": "Enlace simple",
1163
- "divider": true
1164
- },
1165
- {
1166
- "href": "#",
1167
- "text": "Enlace simple"
1168
- }
1169
- ],
1170
- "attributes": {
1171
- "aria-labelledby": "with-sub-items-1"
1172
- }
1173
- }
1174
- },
1175
- {
1176
- "href": "#",
1177
- "text": "Enlace simple"
1178
- },
1179
- {
1180
- "href": "#",
1181
- "text": "Enlace simple"
1182
- },
1183
- {
1184
- "text": "Padre",
1185
- "id": "with-sub-items-2",
1186
- "sub": {
1187
- "items": [
1188
- {
1189
- "href": "#",
1190
- "text": "Subitem"
1191
- },
1192
- {
1193
- "href": "#",
1194
- "text": "Subitem activo",
1195
- "active" : true
1196
- },
1197
- {
1198
- "text": "Subitem sin href o deshabilitado",
1199
- "disabled": true
1200
- }
1201
- ],
1202
- "attributes": {
1203
- "aria-labelledby": "with-sub-items-2"
1204
- }
1205
- }
1206
- }
1207
- ],
1208
- "attributes": {
1209
- "aria-label": "Menu navigation"
1210
- }
1211
- }
1212
- }
1213
- ] %}
1
+ {% set exampleComponent = "menu-navigation" %}
2
+ {% set examples = [
3
+ {
4
+ "name": "por defecto",
5
+ "data": {
6
+ "idPrefix": "default-example",
7
+ "items": [
8
+ {
9
+ "text": "Item 1",
10
+ "id": "default-example-item-1",
11
+ "sub": {
12
+ "items": [
13
+ {
14
+ "href": "#",
15
+ "text": "Subitem 1"
16
+ },
17
+ {
18
+ "href": "#",
19
+ "text": "Subitem 2"
20
+ },
21
+ {
22
+ "href": "#",
23
+ "text": "Subitem 3"
24
+ }
25
+ ],
26
+ "attributes": {
27
+ "aria-labelledby": "default-example-item-1"
28
+ }
29
+ }
30
+ },
31
+ {
32
+ "text": "Item 2",
33
+ "id": "default-example-item-2",
34
+ "sub": {
35
+ "items": [
36
+ {
37
+ "href": "#",
38
+ "text": "Subitem 1"
39
+ },
40
+ {
41
+ "href": "#",
42
+ "text": "Subitem 2"
43
+ },
44
+ {
45
+ "href": "#",
46
+ "text": "Subitem 3"
47
+ }
48
+ ],
49
+ "attributes": {
50
+ "aria-labelledby": "default-example-item-2"
51
+ }
52
+ }
53
+ },
54
+ {
55
+ "text": "Item 3",
56
+ "id": "default-example-item-3",
57
+ "sub": {
58
+ "items": [
59
+ {
60
+ "href": "#",
61
+ "text": "Subitem 1"
62
+ },
63
+ {
64
+ "href": "#",
65
+ "text": "Subitem 2"
66
+ },
67
+ {
68
+ "href": "#",
69
+ "text": "Subitem 3"
70
+ }
71
+ ],
72
+ "attributes": {
73
+ "aria-labelledby": "default-example-item-3"
74
+ }
75
+ }
76
+ }
77
+ ],
78
+ "attributes": {
79
+ "aria-label": "Menu navigation"
80
+ }
81
+ }
82
+ },
83
+ {
84
+ "name": "con item deshabilitado",
85
+ "data": {
86
+ "idPrefix": "with-disabled-item-example",
87
+ "items": [
88
+ {
89
+ "href": "#",
90
+ "text": "Item 1"
91
+ },
92
+ {
93
+ "href": "#",
94
+ "text": "Item 2"
95
+ },
96
+ {
97
+ "href": "#",
98
+ "text": "Item 3",
99
+ "disabled": true
100
+ }
101
+ ],
102
+ "attributes": {
103
+ "aria-label": "Menu navigation"
104
+ }
105
+ }
106
+ },
107
+ {
108
+ "name": "con item activo",
109
+ "description": "Añade <code>active: true</code> a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuNavigation('mi-menu', 'with-active-item-example-3')</code> para desactivar el item actual y activar el tercer item de este ejemplo.",
110
+ "data": {
111
+ "idPrefix": "with-active-item-example",
112
+ "items": [
113
+ {
114
+ "href": "#",
115
+ "text": "Item 1"
116
+ },
117
+ {
118
+ "href": "#",
119
+ "text": "Item 2",
120
+ "active": true
121
+ },
122
+ {
123
+ "href": "#",
124
+ "text": "Item 3"
125
+ }
126
+ ],
127
+ "attributes": {
128
+ "aria-label": "Menu navigation",
129
+ "id": "mi-menu"
130
+ }
131
+ }
132
+ },
133
+ {
134
+ "name": "con sub-item activo",
135
+ "description": "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>activateSubItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateSubItemMenuNavigation('mi-sub-menu', 'sub-active-sub-item-example-2-2')</code> para desactivar el sub-item actual y activar el tercer sub-item de este ejemplo.",
136
+ "data": {
137
+ "idPrefix": "with-active-sub-item-example",
138
+ "items": [
139
+ {
140
+ "text": "Item 1",
141
+ "id": "active-sub-item-example-1",
142
+ "sub": {
143
+ "items": [
144
+ {
145
+ "href": "#",
146
+ "text": "Subitem 1"
147
+ },
148
+ {
149
+ "href": "#",
150
+ "text": "Subitem 2",
151
+ "active": true
152
+ },
153
+ {
154
+ "href": "#",
155
+ "text": "Subitem 3"
156
+ }
157
+ ],
158
+ "attributes": {
159
+ "aria-labelledby": "active-sub-item-example-1"
160
+ }
161
+ }
162
+ },
163
+ {
164
+ "text": "Item 2",
165
+ "id": "active-sub-item-example-2",
166
+ "sub": {
167
+ "items": [
168
+ {
169
+ "href": "#",
170
+ "text": "Subitem 1"
171
+ },
172
+ {
173
+ "href": "#",
174
+ "text": "Subitem 2"
175
+ },
176
+ {
177
+ "href": "#",
178
+ "text": "Subitem 3"
179
+ }
180
+ ],
181
+ "attributes": {
182
+ "aria-labelledby": "active-sub-item-example-2"
183
+ }
184
+ }
185
+ },
186
+ {
187
+ "text": "Item 3",
188
+ "id": "active-sub-item-example-3",
189
+ "sub": {
190
+ "items": [
191
+ {
192
+ "href": "#",
193
+ "text": "Subitem 1"
194
+ },
195
+ {
196
+ "href": "#",
197
+ "text": "Subitem 2"
198
+ },
199
+ {
200
+ "href": "#",
201
+ "text": "Subitem 3"
202
+ }
203
+ ],
204
+ "attributes": {
205
+ "aria-labelledby": "active-sub-item-example-3"
206
+ }
207
+ }
208
+ }
209
+ ],
210
+ "attributes": {
211
+ "aria-label": "Menu navigation",
212
+ "id": "mi-sub-menu"
213
+ }
214
+ }
215
+ },
216
+ {
217
+ "name": "con target en enlaces",
218
+ "data": {
219
+ "idPrefix": "with-targets-in-links-example",
220
+ "items": [
221
+ {
222
+ "href": "#",
223
+ "text": "Item 1",
224
+ "target": "_blank",
225
+ "attributes": {
226
+ "title": "Se abre en ventana nueva"
227
+ }
228
+ },
229
+ {
230
+ "href": "#",
231
+ "text": "Item 2",
232
+ "target": "_blank",
233
+ "attributes": {
234
+ "title": "Se abre en ventana nueva"
235
+ }
236
+ },
237
+ {
238
+ "href": "#",
239
+ "text": "Item 3",
240
+ "target": "_blank",
241
+ "attributes": {
242
+ "title": "Se abre en ventana nueva"
243
+ }
244
+ }
245
+ ],
246
+ "attributes": {
247
+ "aria-label": "Menu navigation"
248
+ }
249
+ }
250
+ },
251
+ {
252
+ "name": "con divisores",
253
+ "data": {
254
+ "idPrefix": "with-dividers-example",
255
+ "items": [
256
+ {
257
+ "href": "#",
258
+ "text": "Item 1"
259
+ },
260
+ {
261
+ "href": "#",
262
+ "text": "Item 2",
263
+ "divider": {
264
+ "html": "<div class='absolute h-11 border-l border-neutral-base'></div>"
265
+ }
266
+ },
267
+ {
268
+ "text": "Item 3",
269
+ "id": "with-dividers-example-parent",
270
+ "sub": {
271
+ "items": [
272
+ {
273
+ "href": "#",
274
+ "text": "Subitem 1"
275
+ },
276
+ {
277
+ "href": "#",
278
+ "text": "Subitem 2",
279
+ "divider": true
280
+ },
281
+ {
282
+ "href": "#",
283
+ "text": "Subitem 3"
284
+ }
285
+ ],
286
+ "attributes": {
287
+ "aria-labelledby": "with-dividers-example-parent"
288
+ }
289
+ }
290
+ },
291
+ {
292
+ "href": "#",
293
+ "text": "Item 4"
294
+ }
295
+ ],
296
+ "attributes": {
297
+ "aria-label": "Menu navigation"
298
+ }
299
+ }
300
+ },
301
+ {
302
+ "name": "grande",
303
+ "description": "Usando clases para mostrar los items grandes.",
304
+ "data": {
305
+ "idPrefix": "large-example",
306
+ "items": [
307
+ {
308
+ "text": "Item 1",
309
+ "id": "large-example-item-1",
310
+ "classes": "c-menu-navigation__button--lg -mr-sm",
311
+ "sub": {
312
+ "items": [
313
+ {
314
+ "href": "#",
315
+ "text": "Subitem 1"
316
+ },
317
+ {
318
+ "href": "#",
319
+ "text": "Subitem 2"
320
+ },
321
+ {
322
+ "href": "#",
323
+ "text": "Subitem 3"
324
+ }
325
+ ],
326
+ "attributes": {
327
+ "aria-labelledby": "large-example-item-1"
328
+ }
329
+ }
330
+ },
331
+ {
332
+ "text": "Item 2",
333
+ "id": "large-example-item-2",
334
+ "classes": "c-menu-navigation__button--lg -mr-sm",
335
+ "sub": {
336
+ "items": [
337
+ {
338
+ "href": "#",
339
+ "text": "Subitem 1"
340
+ },
341
+ {
342
+ "href": "#",
343
+ "text": "Subitem 2"
344
+ },
345
+ {
346
+ "href": "#",
347
+ "text": "Subitem 3"
348
+ }
349
+ ],
350
+ "attributes": {
351
+ "aria-labelledby": "large-example-item-2"
352
+ }
353
+ }
354
+ },
355
+ {
356
+ "text": "Item 3",
357
+ "id": "large-example-item-3",
358
+ "classes": "c-menu-navigation__button--lg -mr-sm",
359
+ "sub": {
360
+ "items": [
361
+ {
362
+ "href": "#",
363
+ "text": "Subitem 1"
364
+ },
365
+ {
366
+ "href": "#",
367
+ "text": "Subitem 2"
368
+ },
369
+ {
370
+ "href": "#",
371
+ "text": "Subitem 3"
372
+ }
373
+ ],
374
+ "attributes": {
375
+ "aria-labelledby": "large-example-item-3"
376
+ }
377
+ }
378
+ }
379
+ ],
380
+ "attributes": {
381
+ "aria-label": "Menu navigation"
382
+ }
383
+ }
384
+ },
385
+ {
386
+ "name": "peque",
387
+ "description": "Usando clases para mostrar los items pequeños.",
388
+ "data": {
389
+ "idPrefix": "small-example",
390
+ "items": [
391
+ {
392
+ "text": "Item 1",
393
+ "id": "small-example-item-1",
394
+ "classes": "c-menu-navigation__button--sm -mr-sm",
395
+ "sub": {
396
+ "items": [
397
+ {
398
+ "href": "#",
399
+ "text": "Subitem 1"
400
+ },
401
+ {
402
+ "href": "#",
403
+ "text": "Subitem 2"
404
+ },
405
+ {
406
+ "href": "#",
407
+ "text": "Subitem 3"
408
+ }
409
+ ],
410
+ "attributes": {
411
+ "aria-labelledby": "small-example-item-1"
412
+ }
413
+ }
414
+ },
415
+ {
416
+ "text": "Item 2",
417
+ "id": "small-example-item-2",
418
+ "classes": "c-menu-navigation__button--sm -mr-sm",
419
+ "sub": {
420
+ "items": [
421
+ {
422
+ "href": "#",
423
+ "text": "Subitem 1"
424
+ },
425
+ {
426
+ "href": "#",
427
+ "text": "Subitem 2"
428
+ },
429
+ {
430
+ "href": "#",
431
+ "text": "Subitem 3"
432
+ }
433
+ ],
434
+ "attributes": {
435
+ "aria-labelledby": "small-example-item-2"
436
+ }
437
+ }
438
+ },
439
+ {
440
+ "text": "Item 3",
441
+ "id": "small-example-item-3",
442
+ "classes": "c-menu-navigation__button--sm -mr-sm",
443
+ "sub": {
444
+ "items": [
445
+ {
446
+ "href": "#",
447
+ "text": "Subitem 1"
448
+ },
449
+ {
450
+ "href": "#",
451
+ "text": "Subitem 2"
452
+ },
453
+ {
454
+ "href": "#",
455
+ "text": "Subitem 3"
456
+ }
457
+ ],
458
+ "attributes": {
459
+ "aria-labelledby": "small-example-item-3"
460
+ }
461
+ }
462
+ }
463
+ ],
464
+ "attributes": {
465
+ "aria-label": "Menu navigation"
466
+ }
467
+ }
468
+ },
469
+ {
470
+ "name": "primario",
471
+ "description": "Usando clases para mostrar los items primarios.",
472
+ "data": {
473
+ "idPrefix": "primary-example",
474
+ "items": [
475
+ {
476
+ "text": "Item 1",
477
+ "id": "primary-example-item-1",
478
+ "classes": "c-menu-navigation__button--primary",
479
+ "sub": {
480
+ "items": [
481
+ {
482
+ "href": "#",
483
+ "text": "Subitem 1"
484
+ },
485
+ {
486
+ "href": "#",
487
+ "text": "Subitem 2"
488
+ },
489
+ {
490
+ "href": "#",
491
+ "text": "Subitem 3"
492
+ }
493
+ ],
494
+ "attributes": {
495
+ "aria-labelledby": "primary-example-item-1"
496
+ }
497
+ }
498
+ },
499
+ {
500
+ "text": "Item activo 2",
501
+ "id": "primary-example-item-2",
502
+ "classes": "c-menu-navigation__button--primary",
503
+ "active": true,
504
+ "sub": {
505
+ "items": [
506
+ {
507
+ "href": "#",
508
+ "text": "Subitem 1"
509
+ },
510
+ {
511
+ "href": "#",
512
+ "text": "Subitem 2",
513
+ "active": true
514
+ },
515
+ {
516
+ "href": "#",
517
+ "text": "Subitem 3"
518
+ }
519
+ ],
520
+ "attributes": {
521
+ "aria-labelledby": "primary-example-item-2"
522
+ }
523
+ }
524
+ },
525
+ {
526
+ "text": "Item deshabilitado 3",
527
+ "id": "primary-example-item-3",
528
+ "classes": "c-menu-navigation__button--primary",
529
+ "disabled": true,
530
+ "sub": {
531
+ "items": [
532
+ {
533
+ "href": "#",
534
+ "text": "Subitem 1"
535
+ },
536
+ {
537
+ "href": "#",
538
+ "text": "Subitem 2"
539
+ },
540
+ {
541
+ "href": "#",
542
+ "text": "Subitem 3"
543
+ }
544
+ ],
545
+ "attributes": {
546
+ "aria-labelledby": "primary-example-item-3"
547
+ }
548
+ }
549
+ }
550
+ ],
551
+ "attributes": {
552
+ "aria-label": "Menu navigation"
553
+ }
554
+ }
555
+ },
556
+ {
557
+ "name": "transparente",
558
+ "description": "Usando clases para mostrar los items transparentes.",
559
+ "data": {
560
+ "idPrefix": "transparent-example",
561
+ "items": [
562
+ {
563
+ "text": "Item 1",
564
+ "id": "transparent-example-item-1",
565
+ "classes": "c-menu-navigation__button--transparent",
566
+ "sub": {
567
+ "items": [
568
+ {
569
+ "href": "#",
570
+ "text": "Subitem 1"
571
+ },
572
+ {
573
+ "href": "#",
574
+ "text": "Subitem 2"
575
+ },
576
+ {
577
+ "href": "#",
578
+ "text": "Subitem 3"
579
+ }
580
+ ],
581
+ "attributes": {
582
+ "aria-labelledby": "transparent-example-item-1"
583
+ }
584
+ }
585
+ },
586
+ {
587
+ "text": "Item activo 2",
588
+ "id": "transparent-example-item-2",
589
+ "classes": "c-menu-navigation__button--transparent",
590
+ "active": true,
591
+ "sub": {
592
+ "items": [
593
+ {
594
+ "href": "#",
595
+ "text": "Subitem 1"
596
+ },
597
+ {
598
+ "href": "#",
599
+ "text": "Subitem 2",
600
+ "active": true
601
+ },
602
+ {
603
+ "href": "#",
604
+ "text": "Subitem 3"
605
+ }
606
+ ],
607
+ "attributes": {
608
+ "aria-labelledby": "transparent-example-item-2"
609
+ }
610
+ }
611
+ },
612
+ {
613
+ "text": "Item deshabilitado 3",
614
+ "id": "transparent-example-item-3",
615
+ "classes": "c-menu-navigation__button--transparent",
616
+ "disabled": true,
617
+ "sub": {
618
+ "items": [
619
+ {
620
+ "href": "#",
621
+ "text": "Subitem 1"
622
+ },
623
+ {
624
+ "href": "#",
625
+ "text": "Subitem 2"
626
+ },
627
+ {
628
+ "href": "#",
629
+ "text": "Subitem 3"
630
+ }
631
+ ],
632
+ "attributes": {
633
+ "aria-labelledby": "transparent-example-item-3"
634
+ }
635
+ }
636
+ }
637
+ ],
638
+ "attributes": {
639
+ "aria-label": "Menu navigation"
640
+ }
641
+ }
642
+ },
643
+ {
644
+ "name": "con el último item a la derecha",
645
+ "data": {
646
+ "idPrefix": "right-example",
647
+ "classes": "c-menu-navigation--last-right",
648
+ "items": [
649
+ {
650
+ "text": "Item 1",
651
+ "id": "right-example-item-1",
652
+ "sub": {
653
+ "items": [
654
+ {
655
+ "href": "#",
656
+ "text": "Subitem 1"
657
+ },
658
+ {
659
+ "href": "#",
660
+ "text": "Subitem 2"
661
+ },
662
+ {
663
+ "href": "#",
664
+ "text": "Subitem 3"
665
+ }
666
+ ],
667
+ "attributes": {
668
+ "aria-labelledby": "right-example-item-1"
669
+ }
670
+ }
671
+ },
672
+ {
673
+ "text": "Item 2",
674
+ "id": "right-example-item-2",
675
+ "sub": {
676
+ "items": [
677
+ {
678
+ "href": "#",
679
+ "text": "Subitem 1"
680
+ },
681
+ {
682
+ "href": "#",
683
+ "text": "Subitem 2"
684
+ },
685
+ {
686
+ "href": "#",
687
+ "text": "Subitem 3"
688
+ }
689
+ ],
690
+ "attributes": {
691
+ "aria-labelledby": "right-example-item-2"
692
+ }
693
+ }
694
+ },
695
+ {
696
+ "text": "Item 3",
697
+ "id": "right-example-item-3",
698
+ "sub": {
699
+ "items": [
700
+ {
701
+ "href": "#",
702
+ "text": "Subitem 1"
703
+ },
704
+ {
705
+ "href": "#",
706
+ "text": "Subitem 2"
707
+ },
708
+ {
709
+ "href": "#",
710
+ "text": "Subitem 3"
711
+ }
712
+ ],
713
+ "attributes": {
714
+ "aria-labelledby": "right-example-item-3"
715
+ }
716
+ }
717
+ },
718
+ {
719
+ "text": "Item 4",
720
+ "id": "right-example-item-4",
721
+ "sub": {
722
+ "items": [
723
+ {
724
+ "href": "#",
725
+ "text": "Subitem 1"
726
+ },
727
+ {
728
+ "href": "#",
729
+ "text": "Subitem 2"
730
+ },
731
+ {
732
+ "href": "#",
733
+ "text": "Subitem 3"
734
+ }
735
+ ],
736
+ "attributes": {
737
+ "aria-labelledby": "right-example-item-4"
738
+ }
739
+ }
740
+ }
741
+ ],
742
+ "attributes": {
743
+ "aria-label": "Menu navigation"
744
+ }
745
+ }
746
+ },
747
+ {
748
+ "name": "con deshabilitado o sin href en un padre e hijo",
749
+ "data": {
750
+ "idPrefix": "nav-item-without-href",
751
+ "items": [
752
+ {
753
+ "text": "Item 1 deshabilitado",
754
+ "id": "nav-item-item-1-b",
755
+ "disabled": true,
756
+ "sub": {
757
+ "items": [
758
+ {
759
+ "href": "#",
760
+ "text": "Subitem 1"
761
+ },
762
+ {
763
+ "href": "#",
764
+ "text": "Subitem 2 deshabilitado",
765
+ "disabled": true
766
+ },
767
+ {
768
+ "href": "#",
769
+ "text": "Subitem 3"
770
+ }
771
+ ],
772
+ "attributes": {
773
+ "aria-labelledby": "nav-item-item-1-b"
774
+ }
775
+ }
776
+ },
777
+ {
778
+ "text": "Item 2",
779
+ "id": "nav-item-item-2-b",
780
+ "sub": {
781
+ "items": [
782
+ {
783
+ "href": "#",
784
+ "text": "Subitem 1"
785
+ },
786
+ {
787
+ "text": "Subitem 2 sin href"
788
+ },
789
+ {
790
+ "href": "#",
791
+ "text": "Subitem 3"
792
+ }
793
+ ],
794
+ "attributes": {
795
+ "aria-labelledby": "nav-item-item-2-b"
796
+ }
797
+ }
798
+ }
799
+ ],
800
+ "attributes": {
801
+ "aria-label": "Menu navigation"
802
+ }
803
+ }
804
+ },
805
+ {
806
+ "name": "con estilos de cabecera",
807
+ "description": "Un Menu navigation puede estar anidado en <code>customNavigationHtml</code> en el componente Header. 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>activateSubItemMenuNavigation(elementMenu, idItemSeleccionado)</code> para seleccionar un sub-item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateSubItemMenuNavigation('mi-menu-header', 'sub-header-custom-nav-item-1-1')</code> para desactivar el sub-item actual y activar el primer sub-item del primer item de este ejemplo.",
808
+ "data": {
809
+ "idPrefix": "header-custom-nav",
810
+ "classes": "bg-neutral-lighter c-menu-navigation--last-right w-full",
811
+ "items": [
812
+ {
813
+ "text": "Item 1",
814
+ "id": "header-custom-nav-item-1",
815
+ "classes": "c-menu-navigation__button--header -mr-base",
816
+ "sub": {
817
+ "items": [
818
+ {
819
+ "href": "#",
820
+ "text": "Subitem 1"
821
+ },
822
+ {
823
+ "href": "#",
824
+ "text": "Subitem 2"
825
+ },
826
+ {
827
+ "href": "#",
828
+ "text": "Subitem 3"
829
+ }
830
+ ],
831
+ "attributes": {
832
+ "aria-labelledby": "header-custom-nav-item-1"
833
+ }
834
+ }
835
+ },
836
+ {
837
+ "text": "Item activo 2",
838
+ "id": "header-custom-nav-item-2",
839
+ "classes": "c-menu-navigation__button--header -mr-base",
840
+ "active": true,
841
+ "sub": {
842
+ "items": [
843
+ {
844
+ "href": "#",
845
+ "text": "Subitem 1"
846
+ },
847
+ {
848
+ "href": "#",
849
+ "text": "Subitem 2",
850
+ "active": true
851
+ },
852
+ {
853
+ "href": "#",
854
+ "text": "Subitem 3"
855
+ }
856
+ ],
857
+ "attributes": {
858
+ "aria-labelledby": "header-custom-nav-item-2"
859
+ }
860
+ }
861
+ },
862
+ {
863
+ "text": "Item deshabilitado 3",
864
+ "id": "header-custom-nav-item-3",
865
+ "classes": "c-menu-navigation__button--header -mr-base",
866
+ "disabled": true,
867
+ "sub": {
868
+ "items": [
869
+ {
870
+ "href": "#",
871
+ "text": "Subitem 1"
872
+ },
873
+ {
874
+ "href": "#",
875
+ "text": "Subitem 2"
876
+ },
877
+ {
878
+ "href": "#",
879
+ "text": "Subitem 3"
880
+ }
881
+ ],
882
+ "attributes": {
883
+ "aria-labelledby": "header-custom-nav-item-3"
884
+ }
885
+ }
886
+ },
887
+ {
888
+ "text": "Item 4 right",
889
+ "id": "header-custom-nav-item-4",
890
+ "classes": "c-menu-navigation__button--header",
891
+ "sub": {
892
+ "items": [
893
+ {
894
+ "href": "#",
895
+ "text": "Subitem 1"
896
+ },
897
+ {
898
+ "href": "#",
899
+ "text": "Subitem 2"
900
+ },
901
+ {
902
+ "href": "#",
903
+ "text": "Subitem 3"
904
+ }
905
+ ],
906
+ "attributes": {
907
+ "aria-labelledby": "header-custom-nav-item-4"
908
+ }
909
+ }
910
+ }
911
+ ],
912
+ "attributes": {
913
+ "aria-label": "Menu navigation",
914
+ "id": "mi-menu-header"
915
+ }
916
+ }
917
+ },
918
+ {
919
+ "name": "con idPrefix",
920
+ "description": "Mostrar código para ver el <code>idPrefix</code> aplicado",
921
+ "data": {
922
+ "idPrefix": "with-id-prefix-example",
923
+ "items": [
924
+ {
925
+ "href": "#",
926
+ "text": "Opción 1"
927
+ },
928
+ {
929
+ "href": "#",
930
+ "text": "Opción 2"
931
+ },
932
+ {
933
+ "href": "#",
934
+ "text": "Opción 3"
935
+ },
936
+ {
937
+ "href": "#",
938
+ "text": "Opción 4"
939
+ },
940
+ {
941
+ "href": "#",
942
+ "text": "Opción 5"
943
+ }
944
+ ],
945
+ "attributes": {
946
+ "aria-label": "Menu navigation"
947
+ }
948
+ }
949
+ },
950
+ {
951
+ "name": "con ids individuales",
952
+ "data": {
953
+ "idPrefix": "ids-example",
954
+ "items": [
955
+ {
956
+ "text": "Definidos explícitamente",
957
+ "id": "ids-item-1",
958
+ "sub": {
959
+ "items": [
960
+ {
961
+ "href": "#",
962
+ "text": "Subitem 1",
963
+ "id": "ids-subitem-1"
964
+ },
965
+ {
966
+ "href": "#",
967
+ "text": "Subitem 2",
968
+ "id": "ids-subitem-2"
969
+ },
970
+ {
971
+ "href": "#",
972
+ "text": "Subitem 3",
973
+ "id": "ids-subitem-3"
974
+ }
975
+ ],
976
+ "attributes": {
977
+ "aria-labelledby": "ids-item-1"
978
+ }
979
+ }
980
+ },
981
+ {
982
+ "text": "Generados automáticamente",
983
+ "id": "ids-item-2",
984
+ "sub": {
985
+ "items": [
986
+ {
987
+ "href": "#",
988
+ "text": "Subitem 1"
989
+ },
990
+ {
991
+ "href": "#",
992
+ "text": "Subitem 2"
993
+ },
994
+ {
995
+ "href": "#",
996
+ "text": "Subitem 3"
997
+ }
998
+ ],
999
+ "attributes": {
1000
+ "aria-labelledby": "ids-item-2"
1001
+ }
1002
+ }
1003
+ }
1004
+ ],
1005
+ "attributes": {
1006
+ "aria-label": "Menu navigation"
1007
+ }
1008
+ }
1009
+ },
1010
+ {
1011
+ "name": "con atributos",
1012
+ "description": "Muestra el código para ver cómo se aplican los atributos",
1013
+ "data": {
1014
+ "idPrefix": "with-attributes-example",
1015
+ "attributes": {
1016
+ "id": "nav-id-example"
1017
+ },
1018
+ "items": [
1019
+ {
1020
+ "href": "#",
1021
+ "text": "Opción 1",
1022
+ "attributes": {
1023
+ "data-attribute-1": "value-A",
1024
+ "data-attribute-2": "value-B",
1025
+ "data-attribute-3": "value-C"
1026
+ }
1027
+ },
1028
+ {
1029
+ "href": "#",
1030
+ "text": "Opción 2",
1031
+ "attributes": {
1032
+ "data-attribute-1": "value-A",
1033
+ "data-attribute-2": "value-B",
1034
+ "data-attribute-3": "value-C"
1035
+ }
1036
+ },
1037
+ {
1038
+ "text": "Opción 3",
1039
+ "attributes": {
1040
+ "data-attribute-1": "value-A",
1041
+ "data-attribute-2": "value-B",
1042
+ "data-attribute-3": "value-C"
1043
+ },
1044
+ "sub": {
1045
+ "attributes": {
1046
+ "data-attribute-1": "value-A",
1047
+ "data-attribute-2": "value-B",
1048
+ "data-attribute-3": "value-C"
1049
+ },
1050
+ "items": [
1051
+ {
1052
+ "href": "#",
1053
+ "text": "Enlace simple",
1054
+ "attributes": {
1055
+ "data-attribute-1": "value-A",
1056
+ "data-attribute-2": "value-B",
1057
+ "data-attribute-3": "value-C"
1058
+ }
1059
+ },
1060
+ {
1061
+ "href": "#",
1062
+ "text": "Enlace simple"
1063
+ },
1064
+ {
1065
+ "href": "#",
1066
+ "text": "Enlace simple"
1067
+ }
1068
+ ]
1069
+ }
1070
+ },
1071
+ {
1072
+ "href": "#",
1073
+ "text": "Opción 4",
1074
+ "attributes": {
1075
+ "data-attribute-1": "value-A",
1076
+ "data-attribute-2": "value-B",
1077
+ "data-attribute-3": "value-C"
1078
+ }
1079
+ },
1080
+ {
1081
+ "href": "#",
1082
+ "text": "Opción 5",
1083
+ "attributes": {
1084
+ "data-attribute-1": "value-A",
1085
+ "data-attribute-2": "value-B",
1086
+ "data-attribute-3": "value-C"
1087
+ }
1088
+ }
1089
+ ],
1090
+ "attributes": {
1091
+ "aria-label": "Menu navigation"
1092
+ }
1093
+ }
1094
+ },
1095
+ {
1096
+ "name": "con items mixtos",
1097
+ "data": {
1098
+ "name": "with-sub-items",
1099
+ "idPrefix": "with-mixed-items-example",
1100
+ "items": [
1101
+ {
1102
+ "href": "#",
1103
+ "text": "Enlace simple"
1104
+ },
1105
+ {
1106
+ "text": "Item sin href o deshabilitado",
1107
+ "disabled": true
1108
+ },
1109
+ {
1110
+ "href": "#",
1111
+ "text": "Enlace simple"
1112
+ },
1113
+ {
1114
+ "text": "Padre con divisor",
1115
+ "divider": {
1116
+ "html": "<div class='absolute h-11 border-l border-neutral-base'></div>"
1117
+ },
1118
+ "id": "with-sub-items-1",
1119
+ "sub": {
1120
+ "items": [
1121
+ {
1122
+ "href": "#",
1123
+ "text": "Enlace simple"
1124
+ },
1125
+ {
1126
+ "href": "#",
1127
+ "text": "Enlace simple",
1128
+ "target": "_blank",
1129
+ "attributes": {
1130
+ "title": "Se abre en ventana nueva"
1131
+ }
1132
+ },
1133
+ {
1134
+ "href": "#",
1135
+ "text": "Enlace simple"
1136
+ },
1137
+ {
1138
+ "href": "#",
1139
+ "text": "Enlace simple",
1140
+ "divider": true
1141
+ },
1142
+ {
1143
+ "href": "#",
1144
+ "text": "Enlace simple"
1145
+ }
1146
+ ],
1147
+ "attributes": {
1148
+ "aria-labelledby": "with-sub-items-1"
1149
+ }
1150
+ }
1151
+ },
1152
+ {
1153
+ "href": "#",
1154
+ "text": "Enlace simple"
1155
+ },
1156
+ {
1157
+ "href": "#",
1158
+ "text": "Enlace simple"
1159
+ },
1160
+ {
1161
+ "text": "Padre",
1162
+ "id": "with-sub-items-2",
1163
+ "sub": {
1164
+ "items": [
1165
+ {
1166
+ "href": "#",
1167
+ "text": "Subitem"
1168
+ },
1169
+ {
1170
+ "href": "#",
1171
+ "text": "Subitem activo",
1172
+ "active" : true
1173
+ },
1174
+ {
1175
+ "text": "Subitem sin href o deshabilitado",
1176
+ "disabled": true
1177
+ }
1178
+ ],
1179
+ "attributes": {
1180
+ "aria-labelledby": "with-sub-items-2"
1181
+ }
1182
+ }
1183
+ }
1184
+ ],
1185
+ "attributes": {
1186
+ "aria-label": "Menu navigation"
1187
+ }
1188
+ }
1189
+ }
1190
+ ] %}