desy-html 16.0.4 → 17.0.1

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 (535) hide show
  1. package/.node-version +1 -1
  2. package/.nvmrc +1 -1
  3. package/AGENTS.md +207 -207
  4. package/README.md +203 -203
  5. package/TESTING_PLAN.md +379 -379
  6. package/branding/BRANDING.md +398 -398
  7. package/branding/branding.config.js +76 -76
  8. package/branding/branding.config.yourorganization.js +72 -72
  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-favicon.svg +13 -13
  17. package/branding/vite-branding-plugin.js +221 -221
  18. package/docs/_global.content-placeholder.njk +7 -7
  19. package/docs/_global.foot.njk +11 -11
  20. package/docs/_global.head.njk +42 -42
  21. package/docs/_include.template-header.njk +391 -386
  22. package/docs/_macro.component-example.njk +6 -6
  23. package/docs/_macro.example-render.njk +350 -346
  24. package/docs/_macro.load-component-params.njk +2 -2
  25. package/docs/_macro.load-component-template.njk +3 -3
  26. package/docs/_macro.render-caller.njk +3 -3
  27. package/docs/_macro.show-code-from-file.njk +57 -57
  28. package/docs/_macro.show-html-from-file.njk +42 -42
  29. package/docs/_template.default.njk +8 -8
  30. package/docs/_template.examples.njk +13 -13
  31. package/docs/catalogo.html +27 -27
  32. package/docs/componentes.html +187 -184
  33. package/docs/ds/_ds.example.accordion.njk +109 -109
  34. package/docs/ds/_ds.example.border.njk +39 -39
  35. package/docs/ds/_ds.example.botones-alert-sm.njk +264 -264
  36. package/docs/ds/_ds.example.botones-alert.njk +264 -264
  37. package/docs/ds/_ds.example.botones-default-sm.njk +264 -264
  38. package/docs/ds/_ds.example.botones-default.njk +258 -258
  39. package/docs/ds/_ds.example.botones-primary-lg.njk +264 -264
  40. package/docs/ds/_ds.example.botones-primary-sm.njk +264 -264
  41. package/docs/ds/_ds.example.botones-primary.njk +264 -264
  42. package/docs/ds/_ds.example.botones-transparent-sm.njk +264 -264
  43. package/docs/ds/_ds.example.botones-transparent.njk +264 -264
  44. package/docs/ds/_ds.example.breadcrumbs.njk +65 -65
  45. package/docs/ds/_ds.example.card.njk +198 -198
  46. package/docs/ds/_ds.example.checkboxes.njk +377 -377
  47. package/docs/ds/_ds.example.collapsible.njk +18 -18
  48. package/docs/ds/_ds.example.color-de-interaccion.njk +16 -16
  49. package/docs/ds/_ds.example.colores-cabecera.njk +15 -15
  50. package/docs/ds/_ds.example.colores-de-soporte.njk +82 -82
  51. package/docs/ds/_ds.example.colores-neutros.njk +26 -26
  52. package/docs/ds/_ds.example.combobox.njk +91 -0
  53. package/docs/ds/_ds.example.date-input.njk +363 -363
  54. package/docs/ds/_ds.example.description-list.njk +289 -289
  55. package/docs/ds/_ds.example.details.njk +23 -23
  56. package/docs/ds/_ds.example.dropdowns-default.njk +186 -186
  57. package/docs/ds/_ds.example.dropdowns-en-uso.njk +105 -105
  58. package/docs/ds/_ds.example.dropdowns-variaciones.njk +224 -224
  59. package/docs/ds/_ds.example.error-summary.njk +34 -34
  60. package/docs/ds/_ds.example.file-upload.njk +54 -54
  61. package/docs/ds/_ds.example.footer.njk +28 -28
  62. package/docs/ds/_ds.example.header-advanced.njk +70 -70
  63. package/docs/ds/_ds.example.header.njk +211 -211
  64. package/docs/ds/_ds.example.input-group.njk +242 -242
  65. package/docs/ds/_ds.example.input.njk +164 -164
  66. package/docs/ds/_ds.example.item.njk +176 -176
  67. package/docs/ds/_ds.example.layout-escritorio.njk +38 -38
  68. package/docs/ds/_ds.example.layout-movil.njk +14 -14
  69. package/docs/ds/_ds.example.layout-sidebar.njk +11 -11
  70. package/docs/ds/_ds.example.links-list.njk +170 -170
  71. package/docs/ds/_ds.example.listbox-default.njk +677 -677
  72. package/docs/ds/_ds.example.listbox-variaciones.njk +824 -824
  73. package/docs/ds/_ds.example.menu-horizontal.njk +66 -66
  74. package/docs/ds/_ds.example.menu-navigation.njk +493 -493
  75. package/docs/ds/_ds.example.menu-vertical.njk +129 -129
  76. package/docs/ds/_ds.example.menubar-en-uso.njk +244 -244
  77. package/docs/ds/_ds.example.menubar-variaciones.njk +785 -785
  78. package/docs/ds/_ds.example.modal.njk +210 -210
  79. package/docs/ds/_ds.example.nav.njk +158 -158
  80. package/docs/ds/_ds.example.notification.njk +122 -122
  81. package/docs/ds/_ds.example.pagination.njk +190 -190
  82. package/docs/ds/_ds.example.pills.njk +215 -215
  83. package/docs/ds/_ds.example.radios.njk +419 -419
  84. package/docs/ds/_ds.example.searchbar.njk +87 -87
  85. package/docs/ds/_ds.example.select.njk +390 -390
  86. package/docs/ds/_ds.example.status-item.njk +239 -239
  87. package/docs/ds/_ds.example.status.njk +47 -47
  88. package/docs/ds/_ds.example.table.njk +740 -740
  89. package/docs/ds/_ds.example.tabs.njk +136 -136
  90. package/docs/ds/_ds.example.textarea.njk +237 -237
  91. package/docs/ds/_ds.example.textos.njk +32 -32
  92. package/docs/ds/_ds.example.toggle.njk +75 -75
  93. package/docs/ds/_ds.example.tree.njk +456 -456
  94. package/docs/ds/_ds.example.treegrid.njk +810 -810
  95. package/docs/ds/_ds.example.typography.njk +225 -225
  96. package/docs/ds/_ds.macro.code-snippet.njk +32 -32
  97. package/docs/ds/_ds.macro.section-title.njk +2 -2
  98. package/docs/ds/_ds.macro.subsection-title.njk +2 -2
  99. package/docs/ds/_ds.section.avisos.njk +22 -22
  100. package/docs/ds/_ds.section.botones.njk +53 -53
  101. package/docs/ds/_ds.section.campo-y-area-de-texto.njk +19 -19
  102. package/docs/ds/_ds.section.color.njk +147 -147
  103. package/docs/ds/_ds.section.datos.njk +42 -42
  104. package/docs/ds/_ds.section.dropdowns.njk +23 -23
  105. package/docs/ds/_ds.section.espaciado.njk +296 -296
  106. package/docs/ds/_ds.section.forms.njk +73 -68
  107. package/docs/ds/_ds.section.informacion.njk +12 -12
  108. package/docs/ds/_ds.section.layout.njk +63 -63
  109. package/docs/ds/_ds.section.menubar.njk +18 -18
  110. package/docs/ds/_ds.section.mostrar-ocultar.njk +33 -33
  111. package/docs/ds/_ds.section.navigation.njk +57 -57
  112. package/docs/ds/_ds.section.textos.njk +287 -287
  113. package/docs/ds/_ds.section.typography.njk +28 -28
  114. package/docs/estilos.html +37 -37
  115. package/docs/examples-accordion-history.html +8 -8
  116. package/docs/examples-accordion.html +8 -8
  117. package/docs/examples-alert.html +8 -8
  118. package/docs/examples-breadcrumbs.html +8 -8
  119. package/docs/examples-button-loader.html +8 -8
  120. package/docs/examples-button.html +8 -8
  121. package/docs/examples-card.html +8 -8
  122. package/docs/examples-character-count.html +8 -8
  123. package/docs/examples-checkboxes.html +8 -8
  124. package/docs/examples-collapsible.html +8 -8
  125. package/docs/examples-combobox.html +8 -0
  126. package/docs/examples-date-input.html +8 -8
  127. package/docs/examples-datepicker.html +8 -8
  128. package/docs/examples-description-list.html +8 -8
  129. package/docs/examples-details.html +8 -8
  130. package/docs/examples-dialog.html +8 -8
  131. package/docs/examples-dropdown.html +8 -8
  132. package/docs/examples-error-message.html +8 -8
  133. package/docs/examples-error-summary.html +8 -8
  134. package/docs/examples-fieldset.html +8 -8
  135. package/docs/examples-file-upload.html +8 -8
  136. package/docs/examples-footer.html +8 -8
  137. package/docs/examples-header-advanced.html +8 -8
  138. package/docs/examples-header-mini.html +8 -8
  139. package/docs/examples-header.html +8 -8
  140. package/docs/examples-hint.html +8 -8
  141. package/docs/examples-input-group.html +8 -8
  142. package/docs/examples-input.html +8 -8
  143. package/docs/examples-item.html +8 -8
  144. package/docs/examples-label.html +8 -8
  145. package/docs/examples-links-list.html +8 -8
  146. package/docs/examples-listbox.html +8 -8
  147. package/docs/examples-media-object.html +8 -8
  148. package/docs/examples-menu-horizontal.html +8 -8
  149. package/docs/examples-menu-navigation.html +8 -8
  150. package/docs/examples-menu-vertical.html +8 -8
  151. package/docs/examples-menubar.html +8 -8
  152. package/docs/examples-modal.html +8 -8
  153. package/docs/examples-nav.html +8 -8
  154. package/docs/examples-notification.html +8 -8
  155. package/docs/examples-pagination.html +8 -8
  156. package/docs/examples-pill.html +8 -8
  157. package/docs/examples-radios.html +8 -8
  158. package/docs/examples-searchbar.html +8 -8
  159. package/docs/examples-select.html +8 -8
  160. package/docs/examples-skip-link.html +8 -8
  161. package/docs/examples-spinner.html +8 -8
  162. package/docs/examples-status-item.html +8 -8
  163. package/docs/examples-status.html +8 -8
  164. package/docs/examples-table-advanced.html +8 -8
  165. package/docs/examples-table.html +8 -8
  166. package/docs/examples-tabs.html +8 -8
  167. package/docs/examples-textarea.html +8 -8
  168. package/docs/examples-toggle.html +8 -8
  169. package/docs/examples-tooltip.html +8 -8
  170. package/docs/examples-tree.html +8 -8
  171. package/docs/examples-treegrid.html +8 -8
  172. package/docs/index.html +919 -908
  173. package/docs/pagina-accesibilidad.html +110 -110
  174. package/docs/pagina-mapa-web.html +137 -137
  175. package/docs/pagina-prueba.html +95 -95
  176. package/docs/plantilla-con-header-advanced.html +14 -14
  177. package/docs/plantilla-editar-con-cabecera-fija-y-sidebar-sticky.html +154 -154
  178. package/docs/plantilla-editar-con-cabecera-fija.html +17 -17
  179. package/docs/plantilla-logueado-con-cabecera-fija-headroom.html +15 -15
  180. package/docs/plantilla-logueado-con-cabecera-fija.html +15 -15
  181. package/docs/plantilla-logueado-con-selector-de-app-y-sidebar.html +164 -164
  182. package/docs/plantilla-logueado-con-selector-de-app-y-subheader.html +16 -16
  183. package/docs/plantilla-logueado-con-selector-de-app.html +14 -14
  184. package/docs/plantilla-logueado-con-titulo-de-app.html +14 -14
  185. package/docs/plantilla-sin-loguear.html +14 -14
  186. package/docs/plantillas.html +89 -89
  187. package/docs/spinner-plantilla-con-header-advanced.html +2 -2
  188. package/docs/spinner-plantilla-editar-con-cabecera-fija.html +4 -4
  189. package/docs/spinner-plantilla-logueado-con-cabecera-fija.html +2 -2
  190. package/docs/spinner-plantilla-logueado-con-selector-de-app-y-subheader.html +2 -2
  191. package/docs/spinner-plantilla-logueado-con-titulo-de-app.html +2 -2
  192. package/docs/spinner-plantilla-sin-loguear.html +18 -18
  193. package/docs/sprints/01-combobox-template.md +433 -0
  194. package/docs/sprints/02-combobox-styles.md +291 -0
  195. package/docs/sprints/03-combobox-javascript.md +589 -0
  196. package/docs/sprints/04-combobox-integration.md +386 -0
  197. package/docs/sprints/05-combobox-refinamiento-w3c.md +55 -0
  198. package/package.json +61 -61
  199. package/public/images/demo-icon.svg +9 -9
  200. package/replit.md +74 -74
  201. package/src/EUPL-1.2.txt +287 -287
  202. package/src/css/base.css +44 -44
  203. package/src/css/component.form-group.css +24 -24
  204. package/src/css/component.headroom.css +32 -32
  205. package/src/css/component.text.css +169 -169
  206. package/src/css/styles.css +247 -246
  207. package/src/js/aria/MenuHorizontal.js +63 -65
  208. package/src/js/aria/MenuNavigation.js +56 -55
  209. package/src/js/aria/MenuVertical.js +60 -60
  210. package/src/js/aria/MenubarAction.js +29 -6
  211. package/src/js/aria/MenubarItemAction.js +1 -9
  212. package/src/js/aria/Nav.js +60 -60
  213. package/src/js/aria/PopupMenuAction.js +32 -14
  214. package/src/js/aria/accordion.js +281 -264
  215. package/src/js/aria/alert.js +8 -3
  216. package/src/js/aria/checkBoxes.js +52 -52
  217. package/src/js/aria/collapsible.js +44 -44
  218. package/src/js/aria/combobox.js +597 -0
  219. package/src/js/aria/dataGrid.js +953 -950
  220. package/src/js/aria/linksList.js +64 -42
  221. package/src/js/aria/listbox.js +3 -3
  222. package/src/js/aria/notification.js +56 -56
  223. package/src/js/aria/radioButton.js +50 -50
  224. package/src/js/aria/tabs.js +20 -6
  225. package/src/js/aria/toggle.js +61 -61
  226. package/src/js/aria/tree.js +60 -40
  227. package/src/js/aria/treegrid.js +507 -507
  228. package/src/js/aria/treeitem.js +22 -13
  229. package/src/js/aria/utils.js +240 -219
  230. package/src/js/desy-html.js +860 -813
  231. package/src/js/headroom.min.js +6 -6
  232. package/src/js/index.js +74 -72
  233. package/src/main.js +2 -2
  234. package/src/templates/components/accordion/_examples.accordion.njk +482 -482
  235. package/src/templates/components/accordion/_macro.accordion.njk +3 -3
  236. package/src/templates/components/accordion/_template.accordion.njk +131 -131
  237. package/src/templates/components/accordion/params.accordion.yaml +125 -125
  238. package/src/templates/components/accordion-history/_examples.accordion-history.njk +521 -521
  239. package/src/templates/components/accordion-history/_macro.accordion-history.njk +3 -3
  240. package/src/templates/components/accordion-history/_template.accordion-history.njk +193 -193
  241. package/src/templates/components/accordion-history/params.accordion-history.yaml +129 -129
  242. package/src/templates/components/alert/_examples.alert.njk +91 -91
  243. package/src/templates/components/alert/_macro.alert.njk +3 -3
  244. package/src/templates/components/alert/_styles.alert.css +9 -9
  245. package/src/templates/components/alert/_template.alert.njk +16 -16
  246. package/src/templates/components/alert/params.alert.yaml +25 -25
  247. package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +464 -464
  248. package/src/templates/components/breadcrumbs/_macro.breadcrumbs.njk +3 -3
  249. package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css +81 -81
  250. package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +77 -77
  251. package/src/templates/components/breadcrumbs/params.breadcrumbs.yaml +44 -44
  252. package/src/templates/components/button/_examples.button.njk +518 -511
  253. package/src/templates/components/button/_macro.button.njk +3 -3
  254. package/src/templates/components/button/_styles.button.css +180 -180
  255. package/src/templates/components/button/_template.button.njk +49 -49
  256. package/src/templates/components/button/params.button.yaml +48 -48
  257. package/src/templates/components/button-loader/_examples.button-loader.njk +499 -492
  258. package/src/templates/components/button-loader/_macro.button-loader.njk +3 -3
  259. package/src/templates/components/button-loader/_styles.button-loader.css +194 -194
  260. package/src/templates/components/button-loader/_template.button-loader.njk +84 -84
  261. package/src/templates/components/button-loader/params.button-loader.yaml +74 -74
  262. package/src/templates/components/card/_examples.card.njk +381 -381
  263. package/src/templates/components/card/_macro.card.njk +3 -3
  264. package/src/templates/components/card/_template.card.njk +34 -34
  265. package/src/templates/components/card/params.card.yaml +112 -112
  266. package/src/templates/components/character-count/_examples.character-count.njk +195 -195
  267. package/src/templates/components/character-count/_macro.character-count.njk +5 -5
  268. package/src/templates/components/character-count/_template.character-count.njk +38 -38
  269. package/src/templates/components/character-count/params.character-count.yaml +77 -77
  270. package/src/templates/components/checkboxes/_examples.checkboxes.njk +835 -835
  271. package/src/templates/components/checkboxes/_macro.checkboxes.njk +3 -3
  272. package/src/templates/components/checkboxes/_styles.checkboxes.css +30 -30
  273. package/src/templates/components/checkboxes/_template.checkboxes.njk +137 -137
  274. package/src/templates/components/checkboxes/params.checkboxes.yaml +116 -116
  275. package/src/templates/components/collapsible/_examples.collapsible.njk +107 -107
  276. package/src/templates/components/collapsible/_macro.collapsible.njk +3 -3
  277. package/src/templates/components/collapsible/_styles.collapsible.css +35 -35
  278. package/src/templates/components/collapsible/_template.collapsible.njk +17 -17
  279. package/src/templates/components/collapsible/params.collapsible.yaml +48 -48
  280. package/src/templates/components/combobox/_examples.combobox.njk +440 -0
  281. package/src/templates/components/combobox/_macro.combobox.njk +3 -0
  282. package/src/templates/components/combobox/_styles.combobox.css +92 -0
  283. package/src/templates/components/combobox/_template.combobox.njk +97 -0
  284. package/src/templates/components/combobox/params.combobox.yaml +102 -0
  285. package/src/templates/components/date-input/_examples.date-input.njk +578 -578
  286. package/src/templates/components/date-input/_macro.date-input.njk +3 -3
  287. package/src/templates/components/date-input/_template.date-input.njk +125 -125
  288. package/src/templates/components/date-input/params.date-input.yaml +97 -97
  289. package/src/templates/components/datepicker/_examples.datepicker.njk +415 -415
  290. package/src/templates/components/datepicker/_macro.datepicker.njk +3 -3
  291. package/src/templates/components/datepicker/_styles.datepicker.css +87 -87
  292. package/src/templates/components/datepicker/_template.datepicker.njk +129 -129
  293. package/src/templates/components/datepicker/params.datepicker.yaml +104 -104
  294. package/src/templates/components/description-list/_examples.description-list.njk +502 -502
  295. package/src/templates/components/description-list/_macro.description-list.njk +3 -3
  296. package/src/templates/components/description-list/_template.description-list.njk +17 -17
  297. package/src/templates/components/description-list/params.description-list.yaml +61 -61
  298. package/src/templates/components/details/_examples.details.njk +68 -68
  299. package/src/templates/components/details/_macro.details.njk +3 -3
  300. package/src/templates/components/details/_template.details.njk +17 -17
  301. package/src/templates/components/details/params.details.yaml +40 -40
  302. package/src/templates/components/dialog/_examples.dialog.njk +156 -156
  303. package/src/templates/components/dialog/_macro.dialog.njk +3 -3
  304. package/src/templates/components/dialog/_styles.dialog.css +27 -27
  305. package/src/templates/components/dialog/_template.dialog.njk +12 -12
  306. package/src/templates/components/dialog/params.dialog.yaml +25 -25
  307. package/src/templates/components/dropdown/_examples.dropdown.njk +226 -226
  308. package/src/templates/components/dropdown/_macro.dropdown.njk +3 -3
  309. package/src/templates/components/dropdown/_styles.dropdown.css +191 -191
  310. package/src/templates/components/dropdown/_template.dropdown.njk +34 -34
  311. package/src/templates/components/dropdown/params.dropdown.yaml +32 -32
  312. package/src/templates/components/error-message/_examples.error-message.njk +28 -28
  313. package/src/templates/components/error-message/_macro.error-message.njk +5 -5
  314. package/src/templates/components/error-message/_template.error-message.njk +8 -8
  315. package/src/templates/components/error-message/params.error-message.yaml +23 -23
  316. package/src/templates/components/error-summary/_examples.error-summary.njk +111 -111
  317. package/src/templates/components/error-summary/_macro.error-summary.njk +5 -5
  318. package/src/templates/components/error-summary/_template.error-summary.njk +48 -48
  319. package/src/templates/components/error-summary/params.error-summary.yaml +50 -50
  320. package/src/templates/components/fieldset/_examples.fieldset.njk +79 -79
  321. package/src/templates/components/fieldset/_macro.fieldset.njk +2 -2
  322. package/src/templates/components/fieldset/_template.fieldset.njk +46 -46
  323. package/src/templates/components/fieldset/params.fieldset.yaml +49 -49
  324. package/src/templates/components/file-upload/_examples.file-upload.njk +103 -103
  325. package/src/templates/components/file-upload/_macro.file-upload.njk +2 -2
  326. package/src/templates/components/file-upload/_template.file-upload.njk +45 -45
  327. package/src/templates/components/file-upload/params.file-upload.yaml +48 -48
  328. package/src/templates/components/footer/_examples.footer.njk +558 -558
  329. package/src/templates/components/footer/_macro.footer.njk +3 -3
  330. package/src/templates/components/footer/_styles.footer.css +43 -43
  331. package/src/templates/components/footer/_template.footer.njk +130 -130
  332. package/src/templates/components/footer/params.footer.yaml +140 -140
  333. package/src/templates/components/header/_examples.header.njk +627 -627
  334. package/src/templates/components/header/_macro.header.header__dropdown.njk +3 -3
  335. package/src/templates/components/header/_macro.header.header__navigation.njk +3 -3
  336. package/src/templates/components/header/_macro.header.header__offcanvas.njk +3 -3
  337. package/src/templates/components/header/_macro.header.header__offcanvasButton.njk +3 -3
  338. package/src/templates/components/header/_macro.header.header__subnav.njk +3 -3
  339. package/src/templates/components/header/_macro.header.njk +3 -3
  340. package/src/templates/components/header/_styles.header.css +12 -12
  341. package/src/templates/components/header/_template.header.header__dropdown.njk +27 -27
  342. package/src/templates/components/header/_template.header.header__navigation.njk +25 -25
  343. package/src/templates/components/header/_template.header.header__offcanvas.njk +20 -20
  344. package/src/templates/components/header/_template.header.header__offcanvasButton.njk +10 -10
  345. package/src/templates/components/header/_template.header.header__subnav.njk +33 -33
  346. package/src/templates/components/header/_template.header.njk +155 -155
  347. package/src/templates/components/header/params.header.yaml +295 -295
  348. package/src/templates/components/header-advanced/_examples.header-advanced.njk +1110 -1110
  349. package/src/templates/components/header-advanced/_macro.header-advanced.njk +3 -3
  350. package/src/templates/components/header-advanced/_template.header-advanced.njk +171 -171
  351. package/src/templates/components/header-advanced/params.header-advanced.yaml +352 -352
  352. package/src/templates/components/header-mini/_examples.header-mini.njk +319 -316
  353. package/src/templates/components/header-mini/_macro.header-mini.njk +3 -3
  354. package/src/templates/components/header-mini/_template.header-mini.njk +51 -51
  355. package/src/templates/components/header-mini/params.header-mini.yaml +90 -90
  356. package/src/templates/components/hint/_examples.hint.njk +26 -26
  357. package/src/templates/components/hint/_macro.hint.njk +3 -3
  358. package/src/templates/components/hint/_template.hint.njk +3 -3
  359. package/src/templates/components/hint/params.hint.yaml +21 -21
  360. package/src/templates/components/input/_examples.input.njk +393 -393
  361. package/src/templates/components/input/_macro.input.njk +3 -3
  362. package/src/templates/components/input/_styles.input.css +17 -17
  363. package/src/templates/components/input/_template.input.njk +53 -53
  364. package/src/templates/components/input/params.input.yaml +80 -80
  365. package/src/templates/components/input-group/_examples.input-group.njk +558 -558
  366. package/src/templates/components/input-group/_macro.input-group.njk +3 -3
  367. package/src/templates/components/input-group/_template.input-group.njk +107 -107
  368. package/src/templates/components/input-group/params.input-group.yaml +123 -123
  369. package/src/templates/components/item/_examples.item.njk +370 -370
  370. package/src/templates/components/item/_macro.item.njk +3 -3
  371. package/src/templates/components/item/_template.item.njk +73 -73
  372. package/src/templates/components/item/params.item.yaml +101 -101
  373. package/src/templates/components/label/_examples.label.njk +58 -58
  374. package/src/templates/components/label/_macro.label.njk +5 -5
  375. package/src/templates/components/label/_template.label.njk +37 -37
  376. package/src/templates/components/label/params.label.yaml +28 -28
  377. package/src/templates/components/links-list/_examples.links-list.njk +761 -761
  378. package/src/templates/components/links-list/_macro.links-list.njk +3 -3
  379. package/src/templates/components/links-list/_template.links-list.njk +119 -119
  380. package/src/templates/components/links-list/params.links-list.yaml +101 -101
  381. package/src/templates/components/listbox/_examples.listbox.njk +813 -812
  382. package/src/templates/components/listbox/_macro.listbox.njk +3 -3
  383. package/src/templates/components/listbox/_styles.listbox.css +218 -218
  384. package/src/templates/components/listbox/_template.listbox.njk +90 -90
  385. package/src/templates/components/listbox/params.listbox.yaml +85 -85
  386. package/src/templates/components/media-object/_examples.media-object.njk +79 -79
  387. package/src/templates/components/media-object/_macro.media-object.njk +3 -3
  388. package/src/templates/components/media-object/_template.media-object.njk +21 -21
  389. package/src/templates/components/media-object/params.media-object.yaml +16 -16
  390. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +613 -613
  391. package/src/templates/components/menu-horizontal/_macro.menu-horizontal.njk +3 -3
  392. package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css +167 -167
  393. package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +36 -36
  394. package/src/templates/components/menu-horizontal/params.menu-horizontal.yaml +53 -53
  395. package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +1292 -1292
  396. package/src/templates/components/menu-navigation/_macro.menu-navigation.njk +3 -3
  397. package/src/templates/components/menu-navigation/_styles.menu-navigation.css +238 -238
  398. package/src/templates/components/menu-navigation/_template.menu-navigation.njk +87 -87
  399. package/src/templates/components/menu-navigation/params.menu-navigation.yaml +86 -86
  400. package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +835 -835
  401. package/src/templates/components/menu-vertical/_macro.menu-vertical.njk +3 -3
  402. package/src/templates/components/menu-vertical/_template.menu-vertical.njk +92 -92
  403. package/src/templates/components/menu-vertical/params.menu-vertical.yaml +77 -77
  404. package/src/templates/components/menubar/_examples.menubar.njk +1843 -1843
  405. package/src/templates/components/menubar/_macro.menubar.njk +3 -3
  406. package/src/templates/components/menubar/_styles.menubar.css +259 -259
  407. package/src/templates/components/menubar/_template.menubar.njk +106 -106
  408. package/src/templates/components/menubar/params.menubar.yaml +130 -130
  409. package/src/templates/components/modal/_examples.modal.njk +432 -432
  410. package/src/templates/components/modal/_macro.modal.njk +3 -3
  411. package/src/templates/components/modal/_template.modal.njk +129 -129
  412. package/src/templates/components/modal/params.modal.yaml +77 -77
  413. package/src/templates/components/nav/_examples.nav.njk +468 -468
  414. package/src/templates/components/nav/_macro.nav.njk +3 -3
  415. package/src/templates/components/nav/_template.nav.njk +53 -53
  416. package/src/templates/components/nav/params.nav.yaml +61 -61
  417. package/src/templates/components/notification/_examples.notification.njk +277 -277
  418. package/src/templates/components/notification/_macro.notification.njk +3 -3
  419. package/src/templates/components/notification/_styles.notification.css +30 -30
  420. package/src/templates/components/notification/_template.notification.njk +86 -86
  421. package/src/templates/components/notification/params.notification.yaml +101 -101
  422. package/src/templates/components/pagination/_examples.pagination.njk +444 -444
  423. package/src/templates/components/pagination/_macro.pagination.njk +3 -3
  424. package/src/templates/components/pagination/_template.pagination.njk +162 -162
  425. package/src/templates/components/pagination/params.pagination.yaml +150 -150
  426. package/src/templates/components/pill/_examples.pill.njk +180 -180
  427. package/src/templates/components/pill/_macro.pill.njk +3 -3
  428. package/src/templates/components/pill/_styles.pill.css +59 -59
  429. package/src/templates/components/pill/_template.pill.njk +38 -38
  430. package/src/templates/components/pill/params.pill.yaml +28 -28
  431. package/src/templates/components/radios/_examples.radios.njk +698 -698
  432. package/src/templates/components/radios/_macro.radios.njk +5 -5
  433. package/src/templates/components/radios/_styles.radios.css +30 -30
  434. package/src/templates/components/radios/_template.radios.njk +133 -133
  435. package/src/templates/components/radios/params.radios.yaml +104 -104
  436. package/src/templates/components/searchbar/_examples.searchbar.njk +147 -147
  437. package/src/templates/components/searchbar/_macro.searchbar.njk +3 -3
  438. package/src/templates/components/searchbar/_template.searchbar.njk +45 -45
  439. package/src/templates/components/searchbar/params.searchbar.yaml +46 -46
  440. package/src/templates/components/select/_examples.select.njk +364 -364
  441. package/src/templates/components/select/_macro.select.njk +5 -5
  442. package/src/templates/components/select/_styles.select.css +45 -45
  443. package/src/templates/components/select/_template.select.njk +67 -67
  444. package/src/templates/components/select/params.select.yaml +93 -93
  445. package/src/templates/components/skip-link/_examples.skip-link.njk +31 -31
  446. package/src/templates/components/skip-link/_macro.skip-link.njk +3 -3
  447. package/src/templates/components/skip-link/_styles.skip-link.css +12 -12
  448. package/src/templates/components/skip-link/_template.skip-link.njk +4 -4
  449. package/src/templates/components/skip-link/params.skip-link.yaml +20 -20
  450. package/src/templates/components/spinner/_examples.spinner.njk +91 -101
  451. package/src/templates/components/spinner/_macro.spinner.njk +3 -3
  452. package/src/templates/components/spinner/_styles.spinner.css +33 -33
  453. package/src/templates/components/spinner/_template.spinner.njk +12 -12
  454. package/src/templates/components/spinner/params.spinner.yaml +12 -12
  455. package/src/templates/components/status/_examples.status.njk +80 -80
  456. package/src/templates/components/status/_macro.status.njk +3 -3
  457. package/src/templates/components/status/_template.status.njk +23 -23
  458. package/src/templates/components/status/params.status.yaml +24 -24
  459. package/src/templates/components/status-item/_examples.status-item.njk +319 -319
  460. package/src/templates/components/status-item/_macro.status-item.njk +3 -3
  461. package/src/templates/components/status-item/_template.status-item.njk +99 -99
  462. package/src/templates/components/status-item/params.status-item.yaml +106 -106
  463. package/src/templates/components/table/_examples.table.njk +705 -705
  464. package/src/templates/components/table/_macro.table.njk +3 -3
  465. package/src/templates/components/table/_styles.table.css +19 -19
  466. package/src/templates/components/table/_template.table.njk +68 -68
  467. package/src/templates/components/table/params.table.yaml +130 -130
  468. package/src/templates/components/table-advanced/_examples.table-advanced.njk +839 -839
  469. package/src/templates/components/table-advanced/_macro.table-advanced.njk +3 -3
  470. package/src/templates/components/table-advanced/_styles.table-advanced.css +63 -63
  471. package/src/templates/components/table-advanced/_template.table-advanced.njk +210 -210
  472. package/src/templates/components/table-advanced/params.table-advanced.yaml +160 -160
  473. package/src/templates/components/tabs/_examples.tabs.njk +588 -588
  474. package/src/templates/components/tabs/_macro.tabs.njk +3 -3
  475. package/src/templates/components/tabs/_styles.tabs.css +132 -132
  476. package/src/templates/components/tabs/_template.tabs.njk +70 -70
  477. package/src/templates/components/tabs/params.tabs.yaml +83 -83
  478. package/src/templates/components/textarea/_examples.textarea.njk +174 -174
  479. package/src/templates/components/textarea/_macro.textarea.njk +5 -5
  480. package/src/templates/components/textarea/_template.textarea.njk +47 -47
  481. package/src/templates/components/textarea/params.textarea.yaml +64 -64
  482. package/src/templates/components/toggle/_examples.toggle.njk +248 -248
  483. package/src/templates/components/toggle/_macro.toggle.njk +3 -3
  484. package/src/templates/components/toggle/_styles.toggle.css +31 -31
  485. package/src/templates/components/toggle/_template.toggle.njk +27 -27
  486. package/src/templates/components/toggle/params.toggle.yaml +69 -69
  487. package/src/templates/components/tooltip/_examples.tooltip.njk +134 -134
  488. package/src/templates/components/tooltip/_macro.tooltip.njk +3 -3
  489. package/src/templates/components/tooltip/_styles.tooltip.css +9 -9
  490. package/src/templates/components/tooltip/_template.tooltip.njk +40 -40
  491. package/src/templates/components/tooltip/params.tooltip.yaml +40 -40
  492. package/src/templates/components/tree/_examples.tree.njk +2671 -2671
  493. package/src/templates/components/tree/_macro.tree.njk +3 -3
  494. package/src/templates/components/tree/_styles.tree.css +54 -54
  495. package/src/templates/components/tree/_template.tree.njk +232 -232
  496. package/src/templates/components/tree/params.tree.yaml +173 -173
  497. package/src/templates/components/treegrid/_examples.treegrid.njk +1269 -1269
  498. package/src/templates/components/treegrid/_macro.treegrid.njk +3 -3
  499. package/src/templates/components/treegrid/_styles.treegrid.css +31 -31
  500. package/src/templates/components/treegrid/_template.treegrid.njk +90 -90
  501. package/src/templates/components/treegrid/params.treegrid.yaml +131 -131
  502. package/src/templates/includes/_abrir-notificaciones-extra.njk +2 -2
  503. package/src/templates/includes/_abrir-notificaciones.njk +2 -2
  504. package/src/templates/includes/_acciones-de-cabecera.njk +28 -28
  505. package/src/templates/includes/_ejemplo-titulo-h2-parrafo.njk +4 -4
  506. package/src/templates/includes/_ejemplo-titulo-parrafo.njk +4 -4
  507. package/src/templates/includes/_test-include.njk +13 -13
  508. package/src/templates/pages/_page.foot-headroom.njk +30 -30
  509. package/src/templates/pages/_page.foot.njk +5 -5
  510. package/src/templates/pages/_page.footer.njk +19 -19
  511. package/src/templates/pages/_page.head.njk +27 -27
  512. package/src/templates/pages/_page.notification-edit-inner-content.njk +31 -31
  513. package/src/templates/pages/_page.notification-edit.njk +30 -30
  514. package/src/templates/pages/_page.notification-footer.njk +32 -32
  515. package/src/templates/pages/_page.notification-header-fixed.njk +30 -30
  516. package/src/templates/pages/_page.notification-header.njk +31 -31
  517. package/src/templates/pages/_page.sidebar-content.njk +20 -20
  518. package/src/templates/pages/_page.spinner-block.njk +14 -14
  519. package/src/templates/pages/_page.spinner-show.njk +15 -15
  520. package/src/templates/pages/_page.spinner.njk +15 -15
  521. package/src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk +36 -36
  522. package/src/templates/pages/_template.edit-fixed.njk +74 -74
  523. package/src/templates/pages/_template.home.njk +111 -111
  524. package/src/templates/pages/_template.logged-out.njk +56 -56
  525. package/src/templates/pages/_template.logged-selector-fixed-headroom.njk +198 -198
  526. package/src/templates/pages/_template.logged-selector-fixed.njk +195 -195
  527. package/src/templates/pages/_template.logged-selector-subheader.njk +80 -80
  528. package/src/templates/pages/_template.logged-selector-with-sidebar.njk +28 -28
  529. package/src/templates/pages/_template.logged-selector.njk +195 -195
  530. package/src/templates/pages/_template.logged.njk +141 -141
  531. package/src/templates/pages/_template.mfe-iframe-content.njk +31 -31
  532. package/src/templates/pages/_template.mfe.njk +83 -83
  533. package/src/templates/pages/_template.test.njk +48 -48
  534. package/src/templates/pages/_template.with-header-advanced.njk +311 -311
  535. package/vite.config.js +1021 -982
