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/table/_examples.table.njk CHANGED
@@ -1,669 +1,669 @@
1
- {% set exampleComponent = "table" %}
2
- {% set examples = [
3
- {
4
- "name": "tabla por defecto",
5
- "data": {
6
- "caption": "Caption de la tabla",
7
- "captionClasses": "sr-only mb-base font-bold text-left text-lg",
8
- "head": [
9
- {
10
- "text": "Mes de pago"
11
- },
12
- {
13
- "text": "Primer pago",
14
- "classes": "lg:text-right"
15
- },
16
- {
17
- "text": "Segundo pago",
18
- "classes": "lg:text-right"
19
- }
20
- ],
21
- "rows": [
22
- [
23
- {
24
- "text": "Enero"
25
- },
26
- {
27
- "text": "85€",
28
- "classes": "lg:text-right"
29
- },
30
- {
31
- "text": "95€",
32
- "classes": "lg:text-right"
33
- }
34
- ],
35
- [
36
- {
37
- "text": "Febrero"
38
- },
39
- {
40
- "text": "75€",
41
- "classes": "lg:text-right"
42
- },
43
- {
44
- "text": "55€",
45
- "classes": "lg:text-right"
46
- }
47
- ],
48
- [
49
- {
50
- "text": "Marzo"
51
- },
52
- {
53
- "text": "165€",
54
- "classes": "lg:text-right"
55
- },
56
- {
57
- "text": "125€",
58
- "classes": "lg:text-right"
59
- }
60
- ]
61
- ]
62
- }
63
- },
64
- {
65
- "name": "tabla con tfoot",
66
- "data": {
67
- "caption": "Caption de la tabla",
68
- "captionClasses": "sr-only mb-base font-bold text-left text-lg",
69
- "head": [
70
- {
71
- "text": "Mes de pago"
72
- },
73
- {
74
- "text": "Primer pago",
75
- "classes": "lg:text-right"
76
- },
77
- {
78
- "text": "Segundo pago",
79
- "classes": "lg:text-right"
80
- }
81
- ],
82
- "rows": [
83
- [
84
- {
85
- "text": "Enero"
86
- },
87
- {
88
- "text": "85€",
89
- "classes": "lg:text-right"
90
- },
91
- {
92
- "text": "95€",
93
- "classes": "lg:text-right"
94
- }
95
- ],
96
- [
97
- {
98
- "text": "Febrero"
99
- },
100
- {
101
- "text": "75€",
102
- "classes": "lg:text-right"
103
- },
104
- {
105
- "text": "55€",
106
- "classes": "lg:text-right"
107
- }
108
- ],
109
- [
110
- {
111
- "text": "Marzo"
112
- },
113
- {
114
- "text": "165€",
115
- "classes": "lg:text-right"
116
- },
117
- {
118
- "text": "125€",
119
- "classes": "lg:text-right"
120
- }
121
- ]
122
- ],
123
- "foot": [
124
- {
125
- "text": "Suma",
126
- "classes": "uppercase"
127
- },
128
- {
129
- "text": "325€",
130
- "classes": "lg:text-right"
131
- },
132
- {
133
- "text": "275€",
134
- "classes": "lg:text-right"
135
- }
136
- ]
137
- }
138
- },
139
- {
140
- "name": "tabla con caption visible",
141
- "description": "Este ejemplo con caption visible se considera tabla compleja a nivel de accesibilidad. Así que tendría que tener una descripción con un details asociado a la tabla con el atributo aria-describedby.",
142
- "data": {
143
- "caption": "Caption 1: Meses y pagos",
144
- "captionClasses": "mb-base font-bold text-left text-lg",
145
- "firstCellIsHeader": true,
146
- "head": [
147
- {
148
- "text": "Mes de pago"
149
- },
150
- {
151
- "text": "Primer pago",
152
- "classes": "lg:text-right"
153
- },
154
- {
155
- "text": "Segundo pago",
156
- "classes": "lg:text-right"
157
- }
158
- ],
159
- "rows": [
160
- [
161
- {
162
- "text": "Enero"
163
- },
164
- {
165
- "text": "85€",
166
- "classes": "lg:text-right"
167
- },
168
- {
169
- "text": "95€",
170
- "classes": "lg:text-right"
171
- }
172
- ],
173
- [
174
- {
175
- "text": "Febrero"
176
- },
177
- {
178
- "text": "75€",
179
- "classes": "lg:text-right"
180
- },
181
- {
182
- "text": "55€",
183
- "classes": "lg:text-right"
184
- }
185
- ],
186
- [
187
- {
188
- "text": "Marzo"
189
- },
190
- {
191
- "text": "165€",
192
- "classes": "lg:text-right"
193
- },
194
- {
195
- "text": "125€",
196
- "classes": "lg:text-right"
197
- }
198
- ]
199
- ]
200
- }
201
- },
202
- {
203
- "name": "tabla con wrapper",
204
- "description": "Usa el parámetro <code>wrapper</code> para rodear la tabla con un <code>&lt;div&gt;</code> y poder añadir clases, normalmente para hacer scroll horizontal en la tabla en anchuras pequeñas. Por accesibilidad, parámetro wrapper necesitará los atributos: tabindex=0, role=section y un aria-label o aria-labelledby.",
205
- "data": {
206
- "caption": "Caption 1: Meses y pagos",
207
- "captionClasses": "sticky left-0 top-0 w-0 mb-base font-bold text-left text-lg lg:whitespace-nowrap",
208
- "firstCellIsHeader": true,
209
- "head": [
210
- {
211
- "text": "Mes de pago",
212
- "classes": "lg:whitespace-nowrap"
213
- },
214
- {
215
- "text": "Primer pago",
216
- "classes": "lg:whitespace-nowrap lg:text-right"
217
- },
218
- {
219
- "text": "Segundo pago",
220
- "classes": "lg:whitespace-nowrap lg:text-right"
221
- },
222
- {
223
- "text": "Rate for A",
224
- "classes": "lg:whitespace-nowrap lg:text-right"
225
- },
226
- {
227
- "text": "Rate for B",
228
- "classes": "lg:whitespace-nowrap lg:text-right"
229
- },
230
- {
231
- "text": "Rate for C",
232
- "classes": "lg:whitespace-nowrap lg:text-right"
233
- },
234
- {
235
- "text": "Rate for D",
236
- "classes": "lg:whitespace-nowrap lg:text-right"
237
- },
238
- {
239
- "text": "Rate for E",
240
- "classes": "lg:whitespace-nowrap lg:text-right"
241
- },
242
- {
243
- "text": "Rate for F",
244
- "classes": "lg:whitespace-nowrap lg:text-right"
245
- },
246
- {
247
- "text": "Rate for G",
248
- "classes": "lg:whitespace-nowrap lg:text-right"
249
- },
250
- {
251
- "text": "Rate for H",
252
- "classes": "lg:whitespace-nowrap lg:text-right"
253
- }
254
- ],
255
- "rows": [
256
- [
257
- {
258
- "text": "Enero"
259
- },
260
- {
261
- "text": "85€",
262
- "classes": "lg:text-right"
263
- },
264
- {
265
- "text": "95€",
266
- "classes": "lg:text-right"
267
- },
268
- {
269
- "text": "85€",
270
- "classes": "lg:text-right"
271
- },
272
- {
273
- "text": "95€",
274
- "classes": "lg:text-right"
275
- },
276
- {
277
- "text": "85€",
278
- "classes": "lg:text-right"
279
- },
280
- {
281
- "text": "95€",
282
- "classes": "lg:text-right"
283
- },
284
- {
285
- "text": "85€",
286
- "classes": "lg:text-right"
287
- },
288
- {
289
- "text": "95€",
290
- "classes": "lg:text-right"
291
- },
292
- {
293
- "text": "85€",
294
- "classes": "lg:text-right"
295
- },
296
- {
297
- "text": "95€",
298
- "classes": "lg:text-right"
299
- }
300
- ],
301
- [
302
- {
303
- "text": "Febrero"
304
- },
305
- {
306
- "text": "75€",
307
- "classes": "lg:text-right"
308
- },
309
- {
310
- "text": "55€",
311
- "classes": "lg:text-right"
312
- },
313
- {
314
- "text": "85€",
315
- "classes": "lg:text-right"
316
- },
317
- {
318
- "text": "95€",
319
- "classes": "lg:text-right"
320
- },
321
- {
322
- "text": "85€",
323
- "classes": "lg:text-right"
324
- },
325
- {
326
- "text": "95€",
327
- "classes": "lg:text-right"
328
- },
329
- {
330
- "text": "85€",
331
- "classes": "lg:text-right"
332
- },
333
- {
334
- "text": "95€",
335
- "classes": "lg:text-right"
336
- },
337
- {
338
- "text": "85€",
339
- "classes": "lg:text-right"
340
- },
341
- {
342
- "text": "95€",
343
- "classes": "lg:text-right"
344
- }
345
- ],
346
- [
347
- {
348
- "text": "Marzo"
349
- },
350
- {
351
- "text": "165€",
352
- "classes": "lg:text-right"
353
- },
354
- {
355
- "text": "125€",
356
- "classes": "lg:text-right"
357
- },
358
- {
359
- "text": "85€",
360
- "classes": "lg:text-right"
361
- },
362
- {
363
- "text": "95€",
364
- "classes": "lg:text-right"
365
- },
366
- {
367
- "text": "85€",
368
- "classes": "lg:text-right"
369
- },
370
- {
371
- "text": "95€",
372
- "classes": "lg:text-right"
373
- },
374
- {
375
- "text": "85€",
376
- "classes": "lg:text-right"
377
- },
378
- {
379
- "text": "95€",
380
- "classes": "lg:text-right"
381
- },
382
- {
383
- "text": "85€",
384
- "classes": "lg:text-right"
385
- },
386
- {
387
- "text": "95€",
388
- "classes": "lg:text-right"
389
- }
390
- ]
391
- ],
392
- "wrapper": {
393
- "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
394
- "attributes": {
395
- "tabindex": "0",
396
- "role": "region",
397
- "aria-label": "Tabla con scroll del ejemplo Tabla con wrapper"
398
- }
399
- }
400
- }
401
- },
402
- {
403
- "name": "tabla no responsive",
404
- "description": "Usa la clase modificadora <code>.c-table--no-responsive</code> junto al parámetro <code>wrapper</code> para tablas que usen rowspan o colspan o tablas que no queremos que muestren sus celdas apiladas en móvil.",
405
- "data": {
406
- "classes": "c-table--no-responsive w-full",
407
- "caption": "Caption 1: Meses y pagos",
408
- "captionClasses": "mb-base font-bold text-left text-lg",
409
- "firstCellIsHeader": true,
410
- "head": [
411
- {
412
- "text": "Mes de pago",
413
- "classes": "lg:whitespace-nowrap"
414
- },
415
- {
416
- "text": "Primer pago",
417
- "classes": "lg:whitespace-nowrap lg:text-right"
418
- },
419
- {
420
- "text": "Segundo pago",
421
- "classes": "lg:whitespace-nowrap lg:text-right"
422
- }
423
- ],
424
- "rows": [
425
- [
426
- {
427
- "text": "Enero"
428
- },
429
- {
430
- "text": "85€",
431
- "classes": "text-center",
432
- "rowspan": 2,
433
- "colspan": 2
434
- }
435
- ],
436
- [
437
- {
438
- "text": "Febrero"
439
- }
440
- ],
441
- [
442
- {
443
- "text": "Marzo"
444
- },
445
- {
446
- "text": "165€",
447
- "classes": "lg:text-right"
448
- },
449
- {
450
- "text": "125€",
451
- "classes": "lg:text-right"
452
- }
453
- ]
454
- ],
455
- "wrapper": {
456
- "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
457
- "attributes": {
458
- "tabindex": "0",
459
- "role": "region",
460
- "aria-label": "Tabla con scroll del ejemplo Tabla no responsive"
461
- }
462
- }
463
- }
464
- },
465
- {
466
- "name": "tabla con columnas sticky",
467
- "description": "En este ejemplo la primera y última columna se mantienen fijas y el resto hacen scroll horizontal si la anchura es pequeña.",
468
- "data": {
469
- "caption": "Caption 1: Meses y pagos",
470
- "captionClasses": "sticky top-0 left-0 w-0 mb-base font-bold text-left text-lg",
471
- "firstCellIsHeader": true,
472
- "head": [
473
- {
474
- "text": "Mes de pago",
475
- "classes": "lg:whitespace-nowrap sticky left-0 w-60 bg-white"
476
- },
477
- {
478
- "text": "Primer pago",
479
- "classes": "lg:whitespace-nowrap lg:text-right"
480
- },
481
- {
482
- "text": "Segundo pago",
483
- "classes": "lg:whitespace-nowrap lg:text-right"
484
- },
485
- {
486
- "text": "Rate for A",
487
- "classes": "lg:whitespace-nowrap lg:text-right"
488
- },
489
- {
490
- "text": "Rate for B",
491
- "classes": "lg:whitespace-nowrap lg:text-right"
492
- },
493
- {
494
- "text": "Rate for C",
495
- "classes": "lg:whitespace-nowrap lg:text-right"
496
- },
497
- {
498
- "text": "Rate for D",
499
- "classes": "lg:whitespace-nowrap lg:text-right"
500
- },
501
- {
502
- "text": "Rate for E",
503
- "classes": "lg:whitespace-nowrap lg:text-right"
504
- },
505
- {
506
- "text": "Rate for F",
507
- "classes": "lg:whitespace-nowrap lg:text-right"
508
- },
509
- {
510
- "text": "Rate for G",
511
- "classes": "lg:whitespace-nowrap lg:text-right"
512
- },
513
- {
514
- "text": "Rate for H",
515
- "classes": "lg:whitespace-nowrap lg:text-right sticky right-0 w-60 bg-white"
516
- }
517
- ],
518
- "rows": [
519
- [
520
- {
521
- "text": "Enero",
522
- "classes": "sticky left-0 w-60 bg-white"
523
- },
524
- {
525
- "text": "85€",
526
- "classes": "lg:text-right"
527
- },
528
- {
529
- "text": "95€",
530
- "classes": "lg:text-right"
531
- },
532
- {
533
- "text": "85€",
534
- "classes": "lg:text-right"
535
- },
536
- {
537
- "text": "95€",
538
- "classes": "lg:text-right"
539
- },
540
- {
541
- "text": "85€",
542
- "classes": "lg:text-right"
543
- },
544
- {
545
- "text": "95€",
546
- "classes": "lg:text-right"
547
- },
548
- {
549
- "text": "85€",
550
- "classes": "lg:text-right"
551
- },
552
- {
553
- "text": "95€",
554
- "classes": "lg:text-right"
555
- },
556
- {
557
- "text": "85€",
558
- "classes": "lg:text-right"
559
- },
560
- {
561
- "text": "95€",
562
- "classes": "lg:text-right sticky right-0 w-60 bg-white"
563
- }
564
- ],
565
- [
566
- {
567
- "text": "Febrero",
568
- "classes": "sticky left-0 w-60 bg-white"
569
- },
570
- {
571
- "text": "75€",
572
- "classes": "lg:text-right"
573
- },
574
- {
575
- "text": "55€",
576
- "classes": "lg:text-right"
577
- },
578
- {
579
- "text": "85€",
580
- "classes": "lg:text-right"
581
- },
582
- {
583
- "text": "95€",
584
- "classes": "lg:text-right"
585
- },
586
- {
587
- "text": "85€",
588
- "classes": "lg:text-right"
589
- },
590
- {
591
- "text": "95€",
592
- "classes": "lg:text-right"
593
- },
594
- {
595
- "text": "85€",
596
- "classes": "lg:text-right"
597
- },
598
- {
599
- "text": "95€",
600
- "classes": "lg:text-right"
601
- },
602
- {
603
- "text": "85€",
604
- "classes": "lg:text-right"
605
- },
606
- {
607
- "text": "95€",
608
- "classes": "lg:text-right sticky right-0 w-60 bg-white"
609
- }
610
- ],
611
- [
612
- {
613
- "text": "Marzo",
614
- "classes": "sticky left-0 w-60 bg-white"
615
- },
616
- {
617
- "text": "165€",
618
- "classes": "lg:text-right"
619
- },
620
- {
621
- "text": "125€",
622
- "classes": "lg:text-right"
623
- },
624
- {
625
- "text": "85€",
626
- "classes": "lg:text-right"
627
- },
628
- {
629
- "text": "95€",
630
- "classes": "lg:text-right"
631
- },
632
- {
633
- "text": "85€",
634
- "classes": "lg:text-right"
635
- },
636
- {
637
- "text": "95€",
638
- "classes": "lg:text-right"
639
- },
640
- {
641
- "text": "85€",
642
- "classes": "lg:text-right"
643
- },
644
- {
645
- "text": "95€",
646
- "classes": "lg:text-right"
647
- },
648
- {
649
- "text": "85€",
650
- "classes": "lg:text-right"
651
- },
652
- {
653
- "text": "95€",
654
- "classes": "lg:text-right sticky right-0 w-60 bg-white"
655
- }
656
- ]
657
- ],
658
- "wrapper": {
659
- "classes": "overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
660
- "attributes": {
661
- "tabindex": "0",
662
- "role": "region",
663
- "aria-label": "Tabla con scroll del ejemplo Tabla con columnas sticky"
664
- }
665
- },
666
- "classes": "relative lg:whitespace-nowrap"
667
- }
668
- }
1
+ {% set exampleComponent = "table" %}
2
+ {% set examples = [
3
+ {
4
+ "name": "tabla por defecto",
5
+ "data": {
6
+ "caption": "Caption de la tabla",
7
+ "captionClasses": "sr-only mb-base font-bold text-left text-lg",
8
+ "head": [
9
+ {
10
+ "text": "Mes de pago"
11
+ },
12
+ {
13
+ "text": "Primer pago",
14
+ "classes": "lg:text-right"
15
+ },
16
+ {
17
+ "text": "Segundo pago",
18
+ "classes": "lg:text-right"
19
+ }
20
+ ],
21
+ "rows": [
22
+ [
23
+ {
24
+ "text": "Enero"
25
+ },
26
+ {
27
+ "text": "85€",
28
+ "classes": "lg:text-right"
29
+ },
30
+ {
31
+ "text": "95€",
32
+ "classes": "lg:text-right"
33
+ }
34
+ ],
35
+ [
36
+ {
37
+ "text": "Febrero"
38
+ },
39
+ {
40
+ "text": "75€",
41
+ "classes": "lg:text-right"
42
+ },
43
+ {
44
+ "text": "55€",
45
+ "classes": "lg:text-right"
46
+ }
47
+ ],
48
+ [
49
+ {
50
+ "text": "Marzo"
51
+ },
52
+ {
53
+ "text": "165€",
54
+ "classes": "lg:text-right"
55
+ },
56
+ {
57
+ "text": "125€",
58
+ "classes": "lg:text-right"
59
+ }
60
+ ]
61
+ ]
62
+ }
63
+ },
64
+ {
65
+ "name": "tabla con tfoot",
66
+ "data": {
67
+ "caption": "Caption de la tabla",
68
+ "captionClasses": "sr-only mb-base font-bold text-left text-lg",
69
+ "head": [
70
+ {
71
+ "text": "Mes de pago"
72
+ },
73
+ {
74
+ "text": "Primer pago",
75
+ "classes": "lg:text-right"
76
+ },
77
+ {
78
+ "text": "Segundo pago",
79
+ "classes": "lg:text-right"
80
+ }
81
+ ],
82
+ "rows": [
83
+ [
84
+ {
85
+ "text": "Enero"
86
+ },
87
+ {
88
+ "text": "85€",
89
+ "classes": "lg:text-right"
90
+ },
91
+ {
92
+ "text": "95€",
93
+ "classes": "lg:text-right"
94
+ }
95
+ ],
96
+ [
97
+ {
98
+ "text": "Febrero"
99
+ },
100
+ {
101
+ "text": "75€",
102
+ "classes": "lg:text-right"
103
+ },
104
+ {
105
+ "text": "55€",
106
+ "classes": "lg:text-right"
107
+ }
108
+ ],
109
+ [
110
+ {
111
+ "text": "Marzo"
112
+ },
113
+ {
114
+ "text": "165€",
115
+ "classes": "lg:text-right"
116
+ },
117
+ {
118
+ "text": "125€",
119
+ "classes": "lg:text-right"
120
+ }
121
+ ]
122
+ ],
123
+ "foot": [
124
+ {
125
+ "text": "Suma",
126
+ "classes": "uppercase"
127
+ },
128
+ {
129
+ "text": "325€",
130
+ "classes": "lg:text-right"
131
+ },
132
+ {
133
+ "text": "275€",
134
+ "classes": "lg:text-right"
135
+ }
136
+ ]
137
+ }
138
+ },
139
+ {
140
+ "name": "tabla con caption visible",
141
+ "description": "Este ejemplo con caption visible se considera tabla compleja a nivel de accesibilidad. Así que tendría que tener una descripción con un details asociado a la tabla con el atributo aria-describedby.",
142
+ "data": {
143
+ "caption": "Caption 1: Meses y pagos",
144
+ "captionClasses": "mb-base font-bold text-left text-lg",
145
+ "firstCellIsHeader": true,
146
+ "head": [
147
+ {
148
+ "text": "Mes de pago"
149
+ },
150
+ {
151
+ "text": "Primer pago",
152
+ "classes": "lg:text-right"
153
+ },
154
+ {
155
+ "text": "Segundo pago",
156
+ "classes": "lg:text-right"
157
+ }
158
+ ],
159
+ "rows": [
160
+ [
161
+ {
162
+ "text": "Enero"
163
+ },
164
+ {
165
+ "text": "85€",
166
+ "classes": "lg:text-right"
167
+ },
168
+ {
169
+ "text": "95€",
170
+ "classes": "lg:text-right"
171
+ }
172
+ ],
173
+ [
174
+ {
175
+ "text": "Febrero"
176
+ },
177
+ {
178
+ "text": "75€",
179
+ "classes": "lg:text-right"
180
+ },
181
+ {
182
+ "text": "55€",
183
+ "classes": "lg:text-right"
184
+ }
185
+ ],
186
+ [
187
+ {
188
+ "text": "Marzo"
189
+ },
190
+ {
191
+ "text": "165€",
192
+ "classes": "lg:text-right"
193
+ },
194
+ {
195
+ "text": "125€",
196
+ "classes": "lg:text-right"
197
+ }
198
+ ]
199
+ ]
200
+ }
201
+ },
202
+ {
203
+ "name": "tabla con wrapper",
204
+ "description": "Usa el parámetro <code>wrapper</code> para rodear la tabla con un <code>&lt;div&gt;</code> y poder añadir clases, normalmente para hacer scroll horizontal en la tabla en anchuras pequeñas. Por accesibilidad, parámetro wrapper necesitará los atributos: tabindex=0, role=section y un aria-label o aria-labelledby.",
205
+ "data": {
206
+ "caption": "Caption 1: Meses y pagos",
207
+ "captionClasses": "sticky left-0 top-0 w-0 mb-base font-bold text-left text-lg lg:whitespace-nowrap",
208
+ "firstCellIsHeader": true,
209
+ "head": [
210
+ {
211
+ "text": "Mes de pago",
212
+ "classes": "lg:whitespace-nowrap"
213
+ },
214
+ {
215
+ "text": "Primer pago",
216
+ "classes": "lg:whitespace-nowrap lg:text-right"
217
+ },
218
+ {
219
+ "text": "Segundo pago",
220
+ "classes": "lg:whitespace-nowrap lg:text-right"
221
+ },
222
+ {
223
+ "text": "Rate for A",
224
+ "classes": "lg:whitespace-nowrap lg:text-right"
225
+ },
226
+ {
227
+ "text": "Rate for B",
228
+ "classes": "lg:whitespace-nowrap lg:text-right"
229
+ },
230
+ {
231
+ "text": "Rate for C",
232
+ "classes": "lg:whitespace-nowrap lg:text-right"
233
+ },
234
+ {
235
+ "text": "Rate for D",
236
+ "classes": "lg:whitespace-nowrap lg:text-right"
237
+ },
238
+ {
239
+ "text": "Rate for E",
240
+ "classes": "lg:whitespace-nowrap lg:text-right"
241
+ },
242
+ {
243
+ "text": "Rate for F",
244
+ "classes": "lg:whitespace-nowrap lg:text-right"
245
+ },
246
+ {
247
+ "text": "Rate for G",
248
+ "classes": "lg:whitespace-nowrap lg:text-right"
249
+ },
250
+ {
251
+ "text": "Rate for H",
252
+ "classes": "lg:whitespace-nowrap lg:text-right"
253
+ }
254
+ ],
255
+ "rows": [
256
+ [
257
+ {
258
+ "text": "Enero"
259
+ },
260
+ {
261
+ "text": "85€",
262
+ "classes": "lg:text-right"
263
+ },
264
+ {
265
+ "text": "95€",
266
+ "classes": "lg:text-right"
267
+ },
268
+ {
269
+ "text": "85€",
270
+ "classes": "lg:text-right"
271
+ },
272
+ {
273
+ "text": "95€",
274
+ "classes": "lg:text-right"
275
+ },
276
+ {
277
+ "text": "85€",
278
+ "classes": "lg:text-right"
279
+ },
280
+ {
281
+ "text": "95€",
282
+ "classes": "lg:text-right"
283
+ },
284
+ {
285
+ "text": "85€",
286
+ "classes": "lg:text-right"
287
+ },
288
+ {
289
+ "text": "95€",
290
+ "classes": "lg:text-right"
291
+ },
292
+ {
293
+ "text": "85€",
294
+ "classes": "lg:text-right"
295
+ },
296
+ {
297
+ "text": "95€",
298
+ "classes": "lg:text-right"
299
+ }
300
+ ],
301
+ [
302
+ {
303
+ "text": "Febrero"
304
+ },
305
+ {
306
+ "text": "75€",
307
+ "classes": "lg:text-right"
308
+ },
309
+ {
310
+ "text": "55€",
311
+ "classes": "lg:text-right"
312
+ },
313
+ {
314
+ "text": "85€",
315
+ "classes": "lg:text-right"
316
+ },
317
+ {
318
+ "text": "95€",
319
+ "classes": "lg:text-right"
320
+ },
321
+ {
322
+ "text": "85€",
323
+ "classes": "lg:text-right"
324
+ },
325
+ {
326
+ "text": "95€",
327
+ "classes": "lg:text-right"
328
+ },
329
+ {
330
+ "text": "85€",
331
+ "classes": "lg:text-right"
332
+ },
333
+ {
334
+ "text": "95€",
335
+ "classes": "lg:text-right"
336
+ },
337
+ {
338
+ "text": "85€",
339
+ "classes": "lg:text-right"
340
+ },
341
+ {
342
+ "text": "95€",
343
+ "classes": "lg:text-right"
344
+ }
345
+ ],
346
+ [
347
+ {
348
+ "text": "Marzo"
349
+ },
350
+ {
351
+ "text": "165€",
352
+ "classes": "lg:text-right"
353
+ },
354
+ {
355
+ "text": "125€",
356
+ "classes": "lg:text-right"
357
+ },
358
+ {
359
+ "text": "85€",
360
+ "classes": "lg:text-right"
361
+ },
362
+ {
363
+ "text": "95€",
364
+ "classes": "lg:text-right"
365
+ },
366
+ {
367
+ "text": "85€",
368
+ "classes": "lg:text-right"
369
+ },
370
+ {
371
+ "text": "95€",
372
+ "classes": "lg:text-right"
373
+ },
374
+ {
375
+ "text": "85€",
376
+ "classes": "lg:text-right"
377
+ },
378
+ {
379
+ "text": "95€",
380
+ "classes": "lg:text-right"
381
+ },
382
+ {
383
+ "text": "85€",
384
+ "classes": "lg:text-right"
385
+ },
386
+ {
387
+ "text": "95€",
388
+ "classes": "lg:text-right"
389
+ }
390
+ ]
391
+ ],
392
+ "wrapper": {
393
+ "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
394
+ "attributes": {
395
+ "tabindex": "0",
396
+ "role": "region",
397
+ "aria-label": "Tabla con scroll del ejemplo Tabla con wrapper"
398
+ }
399
+ }
400
+ }
401
+ },
402
+ {
403
+ "name": "tabla no responsive",
404
+ "description": "Usa la clase modificadora <code>.c-table--no-responsive</code> junto al parámetro <code>wrapper</code> para tablas que usen rowspan o colspan o tablas que no queremos que muestren sus celdas apiladas en móvil.",
405
+ "data": {
406
+ "classes": "c-table--no-responsive w-full",
407
+ "caption": "Caption 1: Meses y pagos",
408
+ "captionClasses": "mb-base font-bold text-left text-lg",
409
+ "firstCellIsHeader": true,
410
+ "head": [
411
+ {
412
+ "text": "Mes de pago",
413
+ "classes": "lg:whitespace-nowrap"
414
+ },
415
+ {
416
+ "text": "Primer pago",
417
+ "classes": "lg:whitespace-nowrap lg:text-right"
418
+ },
419
+ {
420
+ "text": "Segundo pago",
421
+ "classes": "lg:whitespace-nowrap lg:text-right"
422
+ }
423
+ ],
424
+ "rows": [
425
+ [
426
+ {
427
+ "text": "Enero"
428
+ },
429
+ {
430
+ "text": "85€",
431
+ "classes": "text-center",
432
+ "rowspan": 2,
433
+ "colspan": 2
434
+ }
435
+ ],
436
+ [
437
+ {
438
+ "text": "Febrero"
439
+ }
440
+ ],
441
+ [
442
+ {
443
+ "text": "Marzo"
444
+ },
445
+ {
446
+ "text": "165€",
447
+ "classes": "lg:text-right"
448
+ },
449
+ {
450
+ "text": "125€",
451
+ "classes": "lg:text-right"
452
+ }
453
+ ]
454
+ ],
455
+ "wrapper": {
456
+ "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
457
+ "attributes": {
458
+ "tabindex": "0",
459
+ "role": "region",
460
+ "aria-label": "Tabla con scroll del ejemplo Tabla no responsive"
461
+ }
462
+ }
463
+ }
464
+ },
465
+ {
466
+ "name": "tabla con columnas sticky",
467
+ "description": "En este ejemplo la primera y última columna se mantienen fijas y el resto hacen scroll horizontal si la anchura es pequeña.",
468
+ "data": {
469
+ "caption": "Caption 1: Meses y pagos",
470
+ "captionClasses": "sticky top-0 left-0 w-0 mb-base font-bold text-left text-lg",
471
+ "firstCellIsHeader": true,
472
+ "head": [
473
+ {
474
+ "text": "Mes de pago",
475
+ "classes": "lg:whitespace-nowrap sticky left-0 w-60 bg-white"
476
+ },
477
+ {
478
+ "text": "Primer pago",
479
+ "classes": "lg:whitespace-nowrap lg:text-right"
480
+ },
481
+ {
482
+ "text": "Segundo pago",
483
+ "classes": "lg:whitespace-nowrap lg:text-right"
484
+ },
485
+ {
486
+ "text": "Rate for A",
487
+ "classes": "lg:whitespace-nowrap lg:text-right"
488
+ },
489
+ {
490
+ "text": "Rate for B",
491
+ "classes": "lg:whitespace-nowrap lg:text-right"
492
+ },
493
+ {
494
+ "text": "Rate for C",
495
+ "classes": "lg:whitespace-nowrap lg:text-right"
496
+ },
497
+ {
498
+ "text": "Rate for D",
499
+ "classes": "lg:whitespace-nowrap lg:text-right"
500
+ },
501
+ {
502
+ "text": "Rate for E",
503
+ "classes": "lg:whitespace-nowrap lg:text-right"
504
+ },
505
+ {
506
+ "text": "Rate for F",
507
+ "classes": "lg:whitespace-nowrap lg:text-right"
508
+ },
509
+ {
510
+ "text": "Rate for G",
511
+ "classes": "lg:whitespace-nowrap lg:text-right"
512
+ },
513
+ {
514
+ "text": "Rate for H",
515
+ "classes": "lg:whitespace-nowrap lg:text-right sticky right-0 w-60 bg-white"
516
+ }
517
+ ],
518
+ "rows": [
519
+ [
520
+ {
521
+ "text": "Enero",
522
+ "classes": "sticky left-0 w-60 bg-white"
523
+ },
524
+ {
525
+ "text": "85€",
526
+ "classes": "lg:text-right"
527
+ },
528
+ {
529
+ "text": "95€",
530
+ "classes": "lg:text-right"
531
+ },
532
+ {
533
+ "text": "85€",
534
+ "classes": "lg:text-right"
535
+ },
536
+ {
537
+ "text": "95€",
538
+ "classes": "lg:text-right"
539
+ },
540
+ {
541
+ "text": "85€",
542
+ "classes": "lg:text-right"
543
+ },
544
+ {
545
+ "text": "95€",
546
+ "classes": "lg:text-right"
547
+ },
548
+ {
549
+ "text": "85€",
550
+ "classes": "lg:text-right"
551
+ },
552
+ {
553
+ "text": "95€",
554
+ "classes": "lg:text-right"
555
+ },
556
+ {
557
+ "text": "85€",
558
+ "classes": "lg:text-right"
559
+ },
560
+ {
561
+ "text": "95€",
562
+ "classes": "lg:text-right sticky right-0 w-60 bg-white"
563
+ }
564
+ ],
565
+ [
566
+ {
567
+ "text": "Febrero",
568
+ "classes": "sticky left-0 w-60 bg-white"
569
+ },
570
+ {
571
+ "text": "75€",
572
+ "classes": "lg:text-right"
573
+ },
574
+ {
575
+ "text": "55€",
576
+ "classes": "lg:text-right"
577
+ },
578
+ {
579
+ "text": "85€",
580
+ "classes": "lg:text-right"
581
+ },
582
+ {
583
+ "text": "95€",
584
+ "classes": "lg:text-right"
585
+ },
586
+ {
587
+ "text": "85€",
588
+ "classes": "lg:text-right"
589
+ },
590
+ {
591
+ "text": "95€",
592
+ "classes": "lg:text-right"
593
+ },
594
+ {
595
+ "text": "85€",
596
+ "classes": "lg:text-right"
597
+ },
598
+ {
599
+ "text": "95€",
600
+ "classes": "lg:text-right"
601
+ },
602
+ {
603
+ "text": "85€",
604
+ "classes": "lg:text-right"
605
+ },
606
+ {
607
+ "text": "95€",
608
+ "classes": "lg:text-right sticky right-0 w-60 bg-white"
609
+ }
610
+ ],
611
+ [
612
+ {
613
+ "text": "Marzo",
614
+ "classes": "sticky left-0 w-60 bg-white"
615
+ },
616
+ {
617
+ "text": "165€",
618
+ "classes": "lg:text-right"
619
+ },
620
+ {
621
+ "text": "125€",
622
+ "classes": "lg:text-right"
623
+ },
624
+ {
625
+ "text": "85€",
626
+ "classes": "lg:text-right"
627
+ },
628
+ {
629
+ "text": "95€",
630
+ "classes": "lg:text-right"
631
+ },
632
+ {
633
+ "text": "85€",
634
+ "classes": "lg:text-right"
635
+ },
636
+ {
637
+ "text": "95€",
638
+ "classes": "lg:text-right"
639
+ },
640
+ {
641
+ "text": "85€",
642
+ "classes": "lg:text-right"
643
+ },
644
+ {
645
+ "text": "95€",
646
+ "classes": "lg:text-right"
647
+ },
648
+ {
649
+ "text": "85€",
650
+ "classes": "lg:text-right"
651
+ },
652
+ {
653
+ "text": "95€",
654
+ "classes": "lg:text-right sticky right-0 w-60 bg-white"
655
+ }
656
+ ]
657
+ ],
658
+ "wrapper": {
659
+ "classes": "overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
660
+ "attributes": {
661
+ "tabindex": "0",
662
+ "role": "region",
663
+ "aria-label": "Tabla con scroll del ejemplo Tabla con columnas sticky"
664
+ }
665
+ },
666
+ "classes": "relative lg:whitespace-nowrap"
667
+ }
668
+ }
669
669
  ] %}