desy-html 16.0.4 → 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 (528) 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 +914 -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 +65 -65
  208. package/src/js/aria/MenuNavigation.js +34 -2
  209. package/src/js/aria/MenuVertical.js +60 -60
  210. package/src/js/aria/Nav.js +60 -60
  211. package/src/js/aria/PopupMenuAction.js +30 -12
  212. package/src/js/aria/accordion.js +264 -264
  213. package/src/js/aria/checkBoxes.js +52 -52
  214. package/src/js/aria/collapsible.js +44 -44
  215. package/src/js/aria/combobox.js +584 -0
  216. package/src/js/aria/dataGrid.js +950 -950
  217. package/src/js/aria/linksList.js +42 -42
  218. package/src/js/aria/notification.js +56 -56
  219. package/src/js/aria/radioButton.js +50 -50
  220. package/src/js/aria/toggle.js +61 -61
  221. package/src/js/aria/treegrid.js +507 -507
  222. package/src/js/aria/utils.js +219 -219
  223. package/src/js/desy-html.js +860 -813
  224. package/src/js/headroom.min.js +6 -6
  225. package/src/js/index.js +74 -72
  226. package/src/main.js +2 -2
  227. package/src/templates/components/accordion/_examples.accordion.njk +482 -482
  228. package/src/templates/components/accordion/_macro.accordion.njk +3 -3
  229. package/src/templates/components/accordion/_template.accordion.njk +131 -131
  230. package/src/templates/components/accordion/params.accordion.yaml +125 -125
  231. package/src/templates/components/accordion-history/_examples.accordion-history.njk +521 -521
  232. package/src/templates/components/accordion-history/_macro.accordion-history.njk +3 -3
  233. package/src/templates/components/accordion-history/_template.accordion-history.njk +193 -193
  234. package/src/templates/components/accordion-history/params.accordion-history.yaml +129 -129
  235. package/src/templates/components/alert/_examples.alert.njk +91 -91
  236. package/src/templates/components/alert/_macro.alert.njk +3 -3
  237. package/src/templates/components/alert/_styles.alert.css +9 -9
  238. package/src/templates/components/alert/_template.alert.njk +16 -16
  239. package/src/templates/components/alert/params.alert.yaml +25 -25
  240. package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +464 -464
  241. package/src/templates/components/breadcrumbs/_macro.breadcrumbs.njk +3 -3
  242. package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css +81 -81
  243. package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +77 -77
  244. package/src/templates/components/breadcrumbs/params.breadcrumbs.yaml +44 -44
  245. package/src/templates/components/button/_examples.button.njk +518 -511
  246. package/src/templates/components/button/_macro.button.njk +3 -3
  247. package/src/templates/components/button/_styles.button.css +180 -180
  248. package/src/templates/components/button/_template.button.njk +49 -49
  249. package/src/templates/components/button/params.button.yaml +48 -48
  250. package/src/templates/components/button-loader/_examples.button-loader.njk +499 -492
  251. package/src/templates/components/button-loader/_macro.button-loader.njk +3 -3
  252. package/src/templates/components/button-loader/_styles.button-loader.css +194 -194
  253. package/src/templates/components/button-loader/_template.button-loader.njk +84 -84
  254. package/src/templates/components/button-loader/params.button-loader.yaml +74 -74
  255. package/src/templates/components/card/_examples.card.njk +381 -381
  256. package/src/templates/components/card/_macro.card.njk +3 -3
  257. package/src/templates/components/card/_template.card.njk +34 -34
  258. package/src/templates/components/card/params.card.yaml +112 -112
  259. package/src/templates/components/character-count/_examples.character-count.njk +195 -195
  260. package/src/templates/components/character-count/_macro.character-count.njk +5 -5
  261. package/src/templates/components/character-count/_template.character-count.njk +38 -38
  262. package/src/templates/components/character-count/params.character-count.yaml +77 -77
  263. package/src/templates/components/checkboxes/_examples.checkboxes.njk +835 -835
  264. package/src/templates/components/checkboxes/_macro.checkboxes.njk +3 -3
  265. package/src/templates/components/checkboxes/_styles.checkboxes.css +30 -30
  266. package/src/templates/components/checkboxes/_template.checkboxes.njk +137 -137
  267. package/src/templates/components/checkboxes/params.checkboxes.yaml +116 -116
  268. package/src/templates/components/collapsible/_examples.collapsible.njk +107 -107
  269. package/src/templates/components/collapsible/_macro.collapsible.njk +3 -3
  270. package/src/templates/components/collapsible/_styles.collapsible.css +35 -35
  271. package/src/templates/components/collapsible/_template.collapsible.njk +17 -17
  272. package/src/templates/components/collapsible/params.collapsible.yaml +48 -48
  273. package/src/templates/components/combobox/_examples.combobox.njk +440 -0
  274. package/src/templates/components/combobox/_macro.combobox.njk +3 -0
  275. package/src/templates/components/combobox/_styles.combobox.css +92 -0
  276. package/src/templates/components/combobox/_template.combobox.njk +97 -0
  277. package/src/templates/components/combobox/params.combobox.yaml +102 -0
  278. package/src/templates/components/date-input/_examples.date-input.njk +578 -578
  279. package/src/templates/components/date-input/_macro.date-input.njk +3 -3
  280. package/src/templates/components/date-input/_template.date-input.njk +125 -125
  281. package/src/templates/components/date-input/params.date-input.yaml +97 -97
  282. package/src/templates/components/datepicker/_examples.datepicker.njk +415 -415
  283. package/src/templates/components/datepicker/_macro.datepicker.njk +3 -3
  284. package/src/templates/components/datepicker/_styles.datepicker.css +87 -87
  285. package/src/templates/components/datepicker/_template.datepicker.njk +129 -129
  286. package/src/templates/components/datepicker/params.datepicker.yaml +104 -104
  287. package/src/templates/components/description-list/_examples.description-list.njk +502 -502
  288. package/src/templates/components/description-list/_macro.description-list.njk +3 -3
  289. package/src/templates/components/description-list/_template.description-list.njk +17 -17
  290. package/src/templates/components/description-list/params.description-list.yaml +61 -61
  291. package/src/templates/components/details/_examples.details.njk +68 -68
  292. package/src/templates/components/details/_macro.details.njk +3 -3
  293. package/src/templates/components/details/_template.details.njk +17 -17
  294. package/src/templates/components/details/params.details.yaml +40 -40
  295. package/src/templates/components/dialog/_examples.dialog.njk +156 -156
  296. package/src/templates/components/dialog/_macro.dialog.njk +3 -3
  297. package/src/templates/components/dialog/_styles.dialog.css +27 -27
  298. package/src/templates/components/dialog/_template.dialog.njk +12 -12
  299. package/src/templates/components/dialog/params.dialog.yaml +25 -25
  300. package/src/templates/components/dropdown/_examples.dropdown.njk +226 -226
  301. package/src/templates/components/dropdown/_macro.dropdown.njk +3 -3
  302. package/src/templates/components/dropdown/_styles.dropdown.css +191 -191
  303. package/src/templates/components/dropdown/_template.dropdown.njk +34 -34
  304. package/src/templates/components/dropdown/params.dropdown.yaml +32 -32
  305. package/src/templates/components/error-message/_examples.error-message.njk +28 -28
  306. package/src/templates/components/error-message/_macro.error-message.njk +5 -5
  307. package/src/templates/components/error-message/_template.error-message.njk +8 -8
  308. package/src/templates/components/error-message/params.error-message.yaml +23 -23
  309. package/src/templates/components/error-summary/_examples.error-summary.njk +111 -111
  310. package/src/templates/components/error-summary/_macro.error-summary.njk +5 -5
  311. package/src/templates/components/error-summary/_template.error-summary.njk +48 -48
  312. package/src/templates/components/error-summary/params.error-summary.yaml +50 -50
  313. package/src/templates/components/fieldset/_examples.fieldset.njk +79 -79
  314. package/src/templates/components/fieldset/_macro.fieldset.njk +2 -2
  315. package/src/templates/components/fieldset/_template.fieldset.njk +46 -46
  316. package/src/templates/components/fieldset/params.fieldset.yaml +49 -49
  317. package/src/templates/components/file-upload/_examples.file-upload.njk +103 -103
  318. package/src/templates/components/file-upload/_macro.file-upload.njk +2 -2
  319. package/src/templates/components/file-upload/_template.file-upload.njk +45 -45
  320. package/src/templates/components/file-upload/params.file-upload.yaml +48 -48
  321. package/src/templates/components/footer/_examples.footer.njk +558 -558
  322. package/src/templates/components/footer/_macro.footer.njk +3 -3
  323. package/src/templates/components/footer/_styles.footer.css +43 -43
  324. package/src/templates/components/footer/_template.footer.njk +130 -130
  325. package/src/templates/components/footer/params.footer.yaml +140 -140
  326. package/src/templates/components/header/_examples.header.njk +627 -627
  327. package/src/templates/components/header/_macro.header.header__dropdown.njk +3 -3
  328. package/src/templates/components/header/_macro.header.header__navigation.njk +3 -3
  329. package/src/templates/components/header/_macro.header.header__offcanvas.njk +3 -3
  330. package/src/templates/components/header/_macro.header.header__offcanvasButton.njk +3 -3
  331. package/src/templates/components/header/_macro.header.header__subnav.njk +3 -3
  332. package/src/templates/components/header/_macro.header.njk +3 -3
  333. package/src/templates/components/header/_styles.header.css +12 -12
  334. package/src/templates/components/header/_template.header.header__dropdown.njk +27 -27
  335. package/src/templates/components/header/_template.header.header__navigation.njk +25 -25
  336. package/src/templates/components/header/_template.header.header__offcanvas.njk +20 -20
  337. package/src/templates/components/header/_template.header.header__offcanvasButton.njk +10 -10
  338. package/src/templates/components/header/_template.header.header__subnav.njk +33 -33
  339. package/src/templates/components/header/_template.header.njk +155 -155
  340. package/src/templates/components/header/params.header.yaml +295 -295
  341. package/src/templates/components/header-advanced/_examples.header-advanced.njk +1110 -1110
  342. package/src/templates/components/header-advanced/_macro.header-advanced.njk +3 -3
  343. package/src/templates/components/header-advanced/_template.header-advanced.njk +171 -171
  344. package/src/templates/components/header-advanced/params.header-advanced.yaml +352 -352
  345. package/src/templates/components/header-mini/_examples.header-mini.njk +319 -316
  346. package/src/templates/components/header-mini/_macro.header-mini.njk +3 -3
  347. package/src/templates/components/header-mini/_template.header-mini.njk +51 -51
  348. package/src/templates/components/header-mini/params.header-mini.yaml +90 -90
  349. package/src/templates/components/hint/_examples.hint.njk +26 -26
  350. package/src/templates/components/hint/_macro.hint.njk +3 -3
  351. package/src/templates/components/hint/_template.hint.njk +3 -3
  352. package/src/templates/components/hint/params.hint.yaml +21 -21
  353. package/src/templates/components/input/_examples.input.njk +393 -393
  354. package/src/templates/components/input/_macro.input.njk +3 -3
  355. package/src/templates/components/input/_styles.input.css +17 -17
  356. package/src/templates/components/input/_template.input.njk +53 -53
  357. package/src/templates/components/input/params.input.yaml +80 -80
  358. package/src/templates/components/input-group/_examples.input-group.njk +558 -558
  359. package/src/templates/components/input-group/_macro.input-group.njk +3 -3
  360. package/src/templates/components/input-group/_template.input-group.njk +107 -107
  361. package/src/templates/components/input-group/params.input-group.yaml +123 -123
  362. package/src/templates/components/item/_examples.item.njk +370 -370
  363. package/src/templates/components/item/_macro.item.njk +3 -3
  364. package/src/templates/components/item/_template.item.njk +73 -73
  365. package/src/templates/components/item/params.item.yaml +101 -101
  366. package/src/templates/components/label/_examples.label.njk +58 -58
  367. package/src/templates/components/label/_macro.label.njk +5 -5
  368. package/src/templates/components/label/_template.label.njk +37 -37
  369. package/src/templates/components/label/params.label.yaml +28 -28
  370. package/src/templates/components/links-list/_examples.links-list.njk +761 -761
  371. package/src/templates/components/links-list/_macro.links-list.njk +3 -3
  372. package/src/templates/components/links-list/_template.links-list.njk +119 -119
  373. package/src/templates/components/links-list/params.links-list.yaml +101 -101
  374. package/src/templates/components/listbox/_examples.listbox.njk +813 -812
  375. package/src/templates/components/listbox/_macro.listbox.njk +3 -3
  376. package/src/templates/components/listbox/_styles.listbox.css +218 -218
  377. package/src/templates/components/listbox/_template.listbox.njk +90 -90
  378. package/src/templates/components/listbox/params.listbox.yaml +85 -85
  379. package/src/templates/components/media-object/_examples.media-object.njk +79 -79
  380. package/src/templates/components/media-object/_macro.media-object.njk +3 -3
  381. package/src/templates/components/media-object/_template.media-object.njk +21 -21
  382. package/src/templates/components/media-object/params.media-object.yaml +16 -16
  383. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +613 -613
  384. package/src/templates/components/menu-horizontal/_macro.menu-horizontal.njk +3 -3
  385. package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css +167 -167
  386. package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +36 -36
  387. package/src/templates/components/menu-horizontal/params.menu-horizontal.yaml +53 -53
  388. package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +1292 -1292
  389. package/src/templates/components/menu-navigation/_macro.menu-navigation.njk +3 -3
  390. package/src/templates/components/menu-navigation/_styles.menu-navigation.css +238 -238
  391. package/src/templates/components/menu-navigation/_template.menu-navigation.njk +87 -87
  392. package/src/templates/components/menu-navigation/params.menu-navigation.yaml +86 -86
  393. package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +835 -835
  394. package/src/templates/components/menu-vertical/_macro.menu-vertical.njk +3 -3
  395. package/src/templates/components/menu-vertical/_template.menu-vertical.njk +92 -92
  396. package/src/templates/components/menu-vertical/params.menu-vertical.yaml +77 -77
  397. package/src/templates/components/menubar/_examples.menubar.njk +1843 -1843
  398. package/src/templates/components/menubar/_macro.menubar.njk +3 -3
  399. package/src/templates/components/menubar/_styles.menubar.css +259 -259
  400. package/src/templates/components/menubar/_template.menubar.njk +106 -106
  401. package/src/templates/components/menubar/params.menubar.yaml +130 -130
  402. package/src/templates/components/modal/_examples.modal.njk +432 -432
  403. package/src/templates/components/modal/_macro.modal.njk +3 -3
  404. package/src/templates/components/modal/_template.modal.njk +129 -129
  405. package/src/templates/components/modal/params.modal.yaml +77 -77
  406. package/src/templates/components/nav/_examples.nav.njk +468 -468
  407. package/src/templates/components/nav/_macro.nav.njk +3 -3
  408. package/src/templates/components/nav/_template.nav.njk +53 -53
  409. package/src/templates/components/nav/params.nav.yaml +61 -61
  410. package/src/templates/components/notification/_examples.notification.njk +277 -277
  411. package/src/templates/components/notification/_macro.notification.njk +3 -3
  412. package/src/templates/components/notification/_styles.notification.css +30 -30
  413. package/src/templates/components/notification/_template.notification.njk +86 -86
  414. package/src/templates/components/notification/params.notification.yaml +101 -101
  415. package/src/templates/components/pagination/_examples.pagination.njk +444 -444
  416. package/src/templates/components/pagination/_macro.pagination.njk +3 -3
  417. package/src/templates/components/pagination/_template.pagination.njk +162 -162
  418. package/src/templates/components/pagination/params.pagination.yaml +150 -150
  419. package/src/templates/components/pill/_examples.pill.njk +180 -180
  420. package/src/templates/components/pill/_macro.pill.njk +3 -3
  421. package/src/templates/components/pill/_styles.pill.css +59 -59
  422. package/src/templates/components/pill/_template.pill.njk +38 -38
  423. package/src/templates/components/pill/params.pill.yaml +28 -28
  424. package/src/templates/components/radios/_examples.radios.njk +698 -698
  425. package/src/templates/components/radios/_macro.radios.njk +5 -5
  426. package/src/templates/components/radios/_styles.radios.css +30 -30
  427. package/src/templates/components/radios/_template.radios.njk +133 -133
  428. package/src/templates/components/radios/params.radios.yaml +104 -104
  429. package/src/templates/components/searchbar/_examples.searchbar.njk +147 -147
  430. package/src/templates/components/searchbar/_macro.searchbar.njk +3 -3
  431. package/src/templates/components/searchbar/_template.searchbar.njk +45 -45
  432. package/src/templates/components/searchbar/params.searchbar.yaml +46 -46
  433. package/src/templates/components/select/_examples.select.njk +364 -364
  434. package/src/templates/components/select/_macro.select.njk +5 -5
  435. package/src/templates/components/select/_styles.select.css +45 -45
  436. package/src/templates/components/select/_template.select.njk +67 -67
  437. package/src/templates/components/select/params.select.yaml +93 -93
  438. package/src/templates/components/skip-link/_examples.skip-link.njk +31 -31
  439. package/src/templates/components/skip-link/_macro.skip-link.njk +3 -3
  440. package/src/templates/components/skip-link/_styles.skip-link.css +12 -12
  441. package/src/templates/components/skip-link/_template.skip-link.njk +4 -4
  442. package/src/templates/components/skip-link/params.skip-link.yaml +20 -20
  443. package/src/templates/components/spinner/_examples.spinner.njk +91 -101
  444. package/src/templates/components/spinner/_macro.spinner.njk +3 -3
  445. package/src/templates/components/spinner/_styles.spinner.css +33 -33
  446. package/src/templates/components/spinner/_template.spinner.njk +12 -12
  447. package/src/templates/components/spinner/params.spinner.yaml +12 -12
  448. package/src/templates/components/status/_examples.status.njk +80 -80
  449. package/src/templates/components/status/_macro.status.njk +3 -3
  450. package/src/templates/components/status/_template.status.njk +23 -23
  451. package/src/templates/components/status/params.status.yaml +24 -24
  452. package/src/templates/components/status-item/_examples.status-item.njk +319 -319
  453. package/src/templates/components/status-item/_macro.status-item.njk +3 -3
  454. package/src/templates/components/status-item/_template.status-item.njk +99 -99
  455. package/src/templates/components/status-item/params.status-item.yaml +106 -106
  456. package/src/templates/components/table/_examples.table.njk +705 -705
  457. package/src/templates/components/table/_macro.table.njk +3 -3
  458. package/src/templates/components/table/_styles.table.css +19 -19
  459. package/src/templates/components/table/_template.table.njk +68 -68
  460. package/src/templates/components/table/params.table.yaml +130 -130
  461. package/src/templates/components/table-advanced/_examples.table-advanced.njk +839 -839
  462. package/src/templates/components/table-advanced/_macro.table-advanced.njk +3 -3
  463. package/src/templates/components/table-advanced/_styles.table-advanced.css +63 -63
  464. package/src/templates/components/table-advanced/_template.table-advanced.njk +210 -210
  465. package/src/templates/components/table-advanced/params.table-advanced.yaml +160 -160
  466. package/src/templates/components/tabs/_examples.tabs.njk +588 -588
  467. package/src/templates/components/tabs/_macro.tabs.njk +3 -3
  468. package/src/templates/components/tabs/_styles.tabs.css +132 -132
  469. package/src/templates/components/tabs/_template.tabs.njk +70 -70
  470. package/src/templates/components/tabs/params.tabs.yaml +83 -83
  471. package/src/templates/components/textarea/_examples.textarea.njk +174 -174
  472. package/src/templates/components/textarea/_macro.textarea.njk +5 -5
  473. package/src/templates/components/textarea/_template.textarea.njk +47 -47
  474. package/src/templates/components/textarea/params.textarea.yaml +64 -64
  475. package/src/templates/components/toggle/_examples.toggle.njk +248 -248
  476. package/src/templates/components/toggle/_macro.toggle.njk +3 -3
  477. package/src/templates/components/toggle/_styles.toggle.css +31 -31
  478. package/src/templates/components/toggle/_template.toggle.njk +27 -27
  479. package/src/templates/components/toggle/params.toggle.yaml +69 -69
  480. package/src/templates/components/tooltip/_examples.tooltip.njk +134 -134
  481. package/src/templates/components/tooltip/_macro.tooltip.njk +3 -3
  482. package/src/templates/components/tooltip/_styles.tooltip.css +9 -9
  483. package/src/templates/components/tooltip/_template.tooltip.njk +40 -40
  484. package/src/templates/components/tooltip/params.tooltip.yaml +40 -40
  485. package/src/templates/components/tree/_examples.tree.njk +2671 -2671
  486. package/src/templates/components/tree/_macro.tree.njk +3 -3
  487. package/src/templates/components/tree/_styles.tree.css +54 -54
  488. package/src/templates/components/tree/_template.tree.njk +232 -232
  489. package/src/templates/components/tree/params.tree.yaml +173 -173
  490. package/src/templates/components/treegrid/_examples.treegrid.njk +1269 -1269
  491. package/src/templates/components/treegrid/_macro.treegrid.njk +3 -3
  492. package/src/templates/components/treegrid/_styles.treegrid.css +31 -31
  493. package/src/templates/components/treegrid/_template.treegrid.njk +90 -90
  494. package/src/templates/components/treegrid/params.treegrid.yaml +131 -131
  495. package/src/templates/includes/_abrir-notificaciones-extra.njk +2 -2
  496. package/src/templates/includes/_abrir-notificaciones.njk +2 -2
  497. package/src/templates/includes/_acciones-de-cabecera.njk +28 -28
  498. package/src/templates/includes/_ejemplo-titulo-h2-parrafo.njk +4 -4
  499. package/src/templates/includes/_ejemplo-titulo-parrafo.njk +4 -4
  500. package/src/templates/includes/_test-include.njk +13 -13
  501. package/src/templates/pages/_page.foot-headroom.njk +30 -30
  502. package/src/templates/pages/_page.foot.njk +5 -5
  503. package/src/templates/pages/_page.footer.njk +19 -19
  504. package/src/templates/pages/_page.head.njk +27 -27
  505. package/src/templates/pages/_page.notification-edit-inner-content.njk +31 -31
  506. package/src/templates/pages/_page.notification-edit.njk +30 -30
  507. package/src/templates/pages/_page.notification-footer.njk +32 -32
  508. package/src/templates/pages/_page.notification-header-fixed.njk +30 -30
  509. package/src/templates/pages/_page.notification-header.njk +31 -31
  510. package/src/templates/pages/_page.sidebar-content.njk +20 -20
  511. package/src/templates/pages/_page.spinner-block.njk +14 -14
  512. package/src/templates/pages/_page.spinner-show.njk +15 -15
  513. package/src/templates/pages/_page.spinner.njk +15 -15
  514. package/src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk +36 -36
  515. package/src/templates/pages/_template.edit-fixed.njk +74 -74
  516. package/src/templates/pages/_template.home.njk +111 -111
  517. package/src/templates/pages/_template.logged-out.njk +56 -56
  518. package/src/templates/pages/_template.logged-selector-fixed-headroom.njk +198 -198
  519. package/src/templates/pages/_template.logged-selector-fixed.njk +195 -195
  520. package/src/templates/pages/_template.logged-selector-subheader.njk +80 -80
  521. package/src/templates/pages/_template.logged-selector-with-sidebar.njk +28 -28
  522. package/src/templates/pages/_template.logged-selector.njk +195 -195
  523. package/src/templates/pages/_template.logged.njk +141 -141
  524. package/src/templates/pages/_template.mfe-iframe-content.njk +31 -31
  525. package/src/templates/pages/_template.mfe.njk +83 -83
  526. package/src/templates/pages/_template.test.njk +48 -48
  527. package/src/templates/pages/_template.with-header-advanced.njk +311 -311
  528. package/vite.config.js +982 -982