@@ -1,112 +1,112 @@
1
- {% set exampleComponent = "error-summary" %}
2
- {% set examples = [
3
- {
4
- "name": "por defecto",
5
- "data": {
6
- "titleText": "Problemas encontrados",
7
- "headingLevel": 2,
8
- "errorList": [
9
- {
10
- "text": "El campo de Nombre no puede estar vacío.",
11
- "href": "#example-error-1"
12
- },
13
- {
14
- "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
15
- "href": "#example-error-2"
16
- }
17
- ]
18
- },
19
- "visualDescription": "Bloque rectangular con borde rojo de 2-3px y fondo rosa claro. Contiene encabezado en negro y lista de dos elementos en rojo subrayado (enlaces). Texto alineado a la izquierda con espaciado vertical entre elementos.",
20
- "_generated": {
21
- "hash": "be7a82bc9e4cdf0d90657d1d6816a7cf",
22
- "version": "15.0.3",
23
- "timestamp": "2026-01-30T18:57:24.624Z"
24
- }
25
- },
26
- {
27
- "name": "Con encabezado de nivel 3",
28
- "data": {
29
- "titleText": "Título con h3",
30
- "headingLevel": 3,
31
- "errorList": [
32
- {
33
- "text": "El campo de Nombre no puede estar vacío.",
34
- "href": "#example-error-1"
35
- },
36
- {
37
- "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
38
- "href": "#example-error-2"
39
- }
40
- ]
41
- },
42
- "visualDescription": "Bloque rectangular con borde rojo de 2-3px y fondo rosa claro. Incluye encabezado en negro, subtítulo en negro peso normal, y lista de dos elementos en rojo subrayado (enlaces). Texto alineado a la izquierda con espaciado vertical entre secciones.",
43
- "_generated": {
44
- "hash": "59f46f0589122462f39e2bbe422e9c24",
45
- "version": "15.0.3",
46
- "timestamp": "2026-01-30T18:57:24.624Z"
47
- }
48
- },
49
- {
50
- "name": "sin enlaces",
51
- "data": {
52
- "titleText": "Problemas encontrados",
53
- "headingLevel": 2,
54
- "errorList": [
55
- {
56
- "text": "Nombre de usuario o contraseña incorrectos."
57
- }
58
- ]
59
- },
60
- "visualDescription": "Bloque rectangular con borde rojo de 2-3px y fondo rosa claro. Contiene encabezado en negro y texto descriptivo en rojo peso normal sin subrayado. Texto alineado a la izquierda con espaciado vertical mínimo.",
61
- "_generated": {
62
- "hash": "f3698b2dad3d6cc4c65a4fef1d2d57df",
63
- "version": "15.0.3",
64
- "timestamp": "2026-01-30T18:57:24.624Z"
65
- }
66
- },
67
- {
68
- "name": "con y sin enlaces",
69
- "data": {
70
- "titleText": "Problemas encontrados",
71
- "headingLevel": 2,
72
- "errorList": [
73
- {
74
- "text": "Nombre de usuario o contraseña incorrectos."
75
- },
76
- {
77
- "text": "Acepta los términos del servicio para acceder.",
78
- "href": "#example-error-1"
79
- }
80
- ]
81
- },
82
- "visualDescription": "Caja con borde rojo grueso (3-4px) y fondo rosa muy claro. Título en negrita negro. Texto de error principal en rojo negrita. Segunda línea en rojo negrita con subrayado (enlace).",
83
- "_generated": {
84
- "hash": "afaa40dba96a7ae70f689ebc058c3671",
85
- "version": "15.0.3",
86
- "timestamp": "2026-01-30T18:57:33.778Z"
87
- }
88
- },
89
- {
90
- "name": "con todo",
91
- "data": {
92
- "titleText": "Problemas encontrados",
93
- "headingLevel": 2,
94
- "descriptionText": "Por favor, corrige los problemas siguientes.",
95
- "errorList": [
96
- {
97
- "text": "Nombre de usuario o contraseña incorrectos."
98
- },
99
- {
100
- "text": "Acepta los términos del servicio para acceder.",
101
- "href": "#example-error-1"
102
- }
103
- ]
104
- },
105
- "visualDescription": "Caja con borde rojo grueso (3-4px) y fondo rosa muy claro. Título en negrita negro. Texto informativo en negro regular. Dos líneas de error en rojo negrita, con la segunda línea en rojo negrita con subrayado (enlace).",
106
- "_generated": {
107
- "hash": "196bec81104910c480f1af211c6e840f",
108
- "version": "15.0.3",
109
- "timestamp": "2026-01-30T18:57:33.778Z"
110
- }
111
- }
1
+ {% set exampleComponent = "error-summary" %}
2
+ {% set examples = [
3
+ {
4
+ "name": "por defecto",
5
+ "data": {
6
+ "titleText": "Problemas encontrados",
7
+ "headingLevel": 2,
8
+ "errorList": [
9
+ {
10
+ "text": "El campo de Nombre no puede estar vacío.",
11
+ "href": "#example-error-1"
12
+ },
13
+ {
14
+ "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
15
+ "href": "#example-error-2"
16
+ }
17
+ ]
18
+ },
19
+ "visualDescription": "Bloque rectangular con borde rojo de 2-3px y fondo rosa claro. Contiene encabezado en negro y lista de elementos en rojo subrayado (enlaces). Texto alineado a la izquierda con espaciado vertical entre elementos.",
20
+ "_generated": {
21
+ "hash": "be7a82bc9e4cdf0d90657d1d6816a7cf",
22
+ "version": "15.0.3",
23
+ "timestamp": "2026-01-30T18:57:24.624Z"
24
+ }
25
+ },
26
+ {
27
+ "name": "Con encabezado de nivel 3",
28
+ "data": {
29
+ "titleText": "Título con h3",
30
+ "headingLevel": 3,
31
+ "errorList": [
32
+ {
33
+ "text": "El campo de Nombre no puede estar vacío.",
34
+ "href": "#example-error-1"
35
+ },
36
+ {
37
+ "text": "El campo de Teléfono no es correcto. Introduce una cifra de, al menos, 9 dígitos.",
38
+ "href": "#example-error-2"
39
+ }
40
+ ]
41
+ },
42
+ "visualDescription": "Bloque rectangular con borde rojo de 2-3px y fondo rosa claro. Incluye encabezado en negro, subtítulo en negro peso normal, y lista de elementos en rojo subrayado (enlaces). Texto alineado a la izquierda con espaciado vertical entre secciones.",
43
+ "_generated": {
44
+ "hash": "59f46f0589122462f39e2bbe422e9c24",
45
+ "version": "15.0.3",
46
+ "timestamp": "2026-01-30T18:57:24.624Z"
47
+ }
48
+ },
49
+ {
50
+ "name": "sin enlaces",
51
+ "data": {
52
+ "titleText": "Problemas encontrados",
53
+ "headingLevel": 2,
54
+ "errorList": [
55
+ {
56
+ "text": "Nombre de usuario o contraseña incorrectos."
57
+ }
58
+ ]
59
+ },
60
+ "visualDescription": "Bloque rectangular con borde rojo de 2-3px y fondo rosa claro. Contiene encabezado en negro y texto descriptivo de error en rojo peso normal sin subrayado. Texto alineado a la izquierda con espaciado vertical mínimo.",
61
+ "_generated": {
62
+ "hash": "f3698b2dad3d6cc4c65a4fef1d2d57df",
63
+ "version": "15.0.3",
64
+ "timestamp": "2026-01-30T18:57:24.624Z"
65
+ }
66
+ },
67
+ {
68
+ "name": "con y sin enlaces",
69
+ "data": {
70
+ "titleText": "Problemas encontrados",
71
+ "headingLevel": 2,
72
+ "errorList": [
73
+ {
74
+ "text": "Nombre de usuario o contraseña incorrectos."
75
+ },
76
+ {
77
+ "text": "Acepta los términos del servicio para acceder.",
78
+ "href": "#example-error-1"
79
+ }
80
+ ]
81
+ },
82
+ "visualDescription": "Caja con borde rojo grueso (3-4px) y fondo rosa muy claro. Título en negrita negro. Texto de error en rojo negrita. Segunda línea en rojo negrita con subrayado (enlace).",
83
+ "_generated": {
84
+ "hash": "afaa40dba96a7ae70f689ebc058c3671",
85
+ "version": "15.0.3",
86
+ "timestamp": "2026-01-30T18:57:33.778Z"
87
+ }
88
+ },
89
+ {
90
+ "name": "con todo",
91
+ "data": {
92
+ "titleText": "Problemas encontrados",
93
+ "headingLevel": 2,
94
+ "descriptionText": "Por favor, corrige los problemas siguientes.",
95
+ "errorList": [
96
+ {
97
+ "text": "Nombre de usuario o contraseña incorrectos."
98
+ },
99
+ {
100
+ "text": "Acepta los términos del servicio para acceder.",
101
+ "href": "#example-error-1"
102
+ }
103
+ ]
104
+ },
105
+ "visualDescription": "Caja con borde rojo grueso (3-4px) y fondo rosa muy claro. Título en negrita negro. Texto informativo en negro regular. Dos líneas de error en rojo negrita, con la segunda línea en rojo negrita con subrayado (enlace).",
106
+ "_generated": {
107
+ "hash": "196bec81104910c480f1af211c6e840f",
108
+ "version": "15.0.3",
109
+ "timestamp": "2026-01-30T18:57:33.778Z"
110
+ }
111
+ }
112
112
  ] %}
@@ -1,5 +1,5 @@
1
- <!-- _macro.error-message.njk -->
2
-
3
- {% macro componentErrorSummary(params) %}
4
- {% include "./_template.error-summary.njk" %}
5
- {% endmacro %}
1
+ <!-- _macro.error-message.njk -->
2
+
3
+ {% macro componentErrorSummary(params) %}
4
+ {% include "./_template.error-summary.njk" %}
5
+ {% endmacro %}
@@ -1,49 +1,49 @@
1
- <!-- error-summary -->
2
- <div class="p-base bg-white border-2 border-alert-base
3
- {%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="error-summary-title" role="alert" tabindex="-1"
4
- {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-error-summary">
5
- {% if params.headingLevel == "1" %}
6
- <h1 class="mb-base font-bold" id="error-summary-title">
7
- {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
8
- </h1>
9
- {% elseif params.headingLevel == "2" %}
10
- <h2 class="mb-base font-bold" id="error-summary-title">
11
- {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
12
- </h2>
13
- {% elseif params.headingLevel == "3" %}
14
- <h3 class="mb-base font-bold" id="error-summary-title">
15
- {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
16
- </h3>
17
- {% elseif params.headingLevel == "4" %}
18
- <h4 class="mb-base font-bold" id="error-summary-title">
19
- {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
20
- </h4>
21
- {% elseif params.headingLevel == "5" %}
22
- <h5 class="mb-base font-bold" id="error-summary-title">
23
- {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
24
- </h5>
25
- {% else %}
26
- <h2 class="mb-base font-bold" id="error-summary-title">
27
- {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
28
- </h2>
29
- {% endif %}
30
- <div>
31
- {% if params.descriptionHtml or params.descriptionText %}
32
- <p class="mb-base">
33
- {{ params.descriptionHtml | safe if params.descriptionHtml else params.descriptionText }}
34
- </p>
35
- {% endif %}
36
- <ul class="font-semibold text-alert-base">
37
- {% for item in params.errorList %}
38
- <li>
39
- {% if item.href %}
40
- <a href="{{ item.href }}" class="c-link c-link--alert inline-block pb-sm"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | filterquotes | safe if item.html else item.text }}</a>
41
- {% else %}
42
- {{ item.html | filterquotes | safe if item.html else item.text }}
43
- {% endif %}
44
- </li>
45
- {% endfor %}
46
- </ul>
47
- </div>
48
- </div>
1
+ <!-- error-summary -->
2
+ <div class="p-base bg-white border-2 border-alert-base
3
+ {%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="error-summary-title" role="alert" tabindex="-1"
4
+ {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="c-error-summary">
5
+ {% if params.headingLevel == "1" %}
6
+ <h1 class="mb-base font-bold" id="error-summary-title">
7
+ {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
8
+ </h1>
9
+ {% elseif params.headingLevel == "2" %}
10
+ <h2 class="mb-base font-bold" id="error-summary-title">
11
+ {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
12
+ </h2>
13
+ {% elseif params.headingLevel == "3" %}
14
+ <h3 class="mb-base font-bold" id="error-summary-title">
15
+ {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
16
+ </h3>
17
+ {% elseif params.headingLevel == "4" %}
18
+ <h4 class="mb-base font-bold" id="error-summary-title">
19
+ {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
20
+ </h4>
21
+ {% elseif params.headingLevel == "5" %}
22
+ <h5 class="mb-base font-bold" id="error-summary-title">
23
+ {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
24
+ </h5>
25
+ {% else %}
26
+ <h2 class="mb-base font-bold" id="error-summary-title">
27
+ {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
28
+ </h2>
29
+ {% endif %}
30
+ <div>
31
+ {% if params.descriptionHtml or params.descriptionText %}
32
+ <p class="mb-base">
33
+ {{ params.descriptionHtml | safe if params.descriptionHtml else params.descriptionText }}
34
+ </p>
35
+ {% endif %}
36
+ <ul class="font-semibold text-alert-base">
37
+ {% for item in params.errorList %}
38
+ <li>
39
+ {% if item.href %}
40
+ <a href="{{ item.href }}" class="c-link c-link--alert inline-block pb-sm"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | filterquotes | safe if item.html else item.text }}</a>
41
+ {% else %}
42
+ {{ item.html | filterquotes | safe if item.html else item.text }}
43
+ {% endif %}
44
+ </li>
45
+ {% endfor %}
46
+ </ul>
47
+ </div>
48
+ </div>
49
49
  <!-- /error-summary -->
@@ -1,50 +1,50 @@
1
- params:
2
- - name: titleText
3
- type: string
4
- required: true
5
- description: If `titleHtml` is set, this is not required. Text to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.
6
- - name: titleHtml
7
- type: string
8
- required: true
9
- description: If `titleText` is set, this is not required. HTML to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.
10
- - name: headingLevel
11
- type: number
12
- required: false
13
- description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
14
- - name: descriptionText
15
- type: string
16
- required: false
17
- description: Text to use for the description of the errors. If you set `descriptionHtml`, the component will ignore `descriptionText`.
18
- - name: descriptionHtml
19
- type: string
20
- required: false
21
- description: HTML to use for the description of the errors. If you set this option, the component will ignore `descriptionText`.
22
- - name: errorList
23
- type: array
24
- required: true
25
- description: Contains an array of error link items and all their available arguments.
26
- params:
27
- - name: href
28
- type: string
29
- required: false
30
- description: Href attribute for the error link item. If provided item will be an anchor.
31
- - name: text
32
- type: string
33
- required: true
34
- description: If `html` is set, this is not required. Text for the error link item. If `html` is provided, the `text` argument will be ignored.
35
- - name: html
36
- type: string
37
- required: true
38
- description: If `text` is set, this is not required. HTML for the error link item. If `html` is provided, the `text` argument will be ignored.
39
- - name: attributes
40
- type: object
41
- required: false
42
- description: HTML attributes (for example data attributes) to add to the error link anchor.
43
- - name: classes
44
- type: string
45
- required: false
46
- description: Classes to add to the error-summary container.
47
- - name: attributes
48
- type: object
49
- required: false
50
- description: HTML attributes (for example data attributes) to add to the error-summary container.
1
+ params:
2
+ - name: titleText
3
+ type: string
4
+ required: true
5
+ description: If `titleHtml` is set, this is not required. Text to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.
6
+ - name: titleHtml
7
+ type: string
8
+ required: true
9
+ description: If `titleText` is set, this is not required. HTML to use for the heading of the error summary block. If `titleHtml` is provided, `titleText` will be ignored.
10
+ - name: headingLevel
11
+ type: number
12
+ required: false
13
+ description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.
14
+ - name: descriptionText
15
+ type: string
16
+ required: false
17
+ description: Text to use for the description of the errors. If you set `descriptionHtml`, the component will ignore `descriptionText`.
18
+ - name: descriptionHtml
19
+ type: string
20
+ required: false
21
+ description: HTML to use for the description of the errors. If you set this option, the component will ignore `descriptionText`.
22
+ - name: errorList
23
+ type: array
24
+ required: true
25
+ description: Contains an array of error link items and all their available arguments.
26
+ params:
27
+ - name: href
28
+ type: string
29
+ required: false
30
+ description: Href attribute for the error link item. If provided item will be an anchor.
31
+ - name: text
32
+ type: string
33
+ required: true
34
+ description: If `html` is set, this is not required. Text for the error link item. If `html` is provided, the `text` argument will be ignored.
35
+ - name: html
36
+ type: string
37
+ required: true
38
+ description: If `text` is set, this is not required. HTML for the error link item. If `html` is provided, the `text` argument will be ignored.
39
+ - name: attributes
40
+ type: object
41
+ required: false
42
+ description: HTML attributes (for example data attributes) to add to the error link anchor.
43
+ - name: classes
44
+ type: string
45
+ required: false
46
+ description: Classes to add to the error-summary container.
47
+ - name: attributes
48
+ type: object
49
+ required: false
50
+ description: HTML attributes (for example data attributes) to add to the error-summary container.
@@ -1,80 +1,80 @@
1
- {% from "components/input/_macro.input.njk" import componentInput %}
2
-
3
- {% macro callerExample(id='id') %}
4
- {{ componentInput({
5
- "label": {
6
- "text": "Número de teléfono"
7
- },
8
- "id": "tel-id-" + id,
9
- "name": "tel-name-" + id
10
- }) }}
11
- {% endmacro %}
12
-
13
- {% macro callerErrorExample(id='id') %}
14
- {{ componentInput({
15
- "label": {
16
- "text": "Número de teléfono"
17
- },
18
- "id": "tel-error-id-" + id,
19
- "name": "tel-error-name-" + id,
20
- "errorMessage": {
21
- "text": "Mensaje de error aqui"
22
- }
23
- }) }}
24
- {% endmacro %}
25
-
26
-
27
- {% set exampleComponent = "fieldset" %}
28
- {% set examples = [
29
- {
30
- "name": "por defecto",
31
- "data": {
32
- "legend": {
33
- "text": "¿Cuál es tu número de teléfono?",
34
- "classes": "mb-sm"
35
- },
36
- "caller": callerExample('1').val
37
- },
38
- "visualDescription": "Fieldset con borde gris claro de 1px y fondo blanco. Contiene un label en texto negro regular, seguido de un campo de entrada de texto con borde gris de 1px y fondo blanco. El input tiene dimensiones estándar de aproximadamente 100px de ancho.",
39
- "_generated": {
40
- "hash": "4579013d15d9e0fe90959ea84ed8ed22",
41
- "version": "15.0.3",
42
- "timestamp": "2026-01-30T18:57:41.145Z"
43
- }
44
- },
45
- {
46
- "name": "con error",
47
- "description": "Mostrar código para visualizar el <code>aria-describedby</code>, el <code>aria-errormessage</code> y <code>aria-invalid='true'</code> aplicado en el HTML. El <code>aria-errormessage</code> se asocia al fieldset, en vez de a un campo concreto, cuando el error hace referencia a los elementos en su conjunto. Debería apuntar al id de un mensaje de error que describa el problema general del fieldset.",
48
- "data": {
49
- "legend": {
50
- "text": "¿Cuál es tu número de teléfono?",
51
- "classes": "mb-sm"
52
- },
53
- "errorId": "error-id",
54
- "caller": callerErrorExample('1').val
55
- },
56
- "visualDescription": "Fieldset con borde gris claro de 1px y fondo blanco. Incluye un label en texto negro regular, un sublabel en texto negro regular, un mensaje de error en texto rojo, y un campo de entrada con borde rojo de aproximadamente 2px y fondo blanco. El input mantiene dimensiones estándar de aproximadamente 100px de ancho.",
57
- "_generated": {
58
- "hash": "62df4723ee23a40d28fff0283b35e4bd",
59
- "version": "15.0.3",
60
- "timestamp": "2026-01-30T18:57:41.145Z"
61
- }
62
- },
63
- {
64
- "name": "con clases de css aplicadas",
65
- "data": {
66
- "legend": {
67
- "text": "¿Cuál es tu número de teléfono?",
68
- "classes": "mb-sm -ml-base px-base bg-white"
69
- },
70
- "classes": "p-lg border border-neutral-base",
71
- "caller": callerExample('4').val
72
- },
73
- "visualDescription": "Fieldset con borde gris claro de 1px, fondo gris muy claro (casi blanco), y padding interno visible. Contiene un label en texto negro regular, seguido de un segundo label en texto negro regular, y un campo de entrada con borde gris de 1px y fondo blanco. El input tiene dimensiones estándar de aproximadamente 100px de ancho.",
74
- "_generated": {
75
- "hash": "82583d54e8964c1f02d2cc2bad614326",
76
- "version": "15.0.3",
77
- "timestamp": "2026-01-30T18:57:41.145Z"
78
- }
79
- }
1
+ {% from "components/input/_macro.input.njk" import componentInput %}
2
+
3
+ {% macro callerExample(id='id') %}
4
+ {{ componentInput({
5
+ "label": {
6
+ "text": "Número de teléfono"
7
+ },
8
+ "id": "tel-id-" + id,
9
+ "name": "tel-name-" + id
10
+ }) }}
11
+ {% endmacro %}
12
+
13
+ {% macro callerErrorExample(id='id') %}
14
+ {{ componentInput({
15
+ "label": {
16
+ "text": "Número de teléfono"
17
+ },
18
+ "id": "tel-error-id-" + id,
19
+ "name": "tel-error-name-" + id,
20
+ "errorMessage": {
21
+ "text": "Mensaje de error aqui"
22
+ }
23
+ }) }}
24
+ {% endmacro %}
25
+
26
+
27
+ {% set exampleComponent = "fieldset" %}
28
+ {% set examples = [
29
+ {
30
+ "name": "por defecto",
31
+ "data": {
32
+ "legend": {
33
+ "text": "¿Cuál es tu número de teléfono?",
34
+ "classes": "mb-sm"
35
+ },
36
+ "caller": callerExample('1').val
37
+ },
38
+ "visualDescription": "Fieldset con borde gris claro de 1px y fondo blanco. Contiene un label en texto negro regular, seguido de un campo de entrada de texto con borde gris de 1px y fondo blanco. El input tiene dimensiones estándar de aproximadamente 100px de ancho.",
39
+ "_generated": {
40
+ "hash": "4579013d15d9e0fe90959ea84ed8ed22",
41
+ "version": "15.0.3",
42
+ "timestamp": "2026-01-30T18:57:41.145Z"
43
+ }
44
+ },
45
+ {
46
+ "name": "con error",
47
+ "description": "Mostrar código para visualizar el <code>aria-describedby</code>, el <code>aria-errormessage</code> y <code>aria-invalid='true'</code> aplicado en el HTML. El <code>aria-errormessage</code> se asocia al fieldset, en vez de a un campo concreto, cuando el error hace referencia a los elementos en su conjunto. Debería apuntar al id de un mensaje de error que describa el problema general del fieldset.",
48
+ "data": {
49
+ "legend": {
50
+ "text": "¿Cuál es tu número de teléfono?",
51
+ "classes": "mb-sm"
52
+ },
53
+ "errorId": "error-id",
54
+ "caller": callerErrorExample('1').val
55
+ },
56
+ "visualDescription": "Fieldset con borde gris claro de 1px y fondo blanco. Incluye un label en texto negro regular, un sublabel en texto negro regular, un mensaje de error en texto rojo, y un campo de entrada con borde rojo de aproximadamente 2px y fondo blanco. El input mantiene dimensiones estándar de aproximadamente 100px de ancho.",
57
+ "_generated": {
58
+ "hash": "62df4723ee23a40d28fff0283b35e4bd",
59
+ "version": "15.0.3",
60
+ "timestamp": "2026-01-30T18:57:41.145Z"
61
+ }
62
+ },
63
+ {
64
+ "name": "con clases de css aplicadas",
65
+ "data": {
66
+ "legend": {
67
+ "text": "¿Cuál es tu número de teléfono?",
68
+ "classes": "mb-sm -ml-base px-base bg-white"
69
+ },
70
+ "classes": "p-lg border border-neutral-base",
71
+ "caller": callerExample('4').val
72
+ },
73
+ "visualDescription": "Fieldset con borde gris claro de 1px, fondo gris muy claro (casi blanco), y padding interno visible. Contiene un label en texto negro regular, seguido de un segundo label en texto negro regular, y un campo de entrada con borde gris de 1px y fondo blanco. El input tiene dimensiones estándar de aproximadamente 100px de ancho.",
74
+ "_generated": {
75
+ "hash": "82583d54e8964c1f02d2cc2bad614326",
76
+ "version": "15.0.3",
77
+ "timestamp": "2026-01-30T18:57:41.145Z"
78
+ }
79
+ }
80
80
  ] %}
@@ -1,3 +1,3 @@
1
- {% macro componentFieldset(params) %}
2
- {% include "./_template.fieldset.njk" %}
1
+ {% macro componentFieldset(params) %}
2
+ {% include "./_template.fieldset.njk" %}
3
3
  {% endmacro %}