desy-html 16.0.3 → 17.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 (531) hide show
  1. package/.node-version +1 -1
  2. package/.nvmrc +1 -1
  3. package/AGENTS.md +207 -181
  4. package/README.md +203 -203
  5. package/TESTING_PLAN.md +379 -376
  6. package/branding/BRANDING.md +398 -395
  7. package/branding/branding.config.js +76 -76
  8. package/branding/branding.config.yourorganization.js +72 -65
  9. package/branding/logos/aragon-compact.svg +1 -1
  10. package/branding/logos/aragon-expanded.svg +1 -1
  11. package/branding/logos/aragon-mini.svg +1 -1
  12. package/branding/logos/favicon.svg +1 -1
  13. package/branding/logos/yourlogo-compact.svg +13 -13
  14. package/branding/logos/yourlogo-expanded.svg +17 -17
  15. package/branding/logos/yourlogo-mini.svg +17 -17
  16. package/branding/logos/yourorganization-apple-touch-icon.png +0 -0
  17. package/branding/logos/yourorganization-favicon.ico +0 -0
  18. package/branding/logos/yourorganization-favicon.svg +13 -0
  19. package/branding/vite-branding-plugin.js +221 -155
  20. package/docs/_global.content-placeholder.njk +7 -7
  21. package/docs/_global.foot.njk +11 -11
  22. package/docs/_global.head.njk +42 -43
  23. package/docs/_include.template-header.njk +391 -386
  24. package/docs/_macro.component-example.njk +6 -6
  25. package/docs/_macro.example-render.njk +350 -346
  26. package/docs/_macro.load-component-params.njk +2 -2
  27. package/docs/_macro.load-component-template.njk +3 -3
  28. package/docs/_macro.render-caller.njk +3 -3
  29. package/docs/_macro.show-code-from-file.njk +57 -57
  30. package/docs/_macro.show-html-from-file.njk +42 -42
  31. package/docs/_template.default.njk +8 -8
  32. package/docs/_template.examples.njk +13 -13
  33. package/docs/catalogo.html +27 -27
  34. package/docs/componentes.html +187 -184
  35. package/docs/ds/_ds.example.accordion.njk +109 -109
  36. package/docs/ds/_ds.example.border.njk +39 -39
  37. package/docs/ds/_ds.example.botones-alert-sm.njk +264 -264
  38. package/docs/ds/_ds.example.botones-alert.njk +264 -264
  39. package/docs/ds/_ds.example.botones-default-sm.njk +264 -264
  40. package/docs/ds/_ds.example.botones-default.njk +258 -258
  41. package/docs/ds/_ds.example.botones-primary-lg.njk +264 -264
  42. package/docs/ds/_ds.example.botones-primary-sm.njk +264 -264
  43. package/docs/ds/_ds.example.botones-primary.njk +264 -264
  44. package/docs/ds/_ds.example.botones-transparent-sm.njk +264 -264
  45. package/docs/ds/_ds.example.botones-transparent.njk +264 -264
  46. package/docs/ds/_ds.example.breadcrumbs.njk +65 -65
  47. package/docs/ds/_ds.example.card.njk +198 -198
  48. package/docs/ds/_ds.example.checkboxes.njk +377 -377
  49. package/docs/ds/_ds.example.collapsible.njk +18 -18
  50. package/docs/ds/_ds.example.color-de-interaccion.njk +16 -16
  51. package/docs/ds/_ds.example.colores-cabecera.njk +15 -15
  52. package/docs/ds/_ds.example.colores-de-soporte.njk +82 -82
  53. package/docs/ds/_ds.example.colores-neutros.njk +26 -26
  54. package/docs/ds/_ds.example.combobox.njk +91 -0
  55. package/docs/ds/_ds.example.date-input.njk +363 -363
  56. package/docs/ds/_ds.example.description-list.njk +289 -289
  57. package/docs/ds/_ds.example.details.njk +23 -23
  58. package/docs/ds/_ds.example.dropdowns-default.njk +186 -186
  59. package/docs/ds/_ds.example.dropdowns-en-uso.njk +105 -105
  60. package/docs/ds/_ds.example.dropdowns-variaciones.njk +224 -224
  61. package/docs/ds/_ds.example.error-summary.njk +34 -34
  62. package/docs/ds/_ds.example.file-upload.njk +54 -54
  63. package/docs/ds/_ds.example.footer.njk +28 -28
  64. package/docs/ds/_ds.example.header-advanced.njk +70 -70
  65. package/docs/ds/_ds.example.header.njk +211 -211
  66. package/docs/ds/_ds.example.input-group.njk +242 -242
  67. package/docs/ds/_ds.example.input.njk +164 -164
  68. package/docs/ds/_ds.example.item.njk +176 -176
  69. package/docs/ds/_ds.example.layout-escritorio.njk +38 -38
  70. package/docs/ds/_ds.example.layout-movil.njk +14 -14
  71. package/docs/ds/_ds.example.layout-sidebar.njk +11 -11
  72. package/docs/ds/_ds.example.links-list.njk +170 -170
  73. package/docs/ds/_ds.example.listbox-default.njk +677 -677
  74. package/docs/ds/_ds.example.listbox-variaciones.njk +824 -824
  75. package/docs/ds/_ds.example.menu-horizontal.njk +66 -66
  76. package/docs/ds/_ds.example.menu-navigation.njk +493 -493
  77. package/docs/ds/_ds.example.menu-vertical.njk +129 -129
  78. package/docs/ds/_ds.example.menubar-en-uso.njk +244 -244
  79. package/docs/ds/_ds.example.menubar-variaciones.njk +785 -785
  80. package/docs/ds/_ds.example.modal.njk +210 -210
  81. package/docs/ds/_ds.example.nav.njk +158 -158
  82. package/docs/ds/_ds.example.notification.njk +122 -122
  83. package/docs/ds/_ds.example.pagination.njk +190 -190
  84. package/docs/ds/_ds.example.pills.njk +215 -215
  85. package/docs/ds/_ds.example.radios.njk +419 -419
  86. package/docs/ds/_ds.example.searchbar.njk +87 -87
  87. package/docs/ds/_ds.example.select.njk +390 -390
  88. package/docs/ds/_ds.example.status-item.njk +239 -239
  89. package/docs/ds/_ds.example.status.njk +47 -47
  90. package/docs/ds/_ds.example.table.njk +740 -740
  91. package/docs/ds/_ds.example.tabs.njk +136 -136
  92. package/docs/ds/_ds.example.textarea.njk +237 -237
  93. package/docs/ds/_ds.example.textos.njk +32 -32
  94. package/docs/ds/_ds.example.toggle.njk +75 -75
  95. package/docs/ds/_ds.example.tree.njk +456 -456
  96. package/docs/ds/_ds.example.treegrid.njk +810 -810
  97. package/docs/ds/_ds.example.typography.njk +225 -225
  98. package/docs/ds/_ds.macro.code-snippet.njk +32 -32
  99. package/docs/ds/_ds.macro.section-title.njk +2 -2
  100. package/docs/ds/_ds.macro.subsection-title.njk +2 -2
  101. package/docs/ds/_ds.section.avisos.njk +22 -22
  102. package/docs/ds/_ds.section.botones.njk +53 -53
  103. package/docs/ds/_ds.section.campo-y-area-de-texto.njk +19 -19
  104. package/docs/ds/_ds.section.color.njk +147 -147
  105. package/docs/ds/_ds.section.datos.njk +42 -42
  106. package/docs/ds/_ds.section.dropdowns.njk +23 -23
  107. package/docs/ds/_ds.section.espaciado.njk +296 -296
  108. package/docs/ds/_ds.section.forms.njk +73 -68
  109. package/docs/ds/_ds.section.informacion.njk +12 -12
  110. package/docs/ds/_ds.section.layout.njk +63 -63
  111. package/docs/ds/_ds.section.menubar.njk +18 -18
  112. package/docs/ds/_ds.section.mostrar-ocultar.njk +33 -33
  113. package/docs/ds/_ds.section.navigation.njk +57 -57
  114. package/docs/ds/_ds.section.textos.njk +287 -287
  115. package/docs/ds/_ds.section.typography.njk +28 -28
  116. package/docs/estilos.html +37 -37
  117. package/docs/examples-accordion-history.html +8 -8
  118. package/docs/examples-accordion.html +8 -8
  119. package/docs/examples-alert.html +8 -8
  120. package/docs/examples-breadcrumbs.html +8 -8
  121. package/docs/examples-button-loader.html +8 -8
  122. package/docs/examples-button.html +8 -8
  123. package/docs/examples-card.html +8 -8
  124. package/docs/examples-character-count.html +8 -8
  125. package/docs/examples-checkboxes.html +8 -8
  126. package/docs/examples-collapsible.html +8 -8
  127. package/docs/examples-combobox.html +8 -0
  128. package/docs/examples-date-input.html +8 -8
  129. package/docs/examples-datepicker.html +8 -8
  130. package/docs/examples-description-list.html +8 -8
  131. package/docs/examples-details.html +8 -8
  132. package/docs/examples-dialog.html +8 -8
  133. package/docs/examples-dropdown.html +8 -8
  134. package/docs/examples-error-message.html +8 -8
  135. package/docs/examples-error-summary.html +8 -8
  136. package/docs/examples-fieldset.html +8 -8
  137. package/docs/examples-file-upload.html +8 -8
  138. package/docs/examples-footer.html +8 -8
  139. package/docs/examples-header-advanced.html +8 -8
  140. package/docs/examples-header-mini.html +8 -8
  141. package/docs/examples-header.html +8 -8
  142. package/docs/examples-hint.html +8 -8
  143. package/docs/examples-input-group.html +8 -8
  144. package/docs/examples-input.html +8 -8
  145. package/docs/examples-item.html +8 -8
  146. package/docs/examples-label.html +8 -8
  147. package/docs/examples-links-list.html +8 -8
  148. package/docs/examples-listbox.html +8 -8
  149. package/docs/examples-media-object.html +8 -8
  150. package/docs/examples-menu-horizontal.html +8 -8
  151. package/docs/examples-menu-navigation.html +8 -8
  152. package/docs/examples-menu-vertical.html +8 -8
  153. package/docs/examples-menubar.html +8 -8
  154. package/docs/examples-modal.html +8 -8
  155. package/docs/examples-nav.html +8 -8
  156. package/docs/examples-notification.html +8 -8
  157. package/docs/examples-pagination.html +8 -8
  158. package/docs/examples-pill.html +8 -8
  159. package/docs/examples-radios.html +8 -8
  160. package/docs/examples-searchbar.html +8 -8
  161. package/docs/examples-select.html +8 -8
  162. package/docs/examples-skip-link.html +8 -8
  163. package/docs/examples-spinner.html +8 -8
  164. package/docs/examples-status-item.html +8 -8
  165. package/docs/examples-status.html +8 -8
  166. package/docs/examples-table-advanced.html +8 -8
  167. package/docs/examples-table.html +8 -8
  168. package/docs/examples-tabs.html +8 -8
  169. package/docs/examples-textarea.html +8 -8
  170. package/docs/examples-toggle.html +8 -8
  171. package/docs/examples-tooltip.html +8 -8
  172. package/docs/examples-tree.html +8 -8
  173. package/docs/examples-treegrid.html +8 -8
  174. package/docs/index.html +914 -902
  175. package/docs/pagina-accesibilidad.html +110 -110
  176. package/docs/pagina-mapa-web.html +137 -137
  177. package/docs/pagina-prueba.html +95 -95
  178. package/docs/plantilla-con-header-advanced.html +14 -14
  179. package/docs/plantilla-editar-con-cabecera-fija-y-sidebar-sticky.html +154 -154
  180. package/docs/plantilla-editar-con-cabecera-fija.html +17 -17
  181. package/docs/plantilla-logueado-con-cabecera-fija-headroom.html +15 -15
  182. package/docs/plantilla-logueado-con-cabecera-fija.html +15 -15
  183. package/docs/plantilla-logueado-con-selector-de-app-y-sidebar.html +164 -164
  184. package/docs/plantilla-logueado-con-selector-de-app-y-subheader.html +16 -16
  185. package/docs/plantilla-logueado-con-selector-de-app.html +14 -14
  186. package/docs/plantilla-logueado-con-titulo-de-app.html +14 -14
  187. package/docs/plantilla-sin-loguear.html +14 -14
  188. package/docs/plantillas.html +89 -89
  189. package/docs/spinner-plantilla-con-header-advanced.html +2 -2
  190. package/docs/spinner-plantilla-editar-con-cabecera-fija.html +4 -4
  191. package/docs/spinner-plantilla-logueado-con-cabecera-fija.html +2 -2
  192. package/docs/spinner-plantilla-logueado-con-selector-de-app-y-subheader.html +2 -2
  193. package/docs/spinner-plantilla-logueado-con-titulo-de-app.html +2 -2
  194. package/docs/spinner-plantilla-sin-loguear.html +18 -18
  195. package/docs/sprints/01-combobox-template.md +433 -0
  196. package/docs/sprints/02-combobox-styles.md +291 -0
  197. package/docs/sprints/03-combobox-javascript.md +589 -0
  198. package/docs/sprints/04-combobox-integration.md +386 -0
  199. package/docs/sprints/05-combobox-refinamiento-w3c.md +55 -0
  200. package/package.json +61 -58
  201. package/public/images/demo-icon.svg +9 -0
  202. package/replit.md +74 -74
  203. package/src/EUPL-1.2.txt +287 -287
  204. package/src/css/base.css +44 -44
  205. package/src/css/component.form-group.css +24 -24
  206. package/src/css/component.headroom.css +32 -32
  207. package/src/css/component.text.css +169 -169
  208. package/src/css/styles.css +247 -246
  209. package/src/js/aria/MenuHorizontal.js +65 -65
  210. package/src/js/aria/MenuNavigation.js +34 -2
  211. package/src/js/aria/MenuVertical.js +60 -60
  212. package/src/js/aria/Nav.js +60 -60
  213. package/src/js/aria/PopupMenuAction.js +30 -12
  214. package/src/js/aria/accordion.js +264 -264
  215. package/src/js/aria/checkBoxes.js +52 -52
  216. package/src/js/aria/collapsible.js +44 -44
  217. package/src/js/aria/combobox.js +584 -0
  218. package/src/js/aria/dataGrid.js +950 -950
  219. package/src/js/aria/linksList.js +42 -42
  220. package/src/js/aria/notification.js +56 -56
  221. package/src/js/aria/radioButton.js +50 -50
  222. package/src/js/aria/toggle.js +61 -61
  223. package/src/js/aria/treegrid.js +507 -507
  224. package/src/js/aria/utils.js +219 -219
  225. package/src/js/desy-html.js +860 -813
  226. package/src/js/headroom.min.js +6 -6
  227. package/src/js/index.js +74 -72
  228. package/src/main.js +2 -2
  229. package/src/templates/components/accordion/_examples.accordion.njk +482 -482
  230. package/src/templates/components/accordion/_macro.accordion.njk +3 -3
  231. package/src/templates/components/accordion/_template.accordion.njk +131 -131
  232. package/src/templates/components/accordion/params.accordion.yaml +125 -125
  233. package/src/templates/components/accordion-history/_examples.accordion-history.njk +521 -521
  234. package/src/templates/components/accordion-history/_macro.accordion-history.njk +3 -3
  235. package/src/templates/components/accordion-history/_template.accordion-history.njk +193 -193
  236. package/src/templates/components/accordion-history/params.accordion-history.yaml +129 -129
  237. package/src/templates/components/alert/_examples.alert.njk +91 -91
  238. package/src/templates/components/alert/_macro.alert.njk +3 -3
  239. package/src/templates/components/alert/_styles.alert.css +9 -9
  240. package/src/templates/components/alert/_template.alert.njk +16 -16
  241. package/src/templates/components/alert/params.alert.yaml +25 -25
  242. package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +464 -464
  243. package/src/templates/components/breadcrumbs/_macro.breadcrumbs.njk +3 -3
  244. package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css +81 -81
  245. package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +77 -77
  246. package/src/templates/components/breadcrumbs/params.breadcrumbs.yaml +44 -44
  247. package/src/templates/components/button/_examples.button.njk +518 -511
  248. package/src/templates/components/button/_macro.button.njk +3 -3
  249. package/src/templates/components/button/_styles.button.css +180 -180
  250. package/src/templates/components/button/_template.button.njk +49 -49
  251. package/src/templates/components/button/params.button.yaml +48 -48
  252. package/src/templates/components/button-loader/_examples.button-loader.njk +499 -492
  253. package/src/templates/components/button-loader/_macro.button-loader.njk +3 -3
  254. package/src/templates/components/button-loader/_styles.button-loader.css +194 -194
  255. package/src/templates/components/button-loader/_template.button-loader.njk +84 -84
  256. package/src/templates/components/button-loader/params.button-loader.yaml +74 -74
  257. package/src/templates/components/card/_examples.card.njk +381 -381
  258. package/src/templates/components/card/_macro.card.njk +3 -3
  259. package/src/templates/components/card/_template.card.njk +34 -34
  260. package/src/templates/components/card/params.card.yaml +112 -112
  261. package/src/templates/components/character-count/_examples.character-count.njk +195 -195
  262. package/src/templates/components/character-count/_macro.character-count.njk +5 -5
  263. package/src/templates/components/character-count/_template.character-count.njk +38 -38
  264. package/src/templates/components/character-count/params.character-count.yaml +77 -77
  265. package/src/templates/components/checkboxes/_examples.checkboxes.njk +835 -835
  266. package/src/templates/components/checkboxes/_macro.checkboxes.njk +3 -3
  267. package/src/templates/components/checkboxes/_styles.checkboxes.css +30 -30
  268. package/src/templates/components/checkboxes/_template.checkboxes.njk +137 -137
  269. package/src/templates/components/checkboxes/params.checkboxes.yaml +116 -116
  270. package/src/templates/components/collapsible/_examples.collapsible.njk +107 -107
  271. package/src/templates/components/collapsible/_macro.collapsible.njk +3 -3
  272. package/src/templates/components/collapsible/_styles.collapsible.css +35 -35
  273. package/src/templates/components/collapsible/_template.collapsible.njk +17 -17
  274. package/src/templates/components/collapsible/params.collapsible.yaml +48 -48
  275. package/src/templates/components/combobox/_examples.combobox.njk +440 -0
  276. package/src/templates/components/combobox/_macro.combobox.njk +3 -0
  277. package/src/templates/components/combobox/_styles.combobox.css +92 -0
  278. package/src/templates/components/combobox/_template.combobox.njk +97 -0
  279. package/src/templates/components/combobox/params.combobox.yaml +102 -0
  280. package/src/templates/components/date-input/_examples.date-input.njk +578 -578
  281. package/src/templates/components/date-input/_macro.date-input.njk +3 -3
  282. package/src/templates/components/date-input/_template.date-input.njk +125 -125
  283. package/src/templates/components/date-input/params.date-input.yaml +97 -97
  284. package/src/templates/components/datepicker/_examples.datepicker.njk +415 -415
  285. package/src/templates/components/datepicker/_macro.datepicker.njk +3 -3
  286. package/src/templates/components/datepicker/_styles.datepicker.css +87 -87
  287. package/src/templates/components/datepicker/_template.datepicker.njk +129 -129
  288. package/src/templates/components/datepicker/params.datepicker.yaml +104 -104
  289. package/src/templates/components/description-list/_examples.description-list.njk +502 -502
  290. package/src/templates/components/description-list/_macro.description-list.njk +3 -3
  291. package/src/templates/components/description-list/_template.description-list.njk +17 -17
  292. package/src/templates/components/description-list/params.description-list.yaml +61 -61
  293. package/src/templates/components/details/_examples.details.njk +68 -68
  294. package/src/templates/components/details/_macro.details.njk +3 -3
  295. package/src/templates/components/details/_template.details.njk +17 -17
  296. package/src/templates/components/details/params.details.yaml +40 -40
  297. package/src/templates/components/dialog/_examples.dialog.njk +156 -156
  298. package/src/templates/components/dialog/_macro.dialog.njk +3 -3
  299. package/src/templates/components/dialog/_styles.dialog.css +27 -27
  300. package/src/templates/components/dialog/_template.dialog.njk +12 -12
  301. package/src/templates/components/dialog/params.dialog.yaml +25 -25
  302. package/src/templates/components/dropdown/_examples.dropdown.njk +226 -226
  303. package/src/templates/components/dropdown/_macro.dropdown.njk +3 -3
  304. package/src/templates/components/dropdown/_styles.dropdown.css +191 -191
  305. package/src/templates/components/dropdown/_template.dropdown.njk +34 -34
  306. package/src/templates/components/dropdown/params.dropdown.yaml +32 -32
  307. package/src/templates/components/error-message/_examples.error-message.njk +28 -28
  308. package/src/templates/components/error-message/_macro.error-message.njk +5 -5
  309. package/src/templates/components/error-message/_template.error-message.njk +8 -8
  310. package/src/templates/components/error-message/params.error-message.yaml +23 -23
  311. package/src/templates/components/error-summary/_examples.error-summary.njk +111 -111
  312. package/src/templates/components/error-summary/_macro.error-summary.njk +5 -5
  313. package/src/templates/components/error-summary/_template.error-summary.njk +48 -48
  314. package/src/templates/components/error-summary/params.error-summary.yaml +50 -50
  315. package/src/templates/components/fieldset/_examples.fieldset.njk +79 -79
  316. package/src/templates/components/fieldset/_macro.fieldset.njk +2 -2
  317. package/src/templates/components/fieldset/_template.fieldset.njk +46 -46
  318. package/src/templates/components/fieldset/params.fieldset.yaml +49 -49
  319. package/src/templates/components/file-upload/_examples.file-upload.njk +103 -103
  320. package/src/templates/components/file-upload/_macro.file-upload.njk +2 -2
  321. package/src/templates/components/file-upload/_template.file-upload.njk +45 -45
  322. package/src/templates/components/file-upload/params.file-upload.yaml +48 -48
  323. package/src/templates/components/footer/_examples.footer.njk +558 -558
  324. package/src/templates/components/footer/_macro.footer.njk +3 -3
  325. package/src/templates/components/footer/_styles.footer.css +43 -43
  326. package/src/templates/components/footer/_template.footer.njk +130 -130
  327. package/src/templates/components/footer/params.footer.yaml +140 -140
  328. package/src/templates/components/header/_examples.header.njk +627 -627
  329. package/src/templates/components/header/_macro.header.header__dropdown.njk +3 -3
  330. package/src/templates/components/header/_macro.header.header__navigation.njk +3 -3
  331. package/src/templates/components/header/_macro.header.header__offcanvas.njk +3 -3
  332. package/src/templates/components/header/_macro.header.header__offcanvasButton.njk +3 -3
  333. package/src/templates/components/header/_macro.header.header__subnav.njk +3 -3
  334. package/src/templates/components/header/_macro.header.njk +3 -3
  335. package/src/templates/components/header/_styles.header.css +12 -12
  336. package/src/templates/components/header/_template.header.header__dropdown.njk +27 -27
  337. package/src/templates/components/header/_template.header.header__navigation.njk +25 -25
  338. package/src/templates/components/header/_template.header.header__offcanvas.njk +20 -20
  339. package/src/templates/components/header/_template.header.header__offcanvasButton.njk +10 -10
  340. package/src/templates/components/header/_template.header.header__subnav.njk +33 -33
  341. package/src/templates/components/header/_template.header.njk +155 -155
  342. package/src/templates/components/header/params.header.yaml +295 -295
  343. package/src/templates/components/header-advanced/_examples.header-advanced.njk +1110 -1110
  344. package/src/templates/components/header-advanced/_macro.header-advanced.njk +3 -3
  345. package/src/templates/components/header-advanced/_template.header-advanced.njk +171 -171
  346. package/src/templates/components/header-advanced/params.header-advanced.yaml +352 -350
  347. package/src/templates/components/header-mini/_examples.header-mini.njk +319 -316
  348. package/src/templates/components/header-mini/_macro.header-mini.njk +3 -3
  349. package/src/templates/components/header-mini/_template.header-mini.njk +51 -51
  350. package/src/templates/components/header-mini/params.header-mini.yaml +90 -90
  351. package/src/templates/components/hint/_examples.hint.njk +26 -26
  352. package/src/templates/components/hint/_macro.hint.njk +3 -3
  353. package/src/templates/components/hint/_template.hint.njk +3 -3
  354. package/src/templates/components/hint/params.hint.yaml +21 -21
  355. package/src/templates/components/input/_examples.input.njk +393 -393
  356. package/src/templates/components/input/_macro.input.njk +3 -3
  357. package/src/templates/components/input/_styles.input.css +17 -17
  358. package/src/templates/components/input/_template.input.njk +53 -53
  359. package/src/templates/components/input/params.input.yaml +80 -80
  360. package/src/templates/components/input-group/_examples.input-group.njk +558 -558
  361. package/src/templates/components/input-group/_macro.input-group.njk +3 -3
  362. package/src/templates/components/input-group/_template.input-group.njk +107 -107
  363. package/src/templates/components/input-group/params.input-group.yaml +123 -123
  364. package/src/templates/components/item/_examples.item.njk +370 -370
  365. package/src/templates/components/item/_macro.item.njk +3 -3
  366. package/src/templates/components/item/_template.item.njk +73 -73
  367. package/src/templates/components/item/params.item.yaml +101 -101
  368. package/src/templates/components/label/_examples.label.njk +58 -58
  369. package/src/templates/components/label/_macro.label.njk +5 -5
  370. package/src/templates/components/label/_template.label.njk +37 -37
  371. package/src/templates/components/label/params.label.yaml +28 -28
  372. package/src/templates/components/links-list/_examples.links-list.njk +761 -761
  373. package/src/templates/components/links-list/_macro.links-list.njk +3 -3
  374. package/src/templates/components/links-list/_template.links-list.njk +119 -119
  375. package/src/templates/components/links-list/params.links-list.yaml +101 -101
  376. package/src/templates/components/listbox/_examples.listbox.njk +813 -812
  377. package/src/templates/components/listbox/_macro.listbox.njk +3 -3
  378. package/src/templates/components/listbox/_styles.listbox.css +218 -218
  379. package/src/templates/components/listbox/_template.listbox.njk +90 -90
  380. package/src/templates/components/listbox/params.listbox.yaml +85 -85
  381. package/src/templates/components/media-object/_examples.media-object.njk +79 -79
  382. package/src/templates/components/media-object/_macro.media-object.njk +3 -3
  383. package/src/templates/components/media-object/_template.media-object.njk +21 -21
  384. package/src/templates/components/media-object/params.media-object.yaml +16 -16
  385. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +613 -613
  386. package/src/templates/components/menu-horizontal/_macro.menu-horizontal.njk +3 -3
  387. package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css +167 -167
  388. package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +36 -36
  389. package/src/templates/components/menu-horizontal/params.menu-horizontal.yaml +53 -53
  390. package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +1292 -1292
  391. package/src/templates/components/menu-navigation/_macro.menu-navigation.njk +3 -3
  392. package/src/templates/components/menu-navigation/_styles.menu-navigation.css +238 -238
  393. package/src/templates/components/menu-navigation/_template.menu-navigation.njk +87 -87
  394. package/src/templates/components/menu-navigation/params.menu-navigation.yaml +86 -86
  395. package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +835 -835
  396. package/src/templates/components/menu-vertical/_macro.menu-vertical.njk +3 -3
  397. package/src/templates/components/menu-vertical/_template.menu-vertical.njk +92 -92
  398. package/src/templates/components/menu-vertical/params.menu-vertical.yaml +77 -77
  399. package/src/templates/components/menubar/_examples.menubar.njk +1843 -1843
  400. package/src/templates/components/menubar/_macro.menubar.njk +3 -3
  401. package/src/templates/components/menubar/_styles.menubar.css +259 -259
  402. package/src/templates/components/menubar/_template.menubar.njk +106 -106
  403. package/src/templates/components/menubar/params.menubar.yaml +130 -130
  404. package/src/templates/components/modal/_examples.modal.njk +432 -432
  405. package/src/templates/components/modal/_macro.modal.njk +3 -3
  406. package/src/templates/components/modal/_template.modal.njk +129 -129
  407. package/src/templates/components/modal/params.modal.yaml +77 -77
  408. package/src/templates/components/nav/_examples.nav.njk +468 -468
  409. package/src/templates/components/nav/_macro.nav.njk +3 -3
  410. package/src/templates/components/nav/_template.nav.njk +53 -53
  411. package/src/templates/components/nav/params.nav.yaml +61 -61
  412. package/src/templates/components/notification/_examples.notification.njk +277 -277
  413. package/src/templates/components/notification/_macro.notification.njk +3 -3
  414. package/src/templates/components/notification/_styles.notification.css +30 -30
  415. package/src/templates/components/notification/_template.notification.njk +86 -86
  416. package/src/templates/components/notification/params.notification.yaml +101 -101
  417. package/src/templates/components/pagination/_examples.pagination.njk +444 -444
  418. package/src/templates/components/pagination/_macro.pagination.njk +3 -3
  419. package/src/templates/components/pagination/_template.pagination.njk +162 -162
  420. package/src/templates/components/pagination/params.pagination.yaml +150 -150
  421. package/src/templates/components/pill/_examples.pill.njk +180 -180
  422. package/src/templates/components/pill/_macro.pill.njk +3 -3
  423. package/src/templates/components/pill/_styles.pill.css +59 -59
  424. package/src/templates/components/pill/_template.pill.njk +38 -38
  425. package/src/templates/components/pill/params.pill.yaml +28 -28
  426. package/src/templates/components/radios/_examples.radios.njk +698 -698
  427. package/src/templates/components/radios/_macro.radios.njk +5 -5
  428. package/src/templates/components/radios/_styles.radios.css +30 -30
  429. package/src/templates/components/radios/_template.radios.njk +133 -133
  430. package/src/templates/components/radios/params.radios.yaml +104 -104
  431. package/src/templates/components/searchbar/_examples.searchbar.njk +147 -147
  432. package/src/templates/components/searchbar/_macro.searchbar.njk +3 -3
  433. package/src/templates/components/searchbar/_template.searchbar.njk +45 -45
  434. package/src/templates/components/searchbar/params.searchbar.yaml +46 -46
  435. package/src/templates/components/select/_examples.select.njk +364 -364
  436. package/src/templates/components/select/_macro.select.njk +5 -5
  437. package/src/templates/components/select/_styles.select.css +45 -45
  438. package/src/templates/components/select/_template.select.njk +67 -67
  439. package/src/templates/components/select/params.select.yaml +93 -93
  440. package/src/templates/components/skip-link/_examples.skip-link.njk +31 -31
  441. package/src/templates/components/skip-link/_macro.skip-link.njk +3 -3
  442. package/src/templates/components/skip-link/_styles.skip-link.css +12 -12
  443. package/src/templates/components/skip-link/_template.skip-link.njk +4 -4
  444. package/src/templates/components/skip-link/params.skip-link.yaml +20 -20
  445. package/src/templates/components/spinner/_examples.spinner.njk +91 -101
  446. package/src/templates/components/spinner/_macro.spinner.njk +3 -3
  447. package/src/templates/components/spinner/_styles.spinner.css +33 -33
  448. package/src/templates/components/spinner/_template.spinner.njk +12 -12
  449. package/src/templates/components/spinner/params.spinner.yaml +12 -12
  450. package/src/templates/components/status/_examples.status.njk +80 -80
  451. package/src/templates/components/status/_macro.status.njk +3 -3
  452. package/src/templates/components/status/_template.status.njk +23 -23
  453. package/src/templates/components/status/params.status.yaml +24 -24
  454. package/src/templates/components/status-item/_examples.status-item.njk +319 -319
  455. package/src/templates/components/status-item/_macro.status-item.njk +3 -3
  456. package/src/templates/components/status-item/_template.status-item.njk +99 -99
  457. package/src/templates/components/status-item/params.status-item.yaml +106 -106
  458. package/src/templates/components/table/_examples.table.njk +705 -705
  459. package/src/templates/components/table/_macro.table.njk +3 -3
  460. package/src/templates/components/table/_styles.table.css +19 -19
  461. package/src/templates/components/table/_template.table.njk +68 -68
  462. package/src/templates/components/table/params.table.yaml +130 -130
  463. package/src/templates/components/table-advanced/_examples.table-advanced.njk +839 -839
  464. package/src/templates/components/table-advanced/_macro.table-advanced.njk +3 -3
  465. package/src/templates/components/table-advanced/_styles.table-advanced.css +63 -63
  466. package/src/templates/components/table-advanced/_template.table-advanced.njk +210 -210
  467. package/src/templates/components/table-advanced/params.table-advanced.yaml +160 -160
  468. package/src/templates/components/tabs/_examples.tabs.njk +588 -588
  469. package/src/templates/components/tabs/_macro.tabs.njk +3 -3
  470. package/src/templates/components/tabs/_styles.tabs.css +132 -132
  471. package/src/templates/components/tabs/_template.tabs.njk +70 -70
  472. package/src/templates/components/tabs/params.tabs.yaml +83 -83
  473. package/src/templates/components/textarea/_examples.textarea.njk +174 -174
  474. package/src/templates/components/textarea/_macro.textarea.njk +5 -5
  475. package/src/templates/components/textarea/_template.textarea.njk +47 -47
  476. package/src/templates/components/textarea/params.textarea.yaml +64 -64
  477. package/src/templates/components/toggle/_examples.toggle.njk +248 -248
  478. package/src/templates/components/toggle/_macro.toggle.njk +3 -3
  479. package/src/templates/components/toggle/_styles.toggle.css +31 -31
  480. package/src/templates/components/toggle/_template.toggle.njk +27 -27
  481. package/src/templates/components/toggle/params.toggle.yaml +69 -69
  482. package/src/templates/components/tooltip/_examples.tooltip.njk +134 -134
  483. package/src/templates/components/tooltip/_macro.tooltip.njk +3 -3
  484. package/src/templates/components/tooltip/_styles.tooltip.css +9 -9
  485. package/src/templates/components/tooltip/_template.tooltip.njk +40 -40
  486. package/src/templates/components/tooltip/params.tooltip.yaml +40 -40
  487. package/src/templates/components/tree/_examples.tree.njk +2671 -2671
  488. package/src/templates/components/tree/_macro.tree.njk +3 -3
  489. package/src/templates/components/tree/_styles.tree.css +54 -54
  490. package/src/templates/components/tree/_template.tree.njk +232 -232
  491. package/src/templates/components/tree/params.tree.yaml +173 -173
  492. package/src/templates/components/treegrid/_examples.treegrid.njk +1269 -1269
  493. package/src/templates/components/treegrid/_macro.treegrid.njk +3 -3
  494. package/src/templates/components/treegrid/_styles.treegrid.css +31 -31
  495. package/src/templates/components/treegrid/_template.treegrid.njk +90 -90
  496. package/src/templates/components/treegrid/params.treegrid.yaml +131 -131
  497. package/src/templates/includes/_abrir-notificaciones-extra.njk +2 -2
  498. package/src/templates/includes/_abrir-notificaciones.njk +2 -2
  499. package/src/templates/includes/_acciones-de-cabecera.njk +28 -28
  500. package/src/templates/includes/_ejemplo-titulo-h2-parrafo.njk +4 -4
  501. package/src/templates/includes/_ejemplo-titulo-parrafo.njk +4 -4
  502. package/src/templates/includes/_test-include.njk +13 -13
  503. package/src/templates/pages/_page.foot-headroom.njk +30 -30
  504. package/src/templates/pages/_page.foot.njk +5 -5
  505. package/src/templates/pages/_page.footer.njk +19 -19
  506. package/src/templates/pages/_page.head.njk +27 -27
  507. package/src/templates/pages/_page.notification-edit-inner-content.njk +31 -31
  508. package/src/templates/pages/_page.notification-edit.njk +30 -30
  509. package/src/templates/pages/_page.notification-footer.njk +32 -32
  510. package/src/templates/pages/_page.notification-header-fixed.njk +30 -30
  511. package/src/templates/pages/_page.notification-header.njk +31 -31
  512. package/src/templates/pages/_page.sidebar-content.njk +20 -20
  513. package/src/templates/pages/_page.spinner-block.njk +14 -14
  514. package/src/templates/pages/_page.spinner-show.njk +15 -15
  515. package/src/templates/pages/_page.spinner.njk +15 -15
  516. package/src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk +36 -36
  517. package/src/templates/pages/_template.edit-fixed.njk +74 -74
  518. package/src/templates/pages/_template.home.njk +111 -111
  519. package/src/templates/pages/_template.logged-out.njk +56 -56
  520. package/src/templates/pages/_template.logged-selector-fixed-headroom.njk +198 -198
  521. package/src/templates/pages/_template.logged-selector-fixed.njk +195 -195
  522. package/src/templates/pages/_template.logged-selector-subheader.njk +80 -80
  523. package/src/templates/pages/_template.logged-selector-with-sidebar.njk +28 -28
  524. package/src/templates/pages/_template.logged-selector.njk +195 -195
  525. package/src/templates/pages/_template.logged.njk +141 -141
  526. package/src/templates/pages/_template.mfe-iframe-content.njk +31 -31
  527. package/src/templates/pages/_template.mfe.njk +83 -83
  528. package/src/templates/pages/_template.test.njk +48 -48
  529. package/src/templates/pages/_template.with-header-advanced.njk +311 -311
  530. package/vite.config.js +982 -955
  531. package/public/images/logo-educa-aragon.svg +0 -1
