desy-html 10.2.1 → 10.2.2

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 (497) hide show
  1. package/README.md +36 -36
  2. package/config/tailwind.config.js +217 -217
  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 +387 -387
  7. package/docs/_macro.component-example.njk +6 -6
  8. package/docs/_macro.example-render.njk +330 -330
  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-sm.njk +264 -264
  25. package/docs/ds/_ds.example.botones-primary.njk +264 -264
  26. package/docs/ds/_ds.example.botones-transparent-sm.njk +264 -264
  27. package/docs/ds/_ds.example.botones-transparent.njk +264 -264
  28. package/docs/ds/_ds.example.breadcrumbs.njk +65 -65
  29. package/docs/ds/_ds.example.card.njk +198 -198
  30. package/docs/ds/_ds.example.checkboxes.njk +377 -377
  31. package/docs/ds/_ds.example.collapsible.njk +18 -18
  32. package/docs/ds/_ds.example.color-de-interaccion.njk +16 -16
  33. package/docs/ds/_ds.example.colores-cabecera.njk +15 -15
  34. package/docs/ds/_ds.example.colores-de-soporte.njk +82 -82
  35. package/docs/ds/_ds.example.colores-neutros.njk +26 -26
  36. package/docs/ds/_ds.example.date-input.njk +363 -363
  37. package/docs/ds/_ds.example.description-list.njk +289 -289
  38. package/docs/ds/_ds.example.details.njk +23 -23
  39. package/docs/ds/_ds.example.dropdowns-default.njk +186 -186
  40. package/docs/ds/_ds.example.dropdowns-en-uso.njk +105 -105
  41. package/docs/ds/_ds.example.dropdowns-variaciones.njk +187 -187
  42. package/docs/ds/_ds.example.error-summary.njk +34 -34
  43. package/docs/ds/_ds.example.file-upload.njk +54 -54
  44. package/docs/ds/_ds.example.footer.njk +28 -28
  45. package/docs/ds/_ds.example.header-advanced.njk +70 -70
  46. package/docs/ds/_ds.example.header.njk +211 -211
  47. package/docs/ds/_ds.example.input-group.njk +242 -242
  48. package/docs/ds/_ds.example.input.njk +164 -164
  49. package/docs/ds/_ds.example.item.njk +176 -176
  50. package/docs/ds/_ds.example.layout-escritorio.njk +38 -38
  51. package/docs/ds/_ds.example.layout-movil.njk +14 -14
  52. package/docs/ds/_ds.example.layout-sidebar.njk +11 -11
  53. package/docs/ds/_ds.example.links-list.njk +170 -170
  54. package/docs/ds/_ds.example.listbox-default.njk +677 -677
  55. package/docs/ds/_ds.example.listbox-variaciones.njk +687 -687
  56. package/docs/ds/_ds.example.menu-horizontal.njk +66 -66
  57. package/docs/ds/_ds.example.menu-navigation.njk +493 -493
  58. package/docs/ds/_ds.example.menu-vertical.njk +129 -129
  59. package/docs/ds/_ds.example.menubar-en-uso.njk +244 -244
  60. package/docs/ds/_ds.example.menubar-variaciones.njk +785 -785
  61. package/docs/ds/_ds.example.modal.njk +210 -210
  62. package/docs/ds/_ds.example.nav.njk +158 -158
  63. package/docs/ds/_ds.example.notification.njk +122 -122
  64. package/docs/ds/_ds.example.pagination.njk +190 -190
  65. package/docs/ds/_ds.example.pills.njk +215 -215
  66. package/docs/ds/_ds.example.radios.njk +419 -419
  67. package/docs/ds/_ds.example.searchbar.njk +87 -87
  68. package/docs/ds/_ds.example.select.njk +390 -390
  69. package/docs/ds/_ds.example.status-item.njk +239 -239
  70. package/docs/ds/_ds.example.status.njk +47 -47
  71. package/docs/ds/_ds.example.table.njk +740 -740
  72. package/docs/ds/_ds.example.tabs.njk +92 -92
  73. package/docs/ds/_ds.example.textarea.njk +237 -237
  74. package/docs/ds/_ds.example.textos.njk +27 -27
  75. package/docs/ds/_ds.example.toggle.njk +75 -75
  76. package/docs/ds/_ds.example.tree.njk +456 -456
  77. package/docs/ds/_ds.example.typography.njk +225 -225
  78. package/docs/ds/_ds.macro.code-snippet.njk +32 -32
  79. package/docs/ds/_ds.macro.section-title.njk +2 -2
  80. package/docs/ds/_ds.macro.subsection-title.njk +2 -2
  81. package/docs/ds/_ds.section.avisos.njk +22 -22
  82. package/docs/ds/_ds.section.botones.njk +48 -48
  83. package/docs/ds/_ds.section.campo-y-area-de-texto.njk +19 -19
  84. package/docs/ds/_ds.section.color.njk +150 -150
  85. package/docs/ds/_ds.section.datos.njk +37 -37
  86. package/docs/ds/_ds.section.dropdowns.njk +23 -23
  87. package/docs/ds/_ds.section.espaciado.njk +299 -299
  88. package/docs/ds/_ds.section.forms.njk +68 -68
  89. package/docs/ds/_ds.section.informacion.njk +12 -12
  90. package/docs/ds/_ds.section.layout.njk +70 -70
  91. package/docs/ds/_ds.section.menubar.njk +18 -18
  92. package/docs/ds/_ds.section.mostrar-ocultar.njk +33 -33
  93. package/docs/ds/_ds.section.navigation.njk +57 -57
  94. package/docs/ds/_ds.section.textos.njk +259 -259
  95. package/docs/ds/_ds.section.typography.njk +31 -31
  96. package/docs/estilos.html +19 -19
  97. package/docs/examples-accordion-history.html +8 -8
  98. package/docs/examples-accordion.html +8 -8
  99. package/docs/examples-alert.html +8 -8
  100. package/docs/examples-breadcrumbs.html +8 -8
  101. package/docs/examples-button-loader.html +8 -8
  102. package/docs/examples-button.html +8 -8
  103. package/docs/examples-card.html +7 -7
  104. package/docs/examples-character-count.html +8 -8
  105. package/docs/examples-checkboxes.html +7 -7
  106. package/docs/examples-collapsible.html +7 -7
  107. package/docs/examples-date-input.html +8 -8
  108. package/docs/examples-datepicker.html +8 -8
  109. package/docs/examples-description-list.html +8 -8
  110. package/docs/examples-details.html +8 -8
  111. package/docs/examples-dialog.html +7 -7
  112. package/docs/examples-dropdown.html +8 -8
  113. package/docs/examples-error-message.html +8 -8
  114. package/docs/examples-error-summary.html +8 -8
  115. package/docs/examples-fieldset.html +8 -8
  116. package/docs/examples-file-upload.html +8 -8
  117. package/docs/examples-footer.html +8 -8
  118. package/docs/examples-header-advanced.html +8 -8
  119. package/docs/examples-header-mini.html +8 -8
  120. package/docs/examples-header.html +8 -8
  121. package/docs/examples-hint.html +8 -8
  122. package/docs/examples-input-group.html +8 -8
  123. package/docs/examples-input.html +8 -8
  124. package/docs/examples-item.html +8 -8
  125. package/docs/examples-label.html +8 -8
  126. package/docs/examples-links-list.html +7 -7
  127. package/docs/examples-listbox.html +8 -8
  128. package/docs/examples-media-object.html +7 -7
  129. package/docs/examples-menu-horizontal.html +8 -8
  130. package/docs/examples-menu-navigation.html +8 -8
  131. package/docs/examples-menu-vertical.html +7 -7
  132. package/docs/examples-menubar.html +7 -7
  133. package/docs/examples-modal.html +7 -7
  134. package/docs/examples-nav.html +8 -8
  135. package/docs/examples-notification.html +8 -8
  136. package/docs/examples-pagination.html +8 -8
  137. package/docs/examples-pill.html +8 -8
  138. package/docs/examples-radios.html +8 -8
  139. package/docs/examples-searchbar.html +8 -8
  140. package/docs/examples-select.html +9 -9
  141. package/docs/examples-skip-link.html +8 -8
  142. package/docs/examples-spinner.html +8 -8
  143. package/docs/examples-status-item.html +8 -8
  144. package/docs/examples-status.html +8 -8
  145. package/docs/examples-table-advanced.html +8 -8
  146. package/docs/examples-table.html +8 -8
  147. package/docs/examples-tabs.html +8 -8
  148. package/docs/examples-textarea.html +8 -8
  149. package/docs/examples-toggle.html +8 -8
  150. package/docs/examples-tooltip.html +8 -8
  151. package/docs/examples-tree.html +8 -8
  152. package/docs/index.html +667 -662
  153. package/docs/pagina-accesibilidad.html +109 -109
  154. package/docs/pagina-mapa-web.html +136 -136
  155. package/docs/pagina-prueba.html +94 -94
  156. package/docs/plantilla-con-header-advanced.html +13 -13
  157. package/docs/plantilla-editar-con-cabecera-fija-y-sidebar-sticky.html +153 -153
  158. package/docs/plantilla-editar-con-cabecera-fija.html +16 -16
  159. package/docs/plantilla-logueado-con-cabecera-fija-headroom.html +14 -14
  160. package/docs/plantilla-logueado-con-cabecera-fija.html +14 -14
  161. package/docs/plantilla-logueado-con-selector-de-app-y-sidebar.html +163 -163
  162. package/docs/plantilla-logueado-con-selector-de-app-y-subheader.html +15 -15
  163. package/docs/plantilla-logueado-con-selector-de-app.html +13 -13
  164. package/docs/plantilla-logueado-con-titulo-de-app.html +13 -13
  165. package/docs/plantilla-sin-loguear.html +13 -13
  166. package/docs/plantillas.html +88 -88
  167. package/docs/spinner-plantilla-con-header-advanced.html +1 -1
  168. package/docs/spinner-plantilla-editar-con-cabecera-fija.html +5 -5
  169. package/docs/spinner-plantilla-logueado-con-cabecera-fija.html +1 -1
  170. package/docs/spinner-plantilla-logueado-con-selector-de-app-y-subheader.html +4 -4
  171. package/docs/spinner-plantilla-logueado-con-titulo-de-app.html +1 -1
  172. package/docs/spinner-plantilla-sin-loguear.html +17 -17
  173. package/gulpfile.js +127 -127
  174. package/package.json +67 -67
  175. package/src/EUPL-1.2.txt +287 -287
  176. package/src/css/base.css +42 -42
  177. package/src/css/component.form-group.css +23 -23
  178. package/src/css/component.headroom.css +31 -31
  179. package/src/css/component.text.css +157 -157
  180. package/src/css/component.tippy-box.css +11 -11
  181. package/src/css/styles.css +49 -49
  182. package/src/js/aria/HeaderNavigation.js +55 -55
  183. package/src/js/aria/MenuHorizontal.js +63 -63
  184. package/src/js/aria/MenuVertical.js +60 -60
  185. package/src/js/aria/Nav.js +60 -60
  186. package/src/js/aria/accordion.js +264 -264
  187. package/src/js/aria/checkBoxes.js +52 -52
  188. package/src/js/aria/collapsible.js +44 -44
  189. package/src/js/aria/dataGrid.js +950 -950
  190. package/src/js/aria/notification.js +56 -56
  191. package/src/js/aria/radioButton.js +50 -50
  192. package/src/js/aria/toggle.js +61 -61
  193. package/src/js/aria/utils.js +128 -128
  194. package/src/js/cally.js +1114 -1114
  195. package/src/js/desy-html.js +525 -525
  196. package/src/js/filters/filter-caller.js +6 -6
  197. package/src/js/filters/filter-slugify.js +11 -11
  198. package/src/js/filters/highlight.js +14 -14
  199. package/src/js/filters/index.js +13 -13
  200. package/src/js/globals/get-html-code-from-example.js +31 -31
  201. package/src/js/globals/get-html-code-from-file.js +26 -26
  202. package/src/js/globals/get-nunjucks-code-from-example.js +31 -31
  203. package/src/js/globals/get-nunjucks-code-from-file.js +24 -24
  204. package/src/js/globals/index.js +14 -14
  205. package/src/js/headroom.min.js +6 -6
  206. package/src/js/index.js +73 -73
  207. package/src/js/popper.min.js +6 -6
  208. package/src/js/tippy-bundle.umd.min.js +2 -2
  209. package/src/templates/components/accordion/_examples.accordion.njk +386 -386
  210. package/src/templates/components/accordion/_macro.accordion.njk +3 -3
  211. package/src/templates/components/accordion/_template.accordion.njk +131 -131
  212. package/src/templates/components/accordion/params.accordion.yaml +125 -125
  213. package/src/templates/components/accordion-history/_examples.accordion-history.njk +418 -418
  214. package/src/templates/components/accordion-history/_macro.accordion-history.njk +3 -3
  215. package/src/templates/components/accordion-history/_template.accordion-history.njk +193 -193
  216. package/src/templates/components/accordion-history/params.accordion-history.yaml +129 -129
  217. package/src/templates/components/alert/_examples.alert.njk +79 -79
  218. package/src/templates/components/alert/_macro.alert.njk +3 -3
  219. package/src/templates/components/alert/_styles.alert.css +9 -9
  220. package/src/templates/components/alert/_template.alert.njk +16 -16
  221. package/src/templates/components/alert/params.alert.yaml +25 -25
  222. package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +374 -374
  223. package/src/templates/components/breadcrumbs/_macro.breadcrumbs.njk +3 -3
  224. package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css +69 -69
  225. package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +77 -77
  226. package/src/templates/components/breadcrumbs/params.breadcrumbs.yaml +44 -44
  227. package/src/templates/components/button/_examples.button.njk +289 -289
  228. package/src/templates/components/button/_macro.button.njk +3 -3
  229. package/src/templates/components/button/_styles.button.css +182 -182
  230. package/src/templates/components/button/_template.button.njk +49 -49
  231. package/src/templates/components/button/params.button.yaml +48 -48
  232. package/src/templates/components/button-loader/_examples.button-loader.njk +281 -281
  233. package/src/templates/components/button-loader/_macro.button-loader.njk +3 -3
  234. package/src/templates/components/button-loader/_styles.button-loader.css +198 -198
  235. package/src/templates/components/button-loader/_template.button-loader.njk +84 -84
  236. package/src/templates/components/button-loader/params.button-loader.yaml +74 -74
  237. package/src/templates/components/card/_examples.card.njk +300 -300
  238. package/src/templates/components/card/_macro.card.njk +3 -3
  239. package/src/templates/components/card/_template.card.njk +34 -34
  240. package/src/templates/components/card/params.card.yaml +112 -112
  241. package/src/templates/components/character-count/_examples.character-count.njk +147 -147
  242. package/src/templates/components/character-count/_macro.character-count.njk +5 -5
  243. package/src/templates/components/character-count/_template.character-count.njk +38 -38
  244. package/src/templates/components/character-count/params.character-count.yaml +77 -77
  245. package/src/templates/components/checkboxes/_examples.checkboxes.njk +734 -734
  246. package/src/templates/components/checkboxes/_macro.checkboxes.njk +3 -3
  247. package/src/templates/components/checkboxes/_styles.checkboxes.css +31 -31
  248. package/src/templates/components/checkboxes/_template.checkboxes.njk +138 -138
  249. package/src/templates/components/checkboxes/params.checkboxes.yaml +116 -116
  250. package/src/templates/components/collapsible/_examples.collapsible.njk +77 -77
  251. package/src/templates/components/collapsible/_macro.collapsible.njk +3 -3
  252. package/src/templates/components/collapsible/_styles.collapsible.css +33 -33
  253. package/src/templates/components/collapsible/_template.collapsible.njk +17 -17
  254. package/src/templates/components/collapsible/params.collapsible.yaml +48 -48
  255. package/src/templates/components/date-input/_examples.date-input.njk +500 -500
  256. package/src/templates/components/date-input/_macro.date-input.njk +3 -3
  257. package/src/templates/components/date-input/_template.date-input.njk +126 -126
  258. package/src/templates/components/date-input/params.date-input.yaml +97 -97
  259. package/src/templates/components/datepicker/_examples.datepicker.njk +346 -346
  260. package/src/templates/components/datepicker/_macro.datepicker.njk +3 -3
  261. package/src/templates/components/datepicker/_styles.datepicker.css +85 -85
  262. package/src/templates/components/datepicker/_template.datepicker.njk +123 -123
  263. package/src/templates/components/datepicker/params.datepicker.yaml +104 -104
  264. package/src/templates/components/description-list/_examples.description-list.njk +436 -436
  265. package/src/templates/components/description-list/_macro.description-list.njk +3 -3
  266. package/src/templates/components/description-list/_template.description-list.njk +17 -17
  267. package/src/templates/components/description-list/params.description-list.yaml +61 -61
  268. package/src/templates/components/details/_examples.details.njk +44 -44
  269. package/src/templates/components/details/_macro.details.njk +3 -3
  270. package/src/templates/components/details/_template.details.njk +17 -17
  271. package/src/templates/components/details/params.details.yaml +40 -40
  272. package/src/templates/components/dialog/_examples.dialog.njk +138 -138
  273. package/src/templates/components/dialog/_macro.dialog.njk +3 -3
  274. package/src/templates/components/dialog/_styles.dialog.css +19 -19
  275. package/src/templates/components/dialog/_template.dialog.njk +12 -12
  276. package/src/templates/components/dialog/params.dialog.yaml +25 -25
  277. package/src/templates/components/dropdown/_examples.dropdown.njk +114 -114
  278. package/src/templates/components/dropdown/_macro.dropdown.njk +3 -3
  279. package/src/templates/components/dropdown/_styles.dropdown.css +187 -187
  280. package/src/templates/components/dropdown/_template.dropdown.njk +34 -34
  281. package/src/templates/components/dropdown/params.dropdown.yaml +32 -32
  282. package/src/templates/components/error-message/_examples.error-message.njk +14 -14
  283. package/src/templates/components/error-message/_macro.error-message.njk +5 -5
  284. package/src/templates/components/error-message/_template.error-message.njk +8 -8
  285. package/src/templates/components/error-message/params.error-message.yaml +23 -23
  286. package/src/templates/components/error-summary/_examples.error-summary.njk +81 -81
  287. package/src/templates/components/error-summary/_macro.error-summary.njk +5 -5
  288. package/src/templates/components/error-summary/_template.error-summary.njk +48 -48
  289. package/src/templates/components/error-summary/params.error-summary.yaml +52 -52
  290. package/src/templates/components/fieldset/_examples.fieldset.njk +88 -88
  291. package/src/templates/components/fieldset/_macro.fieldset.njk +2 -2
  292. package/src/templates/components/fieldset/_template.fieldset.njk +46 -46
  293. package/src/templates/components/fieldset/params.fieldset.yaml +49 -49
  294. package/src/templates/components/file-upload/_examples.file-upload.njk +84 -84
  295. package/src/templates/components/file-upload/_macro.file-upload.njk +2 -2
  296. package/src/templates/components/file-upload/_template.file-upload.njk +46 -46
  297. package/src/templates/components/file-upload/params.file-upload.yaml +48 -48
  298. package/src/templates/components/footer/_examples.footer.njk +492 -492
  299. package/src/templates/components/footer/_macro.footer.njk +3 -3
  300. package/src/templates/components/footer/_styles.footer.css +43 -43
  301. package/src/templates/components/footer/_template.footer.njk +114 -114
  302. package/src/templates/components/footer/params.footer.yaml +140 -140
  303. package/src/templates/components/header/_examples.header.njk +535 -535
  304. package/src/templates/components/header/_macro.header.header__dropdown.njk +3 -3
  305. package/src/templates/components/header/_macro.header.header__navigation.njk +3 -3
  306. package/src/templates/components/header/_macro.header.header__offcanvas.njk +3 -3
  307. package/src/templates/components/header/_macro.header.header__offcanvasButton.njk +3 -3
  308. package/src/templates/components/header/_macro.header.header__subnav.njk +3 -3
  309. package/src/templates/components/header/_macro.header.njk +3 -3
  310. package/src/templates/components/header/_styles.header.css +12 -12
  311. package/src/templates/components/header/_template.header.header__dropdown.njk +27 -27
  312. package/src/templates/components/header/_template.header.header__navigation.njk +27 -27
  313. package/src/templates/components/header/_template.header.header__offcanvas.njk +20 -20
  314. package/src/templates/components/header/_template.header.header__offcanvasButton.njk +10 -10
  315. package/src/templates/components/header/_template.header.header__subnav.njk +33 -33
  316. package/src/templates/components/header/_template.header.njk +138 -138
  317. package/src/templates/components/header/params.header.yaml +280 -280
  318. package/src/templates/components/header-advanced/_examples.header-advanced.njk +1016 -1016
  319. package/src/templates/components/header-advanced/_macro.header-advanced.njk +3 -3
  320. package/src/templates/components/header-advanced/_template.header-advanced.njk +168 -168
  321. package/src/templates/components/header-advanced/params.header-advanced.yaml +346 -346
  322. package/src/templates/components/header-mini/_examples.header-mini.njk +304 -304
  323. package/src/templates/components/header-mini/_macro.header-mini.njk +3 -3
  324. package/src/templates/components/header-mini/_template.header-mini.njk +39 -39
  325. package/src/templates/components/header-mini/params.header-mini.yaml +80 -80
  326. package/src/templates/components/hint/_examples.hint.njk +14 -14
  327. package/src/templates/components/hint/_macro.hint.njk +3 -3
  328. package/src/templates/components/hint/_template.hint.njk +3 -3
  329. package/src/templates/components/hint/params.hint.yaml +34 -34
  330. package/src/templates/components/input/_examples.input.njk +309 -309
  331. package/src/templates/components/input/_macro.input.njk +3 -3
  332. package/src/templates/components/input/_styles.input.css +18 -18
  333. package/src/templates/components/input/_template.input.njk +54 -54
  334. package/src/templates/components/input/params.input.yaml +80 -80
  335. package/src/templates/components/input-group/_examples.input-group.njk +503 -503
  336. package/src/templates/components/input-group/_macro.input-group.njk +3 -3
  337. package/src/templates/components/input-group/_template.input-group.njk +108 -108
  338. package/src/templates/components/input-group/params.input-group.yaml +123 -123
  339. package/src/templates/components/item/_examples.item.njk +262 -262
  340. package/src/templates/components/item/_macro.item.njk +3 -3
  341. package/src/templates/components/item/_template.item.njk +73 -73
  342. package/src/templates/components/item/params.item.yaml +101 -101
  343. package/src/templates/components/label/_examples.label.njk +34 -34
  344. package/src/templates/components/label/_macro.label.njk +5 -5
  345. package/src/templates/components/label/_template.label.njk +37 -37
  346. package/src/templates/components/label/params.label.yaml +28 -28
  347. package/src/templates/components/links-list/_examples.links-list.njk +594 -594
  348. package/src/templates/components/links-list/_macro.links-list.njk +3 -3
  349. package/src/templates/components/links-list/_template.links-list.njk +118 -118
  350. package/src/templates/components/links-list/params.links-list.yaml +101 -101
  351. package/src/templates/components/listbox/_examples.listbox.njk +656 -656
  352. package/src/templates/components/listbox/_macro.listbox.njk +3 -3
  353. package/src/templates/components/listbox/_styles.listbox.css +218 -218
  354. package/src/templates/components/listbox/_template.listbox.njk +90 -90
  355. package/src/templates/components/listbox/params.listbox.yaml +85 -85
  356. package/src/templates/components/media-object/_examples.media-object.njk +48 -48
  357. package/src/templates/components/media-object/_macro.media-object.njk +3 -3
  358. package/src/templates/components/media-object/_template.media-object.njk +21 -21
  359. package/src/templates/components/media-object/params.media-object.yaml +16 -16
  360. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +514 -514
  361. package/src/templates/components/menu-horizontal/_macro.menu-horizontal.njk +3 -3
  362. package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css +161 -161
  363. package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +36 -36
  364. package/src/templates/components/menu-horizontal/params.menu-horizontal.yaml +53 -53
  365. package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +1106 -1106
  366. package/src/templates/components/menu-navigation/_macro.menu-navigation.njk +3 -3
  367. package/src/templates/components/menu-navigation/_styles.menu-navigation.css +227 -227
  368. package/src/templates/components/menu-navigation/_template.menu-navigation.njk +89 -89
  369. package/src/templates/components/menu-navigation/params.menu-navigation.yaml +86 -86
  370. package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +739 -739
  371. package/src/templates/components/menu-vertical/_macro.menu-vertical.njk +3 -3
  372. package/src/templates/components/menu-vertical/_template.menu-vertical.njk +92 -92
  373. package/src/templates/components/menu-vertical/params.menu-vertical.yaml +77 -77
  374. package/src/templates/components/menubar/_examples.menubar.njk +1623 -1623
  375. package/src/templates/components/menubar/_macro.menubar.njk +3 -3
  376. package/src/templates/components/menubar/_styles.menubar.css +253 -253
  377. package/src/templates/components/menubar/_template.menubar.njk +105 -105
  378. package/src/templates/components/menubar/params.menubar.yaml +139 -139
  379. package/src/templates/components/modal/_examples.modal.njk +354 -354
  380. package/src/templates/components/modal/_macro.modal.njk +3 -3
  381. package/src/templates/components/modal/_template.modal.njk +129 -129
  382. package/src/templates/components/modal/params.modal.yaml +77 -77
  383. package/src/templates/components/nav/_examples.nav.njk +402 -402
  384. package/src/templates/components/nav/_macro.nav.njk +3 -3
  385. package/src/templates/components/nav/_template.nav.njk +53 -53
  386. package/src/templates/components/nav/params.nav.yaml +61 -61
  387. package/src/templates/components/notification/_examples.notification.njk +193 -181
  388. package/src/templates/components/notification/_macro.notification.njk +3 -3
  389. package/src/templates/components/notification/_styles.notification.css +28 -28
  390. package/src/templates/components/notification/_template.notification.njk +86 -78
  391. package/src/templates/components/notification/params.notification.yaml +101 -85
  392. package/src/templates/components/pagination/_examples.pagination.njk +397 -397
  393. package/src/templates/components/pagination/_macro.pagination.njk +3 -3
  394. package/src/templates/components/pagination/_template.pagination.njk +153 -169
  395. package/src/templates/components/pagination/params.pagination.yaml +150 -150
  396. package/src/templates/components/pill/_examples.pill.njk +101 -101
  397. package/src/templates/components/pill/_macro.pill.njk +3 -3
  398. package/src/templates/components/pill/_styles.pill.css +63 -63
  399. package/src/templates/components/pill/_template.pill.njk +38 -38
  400. package/src/templates/components/pill/params.pill.yaml +28 -28
  401. package/src/templates/components/radios/_examples.radios.njk +637 -637
  402. package/src/templates/components/radios/_macro.radios.njk +5 -5
  403. package/src/templates/components/radios/_styles.radios.css +31 -31
  404. package/src/templates/components/radios/_template.radios.njk +134 -134
  405. package/src/templates/components/radios/params.radios.yaml +104 -104
  406. package/src/templates/components/searchbar/_examples.searchbar.njk +98 -98
  407. package/src/templates/components/searchbar/_macro.searchbar.njk +3 -3
  408. package/src/templates/components/searchbar/_template.searchbar.njk +46 -46
  409. package/src/templates/components/searchbar/params.searchbar.yaml +46 -46
  410. package/src/templates/components/select/_examples.select.njk +336 -336
  411. package/src/templates/components/select/_macro.select.njk +5 -5
  412. package/src/templates/components/select/_styles.select.css +47 -47
  413. package/src/templates/components/select/_template.select.njk +70 -70
  414. package/src/templates/components/select/params.select.yaml +93 -93
  415. package/src/templates/components/skip-link/_examples.skip-link.njk +19 -19
  416. package/src/templates/components/skip-link/_macro.skip-link.njk +3 -3
  417. package/src/templates/components/skip-link/_styles.skip-link.css +13 -13
  418. package/src/templates/components/skip-link/_template.skip-link.njk +4 -4
  419. package/src/templates/components/skip-link/params.skip-link.yaml +20 -20
  420. package/src/templates/components/spinner/_examples.spinner.njk +52 -52
  421. package/src/templates/components/spinner/_macro.spinner.njk +3 -3
  422. package/src/templates/components/spinner/_styles.spinner.css +32 -32
  423. package/src/templates/components/spinner/_template.spinner.njk +8 -8
  424. package/src/templates/components/spinner/params.spinner.yaml +12 -12
  425. package/src/templates/components/status/_examples.status.njk +49 -49
  426. package/src/templates/components/status/_macro.status.njk +3 -3
  427. package/src/templates/components/status/_template.status.njk +23 -23
  428. package/src/templates/components/status/params.status.yaml +24 -24
  429. package/src/templates/components/status-item/_examples.status-item.njk +245 -245
  430. package/src/templates/components/status-item/_macro.status-item.njk +3 -3
  431. package/src/templates/components/status-item/_template.status-item.njk +99 -99
  432. package/src/templates/components/status-item/params.status-item.yaml +106 -106
  433. package/src/templates/components/table/_examples.table.njk +887 -887
  434. package/src/templates/components/table/_macro.table.njk +3 -3
  435. package/src/templates/components/table/_template.table.njk +68 -68
  436. package/src/templates/components/table/params.table.yaml +126 -126
  437. package/src/templates/components/table-advanced/_examples.table-advanced.njk +875 -875
  438. package/src/templates/components/table-advanced/_macro.table-advanced.njk +3 -3
  439. package/src/templates/components/table-advanced/_styles.table-advanced.css +65 -65
  440. package/src/templates/components/table-advanced/_template.table-advanced.njk +207 -207
  441. package/src/templates/components/table-advanced/params.table-advanced.yaml +156 -156
  442. package/src/templates/components/tabs/_examples.tabs.njk +473 -473
  443. package/src/templates/components/tabs/_macro.tabs.njk +3 -3
  444. package/src/templates/components/tabs/_styles.tabs.css +55 -55
  445. package/src/templates/components/tabs/_template.tabs.njk +70 -70
  446. package/src/templates/components/tabs/params.tabs.yaml +79 -79
  447. package/src/templates/components/textarea/_examples.textarea.njk +131 -131
  448. package/src/templates/components/textarea/_macro.textarea.njk +5 -5
  449. package/src/templates/components/textarea/_template.textarea.njk +48 -48
  450. package/src/templates/components/textarea/params.textarea.yaml +64 -64
  451. package/src/templates/components/toggle/_examples.toggle.njk +188 -181
  452. package/src/templates/components/toggle/_macro.toggle.njk +3 -3
  453. package/src/templates/components/toggle/_styles.toggle.css +31 -31
  454. package/src/templates/components/toggle/_template.toggle.njk +27 -27
  455. package/src/templates/components/toggle/params.toggle.yaml +69 -65
  456. package/src/templates/components/tooltip/_examples.tooltip.njk +86 -86
  457. package/src/templates/components/tooltip/_macro.tooltip.njk +3 -3
  458. package/src/templates/components/tooltip/_template.tooltip.njk +39 -39
  459. package/src/templates/components/tooltip/params.tooltip.yaml +40 -40
  460. package/src/templates/components/tree/_examples.tree.njk +2261 -2261
  461. package/src/templates/components/tree/_macro.tree.njk +3 -3
  462. package/src/templates/components/tree/_styles.tree.css +53 -53
  463. package/src/templates/components/tree/_template.tree.njk +182 -182
  464. package/src/templates/components/tree/params.tree.yaml +167 -167
  465. package/src/templates/includes/_abrir-notificaciones-extra.njk +2 -2
  466. package/src/templates/includes/_abrir-notificaciones.njk +2 -2
  467. package/src/templates/includes/_acciones-de-cabecera.njk +28 -28
  468. package/src/templates/includes/_ejemplo-titulo-h2-parrafo.njk +4 -4
  469. package/src/templates/includes/_ejemplo-titulo-parrafo.njk +4 -4
  470. package/src/templates/includes/_test-include.njk +13 -13
  471. package/src/templates/pages/_page.foot-headroom.njk +33 -33
  472. package/src/templates/pages/_page.foot.njk +8 -8
  473. package/src/templates/pages/_page.footer.njk +19 -19
  474. package/src/templates/pages/_page.head.njk +12 -12
  475. package/src/templates/pages/_page.notification-edit-inner-content.njk +31 -31
  476. package/src/templates/pages/_page.notification-edit.njk +30 -30
  477. package/src/templates/pages/_page.notification-footer.njk +32 -32
  478. package/src/templates/pages/_page.notification-header-fixed.njk +30 -30
  479. package/src/templates/pages/_page.notification-header.njk +31 -31
  480. package/src/templates/pages/_page.sidebar-content.njk +20 -20
  481. package/src/templates/pages/_page.spinner-block.njk +14 -14
  482. package/src/templates/pages/_page.spinner-show.njk +15 -15
  483. package/src/templates/pages/_page.spinner.njk +15 -15
  484. package/src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk +36 -36
  485. package/src/templates/pages/_template.edit-fixed.njk +74 -74
  486. package/src/templates/pages/_template.home.njk +111 -111
  487. package/src/templates/pages/_template.logged-out.njk +56 -56
  488. package/src/templates/pages/_template.logged-selector-fixed-headroom.njk +198 -198
  489. package/src/templates/pages/_template.logged-selector-fixed.njk +195 -195
  490. package/src/templates/pages/_template.logged-selector-subheader.njk +80 -80
  491. package/src/templates/pages/_template.logged-selector-with-sidebar.njk +28 -28
  492. package/src/templates/pages/_template.logged-selector.njk +195 -195
  493. package/src/templates/pages/_template.logged.njk +141 -141
  494. package/src/templates/pages/_template.mfe-iframe-content.njk +31 -31
  495. package/src/templates/pages/_template.mfe.njk +83 -83
  496. package/src/templates/pages/_template.test.njk +48 -48
  497. package/src/templates/pages/_template.with-header-advanced.njk +311 -311