package/docs/ds/_ds.section.espaciado.njk CHANGED
@@ -1,296 +1,296 @@
1
-
2
- <!-- _ds.section.spacing.njk -->
3
-
4
- <div class="container mx-auto">
5
-
6
- <div class="pb-lg"></div>
7
- {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
8
- {{ DSSubsectionTitle({
9
- title: "Espaciado para elementos"
10
- }) }}
11
- <div class="prose">
12
- <p>
13
- Utiliza en la medida de lo posible estos valores, que se aplicarán automáticamente por Tailwind CSS a height, max-height, margin, padding, gap e inset.
14
- </p>
15
- <table>
16
- <thead>
17
- <tr>
18
- <th>Nombre</th>
19
- <th>Tamaño</th>
20
- <th>Pixels</th>
21
- <th>Ejemplo de clases</th>
22
- <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
23
- </tr>
24
- </thead>
25
- <tbody>
26
- <tr>
27
- <td>xs</td>
28
- <td>0.25rem</td>
29
- <td>4px</td>
30
- <td><code>pr-xs</code></td>
31
- <td class="hidden sm:table-cell">
32
- <div class="inline-block pr-xs h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado xs"><span class="sr-only">|</span></div>
33
- </td>
34
- </tr>
35
- <tr class="sm:hidden">
36
- <td colspan="4">
37
- <div class="inline-block pr-xs h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado xs"><span class="sr-only">|</span></div>
38
- </td>
39
- </tr>
40
- <tr>
41
- <td>sm</td>
42
- <td>0.5rem</td>
43
- <td>8px</td>
44
- <td><code>pr-sm</code></td>
45
- <td class="hidden sm:table-cell">
46
- <div class="inline-block pr-sm h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado sm"><span class="sr-only">||</span></div>
47
- </td>
48
- </tr>
49
- <tr class="sm:hidden">
50
- <td colspan="4">
51
- <div class="inline-block pr-sm h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado sm"><span class="sr-only">||</span></div>
52
- </td>
53
- </tr>
54
- <tr>
55
- <td>base</td>
56
- <td>1rem</td>
57
- <td>16px</td>
58
- <td><code>pr-base</code></td>
59
- <td class="hidden sm:table-cell">
60
- <div class="inline-block pr-base h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado base"><span class="sr-only">||||</span></div>
61
- </td>
62
- </tr>
63
- <tr class="sm:hidden">
64
- <td colspan="4">
65
- <div class="inline-block pr-base h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado base"><span class="sr-only">||||</span></div>
66
- </td>
67
- </tr>
68
- <tr>
69
- <td>lg</td>
70
- <td>1.75rem</td>
71
- <td>28px</td>
72
- <td><code>pr-lg</code></td>
73
- <td class="hidden sm:table-cell">
74
- <div class="inline-block pr-lg h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado lg"><span class="sr-only">|||||||</span></div>
75
- </td>
76
- </tr>
77
- <tr class="sm:hidden">
78
- <td colspan="4">
79
- <div class="inline-block pr-lg h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado lg"><span class="sr-only">|||||||</span></div>
80
- </td>
81
- </tr>
82
- <tr>
83
- <td>xl</td>
84
- <td>2.5rem</td>
85
- <td>40px</td>
86
- <td><code>pr-xl</code></td>
87
- <td class="hidden sm:table-cell">
88
- <div class="inline-block pr-xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado xl"><span class="sr-only">||||||||||</span></div>
89
- </td>
90
- </tr>
91
- <tr class="sm:hidden">
92
- <td colspan="4">
93
- <div class="inline-block pr-xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado xl"><span class="sr-only">||||||||||</span></div>
94
- </td>
95
- </tr>
96
- <tr>
97
- <td>2xl</td>
98
- <td>5rem</td>
99
- <td>80px</td>
100
- <td><code>pr-2xl</code></td>
101
- <td class="hidden sm:table-cell">
102
- <div class="inline-block pr-2xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado 2xl"><span class="sr-only">||||||||||||||||||||</span></div>
103
- </td>
104
- </tr>
105
- <tr class="sm:hidden">
106
- <td colspan="4">
107
- <div class="inline-block pr-2xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado 2xl"><span class="sr-only">||||||||||||||||||||</span></div>
108
- </td>
109
- </tr>
110
- <tr>
111
- <td>3xl</td>
112
- <td>10rem</td>
113
- <td>160px</td>
114
- <td><code>pr-3xl</code></td>
115
- <td class="hidden sm:table-cell">
116
- <div class="inline-block pr-3xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado 3xl"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span></div>
117
- </td>
118
- </tr>
119
- <tr class="sm:hidden">
120
- <td colspan="4">
121
- <div class="inline-block pr-3xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado 3xl"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span></div>
122
- </td>
123
- </tr>
124
- </tbody>
125
- </table>
126
- </div>
127
- <div class="pb-xl"></div>
128
- {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
129
- {{ DSSubsectionTitle({
130
- title: "Espaciado para anchuras"
131
- }) }}
132
- <div class="prose max-w-none">
133
- <p>
134
- Utiliza en la medida de lo posible estos valores para establecer valores de width y max-width.
135
- </p>
136
- <div class="max-w-full overflow-x-auto">
137
- <table>
138
- <thead>
139
- <tr>
140
- <th>Nombre</th>
141
- <th>Tamaño</th>
142
- <th>Pixels</th>
143
- <th>Ejemplo de clases</th>
144
- <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
145
- </tr>
146
- </thead>
147
- <tbody>
148
- <tr>
149
- <td>xs</td>
150
- <td>20rem</td>
151
- <td>320px</td>
152
- <td><code>w-xs</code></td>
153
- <td class="hidden sm:table-cell">
154
- <div class="inline-block w-xs h-4 bg-primary-base"></div>
155
- </td>
156
- </tr>
157
- <tr class="sm:hidden">
158
- <td colspan="4">
159
- <div class="inline-block w-xs h-4 bg-primary-base" role="img" aria-label="anchura xs"></div>
160
- </td>
161
- </tr>
162
- <tr>
163
- <td>sm</td>
164
- <td>24rem</td>
165
- <td>384px</td>
166
- <td><code>w-sm</code></td>
167
- <td class="hidden sm:table-cell">
168
- <div class="inline-block w-sm h-4 bg-primary-base"></div>
169
- </td>
170
- </tr>
171
- <tr class="sm:hidden">
172
- <td colspan="4">
173
- <div class="inline-block w-sm h-4 bg-primary-base" role="img" aria-label="anchura sm"></div>
174
- </td>
175
- </tr>
176
- <tr>
177
- <td>md</td>
178
- <td>28rem</td>
179
- <td>448px</td>
180
- <td><code>w-md</code></td>
181
- <td class="hidden sm:table-cell">
182
- <div class="inline-block w-md h-4 bg-primary-base"></div>
183
- </td>
184
- </tr>
185
- <tr class="sm:hidden">
186
- <td colspan="4">
187
- <div class="inline-block w-md h-4 bg-primary-base" role="img" aria-label="anchura md"></div>
188
- </td>
189
- </tr>
190
- <tr>
191
- <td>lg</td>
192
- <td>32rem</td>
193
- <td>512px</td>
194
- <td><code>w-lg</code></td>
195
- <td class="hidden sm:table-cell">
196
- <div class="inline-block w-lg h-4 bg-primary-base"></div>
197
- </td>
198
- </tr>
199
- <tr class="sm:hidden">
200
- <td colspan="4">
201
- <div class="inline-block w-lg h-4 bg-primary-base" role="img" aria-label="anchura lg"></div>
202
- </td>
203
- </tr>
204
- <tr>
205
- <td>xl</td>
206
- <td>36rem</td>
207
- <td>576px</td>
208
- <td><code>w-xl</code></td>
209
- <td class="hidden sm:table-cell">
210
- <div class="inline-block w-xl h-4 bg-primary-base"></div>
211
- </td>
212
- </tr>
213
- <tr class="sm:hidden">
214
- <td colspan="4">
215
- <div class="inline-block w-xl h-4 bg-primary-base" role="img" aria-label="anchura xl"></div>
216
- </td>
217
- </tr>
218
- </tbody>
219
- </table>
220
- </div>
221
- </div>
222
- <div class="pb-xl"></div>
223
- {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
224
- {{ DSSubsectionTitle({
225
- title: "Espaciado máximo"
226
- }) }}
227
- <div class="prose max-w-none">
228
- <p>
229
- desy-html usa los valores de Tailwind CSS y adicionalmente estos otros:
230
- </p>
231
- <table class="text-left">
232
- <thead>
233
- <tr>
234
- <th>Nombre</th>
235
- <th>Tamaño</th>
236
- <th>Pixels</th>
237
- <th>Ejemplo de clases</th>
238
- <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
239
- </tr>
240
- </thead>
241
- <tbody>
242
- <tr>
243
- <td>40</td>
244
- <td>10rem</td>
245
- <td>160px</td>
246
- <td><code>max-w-40</code></td>
247
- <td class="hidden sm:table-cell">
248
- <div class="inline-block max-w-40 overflow-hidden">
249
- <div class="h-4 bg-primary-base text-transparent" role="img" aria-label="anchura 40">
250
- <span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span>
251
- </div>
252
- </div>
253
- </td>
254
- </tr>
255
- <tr class="sm:hidden">
256
- <td colspan="4">
257
- <div class="inline-block max-w-40 overflow-hidden">
258
- <div class="h-4 bg-primary-base text-transparent" role="img" aria-label="anchura 40">
259
- <span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span>
260
- </div>
261
- </div>
262
- </td>
263
- </tr>
264
- <tr>
265
- <td>64</td>
266
- <td>16rem</td>
267
- <td>256px</td>
268
- <td><code>max-w-64</code></td>
269
- <td class="hidden sm:table-cell">
270
- <div class="inline-block max-w-64 overflow-hidden">
271
- <div class="h-4 bg-primary-base text-transparent">
272
- <span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
273
- </div>
274
- </div>
275
- </td>
276
- </tr>
277
- <tr class="sm:hidden">
278
- <td colspan="4">
279
- <div class="inline-block max-w-64 overflow-hidden">
280
- <div class="h-4 bg-primary-base text-transparent">
281
- <span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
282
- </div>
283
- </div>
284
- </td>
285
- </tr>
286
- </tbody>
287
- </table>
288
- </div>
289
- <div class="pb-xl"></div>
290
- {{ DSSubsectionTitle({
291
- title: "Más espaciados"
292
- }) }}
293
- <div class="prose">
294
- <p>Si necesitas más espaciados, usa los <a href="https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale">espaciados por defecto de Tailwind CSS<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a>.</p>
295
- </div>
296
- </div>
1
+
2
+ <!-- _ds.section.spacing.njk -->
3
+
4
+ <div class="container mx-auto">
5
+
6
+ <div class="pb-lg"></div>
7
+ {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
8
+ {{ DSSubsectionTitle({
9
+ title: "Espaciado para elementos"
10
+ }) }}
11
+ <div class="prose">
12
+ <p>
13
+ Utiliza en la medida de lo posible estos valores, que se aplicarán automáticamente por Tailwind CSS a height, max-height, margin, padding, gap e inset.
14
+ </p>
15
+ <table>
16
+ <thead>
17
+ <tr>
18
+ <th>Nombre</th>
19
+ <th>Tamaño</th>
20
+ <th>Pixels</th>
21
+ <th>Ejemplo de clases</th>
22
+ <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
23
+ </tr>
24
+ </thead>
25
+ <tbody>
26
+ <tr>
27
+ <td>xs</td>
28
+ <td>0.25rem</td>
29
+ <td>4px</td>
30
+ <td><code>pr-xs</code></td>
31
+ <td class="hidden sm:table-cell">
32
+ <div class="inline-block pr-xs h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado xs"><span class="sr-only">|</span></div>
33
+ </td>
34
+ </tr>
35
+ <tr class="sm:hidden">
36
+ <td colspan="4">
37
+ <div class="inline-block pr-xs h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado xs"><span class="sr-only">|</span></div>
38
+ </td>
39
+ </tr>
40
+ <tr>
41
+ <td>sm</td>
42
+ <td>0.5rem</td>
43
+ <td>8px</td>
44
+ <td><code>pr-sm</code></td>
45
+ <td class="hidden sm:table-cell">
46
+ <div class="inline-block pr-sm h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado sm"><span class="sr-only">||</span></div>
47
+ </td>
48
+ </tr>
49
+ <tr class="sm:hidden">
50
+ <td colspan="4">
51
+ <div class="inline-block pr-sm h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado sm"><span class="sr-only">||</span></div>
52
+ </td>
53
+ </tr>
54
+ <tr>
55
+ <td>base</td>
56
+ <td>1rem</td>
57
+ <td>16px</td>
58
+ <td><code>pr-base</code></td>
59
+ <td class="hidden sm:table-cell">
60
+ <div class="inline-block pr-base h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado base"><span class="sr-only">||||</span></div>
61
+ </td>
62
+ </tr>
63
+ <tr class="sm:hidden">
64
+ <td colspan="4">
65
+ <div class="inline-block pr-base h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado base"><span class="sr-only">||||</span></div>
66
+ </td>
67
+ </tr>
68
+ <tr>
69
+ <td>lg</td>
70
+ <td>1.75rem</td>
71
+ <td>28px</td>
72
+ <td><code>pr-lg</code></td>
73
+ <td class="hidden sm:table-cell">
74
+ <div class="inline-block pr-lg h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado lg"><span class="sr-only">|||||||</span></div>
75
+ </td>
76
+ </tr>
77
+ <tr class="sm:hidden">
78
+ <td colspan="4">
79
+ <div class="inline-block pr-lg h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado lg"><span class="sr-only">|||||||</span></div>
80
+ </td>
81
+ </tr>
82
+ <tr>
83
+ <td>xl</td>
84
+ <td>2.5rem</td>
85
+ <td>40px</td>
86
+ <td><code>pr-xl</code></td>
87
+ <td class="hidden sm:table-cell">
88
+ <div class="inline-block pr-xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado xl"><span class="sr-only">||||||||||</span></div>
89
+ </td>
90
+ </tr>
91
+ <tr class="sm:hidden">
92
+ <td colspan="4">
93
+ <div class="inline-block pr-xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado xl"><span class="sr-only">||||||||||</span></div>
94
+ </td>
95
+ </tr>
96
+ <tr>
97
+ <td>2xl</td>
98
+ <td>5rem</td>
99
+ <td>80px</td>
100
+ <td><code>pr-2xl</code></td>
101
+ <td class="hidden sm:table-cell">
102
+ <div class="inline-block pr-2xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado 2xl"><span class="sr-only">||||||||||||||||||||</span></div>
103
+ </td>
104
+ </tr>
105
+ <tr class="sm:hidden">
106
+ <td colspan="4">
107
+ <div class="inline-block pr-2xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado 2xl"><span class="sr-only">||||||||||||||||||||</span></div>
108
+ </td>
109
+ </tr>
110
+ <tr>
111
+ <td>3xl</td>
112
+ <td>10rem</td>
113
+ <td>160px</td>
114
+ <td><code>pr-3xl</code></td>
115
+ <td class="hidden sm:table-cell">
116
+ <div class="inline-block pr-3xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado 3xl"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span></div>
117
+ </td>
118
+ </tr>
119
+ <tr class="sm:hidden">
120
+ <td colspan="4">
121
+ <div class="inline-block pr-3xl h-4 bg-primary-base text-transparent overflow-hidden" role="img" aria-label="espaciado 3xl"><span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span></div>
122
+ </td>
123
+ </tr>
124
+ </tbody>
125
+ </table>
126
+ </div>
127
+ <div class="pb-xl"></div>
128
+ {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
129
+ {{ DSSubsectionTitle({
130
+ title: "Espaciado para anchuras"
131
+ }) }}
132
+ <div class="prose max-w-none">
133
+ <p>
134
+ Utiliza en la medida de lo posible estos valores para establecer valores de width y max-width.
135
+ </p>
136
+ <div class="max-w-full overflow-x-auto">
137
+ <table>
138
+ <thead>
139
+ <tr>
140
+ <th>Nombre</th>
141
+ <th>Tamaño</th>
142
+ <th>Pixels</th>
143
+ <th>Ejemplo de clases</th>
144
+ <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
145
+ </tr>
146
+ </thead>
147
+ <tbody>
148
+ <tr>
149
+ <td>xs</td>
150
+ <td>20rem</td>
151
+ <td>320px</td>
152
+ <td><code>w-xs</code></td>
153
+ <td class="hidden sm:table-cell">
154
+ <div class="inline-block w-xs h-4 bg-primary-base"></div>
155
+ </td>
156
+ </tr>
157
+ <tr class="sm:hidden">
158
+ <td colspan="4">
159
+ <div class="inline-block w-xs h-4 bg-primary-base" role="img" aria-label="anchura xs"></div>
160
+ </td>
161
+ </tr>
162
+ <tr>
163
+ <td>sm</td>
164
+ <td>24rem</td>
165
+ <td>384px</td>
166
+ <td><code>w-sm</code></td>
167
+ <td class="hidden sm:table-cell">
168
+ <div class="inline-block w-sm h-4 bg-primary-base"></div>
169
+ </td>
170
+ </tr>
171
+ <tr class="sm:hidden">
172
+ <td colspan="4">
173
+ <div class="inline-block w-sm h-4 bg-primary-base" role="img" aria-label="anchura sm"></div>
174
+ </td>
175
+ </tr>
176
+ <tr>
177
+ <td>md</td>
178
+ <td>28rem</td>
179
+ <td>448px</td>
180
+ <td><code>w-md</code></td>
181
+ <td class="hidden sm:table-cell">
182
+ <div class="inline-block w-md h-4 bg-primary-base"></div>
183
+ </td>
184
+ </tr>
185
+ <tr class="sm:hidden">
186
+ <td colspan="4">
187
+ <div class="inline-block w-md h-4 bg-primary-base" role="img" aria-label="anchura md"></div>
188
+ </td>
189
+ </tr>
190
+ <tr>
191
+ <td>lg</td>
192
+ <td>32rem</td>
193
+ <td>512px</td>
194
+ <td><code>w-lg</code></td>
195
+ <td class="hidden sm:table-cell">
196
+ <div class="inline-block w-lg h-4 bg-primary-base"></div>
197
+ </td>
198
+ </tr>
199
+ <tr class="sm:hidden">
200
+ <td colspan="4">
201
+ <div class="inline-block w-lg h-4 bg-primary-base" role="img" aria-label="anchura lg"></div>
202
+ </td>
203
+ </tr>
204
+ <tr>
205
+ <td>xl</td>
206
+ <td>36rem</td>
207
+ <td>576px</td>
208
+ <td><code>w-xl</code></td>
209
+ <td class="hidden sm:table-cell">
210
+ <div class="inline-block w-xl h-4 bg-primary-base"></div>
211
+ </td>
212
+ </tr>
213
+ <tr class="sm:hidden">
214
+ <td colspan="4">
215
+ <div class="inline-block w-xl h-4 bg-primary-base" role="img" aria-label="anchura xl"></div>
216
+ </td>
217
+ </tr>
218
+ </tbody>
219
+ </table>
220
+ </div>
221
+ </div>
222
+ <div class="pb-xl"></div>
223
+ {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
224
+ {{ DSSubsectionTitle({
225
+ title: "Espaciado máximo"
226
+ }) }}
227
+ <div class="prose max-w-none">
228
+ <p>
229
+ desy-html usa los valores de Tailwind CSS y adicionalmente estos otros:
230
+ </p>
231
+ <table class="text-left">
232
+ <thead>
233
+ <tr>
234
+ <th>Nombre</th>
235
+ <th>Tamaño</th>
236
+ <th>Pixels</th>
237
+ <th>Ejemplo de clases</th>
238
+ <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
239
+ </tr>
240
+ </thead>
241
+ <tbody>
242
+ <tr>
243
+ <td>40</td>
244
+ <td>10rem</td>
245
+ <td>160px</td>
246
+ <td><code>max-w-40</code></td>
247
+ <td class="hidden sm:table-cell">
248
+ <div class="inline-block max-w-40 overflow-hidden">
249
+ <div class="h-4 bg-primary-base text-transparent" role="img" aria-label="anchura 40">
250
+ <span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span>
251
+ </div>
252
+ </div>
253
+ </td>
254
+ </tr>
255
+ <tr class="sm:hidden">
256
+ <td colspan="4">
257
+ <div class="inline-block max-w-40 overflow-hidden">
258
+ <div class="h-4 bg-primary-base text-transparent" role="img" aria-label="anchura 40">
259
+ <span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span>
260
+ </div>
261
+ </div>
262
+ </td>
263
+ </tr>
264
+ <tr>
265
+ <td>64</td>
266
+ <td>16rem</td>
267
+ <td>256px</td>
268
+ <td><code>max-w-64</code></td>
269
+ <td class="hidden sm:table-cell">
270
+ <div class="inline-block max-w-64 overflow-hidden">
271
+ <div class="h-4 bg-primary-base text-transparent">
272
+ <span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
273
+ </div>
274
+ </div>
275
+ </td>
276
+ </tr>
277
+ <tr class="sm:hidden">
278
+ <td colspan="4">
279
+ <div class="inline-block max-w-64 overflow-hidden">
280
+ <div class="h-4 bg-primary-base text-transparent">
281
+ <span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
282
+ </div>
283
+ </div>
284
+ </td>
285
+ </tr>
286
+ </tbody>
287
+ </table>
288
+ </div>
289
+ <div class="pb-xl"></div>
290
+ {{ DSSubsectionTitle({
291
+ title: "Más espaciados"
292
+ }) }}
293
+ <div class="prose">
294
+ <p>Si necesitas más espaciados, usa los <a href="https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale">espaciados por defecto de Tailwind CSS<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a>.</p>
295
+ </div>
296
+ </div>