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/tabs/_examples.tabs.njk CHANGED
@@ -1,588 +1,588 @@
1
- {% set exampleComponent = "tabs" %}
2
- {% set examples = [
3
- {
4
- "name": "por defecto",
5
- "data": {
6
- "tablistAriaLabel": "Ejemplo de tab",
7
- "idPrefix": "tab-example",
8
- "items": [
9
- {
10
- "text": "Tab 1",
11
- "panel": {
12
- "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
13
- }
14
- },
15
- {
16
- "text": "Tab 2",
17
- "panel": {
18
- "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
19
- }
20
- },
21
- {
22
- "text": "Tab 3",
23
- "panel": {
24
- "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
25
- }
26
- },
27
- {
28
- "text": "Tab 4",
29
- "panel": {
30
- "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
31
- }
32
- }
33
- ],
34
- "attributes": {
35
- "id": "tabs-default"
36
- }
37
- },
38
- "visualDescription": "Pestañas horizontales con texto negro subrayado en negro, alineadas a la izquierda sobre fondo blanco. Panel de contenido debajo con borde gris de 1px, mostrando texto negro en párrafo. Las pestañas muestran \"Tab 1\", \"Tab 2\", \"Tab 3\", \"Tab 4\" en fuente normal.",
39
- "_generated": {
40
- "hash": "96ea2ac6b6b3cc73bcaf1706c594c8ef",
41
- "version": "15.0.3",
42
- "timestamp": "2026-01-30T19:16:03.166Z"
43
- }
44
- },
45
- {
46
- "name": "con encabezado",
47
- "description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
48
- "data": {
49
- "title": "Título con h3",
50
- "headingLevel": 3,
51
- "tablistAriaLabel": "headingLevel example",
52
- "idPrefix": "headinglevel-example",
53
- "items": [
54
- {
55
- "text": "Tab 1 con h4",
56
- "panel": {
57
- "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
58
- }
59
- },
60
- {
61
- "text": "Tab 2 con h4",
62
- "panel": {
63
- "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
64
- }
65
- },
66
- {
67
- "text": "Tab 3 con h4",
68
- "panel": {
69
- "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
70
- }
71
- },
72
- {
73
- "text": "Tab 4 con h4",
74
- "panel": {
75
- "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
76
- }
77
- }
78
- ]
79
- },
80
- "visualDescription": "Pestañas horizontales con texto negro y sufijo \"con b4\" en gris, subrayadas en negro, alineadas a la izquierda sobre fondo blanco. Panel de contenido debajo con borde gris de 1px, mostrando texto negro en párrafo. Las pestañas muestran etiquetas \"Tab 1 con b4\", \"Tab 2 con b4\", \"Tab 3 con b4\", \"Tab 4 con b4\".",
81
- "_generated": {
82
- "hash": "cb9c02e17f07834cb73dd0c81ee5e0ec",
83
- "version": "15.0.3",
84
- "timestamp": "2026-01-30T19:16:03.166Z"
85
- }
86
- },
87
- {
88
- "name": "con html en tabs",
89
- "data": {
90
- "tablistAriaLabel": "Ejemplo de tab",
91
- "idPrefix": "tab-example-html",
92
- "items": [
93
- {
94
- "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Archivo' role='img' focusable='false'><path d='M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z' fill='currentColor'/><path d='M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z' fill='currentColor'/></svg> Tab 1",
95
- "panel": {
96
- "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
97
- }
98
- },
99
- {
100
- "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Link' role='img' focusable='false'><path d='M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z' fill='currentColor'/><path d='M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z' fill='currentColor'/><path d='M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z' fill='currentColor'/></svg> Tab 2",
101
- "panel": {
102
- "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
103
- }
104
- },
105
- {
106
- "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Solicitud' role='img' focusable='false'><path d='M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z' fill='currentColor'/><path d='M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z' fill='currentColor'/><path d='M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z' fill='currentColor'/></svg> Tab 3",
107
- "panel": {
108
- "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
109
- }
110
- },
111
- {
112
- "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Borrar' role='img' focusable='false'><g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M100.625 122.5h-61.25a8.75 8.75 0 0 1-8.75-8.75V35h78.75v78.75a8.75 8.75 0 0 1-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 0 0-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 0 0-8.75-8.75z' stroke-width='8.749995'/></g></svg> Tab 4",
113
- "panel": {
114
- "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
115
- }
116
- }
117
- ]
118
- },
119
- "visualDescription": "Pestañas horizontales con iconos grises a la izquierda del texto negro, subrayadas en negro, alineadas a la izquierda sobre fondo blanco. Panel de contenido debajo con borde gris de 1px, mostrando texto negro en párrafo. Cada pestaña tiene un ícono distintivo (documento, hashtag, carpeta, caja) seguido de texto en fuente normal.",
120
- "_generated": {
121
- "hash": "25d271305425413670fc6a658ae2c0bf",
122
- "version": "15.0.3",
123
- "timestamp": "2026-01-30T19:16:03.166Z"
124
- }
125
- },
126
- {
127
- "name": "con item deshabilitado",
128
- "data": {
129
- "tablistAriaLabel": "Ejemplo de tab",
130
- "idPrefix": "tab-example-disabled",
131
- "items": [
132
- {
133
- "text": "Tab 1",
134
- "panel": {
135
- "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
136
- }
137
- },
138
- {
139
- "text": "Tab 2",
140
- "disabled": true,
141
- "panel": {
142
- "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
143
- }
144
- },
145
- {
146
- "text": "Tab 3",
147
- "panel": {
148
- "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
149
- }
150
- },
151
- {
152
- "text": "Tab 4",
153
- "panel": {
154
- "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
155
- }
156
- }
157
- ]
158
- },
159
- "visualDescription": "Componente de pestañas horizontal con 4 ítems alineados en fila. Las pestañas tienen texto negro con subrayado en la activa, una pestaña muestra texto gris claro indicando estado deshabilitado. Panel de contenido debajo muestra texto negro en párrafo con fondo blanco y borde gris claro.",
160
- "_generated": {
161
- "hash": "6866b55d9e5d36fe2ea294e2cb09daf9",
162
- "version": "15.0.3",
163
- "timestamp": "2026-01-30T19:16:12.919Z"
164
- }
165
- },
166
- {
167
- "name": "con item activo",
168
- "description": "Añade <code>active: true</code> a una tab para mostrarla activa inicialmente. También puedes usar con javascript la función global <code>activateItemTabs(elementMenu, idItemSeleccionado)</code> para seleccionar una tab y su panel, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemTabs('tabs-active', 'tab-example-active-3')</code> para desactivar la tab actual y activar la tercera tab de este ejemplo.",
169
- "data": {
170
- "tablistAriaLabel": "Ejemplo de tab",
171
- "idPrefix": "tab-example-active",
172
- "items": [
173
- {
174
- "text": "Tab 1",
175
- "panel": {
176
- "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
177
- }
178
- },
179
- {
180
- "text": "Tab 2",
181
- "panel": {
182
- "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
183
- }
184
- },
185
- {
186
- "text": "Tab 3",
187
- "panel": {
188
- "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
189
- }
190
- },
191
- {
192
- "text": "Tab 4",
193
- "active": true,
194
- "panel": {
195
- "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
196
- }
197
- }
198
- ],
199
- "attributes": {
200
- "id": "tabs-active"
201
- }
202
- },
203
- "visualDescription": "Componente de pestañas horizontal con 4 ítems alineados en fila. Las pestañas tienen texto negro, una pestaña presenta subrayado negro indicando selección activa. Panel de contenido debajo contiene texto negro en párrafo con fondo blanco y borde gris delgado alrededor del contenedor.",
204
- "_generated": {
205
- "hash": "99d5cc409f692729c2c3968941730dd2",
206
- "version": "15.0.3",
207
- "timestamp": "2026-01-30T19:16:12.919Z"
208
- }
209
- },
210
- {
211
- "name": "con muchos items",
212
- "data": {
213
- "tablistAriaLabel": "Ejemplo de tab",
214
- "idPrefix": "tab-example-many-items",
215
- "items": [
216
- {
217
- "text": "Tab 1",
218
- "panel": {
219
- "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
220
- }
221
- },
222
- {
223
- "text": "Tab 2",
224
- "panel": {
225
- "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
226
- }
227
- },
228
- {
229
- "text": "Tab 3",
230
- "panel": {
231
- "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
232
- }
233
- },
234
- {
235
- "text": "Tab 4",
236
- "panel": {
237
- "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
238
- }
239
- },
240
- {
241
- "text": "Tab 5",
242
- "panel": {
243
- "html": "<p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
244
- }
245
- },
246
- {
247
- "text": "Tab 6",
248
- "panel": {
249
- "html": "<p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
250
- }
251
- },
252
- {
253
- "text": "Tab 7",
254
- "panel": {
255
- "html": "<p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
256
- }
257
- },
258
- {
259
- "text": "Tab 8",
260
- "panel": {
261
- "html": "<p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
262
- }
263
- },
264
- {
265
- "text": "Tab 9",
266
- "panel": {
267
- "html": "<p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
268
- }
269
- },
270
- {
271
- "text": "Tab 10",
272
- "panel": {
273
- "html": "<p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
274
- }
275
- },
276
- {
277
- "text": "Tab 11",
278
- "panel": {
279
- "html": "<p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
280
- }
281
- },
282
- {
283
- "text": "Tab 12",
284
- "panel": {
285
- "html": "<p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
286
- }
287
- }
288
- ]
289
- },
290
- "visualDescription": "Componente de pestañas horizontal con 12 ítems alineados en fila ocupando el ancho completo. Las pestañas tienen texto negro de tamaño pequeño, una pestaña muestra subrayado negro indicando estado seleccionado. Panel de contenido debajo presenta texto negro en párrafo dentro de contenedor con borde gris claro y fondo blanco.",
291
- "_generated": {
292
- "hash": "3e9eb41fe72a4aa7f6c4a26e3740b3f4",
293
- "version": "15.0.3",
294
- "timestamp": "2026-01-30T19:16:12.919Z"
295
- }
296
- },
297
- {
298
- "name": "con scroll en móvil",
299
- "description": "Usa <code>.c-tabs--scroll</code> para hacer que la apariencia en móvil sea la misma que en escritorio. Prueba a mirarlo en breakpoints pequeños y verás que aparece un scroll horizontal.",
300
- "data": {
301
- "tablistAriaLabel": "Ejemplo de tab",
302
- "idPrefix": "tab-example-scroll-mobile",
303
- "classes": "c-tabs--scroll",
304
- "items": [
305
- {
306
- "text": "Tab 1",
307
- "panel": {
308
- "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
309
- }
310
- },
311
- {
312
- "text": "Tab 2",
313
- "panel": {
314
- "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
315
- }
316
- },
317
- {
318
- "text": "Tab 3",
319
- "panel": {
320
- "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
321
- }
322
- },
323
- {
324
- "text": "Tab 4",
325
- "panel": {
326
- "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
327
- }
328
- },
329
- {
330
- "text": "Tab 5",
331
- "panel": {
332
- "html": "<p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
333
- }
334
- },
335
- {
336
- "text": "Tab 6",
337
- "panel": {
338
- "html": "<p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
339
- }
340
- },
341
- {
342
- "text": "Tab 7",
343
- "panel": {
344
- "html": "<p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
345
- }
346
- },
347
- {
348
- "text": "Tab 8",
349
- "panel": {
350
- "html": "<p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
351
- }
352
- },
353
- {
354
- "text": "Tab 9",
355
- "panel": {
356
- "html": "<p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
357
- }
358
- },
359
- {
360
- "text": "Tab 10",
361
- "panel": {
362
- "html": "<p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
363
- }
364
- },
365
- {
366
- "text": "Tab 11",
367
- "panel": {
368
- "html": "<p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
369
- }
370
- },
371
- {
372
- "text": "Tab 12",
373
- "panel": {
374
- "html": "<p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
375
- }
376
- }
377
- ]
378
- },
379
- "visualDescription": "Fila horizontal de pestañas con texto negro en fondo blanco, dispuestas en línea con scroll horizontal activado. Borde inferior gris claro separa las pestañas del contenido, con panel de texto debajo mostrando párrafo en tipografía estándar negra sobre fondo blanco. Las pestañas están numeradas consecutivamente (Tab 1 a Tab 12) con espaciado uniforme entre ellas.",
380
- "_generated": {
381
- "hash": "1708de2a001f99cd5a4c39809c3cb319",
382
- "version": "15.0.3",
383
- "timestamp": "2026-01-30T19:16:23.973Z"
384
- }
385
- },
386
- {
387
- "name": "con html en tabs para mobile",
388
- "data": {
389
- "tablistAriaLabel": "Ejemplo de tab",
390
- "idPrefix": "tab-example-html-stacked",
391
- "classes": "c-tabs--scroll",
392
- "items": [
393
- {
394
- "html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z' fill='currentColor'/><path d='M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 1</span></span>",
395
- "panel": {
396
- "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
397
- }
398
- },
399
- {
400
- "html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z' fill='currentColor'/><path d='M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z' fill='currentColor'/><path d='M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 2</span></span>",
401
- "panel": {
402
- "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
403
- }
404
- },
405
- {
406
- "html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z' fill='currentColor'/><path d='M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z' fill='currentColor'/><path d='M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 3</span></span>",
407
- "panel": {
408
- "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
409
- }
410
- }
411
- ],
412
- "attributes": {
413
- "id": "tabs-active-icons"
414
- }
415
- },
416
- "visualDescription": "Tres pestañas dispuestas horizontalmente con iconos negros arriba y etiquetas de texto debajo. Fondo blanco en toda la sección, con panel de contenido debajo mostrando texto negro en párrafo. Los iconos representan documento, enlace y portapapeles, cada uno alineado verticalmente con su label correspondiente.",
417
- "_generated": {
418
- "hash": "d95e35732a377ee7effcd12490f2e888",
419
- "version": "15.0.3",
420
- "timestamp": "2026-01-30T19:16:23.973Z"
421
- }
422
- },
423
- {
424
- "name": "con clases de css aplicadas",
425
- "description": "Mostrar código para ver las clases aplicadas en el HTML.",
426
- "data": {
427
- "tablistAriaLabel": "Ejemplo de tab",
428
- "idPrefix": "tab-example-classes",
429
- "items": [
430
- {
431
- "text": "Tab 1",
432
- "panel": {
433
- "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>",
434
- "classes": "bg-primary-light"
435
- }
436
- },
437
- {
438
- "text": "Tab 2",
439
- "panel": {
440
- "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
441
- "classes": "bg-primary-light"
442
- }
443
- },
444
- {
445
- "text": "Tab 3",
446
- "panel": {
447
- "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
448
- "classes": "bg-primary-light"
449
- }
450
- },
451
- {
452
- "text": "Tab 4",
453
- "panel": {
454
- "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
455
- "classes": "bg-primary-light"
456
- }
457
- }
458
- ]
459
- },
460
- "visualDescription": "Cuatro pestañas en línea horizontal con texto negro, alineadas al inicio del contenedor con borde gris claro alrededor. Panel de contenido con fondo celeste claro muestra párrafo de texto negro. Las pestañas están etiquetadas secuencialmente (Tab 1 a Tab 4) sin separadores visuales entre ellas, con espaciado horizontal consistente.",
461
- "_generated": {
462
- "hash": "4bd617af84c7f555a97311f7e1e8489e",
463
- "version": "15.0.3",
464
- "timestamp": "2026-01-30T19:16:23.973Z"
465
- }
466
- },
467
- {
468
- "name": "Con aspecto de Links list",
469
- "description": "Usa la clase <code>.tabs--reset</code> para quitar los estilos por defecto de los tabs. Luego añade una clase modificadora propia de tu proyecto, o bien, esta de este ejemplo llamada <code>.tabs--list</code> para dar estilo a los elementos. Añade estilos adicionales con los parámetros <code>tablistClasses</code> y <code>panel.classes</code> para posicionar y tener mayor control del estilo de los elementos.",
470
- "data": {
471
- "tablistClasses": "flex flex-col col-span-2 lg:col-span-1 lg:divide-y lg:divide-neutral-base mb-base lg:mb-0",
472
- "tablistAriaLabel": "Ejemplo de tab con aspecto de links list dispuesto en horizontal",
473
- "idPrefix": "tab-links-list",
474
- "items": [
475
- {
476
- "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 1</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg></span></span>",
477
- "panel": {
478
- "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>",
479
- "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
480
- }
481
- },
482
- {
483
- "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 2</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg></span></span>",
484
- "panel": {
485
- "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
486
- "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
487
- }
488
- },
489
- {
490
- "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 3</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg></span></span>",
491
- "panel": {
492
- "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
493
- "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
494
- }
495
- },
496
- {
497
- "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 4</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg></span></span>",
498
- "panel": {
499
- "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
500
- "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
501
- }
502
- }
503
- ],
504
- "classes": "c-tabs--reset c-tabs--list grid grid-cols-2 lg:grid-cols-4 lg:gap-lg",
505
- "attributes": {
506
- "id": "tabs-list"
507
- }
508
- },
509
- "visualDescription": "Lista vertical de cuatro pestañas (Tab 1-4) alineadas a la izquierda, cada una con texto azul subrayado y una flecha azul (→) alineada a la derecha. Panel de contenido a la derecha con encabezado \"Panel 1\" en negrita seguido de texto gris oscuro en párrafo. Fondo blanco con bordes grises delgados separando cada elemento.",
510
- "_generated": {
511
- "hash": "79ffa78e714dd4e7931d2373e683b456",
512
- "version": "15.0.3",
513
- "timestamp": "2026-01-30T19:16:36.164Z"
514
- }
515
- },
516
- {
517
- "name": "con ids individuales",
518
- "description": "Mostrar código para ver los <code>id</code> aplicados",
519
- "data": {
520
- "tablistAriaLabel": "Ejemplo de tab",
521
- "items": [
522
- {
523
- "text": "Tab 1",
524
- "id": "tab-example-a-1",
525
- "panel": {
526
- "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
527
- }
528
- },
529
- {
530
- "text": "Tab 2",
531
- "id": "tab-example-b-1",
532
- "panel": {
533
- "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
534
- }
535
- },
536
- {
537
- "text": "Tab 3",
538
- "id": "tab-example-c",
539
- "panel": {
540
- "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
541
- }
542
- },
543
- {
544
- "text": "Tab 4",
545
- "id": "tab-example-d",
546
- "panel": {
547
- "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
548
- }
549
- }
550
- ]
551
- },
552
- "visualDescription": "Fila horizontal de cuatro pestañas (Tab 1, Tab 2, Tab 3, Tab 4) con texto negro subrayado, espaciadas uniformemente. Panel de contenido debajo con encabezado \"Panel 1\" en negrita negro seguido de texto gris oscuro en párrafo. Fondo blanco con borde gris delgado alrededor del contenedor completo.",
553
- "_generated": {
554
- "hash": "8e64c3a8b024d00eddb18b0edfab452c",
555
- "version": "15.0.3",
556
- "timestamp": "2026-01-30T19:16:36.164Z"
557
- }
558
- },
559
- {
560
- "name": "ejemplo complejo",
561
- "description": "Ejemplo de uso real en una app.",
562
- "data": {
563
- "tablistAriaLabel": "Ejemplo de tab",
564
- "items": [
565
- {
566
- "text": "Cambios",
567
- "id": "tab-example-a-2",
568
- "panel": {
569
- "html": "<div class='mb-base p-base bg-warning-light'><ul class='c-ul mb-0'><li><p>Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 18 de noviembre de 2003) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio. </p><p><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></p></li><li>Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015). <br><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></li></ul></div><div class='flex items-baseline'><p class='flex-1 text-sm text-neutral-dark'>Cambios realizados hace 2 horas</p><div class='ml-auto'><button class='c-button c-button--transparent'>Descartar</button><button class='c-button c-button--transparent'>Editar</button></div></div>"
570
- }
571
- },
572
- {
573
- "text": "Ver original",
574
- "id": "tab-example-b-2",
575
- "panel": {
576
- "html": "<div class='mb-base p-base'><ul class='c-ul mb-0'><li><p>Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 11 de diciembre de 2020) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio.</p><p><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></p></li><li>Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015). <br><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></li></ul></div><p class='text-sm text-neutral-dark'>Texto original</p>"
577
- }
578
- }
579
- ]
580
- },
581
- "visualDescription": "Dos pestañas horizontales (\"Cambios\" y \"Ver original\") con texto negro, la primera con subrayado indicando selección activa. Área de contenido con fondo amarillo claro conteniendo dos ítems en lista con viñetas circulares, texto negro en párrafos largos y enlaces azules subrayados. Pie de sección con texto gris indicando tiempo transcurrido (2 horas) y dos botones de acción (\"Descartar\" en azul, \"Editar\" en azul) alineados a la derecha.",
582
- "_generated": {
583
- "hash": "6841a9edb1642d21e6842785e9524fc9",
584
- "version": "15.0.3",
585
- "timestamp": "2026-01-30T19:16:36.164Z"
586
- }
587
- }
588
- ] %}
1
+ {% set exampleComponent = "tabs" %}
2
+ {% set examples = [
3
+ {
4
+ "name": "por defecto",
5
+ "data": {
6
+ "tablistAriaLabel": "Ejemplo de tab",
7
+ "idPrefix": "tab-example",
8
+ "items": [
9
+ {
10
+ "text": "Tab 1",
11
+ "panel": {
12
+ "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
13
+ }
14
+ },
15
+ {
16
+ "text": "Tab 2",
17
+ "panel": {
18
+ "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
19
+ }
20
+ },
21
+ {
22
+ "text": "Tab 3",
23
+ "panel": {
24
+ "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
25
+ }
26
+ },
27
+ {
28
+ "text": "Tab 4",
29
+ "panel": {
30
+ "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
31
+ }
32
+ }
33
+ ],
34
+ "attributes": {
35
+ "id": "tabs-default"
36
+ }
37
+ },
38
+ "visualDescription": "Pestañas horizontales con texto negro subrayado en negro, alineadas a la izquierda sobre fondo blanco. Panel de contenido debajo con borde gris de 1px, mostrando texto negro en párrafo.",
39
+ "_generated": {
40
+ "hash": "96ea2ac6b6b3cc73bcaf1706c594c8ef",
41
+ "version": "15.0.3",
42
+ "timestamp": "2026-01-30T19:16:03.166Z"
43
+ }
44
+ },
45
+ {
46
+ "name": "con encabezado",
47
+ "description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
48
+ "data": {
49
+ "title": "Título con h3",
50
+ "headingLevel": 3,
51
+ "tablistAriaLabel": "headingLevel example",
52
+ "idPrefix": "headinglevel-example",
53
+ "items": [
54
+ {
55
+ "text": "Tab 1 con h4",
56
+ "panel": {
57
+ "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
58
+ }
59
+ },
60
+ {
61
+ "text": "Tab 2 con h4",
62
+ "panel": {
63
+ "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
64
+ }
65
+ },
66
+ {
67
+ "text": "Tab 3 con h4",
68
+ "panel": {
69
+ "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
70
+ }
71
+ },
72
+ {
73
+ "text": "Tab 4 con h4",
74
+ "panel": {
75
+ "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
76
+ }
77
+ }
78
+ ]
79
+ },
80
+ "visualDescription": "Pestañas horizontales con texto negro y sufijo descriptivo en gris, subrayadas en negro, alineadas a la izquierda sobre fondo blanco. Panel de contenido debajo con borde gris de 1px, mostrando texto negro en párrafo.",
81
+ "_generated": {
82
+ "hash": "cb9c02e17f07834cb73dd0c81ee5e0ec",
83
+ "version": "15.0.3",
84
+ "timestamp": "2026-01-30T19:16:03.166Z"
85
+ }
86
+ },
87
+ {
88
+ "name": "con html en tabs",
89
+ "data": {
90
+ "tablistAriaLabel": "Ejemplo de tab",
91
+ "idPrefix": "tab-example-html",
92
+ "items": [
93
+ {
94
+ "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Archivo' role='img' focusable='false'><path d='M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z' fill='currentColor'/><path d='M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z' fill='currentColor'/></svg> Tab 1",
95
+ "panel": {
96
+ "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
97
+ }
98
+ },
99
+ {
100
+ "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Link' role='img' focusable='false'><path d='M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z' fill='currentColor'/><path d='M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z' fill='currentColor'/><path d='M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z' fill='currentColor'/></svg> Tab 2",
101
+ "panel": {
102
+ "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
103
+ }
104
+ },
105
+ {
106
+ "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Solicitud' role='img' focusable='false'><path d='M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z' fill='currentColor'/><path d='M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z' fill='currentColor'/><path d='M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z' fill='currentColor'/></svg> Tab 3",
107
+ "panel": {
108
+ "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
109
+ }
110
+ },
111
+ {
112
+ "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs' aria-label='Borrar' role='img' focusable='false'><g fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M100.625 122.5h-61.25a8.75 8.75 0 0 1-8.75-8.75V35h78.75v78.75a8.75 8.75 0 0 1-8.75 8.75zM56.875 96.25v-35M83.125 96.25v-35M13.125 35h113.75M83.125 17.5h-26.25a8.75 8.75 0 0 0-8.75 8.75V35h43.75v-8.75a8.75 8.75 0 0 0-8.75-8.75z' stroke-width='8.749995'/></g></svg> Tab 4",
113
+ "panel": {
114
+ "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
115
+ }
116
+ }
117
+ ]
118
+ },
119
+ "visualDescription": "Pestañas horizontales con iconos grises a la izquierda del texto negro, subrayadas en negro, alineadas a la izquierda sobre fondo blanco. Panel de contenido debajo con borde gris de 1px, mostrando texto negro en párrafo. Cada pestaña tiene un icono distintivo seguido de texto en fuente normal.",
120
+ "_generated": {
121
+ "hash": "25d271305425413670fc6a658ae2c0bf",
122
+ "version": "15.0.3",
123
+ "timestamp": "2026-01-30T19:16:03.166Z"
124
+ }
125
+ },
126
+ {
127
+ "name": "con item deshabilitado",
128
+ "data": {
129
+ "tablistAriaLabel": "Ejemplo de tab",
130
+ "idPrefix": "tab-example-disabled",
131
+ "items": [
132
+ {
133
+ "text": "Tab 1",
134
+ "panel": {
135
+ "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
136
+ }
137
+ },
138
+ {
139
+ "text": "Tab 2",
140
+ "disabled": true,
141
+ "panel": {
142
+ "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
143
+ }
144
+ },
145
+ {
146
+ "text": "Tab 3",
147
+ "panel": {
148
+ "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
149
+ }
150
+ },
151
+ {
152
+ "text": "Tab 4",
153
+ "panel": {
154
+ "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
155
+ }
156
+ }
157
+ ]
158
+ },
159
+ "visualDescription": "Componente de pestañas horizontal con ítems alineados en fila. Las pestañas tienen texto negro con subrayado en la activa, una pestaña muestra texto gris claro indicando estado deshabilitado. Panel de contenido debajo muestra texto negro en párrafo con fondo blanco y borde gris claro.",
160
+ "_generated": {
161
+ "hash": "6866b55d9e5d36fe2ea294e2cb09daf9",
162
+ "version": "15.0.3",
163
+ "timestamp": "2026-01-30T19:16:12.919Z"
164
+ }
165
+ },
166
+ {
167
+ "name": "con item activo",
168
+ "description": "Añade <code>active: true</code> a una tab para mostrarla activa inicialmente. También puedes usar con javascript la función global <code>activateItemTabs(elementMenu, idItemSeleccionado)</code> para seleccionar una tab y su panel, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemTabs('tabs-active', 'tab-example-active-3')</code> para desactivar la tab actual y activar la tercera tab de este ejemplo.",
169
+ "data": {
170
+ "tablistAriaLabel": "Ejemplo de tab",
171
+ "idPrefix": "tab-example-active",
172
+ "items": [
173
+ {
174
+ "text": "Tab 1",
175
+ "panel": {
176
+ "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
177
+ }
178
+ },
179
+ {
180
+ "text": "Tab 2",
181
+ "panel": {
182
+ "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
183
+ }
184
+ },
185
+ {
186
+ "text": "Tab 3",
187
+ "panel": {
188
+ "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
189
+ }
190
+ },
191
+ {
192
+ "text": "Tab 4",
193
+ "active": true,
194
+ "panel": {
195
+ "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
196
+ }
197
+ }
198
+ ],
199
+ "attributes": {
200
+ "id": "tabs-active"
201
+ }
202
+ },
203
+ "visualDescription": "Componente de pestañas horizontal con ítems alineados en fila. Las pestañas tienen texto negro, una pestaña presenta subrayado negro indicando selección activa. Panel de contenido debajo contiene texto negro en párrafo con fondo blanco y borde gris delgado alrededor del contenedor.",
204
+ "_generated": {
205
+ "hash": "99d5cc409f692729c2c3968941730dd2",
206
+ "version": "15.0.3",
207
+ "timestamp": "2026-01-30T19:16:12.919Z"
208
+ }
209
+ },
210
+ {
211
+ "name": "con muchos items",
212
+ "data": {
213
+ "tablistAriaLabel": "Ejemplo de tab",
214
+ "idPrefix": "tab-example-many-items",
215
+ "items": [
216
+ {
217
+ "text": "Tab 1",
218
+ "panel": {
219
+ "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
220
+ }
221
+ },
222
+ {
223
+ "text": "Tab 2",
224
+ "panel": {
225
+ "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
226
+ }
227
+ },
228
+ {
229
+ "text": "Tab 3",
230
+ "panel": {
231
+ "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
232
+ }
233
+ },
234
+ {
235
+ "text": "Tab 4",
236
+ "panel": {
237
+ "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
238
+ }
239
+ },
240
+ {
241
+ "text": "Tab 5",
242
+ "panel": {
243
+ "html": "<p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
244
+ }
245
+ },
246
+ {
247
+ "text": "Tab 6",
248
+ "panel": {
249
+ "html": "<p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
250
+ }
251
+ },
252
+ {
253
+ "text": "Tab 7",
254
+ "panel": {
255
+ "html": "<p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
256
+ }
257
+ },
258
+ {
259
+ "text": "Tab 8",
260
+ "panel": {
261
+ "html": "<p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
262
+ }
263
+ },
264
+ {
265
+ "text": "Tab 9",
266
+ "panel": {
267
+ "html": "<p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
268
+ }
269
+ },
270
+ {
271
+ "text": "Tab 10",
272
+ "panel": {
273
+ "html": "<p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
274
+ }
275
+ },
276
+ {
277
+ "text": "Tab 11",
278
+ "panel": {
279
+ "html": "<p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
280
+ }
281
+ },
282
+ {
283
+ "text": "Tab 12",
284
+ "panel": {
285
+ "html": "<p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
286
+ }
287
+ }
288
+ ]
289
+ },
290
+ "visualDescription": "Componente de pestañas horizontal con múltiples ítems alineados en fila ocupando el ancho completo. Las pestañas tienen texto negro de tamaño pequeño, una pestaña muestra subrayado negro indicando estado seleccionado. Panel de contenido debajo presenta texto negro en párrafo dentro de contenedor con borde gris claro y fondo blanco.",
291
+ "_generated": {
292
+ "hash": "3e9eb41fe72a4aa7f6c4a26e3740b3f4",
293
+ "version": "15.0.3",
294
+ "timestamp": "2026-01-30T19:16:12.919Z"
295
+ }
296
+ },
297
+ {
298
+ "name": "con scroll en móvil",
299
+ "description": "Usa <code>.c-tabs--scroll</code> para hacer que la apariencia en móvil sea la misma que en escritorio. Prueba a mirarlo en breakpoints pequeños y verás que aparece un scroll horizontal.",
300
+ "data": {
301
+ "tablistAriaLabel": "Ejemplo de tab",
302
+ "idPrefix": "tab-example-scroll-mobile",
303
+ "classes": "c-tabs--scroll",
304
+ "items": [
305
+ {
306
+ "text": "Tab 1",
307
+ "panel": {
308
+ "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
309
+ }
310
+ },
311
+ {
312
+ "text": "Tab 2",
313
+ "panel": {
314
+ "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
315
+ }
316
+ },
317
+ {
318
+ "text": "Tab 3",
319
+ "panel": {
320
+ "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
321
+ }
322
+ },
323
+ {
324
+ "text": "Tab 4",
325
+ "panel": {
326
+ "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
327
+ }
328
+ },
329
+ {
330
+ "text": "Tab 5",
331
+ "panel": {
332
+ "html": "<p><strong>Panel 5</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
333
+ }
334
+ },
335
+ {
336
+ "text": "Tab 6",
337
+ "panel": {
338
+ "html": "<p><strong>Panel 6</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
339
+ }
340
+ },
341
+ {
342
+ "text": "Tab 7",
343
+ "panel": {
344
+ "html": "<p><strong>Panel 7</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
345
+ }
346
+ },
347
+ {
348
+ "text": "Tab 8",
349
+ "panel": {
350
+ "html": "<p><strong>Panel 8</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
351
+ }
352
+ },
353
+ {
354
+ "text": "Tab 9",
355
+ "panel": {
356
+ "html": "<p><strong>Panel 9</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
357
+ }
358
+ },
359
+ {
360
+ "text": "Tab 10",
361
+ "panel": {
362
+ "html": "<p><strong>Panel 10</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
363
+ }
364
+ },
365
+ {
366
+ "text": "Tab 11",
367
+ "panel": {
368
+ "html": "<p><strong>Panel 11</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
369
+ }
370
+ },
371
+ {
372
+ "text": "Tab 12",
373
+ "panel": {
374
+ "html": "<p><strong>Panel 12</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
375
+ }
376
+ }
377
+ ]
378
+ },
379
+ "visualDescription": "Fila horizontal de pestañas con texto negro en fondo blanco, dispuestas en línea con scroll horizontal activado. Borde inferior gris claro separa las pestañas del contenido, con panel de texto debajo mostrando párrafo en tipografía estándar negra sobre fondo blanco.",
380
+ "_generated": {
381
+ "hash": "1708de2a001f99cd5a4c39809c3cb319",
382
+ "version": "15.0.3",
383
+ "timestamp": "2026-01-30T19:16:23.973Z"
384
+ }
385
+ },
386
+ {
387
+ "name": "con html en tabs para mobile",
388
+ "data": {
389
+ "tablistAriaLabel": "Ejemplo de tab",
390
+ "idPrefix": "tab-example-html-stacked",
391
+ "classes": "c-tabs--scroll",
392
+ "items": [
393
+ {
394
+ "html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M89.355 12.518l26.46 26.46a2.917 2.917 0 01.852 2.06v84.379a2.917 2.917 0 01-2.917 2.916h-87.5a2.917 2.917 0 01-2.917-2.916V14.583a2.917 2.917 0 012.917-2.916h61.046a2.917 2.917 0 012.059.851zM90.918 0H23.333a11.667 11.667 0 00-11.666 11.667v116.666A11.667 11.667 0 0023.333 140h93.334a11.667 11.667 0 0011.666-11.667V37.415a5.833 5.833 0 00-1.709-4.124L95.042 1.709A5.833 5.833 0 0090.918 0z' fill='currentColor'/><path d='M93.333 64.167h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM93.333 87.5h-52.5a5.833 5.833 0 010-11.667h52.5a5.833 5.833 0 010 11.667zM67.083 110.833h-26.25a5.833 5.833 0 010-11.666h26.25a5.833 5.833 0 010 11.666z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 1</span></span>",
395
+ "panel": {
396
+ "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
397
+ }
398
+ },
399
+ {
400
+ "html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M72.368 86.946a5.833 5.833 0 00-3.167 7.624 5.833 5.833 0 01-1.266 6.358l-16.497 16.503a11.667 11.667 0 01-16.496 0l-12.379-12.373a11.667 11.667 0 010-16.502l16.52-16.497a5.91 5.91 0 016.364-1.266 5.834 5.834 0 004.451-10.786 17.698 17.698 0 00-19.063 3.804l-16.52 16.497a23.368 23.368 0 000 32.999l12.378 12.372a23.333 23.333 0 0032.994 0l16.502-16.496a17.547 17.547 0 003.798-19.075 5.833 5.833 0 00-7.619-3.162z' fill='currentColor'/><path d='M45.25 94.74a5.897 5.897 0 008.247 0l45.378-45.373a5.833 5.833 0 00-8.248-8.248L45.249 86.491a5.833 5.833 0 000 8.248z' fill='currentColor'/><path d='M125.685 26.682l-12.373-12.373a23.368 23.368 0 00-32.999 0L63.811 30.806a17.535 17.535 0 00-3.798 19.069A5.835 5.835 0 1070.8 45.418a5.833 5.833 0 011.266-6.335l16.497-16.496a11.667 11.667 0 0116.502 0l12.373 12.372a11.667 11.667 0 010 16.503l-16.52 16.467a5.92 5.92 0 01-6.364 1.266 5.836 5.836 0 00-4.463 10.786 17.652 17.652 0 0019.075-3.798l16.497-16.496a23.374 23.374 0 00.023-33.005z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 2</span></span>",
401
+ "panel": {
402
+ "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
403
+ }
404
+ },
405
+ {
406
+ "html": "<span class='block'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='block w-8 h-8 mx-auto mb-sm' aria-label='Archivo' role='img' focusable='false'><path d='M96.25 52.5h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 000-8.75zM100.625 77.286a4.375 4.375 0 00-4.375-4.375h-52.5a4.375 4.375 0 000 8.75h52.5a4.375 4.375 0 004.375-4.375zM58.333 37.917h23.334a5.833 5.833 0 005.833-5.834V17.5A17.54 17.54 0 0065.287.624 17.762 17.762 0 0052.5 18.007v14.076a5.833 5.833 0 005.833 5.834zm7.292-21.875A4.375 4.375 0 1170 20.417a4.375 4.375 0 01-4.375-4.381z' fill='currentColor'/><path d='M113.75 17.5H97.708a1.458 1.458 0 00-1.458 1.458v8.75a1.458 1.458 0 001.458 1.459h13.125a2.917 2.917 0 012.917 2.916v74.62a2.917 2.917 0 01-.852 2.065l-18.713 18.708a2.917 2.917 0 01-2.06.851H29.168a2.917 2.917 0 01-2.917-2.916V32.083a2.917 2.917 0 012.917-2.916h13.125a1.458 1.458 0 001.458-1.459v-8.75a1.458 1.458 0 00-1.458-1.458H26.25a11.667 11.667 0 00-11.667 11.667v99.166A11.667 11.667 0 0026.25 140h87.5a11.667 11.667 0 0011.667-11.667V29.167A11.667 11.667 0 00113.75 17.5z' fill='currentColor'/><path d='M43.75 93.333a4.375 4.375 0 000 8.75h21.875a4.375 4.375 0 000-8.75z' fill='currentColor'/></svg><span class='block mx-auto'>Tab 3</span></span>",
407
+ "panel": {
408
+ "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
409
+ }
410
+ }
411
+ ],
412
+ "attributes": {
413
+ "id": "tabs-active-icons"
414
+ }
415
+ },
416
+ "visualDescription": "Pestañas dispuestas horizontalmente con iconos negros arriba y etiquetas de texto debajo. Fondo blanco en toda la sección, con panel de contenido debajo mostrando texto negro en párrafo. Los iconos están alineados verticalmente con su label correspondiente.",
417
+ "_generated": {
418
+ "hash": "d95e35732a377ee7effcd12490f2e888",
419
+ "version": "15.0.3",
420
+ "timestamp": "2026-01-30T19:16:23.973Z"
421
+ }
422
+ },
423
+ {
424
+ "name": "con clases de css aplicadas",
425
+ "description": "Mostrar código para ver las clases aplicadas en el HTML.",
426
+ "data": {
427
+ "tablistAriaLabel": "Ejemplo de tab",
428
+ "idPrefix": "tab-example-classes",
429
+ "items": [
430
+ {
431
+ "text": "Tab 1",
432
+ "panel": {
433
+ "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>",
434
+ "classes": "bg-primary-light"
435
+ }
436
+ },
437
+ {
438
+ "text": "Tab 2",
439
+ "panel": {
440
+ "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
441
+ "classes": "bg-primary-light"
442
+ }
443
+ },
444
+ {
445
+ "text": "Tab 3",
446
+ "panel": {
447
+ "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
448
+ "classes": "bg-primary-light"
449
+ }
450
+ },
451
+ {
452
+ "text": "Tab 4",
453
+ "panel": {
454
+ "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
455
+ "classes": "bg-primary-light"
456
+ }
457
+ }
458
+ ]
459
+ },
460
+ "visualDescription": "Pestañas en línea horizontal con texto negro, alineadas al inicio del contenedor con borde gris claro alrededor. Panel de contenido con fondo coloreado muestra párrafo de texto negro. Las pestañas están etiquetadas secuencialmente sin separadores visuales entre ellas, con espaciado horizontal consistente.",
461
+ "_generated": {
462
+ "hash": "4bd617af84c7f555a97311f7e1e8489e",
463
+ "version": "15.0.3",
464
+ "timestamp": "2026-01-30T19:16:23.973Z"
465
+ }
466
+ },
467
+ {
468
+ "name": "Con aspecto de Links list",
469
+ "description": "Usa la clase <code>.tabs--reset</code> para quitar los estilos por defecto de los tabs. Luego añade una clase modificadora propia de tu proyecto, o bien, esta de este ejemplo llamada <code>.tabs--list</code> para dar estilo a los elementos. Añade estilos adicionales con los parámetros <code>tablistClasses</code> y <code>panel.classes</code> para posicionar y tener mayor control del estilo de los elementos.",
470
+ "data": {
471
+ "tablistClasses": "flex flex-col col-span-2 lg:col-span-1 lg:divide-y lg:divide-neutral-base mb-base lg:mb-0",
472
+ "tablistAriaLabel": "Ejemplo de tab con aspecto de links list dispuesto en horizontal",
473
+ "idPrefix": "tab-links-list",
474
+ "items": [
475
+ {
476
+ "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 1</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg></span></span>",
477
+ "panel": {
478
+ "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>",
479
+ "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
480
+ }
481
+ },
482
+ {
483
+ "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 2</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg></span></span>",
484
+ "panel": {
485
+ "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
486
+ "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
487
+ }
488
+ },
489
+ {
490
+ "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 3</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg></span></span>",
491
+ "panel": {
492
+ "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
493
+ "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
494
+ }
495
+ },
496
+ {
497
+ "html": "<span class='flex w-full'><span class='flex gap-base justify-between items-center flex-1 c-link'>Tab 4</span><span class='block self-center h-full text-primary-base'><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='hidden lg:block self-center' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg></span></span>",
498
+ "panel": {
499
+ "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>",
500
+ "classes": "col-span-2 lg:col-span-2 lg:p-base focus:outline-hidden focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base"
501
+ }
502
+ }
503
+ ],
504
+ "classes": "c-tabs--reset c-tabs--list grid grid-cols-2 lg:grid-cols-4 lg:gap-lg",
505
+ "attributes": {
506
+ "id": "tabs-list"
507
+ }
508
+ },
509
+ "visualDescription": "Lista vertical de pestañas alineadas a la izquierda, cada una con texto azul subrayado y una flecha azul alineada a la derecha. Panel de contenido a la derecha con encabezado en negrita seguido de texto gris oscuro en párrafo. Fondo blanco con bordes grises delgados separando cada elemento.",
510
+ "_generated": {
511
+ "hash": "79ffa78e714dd4e7931d2373e683b456",
512
+ "version": "15.0.3",
513
+ "timestamp": "2026-01-30T19:16:36.164Z"
514
+ }
515
+ },
516
+ {
517
+ "name": "con ids individuales",
518
+ "description": "Mostrar código para ver los <code>id</code> aplicados",
519
+ "data": {
520
+ "tablistAriaLabel": "Ejemplo de tab",
521
+ "items": [
522
+ {
523
+ "text": "Tab 1",
524
+ "id": "tab-example-a-1",
525
+ "panel": {
526
+ "html": "<p><strong>Panel 1</strong>. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?</p>"
527
+ }
528
+ },
529
+ {
530
+ "text": "Tab 2",
531
+ "id": "tab-example-b-1",
532
+ "panel": {
533
+ "html": "<p><strong>Panel 2</strong>. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
534
+ }
535
+ },
536
+ {
537
+ "text": "Tab 3",
538
+ "id": "tab-example-c",
539
+ "panel": {
540
+ "html": "<p><strong>Panel 3</strong>. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
541
+ }
542
+ },
543
+ {
544
+ "text": "Tab 4",
545
+ "id": "tab-example-d",
546
+ "panel": {
547
+ "html": "<p><strong>Panel 4</strong>. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.</p>"
548
+ }
549
+ }
550
+ ]
551
+ },
552
+ "visualDescription": "Fila horizontal de pestañas con texto negro subrayado, espaciadas uniformemente. Panel de contenido debajo con encabezado en negrita negro seguido de texto gris oscuro en párrafo. Fondo blanco con borde gris delgado alrededor del contenedor completo.",
553
+ "_generated": {
554
+ "hash": "8e64c3a8b024d00eddb18b0edfab452c",
555
+ "version": "15.0.3",
556
+ "timestamp": "2026-01-30T19:16:36.164Z"
557
+ }
558
+ },
559
+ {
560
+ "name": "ejemplo complejo",
561
+ "description": "Ejemplo de uso real en una app.",
562
+ "data": {
563
+ "tablistAriaLabel": "Ejemplo de tab",
564
+ "items": [
565
+ {
566
+ "text": "Cambios",
567
+ "id": "tab-example-a-2",
568
+ "panel": {
569
+ "html": "<div class='mb-base p-base bg-warning-light'><ul class='c-ul mb-0'><li><p>Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 18 de noviembre de 2003) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio. </p><p><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></p></li><li>Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015). <br><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></li></ul></div><div class='flex items-baseline'><p class='flex-1 text-sm text-neutral-dark'>Cambios realizados hace 2 horas</p><div class='ml-auto'><button class='c-button c-button--transparent'>Descartar</button><button class='c-button c-button--transparent'>Editar</button></div></div>"
570
+ }
571
+ },
572
+ {
573
+ "text": "Ver original",
574
+ "id": "tab-example-b-2",
575
+ "panel": {
576
+ "html": "<div class='mb-base p-base'><ul class='c-ul mb-0'><li><p>Ley 38/2003, de 17 de noviembre, General de Subvenciones. (BOE nº 276 de 11 de diciembre de 2020) y su Reglamento de desarrollo aprobado por Real Decreto 887/2006, de 21 de julio.</p><p><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></p></li><li>Ley 5/2015, de 25 de marzo, de Subvenciones de Aragón. (BOA nº 68 de 10 de abril de 2015). <br><a href='#' class='c-link text-sm'>Ver detalles de la normativa</a></li></ul></div><p class='text-sm text-neutral-dark'>Texto original</p>"
577
+ }
578
+ }
579
+ ]
580
+ },
581
+ "visualDescription": "Dos pestañas horizontales con texto negro, la primera con subrayado indicando selección activa. Área de contenido con fondo coloreado conteniendo dos ítems en lista con viñetas circulares, texto negro en párrafos largos y enlaces azules subrayados. Pie de sección con texto gris indicando tiempo transcurrido y dos botones de acción alineados a la derecha.",
582
+ "_generated": {
583
+ "hash": "6841a9edb1642d21e6842785e9524fc9",
584
+ "version": "15.0.3",
585
+ "timestamp": "2026-01-30T19:16:36.164Z"
586
+ }
587
+ }
588
+ ] %}