package/src/templates/components/treegrid/_examples.treegrid.njk CHANGED
@@ -1,1270 +1,1270 @@
1
- {% set exampleComponent = "treegrid" %}
2
- {% set examples = [
3
- {
4
- "name": "treegrid por defecto",
5
- "description": "El Treegrid usa una tabla que 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.",
6
- "data": {
7
- "caption": "Caption de la treegrid",
8
- "captionClasses": "sr-only mb-base font-bold text-left text-lg",
9
- "head": [
10
- {
11
- "text": "Documento"
12
- },
13
- {
14
- "text": "Importe",
15
- "classes": "lg:text-right"
16
- },
17
- {
18
- "text": "Fecha"
19
- },
20
- {
21
- "text": "Acciones"
22
- }
23
- ],
24
- "rows": [
25
- {
26
- "level": 1,
27
- "posinset": 1,
28
- "setsize": 1,
29
- "expanded": false,
30
- "cells": [
31
- {
32
- "text": "A0001",
33
- "attributes": { "id": "A0001" }
34
- },
35
- {
36
- "text": "3.000,00€",
37
- "classes": "lg:text-right"
38
- },
39
- {
40
- "text": "05/01/2024"
41
- },
42
- {
43
- "html": "<a href='#' id='A0001-action' class='c-link' aria-labelledby='A0001-action A0001'>Ver</a>"
44
- }
45
- ]
46
- },
47
- {
48
- "level": 2,
49
- "posinset": 1,
50
- "setsize": 3,
51
- "cells": [
52
- {
53
- "text": "A0001-1",
54
- "attributes": { "id": "A0001-1" }
55
- },
56
- {
57
- "text": "1.000,00€",
58
- "classes": "lg:text-right"
59
- },
60
- {
61
- "text": "05/01/2024"
62
- },
63
- {
64
- "html": "<a href='#' id='A0001-1-action' class='c-link' aria-labelledby='A0001-1-action A0001-1'>Ver</a>"
65
- }
66
- ]
67
- },
68
- {
69
- "level": 2,
70
- "posinset": 2,
71
- "setsize": 3,
72
- "expanded": false,
73
- "cells": [
74
- {
75
- "text": "A0001-2",
76
- "attributes": { "id": "A0001-2" }
77
- },
78
- {
79
- "text": "2.000,00€",
80
- "classes": "lg:text-right"
81
- },
82
- {
83
- "text": "05/01/2024"
84
- },
85
- {
86
- "html": "<a href='#' id='A0001-2-action' class='c-link' aria-labelledby='A0001-2-action A0001-2'>Ver</a>"
87
- }
88
- ]
89
- },
90
- {
91
- "level": 3,
92
- "posinset": 1,
93
- "setsize": 1,
94
- "cells": [
95
- {
96
- "text": "A0001-2-1",
97
- "attributes": { "id": "A0001-2-1" }
98
- },
99
- {
100
- "text": "1.000,00€",
101
- "classes": "lg:text-right"
102
- },
103
- {
104
- "text": "05/01/2024"
105
- },
106
- {
107
- "html": "<a href='#' id='A0001-2-1-action' class='c-link' aria-labelledby='A0001-2-1-action A0001-2-1'>Ver</a>"
108
- }
109
- ]
110
- },
111
- {
112
- "level": 2,
113
- "posinset": 3,
114
- "setsize": 3,
115
- "expanded": false,
116
- "cells": [
117
- {
118
- "text": "A0001-3",
119
- "attributes": { "id": "A0001-3" }
120
- },
121
- {
122
- "text": "2.000,00€",
123
- "classes": "lg:text-right"
124
- },
125
- {
126
- "text": "05/01/2024"
127
- },
128
- {
129
- "html": "<a href='#' id='A0001-3-action' class='c-link' aria-labelledby='A0001-3-action A0001-3'>Ver</a>"
130
- }
131
- ]
132
- },
133
- {
134
- "level": 3,
135
- "posinset": 1,
136
- "setsize": 1,
137
- "expanded": false,
138
- "cells": [
139
- {
140
- "text": "A0001-3-1",
141
- "attributes": { "id": "A0001-3-1" }
142
- },
143
- {
144
- "text": "5.000,00€",
145
- "classes": "lg:text-right"
146
- },
147
- {
148
- "text": "15/01/2024"
149
- },
150
- {
151
- "html": "<a href='#' id='A0001-3-1-action' class='c-link' aria-labelledby='A0001-3-1-action A0001-3-1'>Ver</a>"
152
- }
153
- ]
154
- },
155
- {
156
- "level": 4,
157
- "posinset": 1,
158
- "setsize": 2,
159
- "cells": [
160
- {
161
- "text": "A0001-3-1-1",
162
- "attributes": { "id": "A0001-3-1-1" }
163
- },
164
- {
165
- "text": "95€",
166
- "classes": "lg:text-right"
167
- },
168
- {
169
- "text": "15/01/2024"
170
- },
171
- {
172
- "html": "<a href='#' id='A0001-3-1-1-action' class='c-link' aria-labelledby='A0001-3-1-1-action A0001-3-1-1'>Ver</a>"
173
- }
174
- ]
175
- },
176
- {
177
- "level": 4,
178
- "posinset": 2,
179
- "setsize": 2,
180
- "cells": [
181
- {
182
- "text": "A0001-3-1-2",
183
- "attributes": { "id": "A0001-3-1-2" }
184
- },
185
- {
186
- "text": "5.000,00€",
187
- "classes": "lg:text-right"
188
- },
189
- {
190
- "text": "15/01/2024"
191
- },
192
- {
193
- "html": "<a href='#' id='A0001-3-1-2-action' class='c-link' aria-labelledby='A0001-3-1-2-action A0001-3-1-2'>Ver</a>"
194
- }
195
- ]
196
- }
197
- ],
198
- "wrapper": {
199
- "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
200
- "attributes": {
201
- "tabindex": "0",
202
- "role": "region",
203
- "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
204
- }
205
- },
206
- "classes": "w-full",
207
- "attributes": {
208
- "id": "treegrid",
209
- "aria-describedby": "treegrid-desc"
210
- }
211
- },
212
- "visualDescription": "Tabla jerárquica con encabezados \"Documento\", \"Importe\", \"Fecha\" y \"Acciones\" en texto negro sobre fondo blanco. Filas expandibles con iconos triangulares negros, montos numéricos alineados a la derecha, fechas formato DD/MM/YYYY, y enlaces azules \"Ver\" en la columna de acciones. Estructura de árbol con hasta 3 niveles de indentación visual, bordes grises claros separando filas, identificadores alfanuméricos en negro (A0001, A0001-1, etc.).",
213
- "_generated": {
214
- "hash": "6273ec85df85e1ec1954c0795ed5785c",
215
- "version": "15.0.3",
216
- "timestamp": "2026-01-30T19:19:31.950Z"
217
- }
218
- },
219
- {
220
- "name": "treegrid con tfoot",
221
- "description": "El Treegrid usa una tabla que 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.",
222
- "data": {
223
- "caption": "Caption de la treegrid",
224
- "captionClasses": "sr-only mb-base font-bold text-left text-lg",
225
- "head": [
226
- {
227
- "text": "Documento"
228
- },
229
- {
230
- "text": "Importe",
231
- "classes": "lg:text-right"
232
- },
233
- {
234
- "text": "Fecha"
235
- },
236
- {
237
- "text": "Acciones"
238
- }
239
- ],
240
- "rows": [
241
- {
242
- "level": 1,
243
- "posinset": 1,
244
- "setsize": 1,
245
- "expanded": true,
246
- "cells": [
247
- {
248
- "text": "B0001",
249
- "attributes": { "id": "B0001" }
250
- },
251
- {
252
- "text": "3.000,00€",
253
- "classes": "lg:text-right"
254
- },
255
- {
256
- "text": "05/01/2024"
257
- },
258
- {
259
- "html": "<a href='#' id='B0001-action' class='c-link' aria-labelledby='B0001-action B0001'>Ver</a>"
260
- }
261
- ]
262
- },
263
- {
264
- "level": 2,
265
- "posinset": 1,
266
- "setsize": 3,
267
- "cells": [
268
- {
269
- "text": "B0001-1",
270
- "attributes": { "id": "B0001-1" }
271
- },
272
- {
273
- "text": "1.000,00€",
274
- "classes": "lg:text-right"
275
- },
276
- {
277
- "text": "05/01/2024"
278
- },
279
- {
280
- "html": "<a href='#' id='B0001-1-action' class='c-link' aria-labelledby='B0001-1-action B0001-1'>Ver</a>"
281
- }
282
- ]
283
- },
284
- {
285
- "level": 2,
286
- "posinset": 2,
287
- "setsize": 3,
288
- "expanded": false,
289
- "cells": [
290
- {
291
- "text": "B0001-2",
292
- "attributes": { "id": "B0001-2" }
293
- },
294
- {
295
- "text": "2.000,00€",
296
- "classes": "lg:text-right"
297
- },
298
- {
299
- "text": "05/01/2024"
300
- },
301
- {
302
- "html": "<a href='#' id='B0001-2-action' class='c-link' aria-labelledby='B0001-2-action B0001-2'>Ver</a>"
303
- }
304
- ]
305
- },
306
- {
307
- "level": 3,
308
- "posinset": 1,
309
- "setsize": 1,
310
- "cells": [
311
- {
312
- "text": "B0001-2-1",
313
- "attributes": { "id": "B0001-2-1" }
314
- },
315
- {
316
- "text": "1.000,00€",
317
- "classes": "lg:text-right"
318
- },
319
- {
320
- "text": "05/01/2024"
321
- },
322
- {
323
- "html": "<a href='#' id='B0001-2-1-action' class='c-link' aria-labelledby='B0001-2-1-action B0001-2-1'>Ver</a>"
324
- }
325
- ]
326
- },
327
- {
328
- "level": 2,
329
- "posinset": 3,
330
- "setsize": 3,
331
- "expanded": false,
332
- "cells": [
333
- {
334
- "text": "B0001-3",
335
- "attributes": { "id": "B0001-3" }
336
- },
337
- {
338
- "text": "2.000,00€",
339
- "classes": "lg:text-right"
340
- },
341
- {
342
- "text": "05/01/2024"
343
- },
344
- {
345
- "html": "<a href='#' id='B0001-3-action' class='c-link' aria-labelledby='B0001-3-action B0001-3'>Ver</a>"
346
- }
347
- ]
348
- },
349
- {
350
- "level": 3,
351
- "posinset": 1,
352
- "setsize": 1,
353
- "expanded": false,
354
- "cells": [
355
- {
356
- "text": "B0001-3-1",
357
- "attributes": { "id": "B0001-3-1" }
358
- },
359
- {
360
- "text": "5.000,00€",
361
- "classes": "lg:text-right"
362
- },
363
- {
364
- "text": "15/01/2024"
365
- },
366
- {
367
- "html": "<a href='#' id='B0001-3-1-action' class='c-link' aria-labelledby='B0001-3-1-action B0001-3-1'>Ver</a>"
368
- }
369
- ]
370
- },
371
- {
372
- "level": 4,
373
- "posinset": 1,
374
- "setsize": 2,
375
- "cells": [
376
- {
377
- "text": "B0001-3-1-1",
378
- "attributes": { "id": "B0001-3-1-1" }
379
- },
380
- {
381
- "text": "95€",
382
- "classes": "lg:text-right"
383
- },
384
- {
385
- "text": "15/01/2024"
386
- },
387
- {
388
- "html": "<a href='#' id='B0001-3-1-1-action' class='c-link' aria-labelledby='B0001-3-1-1-action B0001-3-1-1'>Ver</a>"
389
- }
390
- ]
391
- },
392
- {
393
- "level": 4,
394
- "posinset": 2,
395
- "setsize": 2,
396
- "cells": [
397
- {
398
- "text": "B0001-3-1-2",
399
- "attributes": { "id": "B0001-3-1-2" }
400
- },
401
- {
402
- "text": "5.000,00€",
403
- "classes": "lg:text-right"
404
- },
405
- {
406
- "text": "15/01/2024"
407
- },
408
- {
409
- "html": "<a href='#' id='B0001-3-1-2-action' class='c-link' aria-labelledby='B0001-3-1-2-action B0001-3-1-2'>Ver</a>"
410
- }
411
- ]
412
- }
413
- ],
414
- "foot": [
415
- {
416
- "text": "Suma",
417
- "classes": "uppercase"
418
- },
419
- {
420
- "text": "10.045€",
421
- "classes": "lg:text-right"
422
- },
423
- {
424
- "text": ""
425
- },
426
- {
427
- "text": ""
428
- }
429
- ],
430
- "wrapper": {
431
- "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
432
- "attributes": {
433
- "tabindex": "0",
434
- "role": "region",
435
- "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
436
- }
437
- },
438
- "classes": "w-full",
439
- "attributes": {
440
- "id": "treegrid-B",
441
- "aria-describedby": "treegrid-B-desc"
442
- }
443
- },
444
- "visualDescription": "Tabla jerárquica con encabezados \"Documento\", \"Importe\", \"Fecha\" y \"Acciones\" en texto negro sobre fondo blanco. Filas expandibles con iconos triangulares negros, montos numéricos alineados a la derecha, fechas formato DD/MM/YYYY, y enlaces azules \"Ver\" en la columna de acciones. Fila inferior con fondo blanco mostrando texto \"SUMA\" en negro y valor total \"10.045€\", estructura de árbol con hasta 3 niveles de indentación, bordes grises claros entre filas.",
445
- "_generated": {
446
- "hash": "67e6c567aa13ab087495d82f1e8da668",
447
- "version": "15.0.3",
448
- "timestamp": "2026-01-30T19:19:31.950Z"
449
- }
450
- },
451
- {
452
- "name": "treegrid con caption visible",
453
- "description": "El Treegrid usa una tabla que 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.",
454
- "data": {
455
- "caption": "Documentos contables",
456
- "captionClasses": "mb-base font-bold text-left text-lg",
457
- "head": [
458
- {
459
- "text": "Documento"
460
- },
461
- {
462
- "text": "Importe",
463
- "classes": "lg:text-right"
464
- },
465
- {
466
- "text": "Fecha"
467
- },
468
- {
469
- "text": "Acciones"
470
- }
471
- ],
472
- "rows": [
473
- {
474
- "level": 1,
475
- "posinset": 1,
476
- "setsize": 1,
477
- "expanded": true,
478
- "cells": [
479
- {
480
- "text": "C0001",
481
- "attributes": { "id": "C0001" }
482
- },
483
- {
484
- "text": "3.000,00€",
485
- "classes": "lg:text-right"
486
- },
487
- {
488
- "text": "05/01/2024"
489
- },
490
- {
491
- "html": "<a href='#' id='C0001-action' class='c-link' aria-labelledby='C0001-action C0001'>Ver</a>"
492
- }
493
- ]
494
- },
495
- {
496
- "level": 2,
497
- "posinset": 1,
498
- "setsize": 3,
499
- "cells": [
500
- {
501
- "text": "C0001-1",
502
- "attributes": { "id": "C0001-1" }
503
- },
504
- {
505
- "text": "1.000,00€",
506
- "classes": "lg:text-right"
507
- },
508
- {
509
- "text": "05/01/2024"
510
- },
511
- {
512
- "html": "<a href='#' id='C0001-1-action' class='c-link' aria-labelledby='C0001-1-action C0001-1'>Ver</a>"
513
- }
514
- ]
515
- },
516
- {
517
- "level": 2,
518
- "posinset": 2,
519
- "setsize": 3,
520
- "expanded": false,
521
- "cells": [
522
- {
523
- "text": "C0001-2",
524
- "attributes": { "id": "C0001-2" }
525
- },
526
- {
527
- "text": "2.000,00€",
528
- "classes": "lg:text-right"
529
- },
530
- {
531
- "text": "05/01/2024"
532
- },
533
- {
534
- "html": "<a href='#' id='C0001-2-action' class='c-link' aria-labelledby='C0001-2-action C0001-2'>Ver</a>"
535
- }
536
- ]
537
- },
538
- {
539
- "level": 3,
540
- "posinset": 1,
541
- "setsize": 1,
542
- "cells": [
543
- {
544
- "text": "C0001-2-1",
545
- "attributes": { "id": "C0001-2-1" }
546
- },
547
- {
548
- "text": "1.000,00€",
549
- "classes": "lg:text-right"
550
- },
551
- {
552
- "text": "05/01/2024"
553
- },
554
- {
555
- "html": "<a href='#' id='C0001-2-1-action' class='c-link' aria-labelledby='C0001-2-1-action C0001-2-1'>Ver</a>"
556
- }
557
- ]
558
- },
559
- {
560
- "level": 2,
561
- "posinset": 3,
562
- "setsize": 3,
563
- "expanded": false,
564
- "cells": [
565
- {
566
- "text": "C0001-3",
567
- "attributes": { "id": "C0001-3" }
568
- },
569
- {
570
- "text": "2.000,00€",
571
- "classes": "lg:text-right"
572
- },
573
- {
574
- "text": "05/01/2024"
575
- },
576
- {
577
- "html": "<a href='#' id='C0001-3-action' class='c-link' aria-labelledby='C0001-3-action C0001-3'>Ver</a>"
578
- }
579
- ]
580
- },
581
- {
582
- "level": 3,
583
- "posinset": 1,
584
- "setsize": 1,
585
- "expanded": false,
586
- "cells": [
587
- {
588
- "text": "C0001-3-1",
589
- "attributes": { "id": "C0001-3-1" }
590
- },
591
- {
592
- "text": "5.000,00€",
593
- "classes": "lg:text-right"
594
- },
595
- {
596
- "text": "15/01/2024"
597
- },
598
- {
599
- "html": "<a href='#' id='C0001-3-1-action' class='c-link' aria-labelledby='C0001-3-1-action C0001-3-1'>Ver</a>"
600
- }
601
- ]
602
- },
603
- {
604
- "level": 4,
605
- "posinset": 1,
606
- "setsize": 2,
607
- "cells": [
608
- {
609
- "text": "C0001-3-1-1",
610
- "attributes": { "id": "C0001-3-1-1" }
611
- },
612
- {
613
- "text": "95€",
614
- "classes": "lg:text-right"
615
- },
616
- {
617
- "text": "15/01/2024"
618
- },
619
- {
620
- "html": "<a href='#' id='C0001-3-1-1-action' class='c-link' aria-labelledby='C0001-3-1-1-action C0001-3-1-1'>Ver</a>"
621
- }
622
- ]
623
- },
624
- {
625
- "level": 4,
626
- "posinset": 2,
627
- "setsize": 2,
628
- "cells": [
629
- {
630
- "text": "C0001-3-1-2",
631
- "attributes": { "id": "C0001-3-1-2" }
632
- },
633
- {
634
- "text": "5.000,00€",
635
- "classes": "lg:text-right"
636
- },
637
- {
638
- "text": "15/01/2024"
639
- },
640
- {
641
- "html": "<a href='#' id='C0001-3-1-2-action' class='c-link' aria-labelledby='C0001-3-1-2-action C0001-3-1-2'>Ver</a>"
642
- }
643
- ]
644
- }
645
- ],
646
- "wrapper": {
647
- "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
648
- "attributes": {
649
- "tabindex": "0",
650
- "role": "region",
651
- "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
652
- }
653
- },
654
- "classes": "w-full",
655
- "attributes": {
656
- "id": "treegrid-B",
657
- "aria-describedby": "treegrid-B-desc"
658
- }
659
- },
660
- "visualDescription": "Tabla jerárquica con título \"Documentos contables\" en negro arriba, seguido de encabezados \"Importe\", \"Fecha\" y \"Acciones\" en texto negro sobre fondo blanco. Filas expandibles con iconos triangulares negros, montos numéricos alineados a la derecha, fechas formato DD/MM/YYYY, y enlaces azules \"Ver\" en la columna de acciones. Estructura de árbol con hasta 3 niveles de indentación visual, identificadores alfanuméricos C0001 en negro, bordes grises claros separando filas.",
661
- "_generated": {
662
- "hash": "248d9013d6a33db248d989d427812a72",
663
- "version": "15.0.3",
664
- "timestamp": "2026-01-30T19:19:31.950Z"
665
- }
666
- },
667
- {
668
- "name": "treegrid con primera celda como header",
669
- "description": "El Treegrid usa una tabla que 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.",
670
- "data": {
671
- "firstCellIsHeader": true,
672
- "caption": "Caption de la treegrid",
673
- "captionClasses": "sr-only mb-base font-bold text-left text-lg",
674
- "head": [
675
- {
676
- "text": "Documento"
677
- },
678
- {
679
- "text": "Importe",
680
- "classes": "lg:text-right"
681
- },
682
- {
683
- "text": "Fecha"
684
- },
685
- {
686
- "text": "Acciones"
687
- }
688
- ],
689
- "rows": [
690
- {
691
- "level": 1,
692
- "posinset": 1,
693
- "setsize": 1,
694
- "expanded": true,
695
- "cells": [
696
- {
697
- "text": "E0001",
698
- "attributes": { "id": "E0001" }
699
- },
700
- {
701
- "text": "3.000,00€",
702
- "classes": "lg:text-right"
703
- },
704
- {
705
- "text": "05/01/2024"
706
- },
707
- {
708
- "html": "<a href='#' id='E0001-action' class='c-link' aria-labelledby='E0001-action E0001'>Ver</a>"
709
- }
710
- ]
711
- },
712
- {
713
- "level": 2,
714
- "posinset": 1,
715
- "setsize": 3,
716
- "cells": [
717
- {
718
- "text": "E0001-1",
719
- "attributes": { "id": "E0001-1" }
720
- },
721
- {
722
- "text": "1.000,00€",
723
- "classes": "lg:text-right"
724
- },
725
- {
726
- "text": "05/01/2024"
727
- },
728
- {
729
- "html": "<a href='#' id='E0001-1-action' class='c-link' aria-labelledby='E0001-1-action E0001-1'>Ver</a>"
730
- }
731
- ]
732
- },
733
- {
734
- "level": 2,
735
- "posinset": 2,
736
- "setsize": 3,
737
- "expanded": false,
738
- "cells": [
739
- {
740
- "text": "E0001-2",
741
- "attributes": { "id": "E0001-2" }
742
- },
743
- {
744
- "text": "2.000,00€",
745
- "classes": "lg:text-right"
746
- },
747
- {
748
- "text": "05/01/2024"
749
- },
750
- {
751
- "html": "<a href='#' id='E0001-2-action' class='c-link' aria-labelledby='E0001-2-action E0001-2'>Ver</a>"
752
- }
753
- ]
754
- },
755
- {
756
- "level": 3,
757
- "posinset": 1,
758
- "setsize": 1,
759
- "cells": [
760
- {
761
- "text": "E0001-2-1",
762
- "attributes": { "id": "E0001-2-1" }
763
- },
764
- {
765
- "text": "1.000,00€",
766
- "classes": "lg:text-right"
767
- },
768
- {
769
- "text": "05/01/2024"
770
- },
771
- {
772
- "html": "<a href='#' id='E0001-2-1-action' class='c-link' aria-labelledby='E0001-2-1-action E0001-2-1'>Ver</a>"
773
- }
774
- ]
775
- },
776
- {
777
- "level": 2,
778
- "posinset": 3,
779
- "setsize": 3,
780
- "expanded": false,
781
- "cells": [
782
- {
783
- "text": "E0001-3",
784
- "attributes": { "id": "E0001-3" }
785
- },
786
- {
787
- "text": "2.000,00€",
788
- "classes": "lg:text-right"
789
- },
790
- {
791
- "text": "05/01/2024"
792
- },
793
- {
794
- "html": "<a href='#' id='E0001-3-action' class='c-link' aria-labelledby='E0001-3-action E0001-3'>Ver</a>"
795
- }
796
- ]
797
- },
798
- {
799
- "level": 3,
800
- "posinset": 1,
801
- "setsize": 1,
802
- "expanded": false,
803
- "cells": [
804
- {
805
- "text": "E0001-3-1",
806
- "attributes": { "id": "E0001-3-1" }
807
- },
808
- {
809
- "text": "5.000,00€",
810
- "classes": "lg:text-right"
811
- },
812
- {
813
- "text": "15/01/2024"
814
- },
815
- {
816
- "html": "<a href='#' id='E0001-3-1-action' class='c-link' aria-labelledby='E0001-3-1-action E0001-3-1'>Ver</a>"
817
- }
818
- ]
819
- },
820
- {
821
- "level": 4,
822
- "posinset": 1,
823
- "setsize": 2,
824
- "cells": [
825
- {
826
- "text": "E0001-3-1-1",
827
- "attributes": { "id": "E0001-3-1-1" }
828
- },
829
- {
830
- "text": "95€",
831
- "classes": "lg:text-right"
832
- },
833
- {
834
- "text": "15/01/2024"
835
- },
836
- {
837
- "html": "<a href='#' id='E0001-3-1-1-action' class='c-link' aria-labelledby='E0001-3-1-1-action E0001-3-1-1'>Ver</a>"
838
- }
839
- ]
840
- },
841
- {
842
- "level": 4,
843
- "posinset": 2,
844
- "setsize": 2,
845
- "cells": [
846
- {
847
- "text": "E0001-3-1-2",
848
- "attributes": { "id": "E0001-3-1-2" }
849
- },
850
- {
851
- "text": "5.000,00€",
852
- "classes": "lg:text-right"
853
- },
854
- {
855
- "text": "15/01/2024"
856
- },
857
- {
858
- "html": "<a href='#' id='E0001-3-1-2-action' class='c-link' aria-labelledby='E0001-3-1-2-action E0001-3-1-2'>Ver</a>"
859
- }
860
- ]
861
- }
862
- ],
863
- "wrapper": {
864
- "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
865
- "attributes": {
866
- "tabindex": "0",
867
- "role": "region",
868
- "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
869
- }
870
- },
871
- "classes": "w-full",
872
- "attributes": {
873
- "id": "treegrid",
874
- "aria-describedby": "treegrid-desc"
875
- }
876
- },
877
- "visualDescription": "Tabla con estructura jerárquica expandible mediante triángulos negros a la izquierda de cada fila padre. Filas con identificadores de documento en texto negro con sangría progresiva (E0001, E0001-1, E0001-2-1), columnas de \"Importe\" en negro, \"Fecha\" en negro, y \"Acciones\" con enlaces \"Ver\" en azul. Fondo blanco con bordes grises horizontales separando filas, cabecera en texto negro sobre fondo gris claro.",
878
- "_generated": {
879
- "hash": "203c81ba698f852771ba8a0b66972335",
880
- "version": "15.0.3",
881
- "timestamp": "2026-01-30T19:19:43.393Z"
882
- }
883
- },
884
- {
885
- "name": "treegrid con 15 niveles de profundidad",
886
- "description": "Ejemplo de Treegrid con 15 niveles de anidación.",
887
- "data": {
888
- "caption": "Caption de la treegrid con 15 niveles",
889
- "captionClasses": "sr-only mb-base font-bold text-left text-lg",
890
- "head": [
891
- { "text": "Documento" },
892
- { "text": "Importe", "classes": "lg:text-right" },
893
- { "text": "Fecha" },
894
- { "text": "Acciones" }
895
- ],
896
- "rows": [
897
- {
898
- "level": 1,
899
- "posinset": 1,
900
- "setsize": 1,
901
- "expanded": false,
902
- "cells": [
903
- { "text": "F0001", "attributes": { "id": "F0001" } },
904
- { "text": "100 €", "classes": "lg:text-right" },
905
- { "text": "01/01/2024" },
906
- { "html": "<a href='#' id='F0001-action' class='c-link' aria-labelledby='F0001-action F0001'>Ver</a>" }
907
- ]
908
- },
909
- {
910
- "level": 2,
911
- "posinset": 1,
912
- "setsize": 1,
913
- "expanded": false,
914
- "cells": [
915
- { "text": "F0001-1", "attributes": { "id": "F0001-1" } },
916
- { "text": "200 €", "classes": "lg:text-right" },
917
- { "text": "02/01/2024" },
918
- { "html": "<a href='#' id='F0001-1-action' class='c-link' aria-labelledby='F0001-1-action F0001-1'>Ver</a>" }
919
- ]
920
- },
921
- {
922
- "level": 3,
923
- "posinset": 1,
924
- "setsize": 1,
925
- "expanded": false,
926
- "cells": [
927
- { "text": "F0001-1-1", "attributes": { "id": "F0001-1-1" } },
928
- { "text": "300 €", "classes": "lg:text-right" },
929
- { "text": "03/01/2024" },
930
- { "html": "<a href='#' id='F0001-1-1-action' class='c-link' aria-labelledby='F0001-1-1-action F0001-1-1'>Ver</a>" }
931
- ]
932
- },
933
- {
934
- "level": 4,
935
- "posinset": 1,
936
- "setsize": 1,
937
- "expanded": false,
938
- "cells": [
939
- { "text": "F0001-1-1-1", "attributes": { "id": "F0001-1-1-1" } },
940
- { "text": "400 €", "classes": "lg:text-right" },
941
- { "text": "04/01/2024" },
942
- { "html": "<a href='#' id='F0001-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-action F0001-1-1-1'>Ver</a>" }
943
- ]
944
- },
945
- {
946
- "level": 5,
947
- "posinset": 1,
948
- "setsize": 1,
949
- "expanded": false,
950
- "cells": [
951
- { "text": "F0001-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1" } },
952
- { "text": "500 €", "classes": "lg:text-right" },
953
- { "text": "05/01/2024" },
954
- { "html": "<a href='#' id='F0001-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-action F0001-1-1-1-1'>Ver</a>" }
955
- ]
956
- },
957
- {
958
- "level": 6,
959
- "posinset": 1,
960
- "setsize": 1,
961
- "expanded": false,
962
- "cells": [
963
- { "text": "F0001-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1" } },
964
- { "text": "600 €", "classes": "lg:text-right" },
965
- { "text": "06/01/2024" },
966
- { "html": "<a href='#' id='F0001-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-action F0001-1-1-1-1-1'>Ver</a>" }
967
- ]
968
- },
969
- {
970
- "level": 7,
971
- "posinset": 1,
972
- "setsize": 1,
973
- "expanded": false,
974
- "cells": [
975
- { "text": "F0001-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1" } },
976
- { "text": "700 €", "classes": "lg:text-right" },
977
- { "text": "07/01/2024" },
978
- { "html": "<a href='#' id='F0001-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-action F0001-1-1-1-1-1-1'>Ver</a>" }
979
- ]
980
- },
981
- {
982
- "level": 8,
983
- "posinset": 1,
984
- "setsize": 1,
985
- "expanded": false,
986
- "cells": [
987
- { "text": "F0001-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1" } },
988
- { "text": "800 €", "classes": "lg:text-right" },
989
- { "text": "08/01/2024" },
990
- { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1'>Ver</a>" }
991
- ]
992
- },
993
- {
994
- "level": 9,
995
- "posinset": 1,
996
- "setsize": 1,
997
- "expanded": false,
998
- "cells": [
999
- { "text": "F0001-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1" } },
1000
- { "text": "900 €", "classes": "lg:text-right" },
1001
- { "text": "09/01/2024" },
1002
- { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1'>Ver</a>" }
1003
- ]
1004
- },
1005
- {
1006
- "level": 10,
1007
- "posinset": 1,
1008
- "setsize": 1,
1009
- "expanded": false,
1010
- "cells": [
1011
- { "text": "F0001-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1" } },
1012
- { "text": "1000 €", "classes": "lg:text-right" },
1013
- { "text": "09/01/2024" },
1014
- { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1015
- ]
1016
- },
1017
- {
1018
- "level": 11,
1019
- "posinset": 1,
1020
- "setsize": 1,
1021
- "expanded": false,
1022
- "cells": [
1023
- { "text": "F0001-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1" } },
1024
- { "text": "1100 €", "classes": "lg:text-right" },
1025
- { "text": "09/01/2024" },
1026
- { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1027
- ]
1028
- },
1029
- {
1030
- "level": 12,
1031
- "posinset": 1,
1032
- "setsize": 1,
1033
- "expanded": false,
1034
- "cells": [
1035
- { "text": "F0001-1-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1-1" } },
1036
- { "text": "1200 €", "classes": "lg:text-right" },
1037
- { "text": "09/01/2024" },
1038
- { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1039
- ]
1040
- },
1041
- {
1042
- "level": 13,
1043
- "posinset": 1,
1044
- "setsize": 1,
1045
- "expanded": false,
1046
- "cells": [
1047
- { "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1" } },
1048
- { "text": "1300 €", "classes": "lg:text-right" },
1049
- { "text": "09/01/2024" },
1050
- { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1051
- ]
1052
- },
1053
- {
1054
- "level": 14,
1055
- "posinset": 1,
1056
- "setsize": 1,
1057
- "expanded": false,
1058
- "cells": [
1059
- { "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1" } },
1060
- { "text": "1400 €", "classes": "lg:text-right" },
1061
- { "text": "09/01/2024" },
1062
- { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1063
- ]
1064
- },
1065
- {
1066
- "level": 15,
1067
- "posinset": 1,
1068
- "setsize": 1,
1069
- "cells": [
1070
- { "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1" } },
1071
- { "text": "1500 €", "classes": "lg:text-right" },
1072
- { "text": "09/01/2024" },
1073
- { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1074
- ]
1075
- },
1076
- {
1077
- "level": 1,
1078
- "posinset": 1,
1079
- "setsize": 1,
1080
- "expanded": false,
1081
- "cells": [
1082
- {
1083
- "text": "F0002",
1084
- "attributes": { "id": "F0002" }
1085
- },
1086
- {
1087
- "text": "3.000,00€",
1088
- "classes": "lg:text-right"
1089
- },
1090
- {
1091
- "text": "05/01/2024"
1092
- },
1093
- {
1094
- "html": "<a href='#' id='F0002-action' class='c-link' aria-labelledby='F0002-action F0002'>Ver</a>"
1095
- }
1096
- ]
1097
- },
1098
- {
1099
- "level": 2,
1100
- "posinset": 1,
1101
- "setsize": 3,
1102
- "cells": [
1103
- {
1104
- "text": "F0002-1",
1105
- "attributes": { "id": "F0002-1" }
1106
- },
1107
- {
1108
- "text": "1.000,00€",
1109
- "classes": "lg:text-right"
1110
- },
1111
- {
1112
- "text": "05/01/2024"
1113
- },
1114
- {
1115
- "html": "<a href='#' id='F0002-1-action' class='c-link' aria-labelledby='F0002-1-action F0002-1'>Ver</a>"
1116
- }
1117
- ]
1118
- },
1119
- {
1120
- "level": 2,
1121
- "posinset": 2,
1122
- "setsize": 3,
1123
- "expanded": false,
1124
- "cells": [
1125
- {
1126
- "text": "F0002-2",
1127
- "attributes": { "id": "F0002-2" }
1128
- },
1129
- {
1130
- "text": "2.000,00€",
1131
- "classes": "lg:text-right"
1132
- },
1133
- {
1134
- "text": "05/01/2024"
1135
- },
1136
- {
1137
- "html": "<a href='#' id='F0002-2-action' class='c-link' aria-labelledby='F0002-2-action F0002-2'>Ver</a>"
1138
- }
1139
- ]
1140
- },
1141
- {
1142
- "level": 3,
1143
- "posinset": 1,
1144
- "setsize": 1,
1145
- "cells": [
1146
- {
1147
- "text": "F0002-2-1",
1148
- "attributes": { "id": "F0002-2-1" }
1149
- },
1150
- {
1151
- "text": "1.000,00€",
1152
- "classes": "lg:text-right"
1153
- },
1154
- {
1155
- "text": "05/01/2024"
1156
- },
1157
- {
1158
- "html": "<a href='#' id='F0002-2-1-action' class='c-link' aria-labelledby='F0002-2-1-action F0002-2-1'>Ver</a>"
1159
- }
1160
- ]
1161
- },
1162
- {
1163
- "level": 2,
1164
- "posinset": 3,
1165
- "setsize": 3,
1166
- "expanded": false,
1167
- "cells": [
1168
- {
1169
- "text": "F0002-3",
1170
- "attributes": { "id": "F0002-3" }
1171
- },
1172
- {
1173
- "text": "2.000,00€",
1174
- "classes": "lg:text-right"
1175
- },
1176
- {
1177
- "text": "05/01/2024"
1178
- },
1179
- {
1180
- "html": "<a href='#' id='F0002-3-action' class='c-link' aria-labelledby='F0002-3-action F0002-3'>Ver</a>"
1181
- }
1182
- ]
1183
- },
1184
- {
1185
- "level": 3,
1186
- "posinset": 1,
1187
- "setsize": 1,
1188
- "expanded": false,
1189
- "cells": [
1190
- {
1191
- "text": "F0002-3-1",
1192
- "attributes": { "id": "F0002-3-1" }
1193
- },
1194
- {
1195
- "text": "5.000,00€",
1196
- "classes": "lg:text-right"
1197
- },
1198
- {
1199
- "text": "15/01/2024"
1200
- },
1201
- {
1202
- "html": "<a href='#' id='F0002-3-1-action' class='c-link' aria-labelledby='F0002-3-1-action F0002-3-1'>Ver</a>"
1203
- }
1204
- ]
1205
- },
1206
- {
1207
- "level": 4,
1208
- "posinset": 1,
1209
- "setsize": 2,
1210
- "cells": [
1211
- {
1212
- "text": "F0002-3-1-1",
1213
- "attributes": { "id": "F0002-3-1-1" }
1214
- },
1215
- {
1216
- "text": "95€",
1217
- "classes": "lg:text-right"
1218
- },
1219
- {
1220
- "text": "15/01/2024"
1221
- },
1222
- {
1223
- "html": "<a href='#' id='F0002-3-1-1-action' class='c-link' aria-labelledby='F0002-3-1-1-action F0002-3-1-1'>Ver</a>"
1224
- }
1225
- ]
1226
- },
1227
- {
1228
- "level": 4,
1229
- "posinset": 2,
1230
- "setsize": 2,
1231
- "cells": [
1232
- {
1233
- "text": "F0002-3-1-2",
1234
- "attributes": { "id": "F0002-3-1-2" }
1235
- },
1236
- {
1237
- "text": "5.000,00€",
1238
- "classes": "lg:text-right"
1239
- },
1240
- {
1241
- "text": "15/01/2024"
1242
- },
1243
- {
1244
- "html": "<a href='#' id='F0002-3-1-2-action' class='c-link' aria-labelledby='F0002-3-1-2-action F0002-3-1-2'>Ver</a>"
1245
- }
1246
- ]
1247
- }
1248
- ],
1249
- "wrapper": {
1250
- "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
1251
- "attributes": {
1252
- "tabindex": "0",
1253
- "role": "region",
1254
- "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
1255
- }
1256
- },
1257
- "classes": "w-full",
1258
- "attributes": {
1259
- "id": "treegrid-9",
1260
- "aria-describedby": "treegrid-9-desc"
1261
- }
1262
- },
1263
- "visualDescription": "Tabla jerárquica con 15 niveles de anidación visible mediante sangría incremental de izquierda a derecha. Identificadores de documento (F0001, F0001-1, F0001-1-1, hasta F0001-1-1-1-1-1-1-1-1-1-1-1) en texto negro con triángulos de expansión, columnas de importes en negro con símbolo €, fechas en formato DD/MM/AAAA, y enlaces \"Ver\" en azul en columna de acciones. Fondo blanco con líneas divisorias grises horizontales entre filas, cabecera con texto negro sobre fondo gris claro.",
1264
- "_generated": {
1265
- "hash": "e7371d23c17bf64d2e669467492dfa52",
1266
- "version": "15.0.3",
1267
- "timestamp": "2026-01-30T19:19:43.393Z"
1268
- }
1269
- }
1
+ {% set exampleComponent = "treegrid" %}
2
+ {% set examples = [
3
+ {
4
+ "name": "treegrid por defecto",
5
+ "description": "El Treegrid usa una tabla que 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.",
6
+ "data": {
7
+ "caption": "Caption de la treegrid",
8
+ "captionClasses": "sr-only mb-base font-bold text-left text-lg",
9
+ "head": [
10
+ {
11
+ "text": "Documento"
12
+ },
13
+ {
14
+ "text": "Importe",
15
+ "classes": "lg:text-right"
16
+ },
17
+ {
18
+ "text": "Fecha"
19
+ },
20
+ {
21
+ "text": "Acciones"
22
+ }
23
+ ],
24
+ "rows": [
25
+ {
26
+ "level": 1,
27
+ "posinset": 1,
28
+ "setsize": 1,
29
+ "expanded": false,
30
+ "cells": [
31
+ {
32
+ "text": "A0001",
33
+ "attributes": { "id": "A0001" }
34
+ },
35
+ {
36
+ "text": "3.000,00€",
37
+ "classes": "lg:text-right"
38
+ },
39
+ {
40
+ "text": "05/01/2024"
41
+ },
42
+ {
43
+ "html": "<a href='#' id='A0001-action' class='c-link' aria-labelledby='A0001-action A0001'>Ver</a>"
44
+ }
45
+ ]
46
+ },
47
+ {
48
+ "level": 2,
49
+ "posinset": 1,
50
+ "setsize": 3,
51
+ "cells": [
52
+ {
53
+ "text": "A0001-1",
54
+ "attributes": { "id": "A0001-1" }
55
+ },
56
+ {
57
+ "text": "1.000,00€",
58
+ "classes": "lg:text-right"
59
+ },
60
+ {
61
+ "text": "05/01/2024"
62
+ },
63
+ {
64
+ "html": "<a href='#' id='A0001-1-action' class='c-link' aria-labelledby='A0001-1-action A0001-1'>Ver</a>"
65
+ }
66
+ ]
67
+ },
68
+ {
69
+ "level": 2,
70
+ "posinset": 2,
71
+ "setsize": 3,
72
+ "expanded": false,
73
+ "cells": [
74
+ {
75
+ "text": "A0001-2",
76
+ "attributes": { "id": "A0001-2" }
77
+ },
78
+ {
79
+ "text": "2.000,00€",
80
+ "classes": "lg:text-right"
81
+ },
82
+ {
83
+ "text": "05/01/2024"
84
+ },
85
+ {
86
+ "html": "<a href='#' id='A0001-2-action' class='c-link' aria-labelledby='A0001-2-action A0001-2'>Ver</a>"
87
+ }
88
+ ]
89
+ },
90
+ {
91
+ "level": 3,
92
+ "posinset": 1,
93
+ "setsize": 1,
94
+ "cells": [
95
+ {
96
+ "text": "A0001-2-1",
97
+ "attributes": { "id": "A0001-2-1" }
98
+ },
99
+ {
100
+ "text": "1.000,00€",
101
+ "classes": "lg:text-right"
102
+ },
103
+ {
104
+ "text": "05/01/2024"
105
+ },
106
+ {
107
+ "html": "<a href='#' id='A0001-2-1-action' class='c-link' aria-labelledby='A0001-2-1-action A0001-2-1'>Ver</a>"
108
+ }
109
+ ]
110
+ },
111
+ {
112
+ "level": 2,
113
+ "posinset": 3,
114
+ "setsize": 3,
115
+ "expanded": false,
116
+ "cells": [
117
+ {
118
+ "text": "A0001-3",
119
+ "attributes": { "id": "A0001-3" }
120
+ },
121
+ {
122
+ "text": "2.000,00€",
123
+ "classes": "lg:text-right"
124
+ },
125
+ {
126
+ "text": "05/01/2024"
127
+ },
128
+ {
129
+ "html": "<a href='#' id='A0001-3-action' class='c-link' aria-labelledby='A0001-3-action A0001-3'>Ver</a>"
130
+ }
131
+ ]
132
+ },
133
+ {
134
+ "level": 3,
135
+ "posinset": 1,
136
+ "setsize": 1,
137
+ "expanded": false,
138
+ "cells": [
139
+ {
140
+ "text": "A0001-3-1",
141
+ "attributes": { "id": "A0001-3-1" }
142
+ },
143
+ {
144
+ "text": "5.000,00€",
145
+ "classes": "lg:text-right"
146
+ },
147
+ {
148
+ "text": "15/01/2024"
149
+ },
150
+ {
151
+ "html": "<a href='#' id='A0001-3-1-action' class='c-link' aria-labelledby='A0001-3-1-action A0001-3-1'>Ver</a>"
152
+ }
153
+ ]
154
+ },
155
+ {
156
+ "level": 4,
157
+ "posinset": 1,
158
+ "setsize": 2,
159
+ "cells": [
160
+ {
161
+ "text": "A0001-3-1-1",
162
+ "attributes": { "id": "A0001-3-1-1" }
163
+ },
164
+ {
165
+ "text": "95€",
166
+ "classes": "lg:text-right"
167
+ },
168
+ {
169
+ "text": "15/01/2024"
170
+ },
171
+ {
172
+ "html": "<a href='#' id='A0001-3-1-1-action' class='c-link' aria-labelledby='A0001-3-1-1-action A0001-3-1-1'>Ver</a>"
173
+ }
174
+ ]
175
+ },
176
+ {
177
+ "level": 4,
178
+ "posinset": 2,
179
+ "setsize": 2,
180
+ "cells": [
181
+ {
182
+ "text": "A0001-3-1-2",
183
+ "attributes": { "id": "A0001-3-1-2" }
184
+ },
185
+ {
186
+ "text": "5.000,00€",
187
+ "classes": "lg:text-right"
188
+ },
189
+ {
190
+ "text": "15/01/2024"
191
+ },
192
+ {
193
+ "html": "<a href='#' id='A0001-3-1-2-action' class='c-link' aria-labelledby='A0001-3-1-2-action A0001-3-1-2'>Ver</a>"
194
+ }
195
+ ]
196
+ }
197
+ ],
198
+ "wrapper": {
199
+ "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
200
+ "attributes": {
201
+ "tabindex": "0",
202
+ "role": "region",
203
+ "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
204
+ }
205
+ },
206
+ "classes": "w-full",
207
+ "attributes": {
208
+ "id": "treegrid",
209
+ "aria-describedby": "treegrid-desc"
210
+ }
211
+ },
212
+ "visualDescription": "Componente treegrid con aspecto de tabla jerárquica con encabezados en texto negro sobre fondo blanco. Filas expandibles con iconos triangulares negros. Estructura de árbol con varios niveles de indentación visual, bordes grises claros separando filas.",
213
+ "_generated": {
214
+ "hash": "6273ec85df85e1ec1954c0795ed5785c",
215
+ "version": "15.0.3",
216
+ "timestamp": "2026-01-30T19:19:31.950Z"
217
+ }
218
+ },
219
+ {
220
+ "name": "treegrid con tfoot",
221
+ "description": "El Treegrid usa una tabla que 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.",
222
+ "data": {
223
+ "caption": "Caption de la treegrid",
224
+ "captionClasses": "sr-only mb-base font-bold text-left text-lg",
225
+ "head": [
226
+ {
227
+ "text": "Documento"
228
+ },
229
+ {
230
+ "text": "Importe",
231
+ "classes": "lg:text-right"
232
+ },
233
+ {
234
+ "text": "Fecha"
235
+ },
236
+ {
237
+ "text": "Acciones"
238
+ }
239
+ ],
240
+ "rows": [
241
+ {
242
+ "level": 1,
243
+ "posinset": 1,
244
+ "setsize": 1,
245
+ "expanded": true,
246
+ "cells": [
247
+ {
248
+ "text": "B0001",
249
+ "attributes": { "id": "B0001" }
250
+ },
251
+ {
252
+ "text": "3.000,00€",
253
+ "classes": "lg:text-right"
254
+ },
255
+ {
256
+ "text": "05/01/2024"
257
+ },
258
+ {
259
+ "html": "<a href='#' id='B0001-action' class='c-link' aria-labelledby='B0001-action B0001'>Ver</a>"
260
+ }
261
+ ]
262
+ },
263
+ {
264
+ "level": 2,
265
+ "posinset": 1,
266
+ "setsize": 3,
267
+ "cells": [
268
+ {
269
+ "text": "B0001-1",
270
+ "attributes": { "id": "B0001-1" }
271
+ },
272
+ {
273
+ "text": "1.000,00€",
274
+ "classes": "lg:text-right"
275
+ },
276
+ {
277
+ "text": "05/01/2024"
278
+ },
279
+ {
280
+ "html": "<a href='#' id='B0001-1-action' class='c-link' aria-labelledby='B0001-1-action B0001-1'>Ver</a>"
281
+ }
282
+ ]
283
+ },
284
+ {
285
+ "level": 2,
286
+ "posinset": 2,
287
+ "setsize": 3,
288
+ "expanded": false,
289
+ "cells": [
290
+ {
291
+ "text": "B0001-2",
292
+ "attributes": { "id": "B0001-2" }
293
+ },
294
+ {
295
+ "text": "2.000,00€",
296
+ "classes": "lg:text-right"
297
+ },
298
+ {
299
+ "text": "05/01/2024"
300
+ },
301
+ {
302
+ "html": "<a href='#' id='B0001-2-action' class='c-link' aria-labelledby='B0001-2-action B0001-2'>Ver</a>"
303
+ }
304
+ ]
305
+ },
306
+ {
307
+ "level": 3,
308
+ "posinset": 1,
309
+ "setsize": 1,
310
+ "cells": [
311
+ {
312
+ "text": "B0001-2-1",
313
+ "attributes": { "id": "B0001-2-1" }
314
+ },
315
+ {
316
+ "text": "1.000,00€",
317
+ "classes": "lg:text-right"
318
+ },
319
+ {
320
+ "text": "05/01/2024"
321
+ },
322
+ {
323
+ "html": "<a href='#' id='B0001-2-1-action' class='c-link' aria-labelledby='B0001-2-1-action B0001-2-1'>Ver</a>"
324
+ }
325
+ ]
326
+ },
327
+ {
328
+ "level": 2,
329
+ "posinset": 3,
330
+ "setsize": 3,
331
+ "expanded": false,
332
+ "cells": [
333
+ {
334
+ "text": "B0001-3",
335
+ "attributes": { "id": "B0001-3" }
336
+ },
337
+ {
338
+ "text": "2.000,00€",
339
+ "classes": "lg:text-right"
340
+ },
341
+ {
342
+ "text": "05/01/2024"
343
+ },
344
+ {
345
+ "html": "<a href='#' id='B0001-3-action' class='c-link' aria-labelledby='B0001-3-action B0001-3'>Ver</a>"
346
+ }
347
+ ]
348
+ },
349
+ {
350
+ "level": 3,
351
+ "posinset": 1,
352
+ "setsize": 1,
353
+ "expanded": false,
354
+ "cells": [
355
+ {
356
+ "text": "B0001-3-1",
357
+ "attributes": { "id": "B0001-3-1" }
358
+ },
359
+ {
360
+ "text": "5.000,00€",
361
+ "classes": "lg:text-right"
362
+ },
363
+ {
364
+ "text": "15/01/2024"
365
+ },
366
+ {
367
+ "html": "<a href='#' id='B0001-3-1-action' class='c-link' aria-labelledby='B0001-3-1-action B0001-3-1'>Ver</a>"
368
+ }
369
+ ]
370
+ },
371
+ {
372
+ "level": 4,
373
+ "posinset": 1,
374
+ "setsize": 2,
375
+ "cells": [
376
+ {
377
+ "text": "B0001-3-1-1",
378
+ "attributes": { "id": "B0001-3-1-1" }
379
+ },
380
+ {
381
+ "text": "95€",
382
+ "classes": "lg:text-right"
383
+ },
384
+ {
385
+ "text": "15/01/2024"
386
+ },
387
+ {
388
+ "html": "<a href='#' id='B0001-3-1-1-action' class='c-link' aria-labelledby='B0001-3-1-1-action B0001-3-1-1'>Ver</a>"
389
+ }
390
+ ]
391
+ },
392
+ {
393
+ "level": 4,
394
+ "posinset": 2,
395
+ "setsize": 2,
396
+ "cells": [
397
+ {
398
+ "text": "B0001-3-1-2",
399
+ "attributes": { "id": "B0001-3-1-2" }
400
+ },
401
+ {
402
+ "text": "5.000,00€",
403
+ "classes": "lg:text-right"
404
+ },
405
+ {
406
+ "text": "15/01/2024"
407
+ },
408
+ {
409
+ "html": "<a href='#' id='B0001-3-1-2-action' class='c-link' aria-labelledby='B0001-3-1-2-action B0001-3-1-2'>Ver</a>"
410
+ }
411
+ ]
412
+ }
413
+ ],
414
+ "foot": [
415
+ {
416
+ "text": "Suma",
417
+ "classes": "uppercase"
418
+ },
419
+ {
420
+ "text": "10.045€",
421
+ "classes": "lg:text-right"
422
+ },
423
+ {
424
+ "text": ""
425
+ },
426
+ {
427
+ "text": ""
428
+ }
429
+ ],
430
+ "wrapper": {
431
+ "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
432
+ "attributes": {
433
+ "tabindex": "0",
434
+ "role": "region",
435
+ "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
436
+ }
437
+ },
438
+ "classes": "w-full",
439
+ "attributes": {
440
+ "id": "treegrid-B",
441
+ "aria-describedby": "treegrid-B-desc"
442
+ }
443
+ },
444
+ "visualDescription": "Componente treegrid con aspecto de tabla jerárquica con encabezados en texto negro sobre fondo blanco. Filas expandibles con iconos triangulares negros. Estructura de árbol con varios niveles de indentación visual, bordes grises claros separando filas. Fila inferior con fondo blanco mostrando texto de total en negro y valor numérico total, bordes grises claros entre filas.",
445
+ "_generated": {
446
+ "hash": "67e6c567aa13ab087495d82f1e8da668",
447
+ "version": "15.0.3",
448
+ "timestamp": "2026-01-30T19:19:31.950Z"
449
+ }
450
+ },
451
+ {
452
+ "name": "treegrid con caption visible",
453
+ "description": "El Treegrid usa una tabla que 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.",
454
+ "data": {
455
+ "caption": "Documentos contables",
456
+ "captionClasses": "mb-base font-bold text-left text-lg",
457
+ "head": [
458
+ {
459
+ "text": "Documento"
460
+ },
461
+ {
462
+ "text": "Importe",
463
+ "classes": "lg:text-right"
464
+ },
465
+ {
466
+ "text": "Fecha"
467
+ },
468
+ {
469
+ "text": "Acciones"
470
+ }
471
+ ],
472
+ "rows": [
473
+ {
474
+ "level": 1,
475
+ "posinset": 1,
476
+ "setsize": 1,
477
+ "expanded": true,
478
+ "cells": [
479
+ {
480
+ "text": "C0001",
481
+ "attributes": { "id": "C0001" }
482
+ },
483
+ {
484
+ "text": "3.000,00€",
485
+ "classes": "lg:text-right"
486
+ },
487
+ {
488
+ "text": "05/01/2024"
489
+ },
490
+ {
491
+ "html": "<a href='#' id='C0001-action' class='c-link' aria-labelledby='C0001-action C0001'>Ver</a>"
492
+ }
493
+ ]
494
+ },
495
+ {
496
+ "level": 2,
497
+ "posinset": 1,
498
+ "setsize": 3,
499
+ "cells": [
500
+ {
501
+ "text": "C0001-1",
502
+ "attributes": { "id": "C0001-1" }
503
+ },
504
+ {
505
+ "text": "1.000,00€",
506
+ "classes": "lg:text-right"
507
+ },
508
+ {
509
+ "text": "05/01/2024"
510
+ },
511
+ {
512
+ "html": "<a href='#' id='C0001-1-action' class='c-link' aria-labelledby='C0001-1-action C0001-1'>Ver</a>"
513
+ }
514
+ ]
515
+ },
516
+ {
517
+ "level": 2,
518
+ "posinset": 2,
519
+ "setsize": 3,
520
+ "expanded": false,
521
+ "cells": [
522
+ {
523
+ "text": "C0001-2",
524
+ "attributes": { "id": "C0001-2" }
525
+ },
526
+ {
527
+ "text": "2.000,00€",
528
+ "classes": "lg:text-right"
529
+ },
530
+ {
531
+ "text": "05/01/2024"
532
+ },
533
+ {
534
+ "html": "<a href='#' id='C0001-2-action' class='c-link' aria-labelledby='C0001-2-action C0001-2'>Ver</a>"
535
+ }
536
+ ]
537
+ },
538
+ {
539
+ "level": 3,
540
+ "posinset": 1,
541
+ "setsize": 1,
542
+ "cells": [
543
+ {
544
+ "text": "C0001-2-1",
545
+ "attributes": { "id": "C0001-2-1" }
546
+ },
547
+ {
548
+ "text": "1.000,00€",
549
+ "classes": "lg:text-right"
550
+ },
551
+ {
552
+ "text": "05/01/2024"
553
+ },
554
+ {
555
+ "html": "<a href='#' id='C0001-2-1-action' class='c-link' aria-labelledby='C0001-2-1-action C0001-2-1'>Ver</a>"
556
+ }
557
+ ]
558
+ },
559
+ {
560
+ "level": 2,
561
+ "posinset": 3,
562
+ "setsize": 3,
563
+ "expanded": false,
564
+ "cells": [
565
+ {
566
+ "text": "C0001-3",
567
+ "attributes": { "id": "C0001-3" }
568
+ },
569
+ {
570
+ "text": "2.000,00€",
571
+ "classes": "lg:text-right"
572
+ },
573
+ {
574
+ "text": "05/01/2024"
575
+ },
576
+ {
577
+ "html": "<a href='#' id='C0001-3-action' class='c-link' aria-labelledby='C0001-3-action C0001-3'>Ver</a>"
578
+ }
579
+ ]
580
+ },
581
+ {
582
+ "level": 3,
583
+ "posinset": 1,
584
+ "setsize": 1,
585
+ "expanded": false,
586
+ "cells": [
587
+ {
588
+ "text": "C0001-3-1",
589
+ "attributes": { "id": "C0001-3-1" }
590
+ },
591
+ {
592
+ "text": "5.000,00€",
593
+ "classes": "lg:text-right"
594
+ },
595
+ {
596
+ "text": "15/01/2024"
597
+ },
598
+ {
599
+ "html": "<a href='#' id='C0001-3-1-action' class='c-link' aria-labelledby='C0001-3-1-action C0001-3-1'>Ver</a>"
600
+ }
601
+ ]
602
+ },
603
+ {
604
+ "level": 4,
605
+ "posinset": 1,
606
+ "setsize": 2,
607
+ "cells": [
608
+ {
609
+ "text": "C0001-3-1-1",
610
+ "attributes": { "id": "C0001-3-1-1" }
611
+ },
612
+ {
613
+ "text": "95€",
614
+ "classes": "lg:text-right"
615
+ },
616
+ {
617
+ "text": "15/01/2024"
618
+ },
619
+ {
620
+ "html": "<a href='#' id='C0001-3-1-1-action' class='c-link' aria-labelledby='C0001-3-1-1-action C0001-3-1-1'>Ver</a>"
621
+ }
622
+ ]
623
+ },
624
+ {
625
+ "level": 4,
626
+ "posinset": 2,
627
+ "setsize": 2,
628
+ "cells": [
629
+ {
630
+ "text": "C0001-3-1-2",
631
+ "attributes": { "id": "C0001-3-1-2" }
632
+ },
633
+ {
634
+ "text": "5.000,00€",
635
+ "classes": "lg:text-right"
636
+ },
637
+ {
638
+ "text": "15/01/2024"
639
+ },
640
+ {
641
+ "html": "<a href='#' id='C0001-3-1-2-action' class='c-link' aria-labelledby='C0001-3-1-2-action C0001-3-1-2'>Ver</a>"
642
+ }
643
+ ]
644
+ }
645
+ ],
646
+ "wrapper": {
647
+ "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
648
+ "attributes": {
649
+ "tabindex": "0",
650
+ "role": "region",
651
+ "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
652
+ }
653
+ },
654
+ "classes": "w-full",
655
+ "attributes": {
656
+ "id": "treegrid-B",
657
+ "aria-describedby": "treegrid-B-desc"
658
+ }
659
+ },
660
+ "visualDescription": "Encabezado o caption en negrita y texto mayor sobre un componente treegrid con aspecto de tabla jerárquica con encabezados en texto negro sobre fondo blanco. Filas expandibles con iconos triangulares negros. Estructura de árbol con varios niveles de indentación visual, bordes grises claros separando filas.",
661
+ "_generated": {
662
+ "hash": "248d9013d6a33db248d989d427812a72",
663
+ "version": "15.0.3",
664
+ "timestamp": "2026-01-30T19:19:31.950Z"
665
+ }
666
+ },
667
+ {
668
+ "name": "treegrid con primera celda como header",
669
+ "description": "El Treegrid usa una tabla que 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.",
670
+ "data": {
671
+ "firstCellIsHeader": true,
672
+ "caption": "Caption de la treegrid",
673
+ "captionClasses": "sr-only mb-base font-bold text-left text-lg",
674
+ "head": [
675
+ {
676
+ "text": "Documento"
677
+ },
678
+ {
679
+ "text": "Importe",
680
+ "classes": "lg:text-right"
681
+ },
682
+ {
683
+ "text": "Fecha"
684
+ },
685
+ {
686
+ "text": "Acciones"
687
+ }
688
+ ],
689
+ "rows": [
690
+ {
691
+ "level": 1,
692
+ "posinset": 1,
693
+ "setsize": 1,
694
+ "expanded": true,
695
+ "cells": [
696
+ {
697
+ "text": "E0001",
698
+ "attributes": { "id": "E0001" }
699
+ },
700
+ {
701
+ "text": "3.000,00€",
702
+ "classes": "lg:text-right"
703
+ },
704
+ {
705
+ "text": "05/01/2024"
706
+ },
707
+ {
708
+ "html": "<a href='#' id='E0001-action' class='c-link' aria-labelledby='E0001-action E0001'>Ver</a>"
709
+ }
710
+ ]
711
+ },
712
+ {
713
+ "level": 2,
714
+ "posinset": 1,
715
+ "setsize": 3,
716
+ "cells": [
717
+ {
718
+ "text": "E0001-1",
719
+ "attributes": { "id": "E0001-1" }
720
+ },
721
+ {
722
+ "text": "1.000,00€",
723
+ "classes": "lg:text-right"
724
+ },
725
+ {
726
+ "text": "05/01/2024"
727
+ },
728
+ {
729
+ "html": "<a href='#' id='E0001-1-action' class='c-link' aria-labelledby='E0001-1-action E0001-1'>Ver</a>"
730
+ }
731
+ ]
732
+ },
733
+ {
734
+ "level": 2,
735
+ "posinset": 2,
736
+ "setsize": 3,
737
+ "expanded": false,
738
+ "cells": [
739
+ {
740
+ "text": "E0001-2",
741
+ "attributes": { "id": "E0001-2" }
742
+ },
743
+ {
744
+ "text": "2.000,00€",
745
+ "classes": "lg:text-right"
746
+ },
747
+ {
748
+ "text": "05/01/2024"
749
+ },
750
+ {
751
+ "html": "<a href='#' id='E0001-2-action' class='c-link' aria-labelledby='E0001-2-action E0001-2'>Ver</a>"
752
+ }
753
+ ]
754
+ },
755
+ {
756
+ "level": 3,
757
+ "posinset": 1,
758
+ "setsize": 1,
759
+ "cells": [
760
+ {
761
+ "text": "E0001-2-1",
762
+ "attributes": { "id": "E0001-2-1" }
763
+ },
764
+ {
765
+ "text": "1.000,00€",
766
+ "classes": "lg:text-right"
767
+ },
768
+ {
769
+ "text": "05/01/2024"
770
+ },
771
+ {
772
+ "html": "<a href='#' id='E0001-2-1-action' class='c-link' aria-labelledby='E0001-2-1-action E0001-2-1'>Ver</a>"
773
+ }
774
+ ]
775
+ },
776
+ {
777
+ "level": 2,
778
+ "posinset": 3,
779
+ "setsize": 3,
780
+ "expanded": false,
781
+ "cells": [
782
+ {
783
+ "text": "E0001-3",
784
+ "attributes": { "id": "E0001-3" }
785
+ },
786
+ {
787
+ "text": "2.000,00€",
788
+ "classes": "lg:text-right"
789
+ },
790
+ {
791
+ "text": "05/01/2024"
792
+ },
793
+ {
794
+ "html": "<a href='#' id='E0001-3-action' class='c-link' aria-labelledby='E0001-3-action E0001-3'>Ver</a>"
795
+ }
796
+ ]
797
+ },
798
+ {
799
+ "level": 3,
800
+ "posinset": 1,
801
+ "setsize": 1,
802
+ "expanded": false,
803
+ "cells": [
804
+ {
805
+ "text": "E0001-3-1",
806
+ "attributes": { "id": "E0001-3-1" }
807
+ },
808
+ {
809
+ "text": "5.000,00€",
810
+ "classes": "lg:text-right"
811
+ },
812
+ {
813
+ "text": "15/01/2024"
814
+ },
815
+ {
816
+ "html": "<a href='#' id='E0001-3-1-action' class='c-link' aria-labelledby='E0001-3-1-action E0001-3-1'>Ver</a>"
817
+ }
818
+ ]
819
+ },
820
+ {
821
+ "level": 4,
822
+ "posinset": 1,
823
+ "setsize": 2,
824
+ "cells": [
825
+ {
826
+ "text": "E0001-3-1-1",
827
+ "attributes": { "id": "E0001-3-1-1" }
828
+ },
829
+ {
830
+ "text": "95€",
831
+ "classes": "lg:text-right"
832
+ },
833
+ {
834
+ "text": "15/01/2024"
835
+ },
836
+ {
837
+ "html": "<a href='#' id='E0001-3-1-1-action' class='c-link' aria-labelledby='E0001-3-1-1-action E0001-3-1-1'>Ver</a>"
838
+ }
839
+ ]
840
+ },
841
+ {
842
+ "level": 4,
843
+ "posinset": 2,
844
+ "setsize": 2,
845
+ "cells": [
846
+ {
847
+ "text": "E0001-3-1-2",
848
+ "attributes": { "id": "E0001-3-1-2" }
849
+ },
850
+ {
851
+ "text": "5.000,00€",
852
+ "classes": "lg:text-right"
853
+ },
854
+ {
855
+ "text": "15/01/2024"
856
+ },
857
+ {
858
+ "html": "<a href='#' id='E0001-3-1-2-action' class='c-link' aria-labelledby='E0001-3-1-2-action E0001-3-1-2'>Ver</a>"
859
+ }
860
+ ]
861
+ }
862
+ ],
863
+ "wrapper": {
864
+ "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
865
+ "attributes": {
866
+ "tabindex": "0",
867
+ "role": "region",
868
+ "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
869
+ }
870
+ },
871
+ "classes": "w-full",
872
+ "attributes": {
873
+ "id": "treegrid",
874
+ "aria-describedby": "treegrid-desc"
875
+ }
876
+ },
877
+ "visualDescription": "Componente treegrid con aspecto de tabla jerárquica con varios niveles de anidación visible mediante sangría incremental de izquierda a derecha. Los items padres de las filas padre tienen triángulos de expansión. Filas de hijos con sangría progresiva. Fondo blanco con líneas divisorias grises horizontales entre filas. Los items de la primera columna tienen un tamaño un poco menor del estilo del header de la tabla.",
878
+ "_generated": {
879
+ "hash": "203c81ba698f852771ba8a0b66972335",
880
+ "version": "15.0.3",
881
+ "timestamp": "2026-01-30T19:19:43.393Z"
882
+ }
883
+ },
884
+ {
885
+ "name": "treegrid con 15 niveles de profundidad",
886
+ "description": "Ejemplo de Treegrid con 15 niveles de anidación.",
887
+ "data": {
888
+ "caption": "Caption de la treegrid con 15 niveles",
889
+ "captionClasses": "sr-only mb-base font-bold text-left text-lg",
890
+ "head": [
891
+ { "text": "Documento" },
892
+ { "text": "Importe", "classes": "lg:text-right" },
893
+ { "text": "Fecha" },
894
+ { "text": "Acciones" }
895
+ ],
896
+ "rows": [
897
+ {
898
+ "level": 1,
899
+ "posinset": 1,
900
+ "setsize": 1,
901
+ "expanded": false,
902
+ "cells": [
903
+ { "text": "F0001", "attributes": { "id": "F0001" } },
904
+ { "text": "100 €", "classes": "lg:text-right" },
905
+ { "text": "01/01/2024" },
906
+ { "html": "<a href='#' id='F0001-action' class='c-link' aria-labelledby='F0001-action F0001'>Ver</a>" }
907
+ ]
908
+ },
909
+ {
910
+ "level": 2,
911
+ "posinset": 1,
912
+ "setsize": 1,
913
+ "expanded": false,
914
+ "cells": [
915
+ { "text": "F0001-1", "attributes": { "id": "F0001-1" } },
916
+ { "text": "200 €", "classes": "lg:text-right" },
917
+ { "text": "02/01/2024" },
918
+ { "html": "<a href='#' id='F0001-1-action' class='c-link' aria-labelledby='F0001-1-action F0001-1'>Ver</a>" }
919
+ ]
920
+ },
921
+ {
922
+ "level": 3,
923
+ "posinset": 1,
924
+ "setsize": 1,
925
+ "expanded": false,
926
+ "cells": [
927
+ { "text": "F0001-1-1", "attributes": { "id": "F0001-1-1" } },
928
+ { "text": "300 €", "classes": "lg:text-right" },
929
+ { "text": "03/01/2024" },
930
+ { "html": "<a href='#' id='F0001-1-1-action' class='c-link' aria-labelledby='F0001-1-1-action F0001-1-1'>Ver</a>" }
931
+ ]
932
+ },
933
+ {
934
+ "level": 4,
935
+ "posinset": 1,
936
+ "setsize": 1,
937
+ "expanded": false,
938
+ "cells": [
939
+ { "text": "F0001-1-1-1", "attributes": { "id": "F0001-1-1-1" } },
940
+ { "text": "400 €", "classes": "lg:text-right" },
941
+ { "text": "04/01/2024" },
942
+ { "html": "<a href='#' id='F0001-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-action F0001-1-1-1'>Ver</a>" }
943
+ ]
944
+ },
945
+ {
946
+ "level": 5,
947
+ "posinset": 1,
948
+ "setsize": 1,
949
+ "expanded": false,
950
+ "cells": [
951
+ { "text": "F0001-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1" } },
952
+ { "text": "500 €", "classes": "lg:text-right" },
953
+ { "text": "05/01/2024" },
954
+ { "html": "<a href='#' id='F0001-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-action F0001-1-1-1-1'>Ver</a>" }
955
+ ]
956
+ },
957
+ {
958
+ "level": 6,
959
+ "posinset": 1,
960
+ "setsize": 1,
961
+ "expanded": false,
962
+ "cells": [
963
+ { "text": "F0001-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1" } },
964
+ { "text": "600 €", "classes": "lg:text-right" },
965
+ { "text": "06/01/2024" },
966
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-action F0001-1-1-1-1-1'>Ver</a>" }
967
+ ]
968
+ },
969
+ {
970
+ "level": 7,
971
+ "posinset": 1,
972
+ "setsize": 1,
973
+ "expanded": false,
974
+ "cells": [
975
+ { "text": "F0001-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1" } },
976
+ { "text": "700 €", "classes": "lg:text-right" },
977
+ { "text": "07/01/2024" },
978
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-action F0001-1-1-1-1-1-1'>Ver</a>" }
979
+ ]
980
+ },
981
+ {
982
+ "level": 8,
983
+ "posinset": 1,
984
+ "setsize": 1,
985
+ "expanded": false,
986
+ "cells": [
987
+ { "text": "F0001-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1" } },
988
+ { "text": "800 €", "classes": "lg:text-right" },
989
+ { "text": "08/01/2024" },
990
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1'>Ver</a>" }
991
+ ]
992
+ },
993
+ {
994
+ "level": 9,
995
+ "posinset": 1,
996
+ "setsize": 1,
997
+ "expanded": false,
998
+ "cells": [
999
+ { "text": "F0001-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1" } },
1000
+ { "text": "900 €", "classes": "lg:text-right" },
1001
+ { "text": "09/01/2024" },
1002
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1'>Ver</a>" }
1003
+ ]
1004
+ },
1005
+ {
1006
+ "level": 10,
1007
+ "posinset": 1,
1008
+ "setsize": 1,
1009
+ "expanded": false,
1010
+ "cells": [
1011
+ { "text": "F0001-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1" } },
1012
+ { "text": "1000 €", "classes": "lg:text-right" },
1013
+ { "text": "09/01/2024" },
1014
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1015
+ ]
1016
+ },
1017
+ {
1018
+ "level": 11,
1019
+ "posinset": 1,
1020
+ "setsize": 1,
1021
+ "expanded": false,
1022
+ "cells": [
1023
+ { "text": "F0001-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1" } },
1024
+ { "text": "1100 €", "classes": "lg:text-right" },
1025
+ { "text": "09/01/2024" },
1026
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1027
+ ]
1028
+ },
1029
+ {
1030
+ "level": 12,
1031
+ "posinset": 1,
1032
+ "setsize": 1,
1033
+ "expanded": false,
1034
+ "cells": [
1035
+ { "text": "F0001-1-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1-1" } },
1036
+ { "text": "1200 €", "classes": "lg:text-right" },
1037
+ { "text": "09/01/2024" },
1038
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1039
+ ]
1040
+ },
1041
+ {
1042
+ "level": 13,
1043
+ "posinset": 1,
1044
+ "setsize": 1,
1045
+ "expanded": false,
1046
+ "cells": [
1047
+ { "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1" } },
1048
+ { "text": "1300 €", "classes": "lg:text-right" },
1049
+ { "text": "09/01/2024" },
1050
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1051
+ ]
1052
+ },
1053
+ {
1054
+ "level": 14,
1055
+ "posinset": 1,
1056
+ "setsize": 1,
1057
+ "expanded": false,
1058
+ "cells": [
1059
+ { "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1" } },
1060
+ { "text": "1400 €", "classes": "lg:text-right" },
1061
+ { "text": "09/01/2024" },
1062
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1063
+ ]
1064
+ },
1065
+ {
1066
+ "level": 15,
1067
+ "posinset": 1,
1068
+ "setsize": 1,
1069
+ "cells": [
1070
+ { "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1", "attributes": { "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1" } },
1071
+ { "text": "1500 €", "classes": "lg:text-right" },
1072
+ { "text": "09/01/2024" },
1073
+ { "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>" }
1074
+ ]
1075
+ },
1076
+ {
1077
+ "level": 1,
1078
+ "posinset": 1,
1079
+ "setsize": 1,
1080
+ "expanded": false,
1081
+ "cells": [
1082
+ {
1083
+ "text": "F0002",
1084
+ "attributes": { "id": "F0002" }
1085
+ },
1086
+ {
1087
+ "text": "3.000,00€",
1088
+ "classes": "lg:text-right"
1089
+ },
1090
+ {
1091
+ "text": "05/01/2024"
1092
+ },
1093
+ {
1094
+ "html": "<a href='#' id='F0002-action' class='c-link' aria-labelledby='F0002-action F0002'>Ver</a>"
1095
+ }
1096
+ ]
1097
+ },
1098
+ {
1099
+ "level": 2,
1100
+ "posinset": 1,
1101
+ "setsize": 3,
1102
+ "cells": [
1103
+ {
1104
+ "text": "F0002-1",
1105
+ "attributes": { "id": "F0002-1" }
1106
+ },
1107
+ {
1108
+ "text": "1.000,00€",
1109
+ "classes": "lg:text-right"
1110
+ },
1111
+ {
1112
+ "text": "05/01/2024"
1113
+ },
1114
+ {
1115
+ "html": "<a href='#' id='F0002-1-action' class='c-link' aria-labelledby='F0002-1-action F0002-1'>Ver</a>"
1116
+ }
1117
+ ]
1118
+ },
1119
+ {
1120
+ "level": 2,
1121
+ "posinset": 2,
1122
+ "setsize": 3,
1123
+ "expanded": false,
1124
+ "cells": [
1125
+ {
1126
+ "text": "F0002-2",
1127
+ "attributes": { "id": "F0002-2" }
1128
+ },
1129
+ {
1130
+ "text": "2.000,00€",
1131
+ "classes": "lg:text-right"
1132
+ },
1133
+ {
1134
+ "text": "05/01/2024"
1135
+ },
1136
+ {
1137
+ "html": "<a href='#' id='F0002-2-action' class='c-link' aria-labelledby='F0002-2-action F0002-2'>Ver</a>"
1138
+ }
1139
+ ]
1140
+ },
1141
+ {
1142
+ "level": 3,
1143
+ "posinset": 1,
1144
+ "setsize": 1,
1145
+ "cells": [
1146
+ {
1147
+ "text": "F0002-2-1",
1148
+ "attributes": { "id": "F0002-2-1" }
1149
+ },
1150
+ {
1151
+ "text": "1.000,00€",
1152
+ "classes": "lg:text-right"
1153
+ },
1154
+ {
1155
+ "text": "05/01/2024"
1156
+ },
1157
+ {
1158
+ "html": "<a href='#' id='F0002-2-1-action' class='c-link' aria-labelledby='F0002-2-1-action F0002-2-1'>Ver</a>"
1159
+ }
1160
+ ]
1161
+ },
1162
+ {
1163
+ "level": 2,
1164
+ "posinset": 3,
1165
+ "setsize": 3,
1166
+ "expanded": false,
1167
+ "cells": [
1168
+ {
1169
+ "text": "F0002-3",
1170
+ "attributes": { "id": "F0002-3" }
1171
+ },
1172
+ {
1173
+ "text": "2.000,00€",
1174
+ "classes": "lg:text-right"
1175
+ },
1176
+ {
1177
+ "text": "05/01/2024"
1178
+ },
1179
+ {
1180
+ "html": "<a href='#' id='F0002-3-action' class='c-link' aria-labelledby='F0002-3-action F0002-3'>Ver</a>"
1181
+ }
1182
+ ]
1183
+ },
1184
+ {
1185
+ "level": 3,
1186
+ "posinset": 1,
1187
+ "setsize": 1,
1188
+ "expanded": false,
1189
+ "cells": [
1190
+ {
1191
+ "text": "F0002-3-1",
1192
+ "attributes": { "id": "F0002-3-1" }
1193
+ },
1194
+ {
1195
+ "text": "5.000,00€",
1196
+ "classes": "lg:text-right"
1197
+ },
1198
+ {
1199
+ "text": "15/01/2024"
1200
+ },
1201
+ {
1202
+ "html": "<a href='#' id='F0002-3-1-action' class='c-link' aria-labelledby='F0002-3-1-action F0002-3-1'>Ver</a>"
1203
+ }
1204
+ ]
1205
+ },
1206
+ {
1207
+ "level": 4,
1208
+ "posinset": 1,
1209
+ "setsize": 2,
1210
+ "cells": [
1211
+ {
1212
+ "text": "F0002-3-1-1",
1213
+ "attributes": { "id": "F0002-3-1-1" }
1214
+ },
1215
+ {
1216
+ "text": "95€",
1217
+ "classes": "lg:text-right"
1218
+ },
1219
+ {
1220
+ "text": "15/01/2024"
1221
+ },
1222
+ {
1223
+ "html": "<a href='#' id='F0002-3-1-1-action' class='c-link' aria-labelledby='F0002-3-1-1-action F0002-3-1-1'>Ver</a>"
1224
+ }
1225
+ ]
1226
+ },
1227
+ {
1228
+ "level": 4,
1229
+ "posinset": 2,
1230
+ "setsize": 2,
1231
+ "cells": [
1232
+ {
1233
+ "text": "F0002-3-1-2",
1234
+ "attributes": { "id": "F0002-3-1-2" }
1235
+ },
1236
+ {
1237
+ "text": "5.000,00€",
1238
+ "classes": "lg:text-right"
1239
+ },
1240
+ {
1241
+ "text": "15/01/2024"
1242
+ },
1243
+ {
1244
+ "html": "<a href='#' id='F0002-3-1-2-action' class='c-link' aria-labelledby='F0002-3-1-2-action F0002-3-1-2'>Ver</a>"
1245
+ }
1246
+ ]
1247
+ }
1248
+ ],
1249
+ "wrapper": {
1250
+ "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
1251
+ "attributes": {
1252
+ "tabindex": "0",
1253
+ "role": "region",
1254
+ "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
1255
+ }
1256
+ },
1257
+ "classes": "w-full",
1258
+ "attributes": {
1259
+ "id": "treegrid-9",
1260
+ "aria-describedby": "treegrid-9-desc"
1261
+ }
1262
+ },
1263
+ "visualDescription": "Componente treegrid con aspecto de tabla jerárquica con varios niveles de anidación visible mediante sangría incremental de izquierda a derecha. Los items padres de las filas padre tienen triángulos de expansión. Filas de hijos con sangría progresiva. Fondo blanco con líneas divisorias grises horizontales entre filas.",
1264
+ "_generated": {
1265
+ "hash": "e7371d23c17bf64d2e669467492dfa52",
1266
+ "version": "15.0.3",
1267
+ "timestamp": "2026-01-30T19:19:43.393Z"
1268
+ }
1269
+ }
1270
1270
  ] %}