package/docs/ds/_ds.example.menubar-variaciones.njk CHANGED
@@ -1,785 +1,785 @@
1
- {% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
2
-
3
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
4
- <div>
5
- Por defecto
6
- </div>
7
- <div class="col-span-4">
8
- {{ componentMenubar({
9
- "id": "with-all-parent-items-1",
10
- "idPrefix": "parent-example",
11
- "ariaLabel":"Menubar description",
12
- "items": [
13
- {
14
- "text": "Menuitem",
15
- "ariaLabel": "Menuitem",
16
- "id": "menuitems-example-item-1-1",
17
- "sub": {
18
- "items": [
19
- {
20
- "role": "menuitem",
21
- "text": "Subitem 1"
22
- },
23
- {
24
- "role": "menuitem",
25
- "text": "Subitem 2"
26
- },
27
- {
28
- "role": "menuitem",
29
- "text": "Subitem 3"
30
- }
31
- ]
32
- },
33
- "classes": "mb-base mr-base"
34
- },
35
- {
36
- "text": "Menuitemcheckbox",
37
- "ariaLabel": "Menuitemcheckbox",
38
- "id": "menuitems-example-item-2-1",
39
- "classes": "mb-base mr-base",
40
- "sub": {
41
- "items": [
42
- {
43
- "role": "menuitemcheckbox",
44
- "text": "Subitem 1"
45
- },
46
- {
47
- "role": "menuitemcheckbox",
48
- "text": "Subitem 2"
49
- },
50
- {
51
- "role": "menuitemcheckbox",
52
- "text": "Subitem 3"
53
- }
54
- ]
55
- }
56
- },
57
- {
58
- "text": "Menuitemradio",
59
- "ariaLabel": "Menuitemradio",
60
- "id": "menuitems-example-item-3-1",
61
- "sub": {
62
- "items": [
63
- {
64
- "role": "group",
65
- "ariaLabel": "group label",
66
- "items": [
67
- {
68
- "role": "menuitemradio",
69
- "text": "Radio 1"
70
- },
71
- {
72
- "role": "menuitemradio",
73
- "text": "Radio 2"
74
- },
75
- {
76
- "role": "menuitemradio",
77
- "text": "Radio 3"
78
- }
79
- ]
80
- }
81
- ]
82
- },
83
- "classes": "mb-base mr-base"
84
- },
85
- {
86
- "text": "Mixed items",
87
- "ariaLabel": "Mixeditems",
88
- "id": "menuitems-example-item-4-1",
89
- "sub": {
90
- "items": [
91
- {
92
- "role": "group",
93
- "ariaLabel": "Tamaño de letra",
94
- "items": [
95
- {
96
- "role": "menuitem",
97
- "text": "Tamaño mayor"
98
- },
99
- {
100
- "role": "menuitem",
101
- "text": "Tamaño menor"
102
- }
103
- ]
104
- },
105
- {
106
- "role": "separator"
107
- },
108
- {
109
- "role": "group",
110
- "ariaLabel": "Estilo de letra",
111
- "items": [
112
- {
113
- "role": "menuitemcheckbox",
114
- "text": "Negritas"
115
- },
116
- {
117
- "role": "menuitemcheckbox",
118
- "text": "Itálicas"
119
- }
120
- ]
121
- },
122
- {
123
- "role": "separator"
124
- },
125
- {
126
- "role": "group",
127
- "ariaLabel": "Estilo de texto",
128
- "items": [
129
- {
130
- "role": "menuitemradio",
131
- "text": "Ninguno"
132
- },
133
- {
134
- "role": "menuitemradio",
135
- "text": "Tachado"
136
- },
137
- {
138
- "role": "menuitemradio",
139
- "text": "Subrayado"
140
- }
141
- ]
142
- }
143
- ]
144
- },
145
- "classes": "mb-base mr-base"
146
- },
147
- {
148
- "text": "Menuitem solo",
149
- "ariaLabel": "Menuitem solo",
150
- "id": "menuitems-example-item-6-1",
151
- "classes": "c-menubar__button--transparent mb-base mr-base",
152
- "href": "#"
153
- }
154
- ]
155
- }) }}
156
- </div>
157
- </div>
158
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
159
- <div>
160
- Transparent
161
- </div>
162
- <div class="col-span-4">
163
- {{ componentMenubar({
164
- "id": "transparent-items",
165
- "idPrefix": "transparent-example",
166
- "ariaLabel":"Menubar description",
167
- "items": [
168
- {
169
- "text": "Menuitem",
170
- "ariaLabel": "Menuitem",
171
- "id": "transparent-example-item-1",
172
- "sub": {
173
- "items": [
174
- {
175
- "role": "menuitem",
176
- "text": "Subitem 1"
177
- },
178
- {
179
- "role": "menuitem",
180
- "text": "Subitem 2"
181
- },
182
- {
183
- "role": "menuitem",
184
- "text": "Subitem 3"
185
- }
186
- ]
187
- },
188
- "classes": "c-menubar__button--transparent mb-sm mr-sm"
189
- },
190
- {
191
- "text": "Menuitemcheckbox",
192
- "ariaLabel": "Menuitemcheckbox",
193
- "id": "transparent-example-item-2",
194
- "classes": "c-menubar__button--transparent mb-sm mr-sm",
195
- "sub": {
196
- "items": [
197
- {
198
- "role": "menuitemcheckbox",
199
- "text": "Subitem 1"
200
- },
201
- {
202
- "role": "menuitemcheckbox",
203
- "text": "Subitem 2",
204
- "checked": true
205
- },
206
- {
207
- "role": "menuitemcheckbox",
208
- "text": "Subitem 3"
209
- }
210
- ]
211
- }
212
- },
213
- {
214
- "text": "Menuitemradio",
215
- "ariaLabel": "Menuitemradio",
216
- "id": "transparent-example-item-3",
217
- "sub": {
218
- "items": [
219
- {
220
- "role": "group",
221
- "ariaLabel": "group label",
222
- "items": [
223
- {
224
- "role": "menuitemradio",
225
- "text": "Radio 1"
226
- },
227
- {
228
- "role": "menuitemradio",
229
- "text": "Radio 2",
230
- "checked": true
231
- },
232
- {
233
- "role": "menuitemradio",
234
- "text": "Radio 3"
235
- }
236
- ]
237
- }
238
- ]
239
- },
240
- "classes": "c-menubar__button--transparent mb-sm mr-sm"
241
- },
242
- {
243
- "text": "Mixed items",
244
- "ariaLabel": "Mixeditems",
245
- "id": "transparent-example-item-4",
246
- "sub": {
247
- "items": [
248
- {
249
- "role": "group",
250
- "ariaLabel": "Tamaño de letra",
251
- "items": [
252
- {
253
- "role": "menuitem",
254
- "text": "Tamaño mayor"
255
- },
256
- {
257
- "role": "menuitem",
258
- "text": "Tamaño menor"
259
- }
260
- ]
261
- },
262
- {
263
- "role": "separator"
264
- },
265
- {
266
- "role": "group",
267
- "ariaLabel": "Estilo de letra",
268
- "items": [
269
- {
270
- "role": "menuitemcheckbox",
271
- "text": "Negritas"
272
- },
273
- {
274
- "role": "menuitemcheckbox",
275
- "text": "Itálicas"
276
- }
277
- ]
278
- },
279
- {
280
- "role": "separator"
281
- },
282
- {
283
- "role": "group",
284
- "ariaLabel": "Estilo de texto",
285
- "items": [
286
- {
287
- "role": "menuitemradio",
288
- "text": "Ninguno"
289
- },
290
- {
291
- "role": "menuitemradio",
292
- "text": "Tachado"
293
- },
294
- {
295
- "role": "menuitemradio",
296
- "text": "Subrayado"
297
- }
298
- ]
299
- }
300
- ]
301
- },
302
- "classes": "c-menubar__button--transparent mb-sm mr-sm"
303
- },
304
- {
305
- "text": "Menuitem solo",
306
- "ariaLabel": "Menuitem solo",
307
- "id": "transparent-example-item-6",
308
- "classes": "c-menubar__button--transparent mb-sm mr-sm",
309
- "href": "#"
310
- }
311
- ]
312
- }) }}
313
- </div>
314
- </div>
315
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
316
- <div>
317
- Header
318
- </div>
319
- <div class="col-span-4">
320
- {{ componentMenubar({
321
- "id": "header-items",
322
- "idPrefix": "header-example",
323
- "ariaLabel":"Menubar description",
324
- "items": [
325
- {
326
- "text": "Menuitem",
327
- "ariaLabel": "Menuitem",
328
- "id": "header-example-item-1",
329
- "sub": {
330
- "items": [
331
- {
332
- "role": "menuitem",
333
- "text": "Subitem 1"
334
- },
335
- {
336
- "role": "menuitem",
337
- "text": "Subitem 2"
338
- },
339
- {
340
- "role": "menuitem",
341
- "text": "Subitem 3"
342
- }
343
- ]
344
- },
345
- "classes": "c-menubar__button--header mr-base"
346
- },
347
- {
348
- "text": "Menuitemcheckbox",
349
- "ariaLabel": "Menuitemcheckbox",
350
- "id": "header-example-item-2",
351
- "classes": "c-menubar__button--header mr-base",
352
- "sub": {
353
- "items": [
354
- {
355
- "role": "menuitemcheckbox",
356
- "text": "Subitem 1"
357
- },
358
- {
359
- "role": "menuitemcheckbox",
360
- "text": "Subitem 2",
361
- "checked": true
362
- },
363
- {
364
- "role": "menuitemcheckbox",
365
- "text": "Subitem 3"
366
- }
367
- ]
368
- }
369
- },
370
- {
371
- "text": "Menuitemradio",
372
- "ariaLabel": "Menuitemradio",
373
- "id": "header-example-item-3",
374
- "sub": {
375
- "items": [
376
- {
377
- "role": "group",
378
- "ariaLabel": "group label",
379
- "items": [
380
- {
381
- "role": "menuitemradio",
382
- "text": "Radio 1"
383
- },
384
- {
385
- "role": "menuitemradio",
386
- "text": "Radio 2",
387
- "checked": true
388
- },
389
- {
390
- "role": "menuitemradio",
391
- "text": "Radio 3"
392
- }
393
- ]
394
- }
395
- ]
396
- },
397
- "classes": "c-menubar__button--header mr-base"
398
- },
399
- {
400
- "text": "Mixed items",
401
- "ariaLabel": "Mixeditems",
402
- "id": "header-example-item-4",
403
- "sub": {
404
- "items": [
405
- {
406
- "role": "group",
407
- "ariaLabel": "Tamaño de letra",
408
- "items": [
409
- {
410
- "role": "menuitem",
411
- "text": "Tamaño mayor"
412
- },
413
- {
414
- "role": "menuitem",
415
- "text": "Tamaño menor"
416
- }
417
- ]
418
- },
419
- {
420
- "role": "separator"
421
- },
422
- {
423
- "role": "group",
424
- "ariaLabel": "Estilo de letra",
425
- "items": [
426
- {
427
- "role": "menuitemcheckbox",
428
- "text": "Negritas"
429
- },
430
- {
431
- "role": "menuitemcheckbox",
432
- "text": "Itálicas"
433
- }
434
- ]
435
- },
436
- {
437
- "role": "separator"
438
- },
439
- {
440
- "role": "group",
441
- "ariaLabel": "Estilo de texto",
442
- "items": [
443
- {
444
- "role": "menuitemradio",
445
- "text": "Ninguno"
446
- },
447
- {
448
- "role": "menuitemradio",
449
- "text": "Tachado"
450
- },
451
- {
452
- "role": "menuitemradio",
453
- "text": "Subrayado"
454
- }
455
- ]
456
- }
457
- ]
458
- },
459
- "classes": "c-menubar__button--header mr-base"
460
- },
461
- {
462
- "text": "Menuitem solo",
463
- "ariaLabel": "Menuitem solo",
464
- "id": "header-example-item-6",
465
- "classes": "c-menubar__button--header mr-base",
466
- "href": "#"
467
- }
468
- ]
469
- }) }}
470
- </div>
471
- </div>
472
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
473
- <div>
474
- Pequeño
475
- </div>
476
- <div class="col-span-4">
477
- {{ componentMenubar({
478
- "id": "small-items",
479
- "idPrefix": "small-example",
480
- "ariaLabel":"Menubar description",
481
- "items": [
482
- {
483
- "text": "Menuitem",
484
- "ariaLabel": "Menuitem",
485
- "id": "small-example-item-1",
486
- "sub": {
487
- "items": [
488
- {
489
- "role": "menuitem",
490
- "text": "Subitem 1"
491
- },
492
- {
493
- "role": "menuitem",
494
- "text": "Subitem 2"
495
- },
496
- {
497
- "role": "menuitem",
498
- "text": "Subitem 3"
499
- }
500
- ]
501
- },
502
- "classes": "c-menubar__button--sm mb-sm mr-sm"
503
- },
504
- {
505
- "text": "Menuitemcheckbox",
506
- "ariaLabel": "Menuitemcheckbox",
507
- "id": "small-example-item-2",
508
- "classes": "c-menubar__button--sm mb-sm mr-sm",
509
- "sub": {
510
- "items": [
511
- {
512
- "role": "menuitemcheckbox",
513
- "text": "Subitem 1"
514
- },
515
- {
516
- "role": "menuitemcheckbox",
517
- "text": "Subitem 2",
518
- "checked": true
519
- },
520
- {
521
- "role": "menuitemcheckbox",
522
- "text": "Subitem 3"
523
- }
524
- ]
525
- }
526
- },
527
- {
528
- "text": "Menuitemradio",
529
- "ariaLabel": "Menuitemradio",
530
- "id": "small-example-item-3",
531
- "sub": {
532
- "items": [
533
- {
534
- "role": "group",
535
- "ariaLabel": "group label",
536
- "items": [
537
- {
538
- "role": "menuitemradio",
539
- "text": "Radio 1"
540
- },
541
- {
542
- "role": "menuitemradio",
543
- "text": "Radio 2",
544
- "checked": true
545
- },
546
- {
547
- "role": "menuitemradio",
548
- "text": "Radio 3"
549
- }
550
- ]
551
- }
552
- ]
553
- },
554
- "classes": "c-menubar__button--sm mb-sm mr-sm"
555
- },
556
- {
557
- "text": "Mixed items",
558
- "ariaLabel": "Mixeditems",
559
- "id": "small-example-item-4",
560
- "sub": {
561
- "items": [
562
- {
563
- "role": "group",
564
- "ariaLabel": "Tamaño de letra",
565
- "items": [
566
- {
567
- "role": "menuitem",
568
- "text": "Tamaño mayor"
569
- },
570
- {
571
- "role": "menuitem",
572
- "text": "Tamaño menor"
573
- }
574
- ]
575
- },
576
- {
577
- "role": "separator"
578
- },
579
- {
580
- "role": "group",
581
- "ariaLabel": "Estilo de letra",
582
- "items": [
583
- {
584
- "role": "menuitemcheckbox",
585
- "text": "Negritas"
586
- },
587
- {
588
- "role": "menuitemcheckbox",
589
- "text": "Itálicas"
590
- }
591
- ]
592
- },
593
- {
594
- "role": "separator"
595
- },
596
- {
597
- "role": "group",
598
- "ariaLabel": "Estilo de texto",
599
- "items": [
600
- {
601
- "role": "menuitemradio",
602
- "text": "Ninguno"
603
- },
604
- {
605
- "role": "menuitemradio",
606
- "text": "Tachado"
607
- },
608
- {
609
- "role": "menuitemradio",
610
- "text": "Subrayado"
611
- }
612
- ]
613
- }
614
- ]
615
- },
616
- "classes": "c-menubar__button--sm mb-sm mr-sm"
617
- },
618
- {
619
- "text": "Menuitem solo",
620
- "ariaLabel": "Menuitem solo",
621
- "id": "small-example-item-6",
622
- "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
623
- "href": "#"
624
- }
625
- ]
626
- }) }}
627
- </div>
628
- </div>
629
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
630
- <div>
631
- Pequeño tiene selección
632
- </div>
633
- <div class="col-span-4">
634
- {{ componentMenubar({
635
- "id": "small-items-selection",
636
- "idPrefix": "small-example-selection",
637
- "ariaLabel":"Menubar description",
638
- "items": [
639
- {
640
- "text": "Menuitem",
641
- "ariaLabel": "Menuitem",
642
- "id": "small-example-selection-item-1",
643
- "sub": {
644
- "items": [
645
- {
646
- "role": "menuitem",
647
- "text": "Subitem 1"
648
- },
649
- {
650
- "role": "menuitem",
651
- "text": "Subitem 2"
652
- },
653
- {
654
- "role": "menuitem",
655
- "text": "Subitem 3"
656
- }
657
- ]
658
- },
659
- "classes": "c-menubar__button--has-selection c-menubar__button--sm mb-sm mr-sm"
660
- },
661
- {
662
- "text": "Menuitemcheckbox",
663
- "ariaLabel": "Menuitemcheckbox",
664
- "id": "small-example-selection-item-2",
665
- "classes": "c-menubar__button--sm mb-sm mr-sm",
666
- "sub": {
667
- "items": [
668
- {
669
- "role": "menuitemcheckbox",
670
- "text": "Subitem 1"
671
- },
672
- {
673
- "role": "menuitemcheckbox",
674
- "text": "Subitem 2",
675
- "checked": true
676
- },
677
- {
678
- "role": "menuitemcheckbox",
679
- "text": "Subitem 3"
680
- }
681
- ]
682
- }
683
- },
684
- {
685
- "text": "Menuitemradio",
686
- "ariaLabel": "Menuitemradio",
687
- "id": "small-example-selection-item-3",
688
- "sub": {
689
- "items": [
690
- {
691
- "role": "group",
692
- "ariaLabel": "group label",
693
- "items": [
694
- {
695
- "role": "menuitemradio",
696
- "text": "Radio 1"
697
- },
698
- {
699
- "role": "menuitemradio",
700
- "text": "Radio 2",
701
- "checked": true
702
- },
703
- {
704
- "role": "menuitemradio",
705
- "text": "Radio 3"
706
- }
707
- ]
708
- }
709
- ]
710
- },
711
- "classes": "c-menubar__button--has-selection c-menubar__button--sm mb-sm mr-sm"
712
- },
713
- {
714
- "text": "Mixed items",
715
- "ariaLabel": "Mixeditems",
716
- "id": "small-example-selection-item-4",
717
- "sub": {
718
- "items": [
719
- {
720
- "role": "group",
721
- "ariaLabel": "Tamaño de letra",
722
- "items": [
723
- {
724
- "role": "menuitem",
725
- "text": "Tamaño mayor"
726
- },
727
- {
728
- "role": "menuitem",
729
- "text": "Tamaño menor"
730
- }
731
- ]
732
- },
733
- {
734
- "role": "separator"
735
- },
736
- {
737
- "role": "group",
738
- "ariaLabel": "Estilo de letra",
739
- "items": [
740
- {
741
- "role": "menuitemcheckbox",
742
- "text": "Negritas"
743
- },
744
- {
745
- "role": "menuitemcheckbox",
746
- "text": "Itálicas"
747
- }
748
- ]
749
- },
750
- {
751
- "role": "separator"
752
- },
753
- {
754
- "role": "group",
755
- "ariaLabel": "Estilo de texto",
756
- "items": [
757
- {
758
- "role": "menuitemradio",
759
- "text": "Ninguno"
760
- },
761
- {
762
- "role": "menuitemradio",
763
- "text": "Tachado"
764
- },
765
- {
766
- "role": "menuitemradio",
767
- "text": "Subrayado"
768
- }
769
- ]
770
- }
771
- ]
772
- },
773
- "classes": "c-menubar__button--sm mb-sm mr-sm"
774
- },
775
- {
776
- "text": "Menuitem solo",
777
- "ariaLabel": "Menuitem solo",
778
- "id": "small-example-selection-item-6",
779
- "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
780
- "href": "#"
781
- }
782
- ]
783
- }) }}
784
- </div>
785
- </div>
1
+ {% from "components/menubar/_macro.menubar.njk" import componentMenubar %}
2
+
3
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
4
+ <div>
5
+ Por defecto
6
+ </div>
7
+ <div class="col-span-4">
8
+ {{ componentMenubar({
9
+ "id": "with-all-parent-items-1",
10
+ "idPrefix": "parent-example",
11
+ "ariaLabel":"Menubar description",
12
+ "items": [
13
+ {
14
+ "text": "Menuitem",
15
+ "ariaLabel": "Menuitem",
16
+ "id": "menuitems-example-item-1-1",
17
+ "sub": {
18
+ "items": [
19
+ {
20
+ "role": "menuitem",
21
+ "text": "Subitem 1"
22
+ },
23
+ {
24
+ "role": "menuitem",
25
+ "text": "Subitem 2"
26
+ },
27
+ {
28
+ "role": "menuitem",
29
+ "text": "Subitem 3"
30
+ }
31
+ ]
32
+ },
33
+ "classes": "mb-base mr-base"
34
+ },
35
+ {
36
+ "text": "Menuitemcheckbox",
37
+ "ariaLabel": "Menuitemcheckbox",
38
+ "id": "menuitems-example-item-2-1",
39
+ "classes": "mb-base mr-base",
40
+ "sub": {
41
+ "items": [
42
+ {
43
+ "role": "menuitemcheckbox",
44
+ "text": "Subitem 1"
45
+ },
46
+ {
47
+ "role": "menuitemcheckbox",
48
+ "text": "Subitem 2"
49
+ },
50
+ {
51
+ "role": "menuitemcheckbox",
52
+ "text": "Subitem 3"
53
+ }
54
+ ]
55
+ }
56
+ },
57
+ {
58
+ "text": "Menuitemradio",
59
+ "ariaLabel": "Menuitemradio",
60
+ "id": "menuitems-example-item-3-1",
61
+ "sub": {
62
+ "items": [
63
+ {
64
+ "role": "group",
65
+ "ariaLabel": "group label",
66
+ "items": [
67
+ {
68
+ "role": "menuitemradio",
69
+ "text": "Radio 1"
70
+ },
71
+ {
72
+ "role": "menuitemradio",
73
+ "text": "Radio 2"
74
+ },
75
+ {
76
+ "role": "menuitemradio",
77
+ "text": "Radio 3"
78
+ }
79
+ ]
80
+ }
81
+ ]
82
+ },
83
+ "classes": "mb-base mr-base"
84
+ },
85
+ {
86
+ "text": "Mixed items",
87
+ "ariaLabel": "Mixeditems",
88
+ "id": "menuitems-example-item-4-1",
89
+ "sub": {
90
+ "items": [
91
+ {
92
+ "role": "group",
93
+ "ariaLabel": "Tamaño de letra",
94
+ "items": [
95
+ {
96
+ "role": "menuitem",
97
+ "text": "Tamaño mayor"
98
+ },
99
+ {
100
+ "role": "menuitem",
101
+ "text": "Tamaño menor"
102
+ }
103
+ ]
104
+ },
105
+ {
106
+ "role": "separator"
107
+ },
108
+ {
109
+ "role": "group",
110
+ "ariaLabel": "Estilo de letra",
111
+ "items": [
112
+ {
113
+ "role": "menuitemcheckbox",
114
+ "text": "Negritas"
115
+ },
116
+ {
117
+ "role": "menuitemcheckbox",
118
+ "text": "Itálicas"
119
+ }
120
+ ]
121
+ },
122
+ {
123
+ "role": "separator"
124
+ },
125
+ {
126
+ "role": "group",
127
+ "ariaLabel": "Estilo de texto",
128
+ "items": [
129
+ {
130
+ "role": "menuitemradio",
131
+ "text": "Ninguno"
132
+ },
133
+ {
134
+ "role": "menuitemradio",
135
+ "text": "Tachado"
136
+ },
137
+ {
138
+ "role": "menuitemradio",
139
+ "text": "Subrayado"
140
+ }
141
+ ]
142
+ }
143
+ ]
144
+ },
145
+ "classes": "mb-base mr-base"
146
+ },
147
+ {
148
+ "text": "Menuitem solo",
149
+ "ariaLabel": "Menuitem solo",
150
+ "id": "menuitems-example-item-6-1",
151
+ "classes": "c-menubar__button--transparent mb-base mr-base",
152
+ "href": "#"
153
+ }
154
+ ]
155
+ }) }}
156
+ </div>
157
+ </div>
158
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
159
+ <div>
160
+ Transparent
161
+ </div>
162
+ <div class="col-span-4">
163
+ {{ componentMenubar({
164
+ "id": "transparent-items",
165
+ "idPrefix": "transparent-example",
166
+ "ariaLabel":"Menubar description",
167
+ "items": [
168
+ {
169
+ "text": "Menuitem",
170
+ "ariaLabel": "Menuitem",
171
+ "id": "transparent-example-item-1",
172
+ "sub": {
173
+ "items": [
174
+ {
175
+ "role": "menuitem",
176
+ "text": "Subitem 1"
177
+ },
178
+ {
179
+ "role": "menuitem",
180
+ "text": "Subitem 2"
181
+ },
182
+ {
183
+ "role": "menuitem",
184
+ "text": "Subitem 3"
185
+ }
186
+ ]
187
+ },
188
+ "classes": "c-menubar__button--transparent mb-sm mr-sm"
189
+ },
190
+ {
191
+ "text": "Menuitemcheckbox",
192
+ "ariaLabel": "Menuitemcheckbox",
193
+ "id": "transparent-example-item-2",
194
+ "classes": "c-menubar__button--transparent mb-sm mr-sm",
195
+ "sub": {
196
+ "items": [
197
+ {
198
+ "role": "menuitemcheckbox",
199
+ "text": "Subitem 1"
200
+ },
201
+ {
202
+ "role": "menuitemcheckbox",
203
+ "text": "Subitem 2",
204
+ "checked": true
205
+ },
206
+ {
207
+ "role": "menuitemcheckbox",
208
+ "text": "Subitem 3"
209
+ }
210
+ ]
211
+ }
212
+ },
213
+ {
214
+ "text": "Menuitemradio",
215
+ "ariaLabel": "Menuitemradio",
216
+ "id": "transparent-example-item-3",
217
+ "sub": {
218
+ "items": [
219
+ {
220
+ "role": "group",
221
+ "ariaLabel": "group label",
222
+ "items": [
223
+ {
224
+ "role": "menuitemradio",
225
+ "text": "Radio 1"
226
+ },
227
+ {
228
+ "role": "menuitemradio",
229
+ "text": "Radio 2",
230
+ "checked": true
231
+ },
232
+ {
233
+ "role": "menuitemradio",
234
+ "text": "Radio 3"
235
+ }
236
+ ]
237
+ }
238
+ ]
239
+ },
240
+ "classes": "c-menubar__button--transparent mb-sm mr-sm"
241
+ },
242
+ {
243
+ "text": "Mixed items",
244
+ "ariaLabel": "Mixeditems",
245
+ "id": "transparent-example-item-4",
246
+ "sub": {
247
+ "items": [
248
+ {
249
+ "role": "group",
250
+ "ariaLabel": "Tamaño de letra",
251
+ "items": [
252
+ {
253
+ "role": "menuitem",
254
+ "text": "Tamaño mayor"
255
+ },
256
+ {
257
+ "role": "menuitem",
258
+ "text": "Tamaño menor"
259
+ }
260
+ ]
261
+ },
262
+ {
263
+ "role": "separator"
264
+ },
265
+ {
266
+ "role": "group",
267
+ "ariaLabel": "Estilo de letra",
268
+ "items": [
269
+ {
270
+ "role": "menuitemcheckbox",
271
+ "text": "Negritas"
272
+ },
273
+ {
274
+ "role": "menuitemcheckbox",
275
+ "text": "Itálicas"
276
+ }
277
+ ]
278
+ },
279
+ {
280
+ "role": "separator"
281
+ },
282
+ {
283
+ "role": "group",
284
+ "ariaLabel": "Estilo de texto",
285
+ "items": [
286
+ {
287
+ "role": "menuitemradio",
288
+ "text": "Ninguno"
289
+ },
290
+ {
291
+ "role": "menuitemradio",
292
+ "text": "Tachado"
293
+ },
294
+ {
295
+ "role": "menuitemradio",
296
+ "text": "Subrayado"
297
+ }
298
+ ]
299
+ }
300
+ ]
301
+ },
302
+ "classes": "c-menubar__button--transparent mb-sm mr-sm"
303
+ },
304
+ {
305
+ "text": "Menuitem solo",
306
+ "ariaLabel": "Menuitem solo",
307
+ "id": "transparent-example-item-6",
308
+ "classes": "c-menubar__button--transparent mb-sm mr-sm",
309
+ "href": "#"
310
+ }
311
+ ]
312
+ }) }}
313
+ </div>
314
+ </div>
315
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
316
+ <div>
317
+ Header
318
+ </div>
319
+ <div class="col-span-4">
320
+ {{ componentMenubar({
321
+ "id": "header-items",
322
+ "idPrefix": "header-example",
323
+ "ariaLabel":"Menubar description",
324
+ "items": [
325
+ {
326
+ "text": "Menuitem",
327
+ "ariaLabel": "Menuitem",
328
+ "id": "header-example-item-1",
329
+ "sub": {
330
+ "items": [
331
+ {
332
+ "role": "menuitem",
333
+ "text": "Subitem 1"
334
+ },
335
+ {
336
+ "role": "menuitem",
337
+ "text": "Subitem 2"
338
+ },
339
+ {
340
+ "role": "menuitem",
341
+ "text": "Subitem 3"
342
+ }
343
+ ]
344
+ },
345
+ "classes": "c-menubar__button--header mr-base"
346
+ },
347
+ {
348
+ "text": "Menuitemcheckbox",
349
+ "ariaLabel": "Menuitemcheckbox",
350
+ "id": "header-example-item-2",
351
+ "classes": "c-menubar__button--header mr-base",
352
+ "sub": {
353
+ "items": [
354
+ {
355
+ "role": "menuitemcheckbox",
356
+ "text": "Subitem 1"
357
+ },
358
+ {
359
+ "role": "menuitemcheckbox",
360
+ "text": "Subitem 2",
361
+ "checked": true
362
+ },
363
+ {
364
+ "role": "menuitemcheckbox",
365
+ "text": "Subitem 3"
366
+ }
367
+ ]
368
+ }
369
+ },
370
+ {
371
+ "text": "Menuitemradio",
372
+ "ariaLabel": "Menuitemradio",
373
+ "id": "header-example-item-3",
374
+ "sub": {
375
+ "items": [
376
+ {
377
+ "role": "group",
378
+ "ariaLabel": "group label",
379
+ "items": [
380
+ {
381
+ "role": "menuitemradio",
382
+ "text": "Radio 1"
383
+ },
384
+ {
385
+ "role": "menuitemradio",
386
+ "text": "Radio 2",
387
+ "checked": true
388
+ },
389
+ {
390
+ "role": "menuitemradio",
391
+ "text": "Radio 3"
392
+ }
393
+ ]
394
+ }
395
+ ]
396
+ },
397
+ "classes": "c-menubar__button--header mr-base"
398
+ },
399
+ {
400
+ "text": "Mixed items",
401
+ "ariaLabel": "Mixeditems",
402
+ "id": "header-example-item-4",
403
+ "sub": {
404
+ "items": [
405
+ {
406
+ "role": "group",
407
+ "ariaLabel": "Tamaño de letra",
408
+ "items": [
409
+ {
410
+ "role": "menuitem",
411
+ "text": "Tamaño mayor"
412
+ },
413
+ {
414
+ "role": "menuitem",
415
+ "text": "Tamaño menor"
416
+ }
417
+ ]
418
+ },
419
+ {
420
+ "role": "separator"
421
+ },
422
+ {
423
+ "role": "group",
424
+ "ariaLabel": "Estilo de letra",
425
+ "items": [
426
+ {
427
+ "role": "menuitemcheckbox",
428
+ "text": "Negritas"
429
+ },
430
+ {
431
+ "role": "menuitemcheckbox",
432
+ "text": "Itálicas"
433
+ }
434
+ ]
435
+ },
436
+ {
437
+ "role": "separator"
438
+ },
439
+ {
440
+ "role": "group",
441
+ "ariaLabel": "Estilo de texto",
442
+ "items": [
443
+ {
444
+ "role": "menuitemradio",
445
+ "text": "Ninguno"
446
+ },
447
+ {
448
+ "role": "menuitemradio",
449
+ "text": "Tachado"
450
+ },
451
+ {
452
+ "role": "menuitemradio",
453
+ "text": "Subrayado"
454
+ }
455
+ ]
456
+ }
457
+ ]
458
+ },
459
+ "classes": "c-menubar__button--header mr-base"
460
+ },
461
+ {
462
+ "text": "Menuitem solo",
463
+ "ariaLabel": "Menuitem solo",
464
+ "id": "header-example-item-6",
465
+ "classes": "c-menubar__button--header mr-base",
466
+ "href": "#"
467
+ }
468
+ ]
469
+ }) }}
470
+ </div>
471
+ </div>
472
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
473
+ <div>
474
+ Pequeño
475
+ </div>
476
+ <div class="col-span-4">
477
+ {{ componentMenubar({
478
+ "id": "small-items",
479
+ "idPrefix": "small-example",
480
+ "ariaLabel":"Menubar description",
481
+ "items": [
482
+ {
483
+ "text": "Menuitem",
484
+ "ariaLabel": "Menuitem",
485
+ "id": "small-example-item-1",
486
+ "sub": {
487
+ "items": [
488
+ {
489
+ "role": "menuitem",
490
+ "text": "Subitem 1"
491
+ },
492
+ {
493
+ "role": "menuitem",
494
+ "text": "Subitem 2"
495
+ },
496
+ {
497
+ "role": "menuitem",
498
+ "text": "Subitem 3"
499
+ }
500
+ ]
501
+ },
502
+ "classes": "c-menubar__button--sm mb-sm mr-sm"
503
+ },
504
+ {
505
+ "text": "Menuitemcheckbox",
506
+ "ariaLabel": "Menuitemcheckbox",
507
+ "id": "small-example-item-2",
508
+ "classes": "c-menubar__button--sm mb-sm mr-sm",
509
+ "sub": {
510
+ "items": [
511
+ {
512
+ "role": "menuitemcheckbox",
513
+ "text": "Subitem 1"
514
+ },
515
+ {
516
+ "role": "menuitemcheckbox",
517
+ "text": "Subitem 2",
518
+ "checked": true
519
+ },
520
+ {
521
+ "role": "menuitemcheckbox",
522
+ "text": "Subitem 3"
523
+ }
524
+ ]
525
+ }
526
+ },
527
+ {
528
+ "text": "Menuitemradio",
529
+ "ariaLabel": "Menuitemradio",
530
+ "id": "small-example-item-3",
531
+ "sub": {
532
+ "items": [
533
+ {
534
+ "role": "group",
535
+ "ariaLabel": "group label",
536
+ "items": [
537
+ {
538
+ "role": "menuitemradio",
539
+ "text": "Radio 1"
540
+ },
541
+ {
542
+ "role": "menuitemradio",
543
+ "text": "Radio 2",
544
+ "checked": true
545
+ },
546
+ {
547
+ "role": "menuitemradio",
548
+ "text": "Radio 3"
549
+ }
550
+ ]
551
+ }
552
+ ]
553
+ },
554
+ "classes": "c-menubar__button--sm mb-sm mr-sm"
555
+ },
556
+ {
557
+ "text": "Mixed items",
558
+ "ariaLabel": "Mixeditems",
559
+ "id": "small-example-item-4",
560
+ "sub": {
561
+ "items": [
562
+ {
563
+ "role": "group",
564
+ "ariaLabel": "Tamaño de letra",
565
+ "items": [
566
+ {
567
+ "role": "menuitem",
568
+ "text": "Tamaño mayor"
569
+ },
570
+ {
571
+ "role": "menuitem",
572
+ "text": "Tamaño menor"
573
+ }
574
+ ]
575
+ },
576
+ {
577
+ "role": "separator"
578
+ },
579
+ {
580
+ "role": "group",
581
+ "ariaLabel": "Estilo de letra",
582
+ "items": [
583
+ {
584
+ "role": "menuitemcheckbox",
585
+ "text": "Negritas"
586
+ },
587
+ {
588
+ "role": "menuitemcheckbox",
589
+ "text": "Itálicas"
590
+ }
591
+ ]
592
+ },
593
+ {
594
+ "role": "separator"
595
+ },
596
+ {
597
+ "role": "group",
598
+ "ariaLabel": "Estilo de texto",
599
+ "items": [
600
+ {
601
+ "role": "menuitemradio",
602
+ "text": "Ninguno"
603
+ },
604
+ {
605
+ "role": "menuitemradio",
606
+ "text": "Tachado"
607
+ },
608
+ {
609
+ "role": "menuitemradio",
610
+ "text": "Subrayado"
611
+ }
612
+ ]
613
+ }
614
+ ]
615
+ },
616
+ "classes": "c-menubar__button--sm mb-sm mr-sm"
617
+ },
618
+ {
619
+ "text": "Menuitem solo",
620
+ "ariaLabel": "Menuitem solo",
621
+ "id": "small-example-item-6",
622
+ "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
623
+ "href": "#"
624
+ }
625
+ ]
626
+ }) }}
627
+ </div>
628
+ </div>
629
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
630
+ <div>
631
+ Pequeño tiene selección
632
+ </div>
633
+ <div class="col-span-4">
634
+ {{ componentMenubar({
635
+ "id": "small-items-selection",
636
+ "idPrefix": "small-example-selection",
637
+ "ariaLabel":"Menubar description",
638
+ "items": [
639
+ {
640
+ "text": "Menuitem",
641
+ "ariaLabel": "Menuitem",
642
+ "id": "small-example-selection-item-1",
643
+ "sub": {
644
+ "items": [
645
+ {
646
+ "role": "menuitem",
647
+ "text": "Subitem 1"
648
+ },
649
+ {
650
+ "role": "menuitem",
651
+ "text": "Subitem 2"
652
+ },
653
+ {
654
+ "role": "menuitem",
655
+ "text": "Subitem 3"
656
+ }
657
+ ]
658
+ },
659
+ "classes": "c-menubar__button--has-selection c-menubar__button--sm mb-sm mr-sm"
660
+ },
661
+ {
662
+ "text": "Menuitemcheckbox",
663
+ "ariaLabel": "Menuitemcheckbox",
664
+ "id": "small-example-selection-item-2",
665
+ "classes": "c-menubar__button--sm mb-sm mr-sm",
666
+ "sub": {
667
+ "items": [
668
+ {
669
+ "role": "menuitemcheckbox",
670
+ "text": "Subitem 1"
671
+ },
672
+ {
673
+ "role": "menuitemcheckbox",
674
+ "text": "Subitem 2",
675
+ "checked": true
676
+ },
677
+ {
678
+ "role": "menuitemcheckbox",
679
+ "text": "Subitem 3"
680
+ }
681
+ ]
682
+ }
683
+ },
684
+ {
685
+ "text": "Menuitemradio",
686
+ "ariaLabel": "Menuitemradio",
687
+ "id": "small-example-selection-item-3",
688
+ "sub": {
689
+ "items": [
690
+ {
691
+ "role": "group",
692
+ "ariaLabel": "group label",
693
+ "items": [
694
+ {
695
+ "role": "menuitemradio",
696
+ "text": "Radio 1"
697
+ },
698
+ {
699
+ "role": "menuitemradio",
700
+ "text": "Radio 2",
701
+ "checked": true
702
+ },
703
+ {
704
+ "role": "menuitemradio",
705
+ "text": "Radio 3"
706
+ }
707
+ ]
708
+ }
709
+ ]
710
+ },
711
+ "classes": "c-menubar__button--has-selection c-menubar__button--sm mb-sm mr-sm"
712
+ },
713
+ {
714
+ "text": "Mixed items",
715
+ "ariaLabel": "Mixeditems",
716
+ "id": "small-example-selection-item-4",
717
+ "sub": {
718
+ "items": [
719
+ {
720
+ "role": "group",
721
+ "ariaLabel": "Tamaño de letra",
722
+ "items": [
723
+ {
724
+ "role": "menuitem",
725
+ "text": "Tamaño mayor"
726
+ },
727
+ {
728
+ "role": "menuitem",
729
+ "text": "Tamaño menor"
730
+ }
731
+ ]
732
+ },
733
+ {
734
+ "role": "separator"
735
+ },
736
+ {
737
+ "role": "group",
738
+ "ariaLabel": "Estilo de letra",
739
+ "items": [
740
+ {
741
+ "role": "menuitemcheckbox",
742
+ "text": "Negritas"
743
+ },
744
+ {
745
+ "role": "menuitemcheckbox",
746
+ "text": "Itálicas"
747
+ }
748
+ ]
749
+ },
750
+ {
751
+ "role": "separator"
752
+ },
753
+ {
754
+ "role": "group",
755
+ "ariaLabel": "Estilo de texto",
756
+ "items": [
757
+ {
758
+ "role": "menuitemradio",
759
+ "text": "Ninguno"
760
+ },
761
+ {
762
+ "role": "menuitemradio",
763
+ "text": "Tachado"
764
+ },
765
+ {
766
+ "role": "menuitemradio",
767
+ "text": "Subrayado"
768
+ }
769
+ ]
770
+ }
771
+ ]
772
+ },
773
+ "classes": "c-menubar__button--sm mb-sm mr-sm"
774
+ },
775
+ {
776
+ "text": "Menuitem solo",
777
+ "ariaLabel": "Menuitem solo",
778
+ "id": "small-example-selection-item-6",
779
+ "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
780
+ "href": "#"
781
+ }
782
+ ]
783
+ }) }}
784
+ </div>
785
+ </div>