desy-html 10.2.2 → 11.0.2

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 (497) hide show
  1. package/README.md +36 -36
  2. package/config/tailwind.config.js +217 -217
  3. package/docs/_global.content-placeholder.njk +7 -7
  4. package/docs/_global.foot.njk +14 -14
  5. package/docs/_global.head.njk +28 -28
  6. package/docs/_include.template-header.njk +387 -387
  7. package/docs/_macro.component-example.njk +6 -6
  8. package/docs/_macro.example-render.njk +330 -330
  9. package/docs/_macro.load-component-params.njk +2 -2
  10. package/docs/_macro.load-component-template.njk +3 -3
  11. package/docs/_macro.render-caller.njk +3 -3
  12. package/docs/_macro.show-code-from-file.njk +57 -57
  13. package/docs/_macro.show-html-from-file.njk +42 -42
  14. package/docs/_template.default.njk +8 -8
  15. package/docs/_template.examples.njk +13 -13
  16. package/docs/catalogo.html +26 -26
  17. package/docs/componentes.html +180 -180
  18. package/docs/ds/_ds.example.accordion.njk +109 -109
  19. package/docs/ds/_ds.example.border.njk +39 -39
  20. package/docs/ds/_ds.example.botones-alert-sm.njk +264 -264
  21. package/docs/ds/_ds.example.botones-alert.njk +264 -264
  22. package/docs/ds/_ds.example.botones-default-sm.njk +264 -264
  23. package/docs/ds/_ds.example.botones-default.njk +258 -258
  24. package/docs/ds/_ds.example.botones-primary-sm.njk +264 -264
  25. package/docs/ds/_ds.example.botones-primary.njk +264 -264
  26. package/docs/ds/_ds.example.botones-transparent-sm.njk +264 -264
  27. package/docs/ds/_ds.example.botones-transparent.njk +264 -264
  28. package/docs/ds/_ds.example.breadcrumbs.njk +65 -65
  29. package/docs/ds/_ds.example.card.njk +198 -198
  30. package/docs/ds/_ds.example.checkboxes.njk +377 -377
  31. package/docs/ds/_ds.example.collapsible.njk +18 -18
  32. package/docs/ds/_ds.example.color-de-interaccion.njk +16 -16
  33. package/docs/ds/_ds.example.colores-cabecera.njk +15 -15
  34. package/docs/ds/_ds.example.colores-de-soporte.njk +82 -82
  35. package/docs/ds/_ds.example.colores-neutros.njk +26 -26
  36. package/docs/ds/_ds.example.date-input.njk +363 -363
  37. package/docs/ds/_ds.example.description-list.njk +289 -289
  38. package/docs/ds/_ds.example.details.njk +23 -23
  39. package/docs/ds/_ds.example.dropdowns-default.njk +186 -186
  40. package/docs/ds/_ds.example.dropdowns-en-uso.njk +105 -105
  41. package/docs/ds/_ds.example.dropdowns-variaciones.njk +187 -187
  42. package/docs/ds/_ds.example.error-summary.njk +34 -34
  43. package/docs/ds/_ds.example.file-upload.njk +54 -54
  44. package/docs/ds/_ds.example.footer.njk +28 -28
  45. package/docs/ds/_ds.example.header-advanced.njk +70 -70
  46. package/docs/ds/_ds.example.header.njk +211 -211
  47. package/docs/ds/_ds.example.input-group.njk +242 -242
  48. package/docs/ds/_ds.example.input.njk +164 -164
  49. package/docs/ds/_ds.example.item.njk +176 -176
  50. package/docs/ds/_ds.example.layout-escritorio.njk +38 -38
  51. package/docs/ds/_ds.example.layout-movil.njk +14 -14
  52. package/docs/ds/_ds.example.layout-sidebar.njk +11 -11
  53. package/docs/ds/_ds.example.links-list.njk +170 -170
  54. package/docs/ds/_ds.example.listbox-default.njk +677 -677
  55. package/docs/ds/_ds.example.listbox-variaciones.njk +687 -687
  56. package/docs/ds/_ds.example.menu-horizontal.njk +66 -66
  57. package/docs/ds/_ds.example.menu-navigation.njk +493 -493
  58. package/docs/ds/_ds.example.menu-vertical.njk +129 -129
  59. package/docs/ds/_ds.example.menubar-en-uso.njk +244 -244
  60. package/docs/ds/_ds.example.menubar-variaciones.njk +785 -785
  61. package/docs/ds/_ds.example.modal.njk +210 -210
  62. package/docs/ds/_ds.example.nav.njk +158 -158
  63. package/docs/ds/_ds.example.notification.njk +122 -122
  64. package/docs/ds/_ds.example.pagination.njk +190 -190
  65. package/docs/ds/_ds.example.pills.njk +215 -215
  66. package/docs/ds/_ds.example.radios.njk +419 -419
  67. package/docs/ds/_ds.example.searchbar.njk +87 -87
  68. package/docs/ds/_ds.example.select.njk +390 -390
  69. package/docs/ds/_ds.example.status-item.njk +239 -239
  70. package/docs/ds/_ds.example.status.njk +47 -47
  71. package/docs/ds/_ds.example.table.njk +740 -740
  72. package/docs/ds/_ds.example.tabs.njk +92 -92
  73. package/docs/ds/_ds.example.textarea.njk +237 -237
  74. package/docs/ds/_ds.example.textos.njk +27 -27
  75. package/docs/ds/_ds.example.toggle.njk +75 -75
  76. package/docs/ds/_ds.example.tree.njk +456 -456
  77. package/docs/ds/_ds.example.typography.njk +225 -225
  78. package/docs/ds/_ds.macro.code-snippet.njk +32 -32
  79. package/docs/ds/_ds.macro.section-title.njk +2 -2
  80. package/docs/ds/_ds.macro.subsection-title.njk +2 -2
  81. package/docs/ds/_ds.section.avisos.njk +22 -22
  82. package/docs/ds/_ds.section.botones.njk +48 -48
  83. package/docs/ds/_ds.section.campo-y-area-de-texto.njk +19 -19
  84. package/docs/ds/_ds.section.color.njk +150 -150
  85. package/docs/ds/_ds.section.datos.njk +37 -37
  86. package/docs/ds/_ds.section.dropdowns.njk +23 -23
  87. package/docs/ds/_ds.section.espaciado.njk +299 -299
  88. package/docs/ds/_ds.section.forms.njk +68 -68
  89. package/docs/ds/_ds.section.informacion.njk +12 -12
  90. package/docs/ds/_ds.section.layout.njk +70 -70
  91. package/docs/ds/_ds.section.menubar.njk +18 -18
  92. package/docs/ds/_ds.section.mostrar-ocultar.njk +33 -33
  93. package/docs/ds/_ds.section.navigation.njk +57 -57
  94. package/docs/ds/_ds.section.textos.njk +259 -259
  95. package/docs/ds/_ds.section.typography.njk +31 -31
  96. package/docs/estilos.html +19 -19
  97. package/docs/examples-accordion-history.html +8 -8
  98. package/docs/examples-accordion.html +8 -8
  99. package/docs/examples-alert.html +8 -8
  100. package/docs/examples-breadcrumbs.html +8 -8
  101. package/docs/examples-button-loader.html +8 -8
  102. package/docs/examples-button.html +8 -8
  103. package/docs/examples-card.html +7 -7
  104. package/docs/examples-character-count.html +8 -8
  105. package/docs/examples-checkboxes.html +7 -7
  106. package/docs/examples-collapsible.html +7 -7
  107. package/docs/examples-date-input.html +8 -8
  108. package/docs/examples-datepicker.html +8 -8
  109. package/docs/examples-description-list.html +8 -8
  110. package/docs/examples-details.html +8 -8
  111. package/docs/examples-dialog.html +7 -7
  112. package/docs/examples-dropdown.html +8 -8
  113. package/docs/examples-error-message.html +8 -8
  114. package/docs/examples-error-summary.html +8 -8
  115. package/docs/examples-fieldset.html +8 -8
  116. package/docs/examples-file-upload.html +8 -8
  117. package/docs/examples-footer.html +8 -8
  118. package/docs/examples-header-advanced.html +8 -8
  119. package/docs/examples-header-mini.html +8 -8
  120. package/docs/examples-header.html +8 -8
  121. package/docs/examples-hint.html +8 -8
  122. package/docs/examples-input-group.html +8 -8
  123. package/docs/examples-input.html +8 -8
  124. package/docs/examples-item.html +8 -8
  125. package/docs/examples-label.html +8 -8
  126. package/docs/examples-links-list.html +7 -7
  127. package/docs/examples-listbox.html +8 -8
  128. package/docs/examples-media-object.html +7 -7
  129. package/docs/examples-menu-horizontal.html +8 -8
  130. package/docs/examples-menu-navigation.html +8 -8
  131. package/docs/examples-menu-vertical.html +7 -7
  132. package/docs/examples-menubar.html +7 -7
  133. package/docs/examples-modal.html +7 -7
  134. package/docs/examples-nav.html +8 -8
  135. package/docs/examples-notification.html +8 -8
  136. package/docs/examples-pagination.html +8 -8
  137. package/docs/examples-pill.html +8 -8
  138. package/docs/examples-radios.html +8 -8
  139. package/docs/examples-searchbar.html +8 -8
  140. package/docs/examples-select.html +9 -9
  141. package/docs/examples-skip-link.html +8 -8
  142. package/docs/examples-spinner.html +8 -8
  143. package/docs/examples-status-item.html +8 -8
  144. package/docs/examples-status.html +8 -8
  145. package/docs/examples-table-advanced.html +8 -8
  146. package/docs/examples-table.html +8 -8
  147. package/docs/examples-tabs.html +8 -8
  148. package/docs/examples-textarea.html +8 -8
  149. package/docs/examples-toggle.html +8 -8
  150. package/docs/examples-tooltip.html +8 -8
  151. package/docs/examples-tree.html +8 -8
  152. package/docs/index.html +679 -667
  153. package/docs/pagina-accesibilidad.html +109 -109
  154. package/docs/pagina-mapa-web.html +136 -136
  155. package/docs/pagina-prueba.html +94 -94
  156. package/docs/plantilla-con-header-advanced.html +13 -13
  157. package/docs/plantilla-editar-con-cabecera-fija-y-sidebar-sticky.html +153 -153
  158. package/docs/plantilla-editar-con-cabecera-fija.html +16 -16
  159. package/docs/plantilla-logueado-con-cabecera-fija-headroom.html +14 -14
  160. package/docs/plantilla-logueado-con-cabecera-fija.html +14 -14
  161. package/docs/plantilla-logueado-con-selector-de-app-y-sidebar.html +163 -163
  162. package/docs/plantilla-logueado-con-selector-de-app-y-subheader.html +15 -15
  163. package/docs/plantilla-logueado-con-selector-de-app.html +13 -13
  164. package/docs/plantilla-logueado-con-titulo-de-app.html +13 -13
  165. package/docs/plantilla-sin-loguear.html +13 -13
  166. package/docs/plantillas.html +88 -88
  167. package/docs/spinner-plantilla-con-header-advanced.html +1 -1
  168. package/docs/spinner-plantilla-editar-con-cabecera-fija.html +5 -5
  169. package/docs/spinner-plantilla-logueado-con-cabecera-fija.html +1 -1
  170. package/docs/spinner-plantilla-logueado-con-selector-de-app-y-subheader.html +4 -4
  171. package/docs/spinner-plantilla-logueado-con-titulo-de-app.html +1 -1
  172. package/docs/spinner-plantilla-sin-loguear.html +17 -17
  173. package/gulpfile.js +127 -127
  174. package/package.json +67 -67
  175. package/src/EUPL-1.2.txt +287 -287
  176. package/src/css/base.css +42 -42
  177. package/src/css/component.form-group.css +23 -23
  178. package/src/css/component.headroom.css +31 -31
  179. package/src/css/component.text.css +157 -157
  180. package/src/css/component.tippy-box.css +11 -11
  181. package/src/css/styles.css +49 -49
  182. package/src/js/aria/HeaderNavigation.js +55 -55
  183. package/src/js/aria/MenuHorizontal.js +63 -63
  184. package/src/js/aria/MenuVertical.js +60 -60
  185. package/src/js/aria/Nav.js +60 -60
  186. package/src/js/aria/accordion.js +264 -264
  187. package/src/js/aria/checkBoxes.js +52 -52
  188. package/src/js/aria/collapsible.js +44 -44
  189. package/src/js/aria/dataGrid.js +950 -950
  190. package/src/js/aria/notification.js +56 -56
  191. package/src/js/aria/radioButton.js +50 -50
  192. package/src/js/aria/toggle.js +61 -61
  193. package/src/js/aria/utils.js +128 -128
  194. package/src/js/cally.js +1114 -1114
  195. package/src/js/desy-html.js +525 -525
  196. package/src/js/filters/filter-caller.js +6 -6
  197. package/src/js/filters/filter-slugify.js +11 -11
  198. package/src/js/filters/highlight.js +14 -14
  199. package/src/js/filters/index.js +13 -13
  200. package/src/js/globals/get-html-code-from-example.js +31 -31
  201. package/src/js/globals/get-html-code-from-file.js +26 -26
  202. package/src/js/globals/get-nunjucks-code-from-example.js +31 -31
  203. package/src/js/globals/get-nunjucks-code-from-file.js +24 -24
  204. package/src/js/globals/index.js +14 -14
  205. package/src/js/headroom.min.js +6 -6
  206. package/src/js/index.js +73 -73
  207. package/src/js/popper.min.js +6 -6
  208. package/src/js/tippy-bundle.umd.min.js +2 -2
  209. package/src/templates/components/accordion/_examples.accordion.njk +386 -386
  210. package/src/templates/components/accordion/_macro.accordion.njk +3 -3
  211. package/src/templates/components/accordion/_template.accordion.njk +131 -131
  212. package/src/templates/components/accordion/params.accordion.yaml +125 -125
  213. package/src/templates/components/accordion-history/_examples.accordion-history.njk +418 -418
  214. package/src/templates/components/accordion-history/_macro.accordion-history.njk +3 -3
  215. package/src/templates/components/accordion-history/_template.accordion-history.njk +193 -193
  216. package/src/templates/components/accordion-history/params.accordion-history.yaml +129 -129
  217. package/src/templates/components/alert/_examples.alert.njk +79 -79
  218. package/src/templates/components/alert/_macro.alert.njk +3 -3
  219. package/src/templates/components/alert/_styles.alert.css +9 -9
  220. package/src/templates/components/alert/_template.alert.njk +16 -16
  221. package/src/templates/components/alert/params.alert.yaml +25 -25
  222. package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +374 -374
  223. package/src/templates/components/breadcrumbs/_macro.breadcrumbs.njk +3 -3
  224. package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css +69 -69
  225. package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +77 -77
  226. package/src/templates/components/breadcrumbs/params.breadcrumbs.yaml +44 -44
  227. package/src/templates/components/button/_examples.button.njk +289 -289
  228. package/src/templates/components/button/_macro.button.njk +3 -3
  229. package/src/templates/components/button/_styles.button.css +182 -182
  230. package/src/templates/components/button/_template.button.njk +49 -49
  231. package/src/templates/components/button/params.button.yaml +48 -48
  232. package/src/templates/components/button-loader/_examples.button-loader.njk +281 -281
  233. package/src/templates/components/button-loader/_macro.button-loader.njk +3 -3
  234. package/src/templates/components/button-loader/_styles.button-loader.css +198 -198
  235. package/src/templates/components/button-loader/_template.button-loader.njk +84 -84
  236. package/src/templates/components/button-loader/params.button-loader.yaml +74 -74
  237. package/src/templates/components/card/_examples.card.njk +300 -300
  238. package/src/templates/components/card/_macro.card.njk +3 -3
  239. package/src/templates/components/card/_template.card.njk +34 -34
  240. package/src/templates/components/card/params.card.yaml +112 -112
  241. package/src/templates/components/character-count/_examples.character-count.njk +147 -147
  242. package/src/templates/components/character-count/_macro.character-count.njk +5 -5
  243. package/src/templates/components/character-count/_template.character-count.njk +38 -38
  244. package/src/templates/components/character-count/params.character-count.yaml +77 -77
  245. package/src/templates/components/checkboxes/_examples.checkboxes.njk +734 -734
  246. package/src/templates/components/checkboxes/_macro.checkboxes.njk +3 -3
  247. package/src/templates/components/checkboxes/_styles.checkboxes.css +31 -31
  248. package/src/templates/components/checkboxes/_template.checkboxes.njk +138 -138
  249. package/src/templates/components/checkboxes/params.checkboxes.yaml +116 -116
  250. package/src/templates/components/collapsible/_examples.collapsible.njk +77 -77
  251. package/src/templates/components/collapsible/_macro.collapsible.njk +3 -3
  252. package/src/templates/components/collapsible/_styles.collapsible.css +33 -33
  253. package/src/templates/components/collapsible/_template.collapsible.njk +17 -17
  254. package/src/templates/components/collapsible/params.collapsible.yaml +48 -48
  255. package/src/templates/components/date-input/_examples.date-input.njk +500 -500
  256. package/src/templates/components/date-input/_macro.date-input.njk +3 -3
  257. package/src/templates/components/date-input/_template.date-input.njk +126 -126
  258. package/src/templates/components/date-input/params.date-input.yaml +97 -97
  259. package/src/templates/components/datepicker/_examples.datepicker.njk +346 -346
  260. package/src/templates/components/datepicker/_macro.datepicker.njk +3 -3
  261. package/src/templates/components/datepicker/_styles.datepicker.css +85 -85
  262. package/src/templates/components/datepicker/_template.datepicker.njk +123 -123
  263. package/src/templates/components/datepicker/params.datepicker.yaml +104 -104
  264. package/src/templates/components/description-list/_examples.description-list.njk +436 -436
  265. package/src/templates/components/description-list/_macro.description-list.njk +3 -3
  266. package/src/templates/components/description-list/_template.description-list.njk +17 -17
  267. package/src/templates/components/description-list/params.description-list.yaml +61 -61
  268. package/src/templates/components/details/_examples.details.njk +44 -44
  269. package/src/templates/components/details/_macro.details.njk +3 -3
  270. package/src/templates/components/details/_template.details.njk +17 -17
  271. package/src/templates/components/details/params.details.yaml +40 -40
  272. package/src/templates/components/dialog/_examples.dialog.njk +138 -138
  273. package/src/templates/components/dialog/_macro.dialog.njk +3 -3
  274. package/src/templates/components/dialog/_styles.dialog.css +19 -19
  275. package/src/templates/components/dialog/_template.dialog.njk +12 -12
  276. package/src/templates/components/dialog/params.dialog.yaml +25 -25
  277. package/src/templates/components/dropdown/_examples.dropdown.njk +114 -114
  278. package/src/templates/components/dropdown/_macro.dropdown.njk +3 -3
  279. package/src/templates/components/dropdown/_styles.dropdown.css +187 -187
  280. package/src/templates/components/dropdown/_template.dropdown.njk +34 -34
  281. package/src/templates/components/dropdown/params.dropdown.yaml +32 -32
  282. package/src/templates/components/error-message/_examples.error-message.njk +14 -14
  283. package/src/templates/components/error-message/_macro.error-message.njk +5 -5
  284. package/src/templates/components/error-message/_template.error-message.njk +8 -8
  285. package/src/templates/components/error-message/params.error-message.yaml +23 -23
  286. package/src/templates/components/error-summary/_examples.error-summary.njk +81 -81
  287. package/src/templates/components/error-summary/_macro.error-summary.njk +5 -5
  288. package/src/templates/components/error-summary/_template.error-summary.njk +48 -48
  289. package/src/templates/components/error-summary/params.error-summary.yaml +52 -52
  290. package/src/templates/components/fieldset/_examples.fieldset.njk +88 -88
  291. package/src/templates/components/fieldset/_macro.fieldset.njk +2 -2
  292. package/src/templates/components/fieldset/_template.fieldset.njk +46 -46
  293. package/src/templates/components/fieldset/params.fieldset.yaml +49 -49
  294. package/src/templates/components/file-upload/_examples.file-upload.njk +84 -84
  295. package/src/templates/components/file-upload/_macro.file-upload.njk +2 -2
  296. package/src/templates/components/file-upload/_template.file-upload.njk +46 -46
  297. package/src/templates/components/file-upload/params.file-upload.yaml +48 -48
  298. package/src/templates/components/footer/_examples.footer.njk +492 -492
  299. package/src/templates/components/footer/_macro.footer.njk +3 -3
  300. package/src/templates/components/footer/_styles.footer.css +43 -43
  301. package/src/templates/components/footer/_template.footer.njk +114 -114
  302. package/src/templates/components/footer/params.footer.yaml +140 -140
  303. package/src/templates/components/header/_examples.header.njk +535 -535
  304. package/src/templates/components/header/_macro.header.header__dropdown.njk +3 -3
  305. package/src/templates/components/header/_macro.header.header__navigation.njk +3 -3
  306. package/src/templates/components/header/_macro.header.header__offcanvas.njk +3 -3
  307. package/src/templates/components/header/_macro.header.header__offcanvasButton.njk +3 -3
  308. package/src/templates/components/header/_macro.header.header__subnav.njk +3 -3
  309. package/src/templates/components/header/_macro.header.njk +3 -3
  310. package/src/templates/components/header/_styles.header.css +12 -12
  311. package/src/templates/components/header/_template.header.header__dropdown.njk +27 -27
  312. package/src/templates/components/header/_template.header.header__navigation.njk +27 -27
  313. package/src/templates/components/header/_template.header.header__offcanvas.njk +20 -20
  314. package/src/templates/components/header/_template.header.header__offcanvasButton.njk +10 -10
  315. package/src/templates/components/header/_template.header.header__subnav.njk +33 -33
  316. package/src/templates/components/header/_template.header.njk +138 -138
  317. package/src/templates/components/header/params.header.yaml +280 -280
  318. package/src/templates/components/header-advanced/_examples.header-advanced.njk +1016 -1016
  319. package/src/templates/components/header-advanced/_macro.header-advanced.njk +3 -3
  320. package/src/templates/components/header-advanced/_template.header-advanced.njk +168 -168
  321. package/src/templates/components/header-advanced/params.header-advanced.yaml +346 -346
  322. package/src/templates/components/header-mini/_examples.header-mini.njk +304 -304
  323. package/src/templates/components/header-mini/_macro.header-mini.njk +3 -3
  324. package/src/templates/components/header-mini/_template.header-mini.njk +39 -39
  325. package/src/templates/components/header-mini/params.header-mini.yaml +80 -80
  326. package/src/templates/components/hint/_examples.hint.njk +14 -14
  327. package/src/templates/components/hint/_macro.hint.njk +3 -3
  328. package/src/templates/components/hint/_template.hint.njk +3 -3
  329. package/src/templates/components/hint/params.hint.yaml +34 -34
  330. package/src/templates/components/input/_examples.input.njk +309 -309
  331. package/src/templates/components/input/_macro.input.njk +3 -3
  332. package/src/templates/components/input/_styles.input.css +18 -18
  333. package/src/templates/components/input/_template.input.njk +54 -54
  334. package/src/templates/components/input/params.input.yaml +80 -80
  335. package/src/templates/components/input-group/_examples.input-group.njk +503 -503
  336. package/src/templates/components/input-group/_macro.input-group.njk +3 -3
  337. package/src/templates/components/input-group/_template.input-group.njk +108 -108
  338. package/src/templates/components/input-group/params.input-group.yaml +123 -123
  339. package/src/templates/components/item/_examples.item.njk +262 -262
  340. package/src/templates/components/item/_macro.item.njk +3 -3
  341. package/src/templates/components/item/_template.item.njk +73 -73
  342. package/src/templates/components/item/params.item.yaml +101 -101
  343. package/src/templates/components/label/_examples.label.njk +34 -34
  344. package/src/templates/components/label/_macro.label.njk +5 -5
  345. package/src/templates/components/label/_template.label.njk +37 -37
  346. package/src/templates/components/label/params.label.yaml +28 -28
  347. package/src/templates/components/links-list/_examples.links-list.njk +594 -594
  348. package/src/templates/components/links-list/_macro.links-list.njk +3 -3
  349. package/src/templates/components/links-list/_template.links-list.njk +118 -118
  350. package/src/templates/components/links-list/params.links-list.yaml +101 -101
  351. package/src/templates/components/listbox/_examples.listbox.njk +656 -656
  352. package/src/templates/components/listbox/_macro.listbox.njk +3 -3
  353. package/src/templates/components/listbox/_styles.listbox.css +218 -218
  354. package/src/templates/components/listbox/_template.listbox.njk +90 -90
  355. package/src/templates/components/listbox/params.listbox.yaml +85 -85
  356. package/src/templates/components/media-object/_examples.media-object.njk +48 -48
  357. package/src/templates/components/media-object/_macro.media-object.njk +3 -3
  358. package/src/templates/components/media-object/_template.media-object.njk +21 -21
  359. package/src/templates/components/media-object/params.media-object.yaml +16 -16
  360. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +514 -514
  361. package/src/templates/components/menu-horizontal/_macro.menu-horizontal.njk +3 -3
  362. package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css +161 -161
  363. package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +36 -36
  364. package/src/templates/components/menu-horizontal/params.menu-horizontal.yaml +53 -53
  365. package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +1106 -1106
  366. package/src/templates/components/menu-navigation/_macro.menu-navigation.njk +3 -3
  367. package/src/templates/components/menu-navigation/_styles.menu-navigation.css +227 -227
  368. package/src/templates/components/menu-navigation/_template.menu-navigation.njk +89 -89
  369. package/src/templates/components/menu-navigation/params.menu-navigation.yaml +86 -86
  370. package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +739 -739
  371. package/src/templates/components/menu-vertical/_macro.menu-vertical.njk +3 -3
  372. package/src/templates/components/menu-vertical/_template.menu-vertical.njk +92 -92
  373. package/src/templates/components/menu-vertical/params.menu-vertical.yaml +77 -77
  374. package/src/templates/components/menubar/_examples.menubar.njk +1623 -1623
  375. package/src/templates/components/menubar/_macro.menubar.njk +3 -3
  376. package/src/templates/components/menubar/_styles.menubar.css +253 -253
  377. package/src/templates/components/menubar/_template.menubar.njk +105 -105
  378. package/src/templates/components/menubar/params.menubar.yaml +139 -139
  379. package/src/templates/components/modal/_examples.modal.njk +354 -354
  380. package/src/templates/components/modal/_macro.modal.njk +3 -3
  381. package/src/templates/components/modal/_template.modal.njk +129 -129
  382. package/src/templates/components/modal/params.modal.yaml +77 -77
  383. package/src/templates/components/nav/_examples.nav.njk +402 -402
  384. package/src/templates/components/nav/_macro.nav.njk +3 -3
  385. package/src/templates/components/nav/_template.nav.njk +53 -53
  386. package/src/templates/components/nav/params.nav.yaml +61 -61
  387. package/src/templates/components/notification/_examples.notification.njk +193 -193
  388. package/src/templates/components/notification/_macro.notification.njk +3 -3
  389. package/src/templates/components/notification/_styles.notification.css +28 -28
  390. package/src/templates/components/notification/_template.notification.njk +86 -86
  391. package/src/templates/components/notification/params.notification.yaml +101 -101
  392. package/src/templates/components/pagination/_examples.pagination.njk +402 -397
  393. package/src/templates/components/pagination/_macro.pagination.njk +3 -3
  394. package/src/templates/components/pagination/_template.pagination.njk +158 -153
  395. package/src/templates/components/pagination/params.pagination.yaml +150 -150
  396. package/src/templates/components/pill/_examples.pill.njk +101 -101
  397. package/src/templates/components/pill/_macro.pill.njk +3 -3
  398. package/src/templates/components/pill/_styles.pill.css +63 -63
  399. package/src/templates/components/pill/_template.pill.njk +38 -38
  400. package/src/templates/components/pill/params.pill.yaml +28 -28
  401. package/src/templates/components/radios/_examples.radios.njk +637 -637
  402. package/src/templates/components/radios/_macro.radios.njk +5 -5
  403. package/src/templates/components/radios/_styles.radios.css +31 -31
  404. package/src/templates/components/radios/_template.radios.njk +134 -134
  405. package/src/templates/components/radios/params.radios.yaml +104 -104
  406. package/src/templates/components/searchbar/_examples.searchbar.njk +98 -98
  407. package/src/templates/components/searchbar/_macro.searchbar.njk +3 -3
  408. package/src/templates/components/searchbar/_template.searchbar.njk +46 -46
  409. package/src/templates/components/searchbar/params.searchbar.yaml +46 -46
  410. package/src/templates/components/select/_examples.select.njk +336 -336
  411. package/src/templates/components/select/_macro.select.njk +5 -5
  412. package/src/templates/components/select/_styles.select.css +47 -47
  413. package/src/templates/components/select/_template.select.njk +70 -70
  414. package/src/templates/components/select/params.select.yaml +93 -93
  415. package/src/templates/components/skip-link/_examples.skip-link.njk +19 -19
  416. package/src/templates/components/skip-link/_macro.skip-link.njk +3 -3
  417. package/src/templates/components/skip-link/_styles.skip-link.css +13 -13
  418. package/src/templates/components/skip-link/_template.skip-link.njk +4 -4
  419. package/src/templates/components/skip-link/params.skip-link.yaml +20 -20
  420. package/src/templates/components/spinner/_examples.spinner.njk +52 -52
  421. package/src/templates/components/spinner/_macro.spinner.njk +3 -3
  422. package/src/templates/components/spinner/_styles.spinner.css +32 -32
  423. package/src/templates/components/spinner/_template.spinner.njk +8 -8
  424. package/src/templates/components/spinner/params.spinner.yaml +12 -12
  425. package/src/templates/components/status/_examples.status.njk +49 -49
  426. package/src/templates/components/status/_macro.status.njk +3 -3
  427. package/src/templates/components/status/_template.status.njk +23 -23
  428. package/src/templates/components/status/params.status.yaml +24 -24
  429. package/src/templates/components/status-item/_examples.status-item.njk +245 -245
  430. package/src/templates/components/status-item/_macro.status-item.njk +3 -3
  431. package/src/templates/components/status-item/_template.status-item.njk +99 -99
  432. package/src/templates/components/status-item/params.status-item.yaml +106 -106
  433. package/src/templates/components/table/_examples.table.njk +887 -887
  434. package/src/templates/components/table/_macro.table.njk +3 -3
  435. package/src/templates/components/table/_template.table.njk +68 -68
  436. package/src/templates/components/table/params.table.yaml +126 -126
  437. package/src/templates/components/table-advanced/_examples.table-advanced.njk +875 -875
  438. package/src/templates/components/table-advanced/_macro.table-advanced.njk +3 -3
  439. package/src/templates/components/table-advanced/_styles.table-advanced.css +65 -65
  440. package/src/templates/components/table-advanced/_template.table-advanced.njk +207 -207
  441. package/src/templates/components/table-advanced/params.table-advanced.yaml +156 -156
  442. package/src/templates/components/tabs/_examples.tabs.njk +473 -473
  443. package/src/templates/components/tabs/_macro.tabs.njk +3 -3
  444. package/src/templates/components/tabs/_styles.tabs.css +55 -55
  445. package/src/templates/components/tabs/_template.tabs.njk +70 -70
  446. package/src/templates/components/tabs/params.tabs.yaml +79 -79
  447. package/src/templates/components/textarea/_examples.textarea.njk +131 -131
  448. package/src/templates/components/textarea/_macro.textarea.njk +5 -5
  449. package/src/templates/components/textarea/_template.textarea.njk +48 -48
  450. package/src/templates/components/textarea/params.textarea.yaml +64 -64
  451. package/src/templates/components/toggle/_examples.toggle.njk +188 -188
  452. package/src/templates/components/toggle/_macro.toggle.njk +3 -3
  453. package/src/templates/components/toggle/_styles.toggle.css +31 -31
  454. package/src/templates/components/toggle/_template.toggle.njk +27 -27
  455. package/src/templates/components/toggle/params.toggle.yaml +69 -69
  456. package/src/templates/components/tooltip/_examples.tooltip.njk +86 -86
  457. package/src/templates/components/tooltip/_macro.tooltip.njk +3 -3
  458. package/src/templates/components/tooltip/_template.tooltip.njk +39 -39
  459. package/src/templates/components/tooltip/params.tooltip.yaml +40 -40
  460. package/src/templates/components/tree/_examples.tree.njk +2261 -2261
  461. package/src/templates/components/tree/_macro.tree.njk +3 -3
  462. package/src/templates/components/tree/_styles.tree.css +53 -53
  463. package/src/templates/components/tree/_template.tree.njk +182 -182
  464. package/src/templates/components/tree/params.tree.yaml +167 -167
  465. package/src/templates/includes/_abrir-notificaciones-extra.njk +2 -2
  466. package/src/templates/includes/_abrir-notificaciones.njk +2 -2
  467. package/src/templates/includes/_acciones-de-cabecera.njk +28 -28
  468. package/src/templates/includes/_ejemplo-titulo-h2-parrafo.njk +4 -4
  469. package/src/templates/includes/_ejemplo-titulo-parrafo.njk +4 -4
  470. package/src/templates/includes/_test-include.njk +13 -13
  471. package/src/templates/pages/_page.foot-headroom.njk +33 -33
  472. package/src/templates/pages/_page.foot.njk +8 -8
  473. package/src/templates/pages/_page.footer.njk +19 -19
  474. package/src/templates/pages/_page.head.njk +12 -12
  475. package/src/templates/pages/_page.notification-edit-inner-content.njk +31 -31
  476. package/src/templates/pages/_page.notification-edit.njk +30 -30
  477. package/src/templates/pages/_page.notification-footer.njk +32 -32
  478. package/src/templates/pages/_page.notification-header-fixed.njk +30 -30
  479. package/src/templates/pages/_page.notification-header.njk +31 -31
  480. package/src/templates/pages/_page.sidebar-content.njk +20 -20
  481. package/src/templates/pages/_page.spinner-block.njk +14 -14
  482. package/src/templates/pages/_page.spinner-show.njk +15 -15
  483. package/src/templates/pages/_page.spinner.njk +15 -15
  484. package/src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk +36 -36
  485. package/src/templates/pages/_template.edit-fixed.njk +74 -74
  486. package/src/templates/pages/_template.home.njk +111 -111
  487. package/src/templates/pages/_template.logged-out.njk +56 -56
  488. package/src/templates/pages/_template.logged-selector-fixed-headroom.njk +198 -198
  489. package/src/templates/pages/_template.logged-selector-fixed.njk +195 -195
  490. package/src/templates/pages/_template.logged-selector-subheader.njk +80 -80
  491. package/src/templates/pages/_template.logged-selector-with-sidebar.njk +28 -28
  492. package/src/templates/pages/_template.logged-selector.njk +195 -195
  493. package/src/templates/pages/_template.logged.njk +141 -141
  494. package/src/templates/pages/_template.mfe-iframe-content.njk +31 -31
  495. package/src/templates/pages/_template.mfe.njk +83 -83
  496. package/src/templates/pages/_template.test.njk +48 -48
  497. package/src/templates/pages/_template.with-header-advanced.njk +311 -311
package/docs/ds/_ds.section.espaciado.njk CHANGED
@@ -1,299 +1,299 @@
1
-
2
- <!-- _ds.section.spacing.njk -->
3
-
4
- <div class="container mx-auto">
5
- {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
6
- {{ DSSectionTitle({
7
- title: "Espaciado"
8
- }) }}
9
- <div class="pb-lg"></div>
10
- {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
11
- {{ DSSubsectionTitle({
12
- title: "Espaciado preferido de desy-html"
13
- }) }}
14
- <div class="prose">
15
- <p>
16
- 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.
17
- </p>
18
- <table>
19
- <thead>
20
- <tr>
21
- <th>Nombre</th>
22
- <th>Tamaño</th>
23
- <th>Pixels</th>
24
- <th>Ejemplo de clases</th>
25
- <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
26
- </tr>
27
- </thead>
28
- <tbody>
29
- <tr>
30
- <td>xs</td>
31
- <td>0.25rem</td>
32
- <td>4px</td>
33
- <td><code>pr-xs</code></td>
34
- <td class="hidden sm:table-cell">
35
- <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>
36
- </td>
37
- </tr>
38
- <tr class="sm:hidden">
39
- <td colspan="4">
40
- <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>
41
- </td>
42
- </tr>
43
- <tr>
44
- <td>sm</td>
45
- <td>0.5rem</td>
46
- <td>8px</td>
47
- <td><code>pr-sm</code></td>
48
- <td class="hidden sm:table-cell">
49
- <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>
50
- </td>
51
- </tr>
52
- <tr class="sm:hidden">
53
- <td colspan="4">
54
- <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>
55
- </td>
56
- </tr>
57
- <tr>
58
- <td>base</td>
59
- <td>1rem</td>
60
- <td>16px</td>
61
- <td><code>pr-base</code></td>
62
- <td class="hidden sm:table-cell">
63
- <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>
64
- </td>
65
- </tr>
66
- <tr class="sm:hidden">
67
- <td colspan="4">
68
- <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>
69
- </td>
70
- </tr>
71
- <tr>
72
- <td>lg</td>
73
- <td>1.75rem</td>
74
- <td>28px</td>
75
- <td><code>pr-lg</code></td>
76
- <td class="hidden sm:table-cell">
77
- <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>
78
- </td>
79
- </tr>
80
- <tr class="sm:hidden">
81
- <td colspan="4">
82
- <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>
83
- </td>
84
- </tr>
85
- <tr>
86
- <td>xl</td>
87
- <td>2.5rem</td>
88
- <td>40px</td>
89
- <td><code>pr-xl</code></td>
90
- <td class="hidden sm:table-cell">
91
- <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>
92
- </td>
93
- </tr>
94
- <tr class="sm:hidden">
95
- <td colspan="4">
96
- <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>
97
- </td>
98
- </tr>
99
- <tr>
100
- <td>2xl</td>
101
- <td>5rem</td>
102
- <td>80px</td>
103
- <td><code>pr-2xl</code></td>
104
- <td class="hidden sm:table-cell">
105
- <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>
106
- </td>
107
- </tr>
108
- <tr class="sm:hidden">
109
- <td colspan="4">
110
- <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>
111
- </td>
112
- </tr>
113
- <tr>
114
- <td>3xl</td>
115
- <td>10rem</td>
116
- <td>160px</td>
117
- <td><code>pr-3xl</code></td>
118
- <td class="hidden sm:table-cell">
119
- <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>
120
- </td>
121
- </tr>
122
- <tr class="sm:hidden">
123
- <td colspan="4">
124
- <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>
125
- </td>
126
- </tr>
127
- </tbody>
128
- </table>
129
- </div>
130
- <div class="pb-xl"></div>
131
- {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
132
- {{ DSSubsectionTitle({
133
- title: "Espaciado preferido de desy-html para width"
134
- }) }}
135
- <div class="prose max-w-none">
136
- <p>
137
- Utiliza en la medida de lo posible estos valores para establecer valores de width y max-width.
138
- </p>
139
- <div class="max-w-full overflow-x-auto">
140
- <table>
141
- <thead>
142
- <tr>
143
- <th>Nombre</th>
144
- <th>Tamaño</th>
145
- <th>Pixels</th>
146
- <th>Ejemplo de clases</th>
147
- <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
148
- </tr>
149
- </thead>
150
- <tbody>
151
- <tr>
152
- <td>xs</td>
153
- <td>20rem</td>
154
- <td>320px</td>
155
- <td><code>w-xs</code></td>
156
- <td class="hidden sm:table-cell">
157
- <div class="inline-block w-xs h-4 bg-primary-base"></div>
158
- </td>
159
- </tr>
160
- <tr class="sm:hidden">
161
- <td colspan="4">
162
- <div class="inline-block w-xs h-4 bg-primary-base" role="img" aria-label="anchura xs"></div>
163
- </td>
164
- </tr>
165
- <tr>
166
- <td>sm</td>
167
- <td>24rem</td>
168
- <td>384px</td>
169
- <td><code>w-sm</code></td>
170
- <td class="hidden sm:table-cell">
171
- <div class="inline-block w-sm h-4 bg-primary-base"></div>
172
- </td>
173
- </tr>
174
- <tr class="sm:hidden">
175
- <td colspan="4">
176
- <div class="inline-block w-sm h-4 bg-primary-base" role="img" aria-label="anchura sm"></div>
177
- </td>
178
- </tr>
179
- <tr>
180
- <td>md</td>
181
- <td>28rem</td>
182
- <td>448px</td>
183
- <td><code>w-md</code></td>
184
- <td class="hidden sm:table-cell">
185
- <div class="inline-block w-md h-4 bg-primary-base"></div>
186
- </td>
187
- </tr>
188
- <tr class="sm:hidden">
189
- <td colspan="4">
190
- <div class="inline-block w-md h-4 bg-primary-base" role="img" aria-label="anchura md"></div>
191
- </td>
192
- </tr>
193
- <tr>
194
- <td>lg</td>
195
- <td>32rem</td>
196
- <td>512px</td>
197
- <td><code>w-lg</code></td>
198
- <td class="hidden sm:table-cell">
199
- <div class="inline-block w-lg h-4 bg-primary-base"></div>
200
- </td>
201
- </tr>
202
- <tr class="sm:hidden">
203
- <td colspan="4">
204
- <div class="inline-block w-lg h-4 bg-primary-base" role="img" aria-label="anchura lg"></div>
205
- </td>
206
- </tr>
207
- <tr>
208
- <td>xl</td>
209
- <td>36rem</td>
210
- <td>576px</td>
211
- <td><code>w-xl</code></td>
212
- <td class="hidden sm:table-cell">
213
- <div class="inline-block w-xl h-4 bg-primary-base"></div>
214
- </td>
215
- </tr>
216
- <tr class="sm:hidden">
217
- <td colspan="4">
218
- <div class="inline-block w-xl h-4 bg-primary-base" role="img" aria-label="anchura xl"></div>
219
- </td>
220
- </tr>
221
- </tbody>
222
- </table>
223
- </div>
224
- </div>
225
- <div class="pb-xl"></div>
226
- {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
227
- {{ DSSubsectionTitle({
228
- title: "Espaciado adicional de desy-html para max-width y max-height"
229
- }) }}
230
- <div class="prose max-w-none">
231
- <p>
232
- desy-html usa los valores de Tailwind CSS y adicionalmente estos otros:
233
- </p>
234
- <table>
235
- <thead>
236
- <tr>
237
- <th>Nombre</th>
238
- <th>Tamaño</th>
239
- <th>Pixels</th>
240
- <th>Ejemplo de clases</th>
241
- <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
242
- </tr>
243
- </thead>
244
- <tbody>
245
- <tr>
246
- <td>40</td>
247
- <td>10rem</td>
248
- <td>160px</td>
249
- <td><code>max-w-40</code></td>
250
- <td class="hidden sm:table-cell">
251
- <div class="inline-block max-w-40 overflow-hidden">
252
- <div class="h-4 bg-primary-base text-transparent" role="img" aria-label="anchura 40">
253
- <span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span>
254
- </div>
255
- </div>
256
- </td>
257
- </tr>
258
- <tr class="sm:hidden">
259
- <td colspan="4">
260
- <div class="inline-block max-w-40 overflow-hidden">
261
- <div class="h-4 bg-primary-base text-transparent" role="img" aria-label="anchura 40">
262
- <span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span>
263
- </div>
264
- </div>
265
- </td>
266
- </tr>
267
- <tr>
268
- <td>64</td>
269
- <td>16rem</td>
270
- <td>256px</td>
271
- <td><code>max-w-64</code></td>
272
- <td class="hidden sm:table-cell">
273
- <div class="inline-block max-w-64 overflow-hidden">
274
- <div class="h-4 bg-primary-base text-transparent">
275
- <span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
276
- </div>
277
- </div>
278
- </td>
279
- </tr>
280
- <tr class="sm:hidden">
281
- <td colspan="4">
282
- <div class="inline-block max-w-64 overflow-hidden">
283
- <div class="h-4 bg-primary-base text-transparent">
284
- <span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
285
- </div>
286
- </div>
287
- </td>
288
- </tr>
289
- </tbody>
290
- </table>
291
- </div>
292
- <div class="pb-xl"></div>
293
- {{ DSSubsectionTitle({
294
- title: "Más espaciados"
295
- }) }}
296
- <div class="prose">
297
- <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="img"><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>
298
- </div>
299
- </div>
1
+
2
+ <!-- _ds.section.spacing.njk -->
3
+
4
+ <div class="container mx-auto">
5
+ {% from "ds/_ds.macro.section-title.njk" import DSSectionTitle %}
6
+ {{ DSSectionTitle({
7
+ title: "Espaciado"
8
+ }) }}
9
+ <div class="pb-lg"></div>
10
+ {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
11
+ {{ DSSubsectionTitle({
12
+ title: "Espaciado preferido de desy-html"
13
+ }) }}
14
+ <div class="prose">
15
+ <p>
16
+ 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.
17
+ </p>
18
+ <table>
19
+ <thead>
20
+ <tr>
21
+ <th>Nombre</th>
22
+ <th>Tamaño</th>
23
+ <th>Pixels</th>
24
+ <th>Ejemplo de clases</th>
25
+ <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
26
+ </tr>
27
+ </thead>
28
+ <tbody>
29
+ <tr>
30
+ <td>xs</td>
31
+ <td>0.25rem</td>
32
+ <td>4px</td>
33
+ <td><code>pr-xs</code></td>
34
+ <td class="hidden sm:table-cell">
35
+ <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>
36
+ </td>
37
+ </tr>
38
+ <tr class="sm:hidden">
39
+ <td colspan="4">
40
+ <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>
41
+ </td>
42
+ </tr>
43
+ <tr>
44
+ <td>sm</td>
45
+ <td>0.5rem</td>
46
+ <td>8px</td>
47
+ <td><code>pr-sm</code></td>
48
+ <td class="hidden sm:table-cell">
49
+ <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>
50
+ </td>
51
+ </tr>
52
+ <tr class="sm:hidden">
53
+ <td colspan="4">
54
+ <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>
55
+ </td>
56
+ </tr>
57
+ <tr>
58
+ <td>base</td>
59
+ <td>1rem</td>
60
+ <td>16px</td>
61
+ <td><code>pr-base</code></td>
62
+ <td class="hidden sm:table-cell">
63
+ <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>
64
+ </td>
65
+ </tr>
66
+ <tr class="sm:hidden">
67
+ <td colspan="4">
68
+ <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>
69
+ </td>
70
+ </tr>
71
+ <tr>
72
+ <td>lg</td>
73
+ <td>1.75rem</td>
74
+ <td>28px</td>
75
+ <td><code>pr-lg</code></td>
76
+ <td class="hidden sm:table-cell">
77
+ <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>
78
+ </td>
79
+ </tr>
80
+ <tr class="sm:hidden">
81
+ <td colspan="4">
82
+ <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>
83
+ </td>
84
+ </tr>
85
+ <tr>
86
+ <td>xl</td>
87
+ <td>2.5rem</td>
88
+ <td>40px</td>
89
+ <td><code>pr-xl</code></td>
90
+ <td class="hidden sm:table-cell">
91
+ <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>
92
+ </td>
93
+ </tr>
94
+ <tr class="sm:hidden">
95
+ <td colspan="4">
96
+ <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>
97
+ </td>
98
+ </tr>
99
+ <tr>
100
+ <td>2xl</td>
101
+ <td>5rem</td>
102
+ <td>80px</td>
103
+ <td><code>pr-2xl</code></td>
104
+ <td class="hidden sm:table-cell">
105
+ <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>
106
+ </td>
107
+ </tr>
108
+ <tr class="sm:hidden">
109
+ <td colspan="4">
110
+ <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>
111
+ </td>
112
+ </tr>
113
+ <tr>
114
+ <td>3xl</td>
115
+ <td>10rem</td>
116
+ <td>160px</td>
117
+ <td><code>pr-3xl</code></td>
118
+ <td class="hidden sm:table-cell">
119
+ <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>
120
+ </td>
121
+ </tr>
122
+ <tr class="sm:hidden">
123
+ <td colspan="4">
124
+ <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>
125
+ </td>
126
+ </tr>
127
+ </tbody>
128
+ </table>
129
+ </div>
130
+ <div class="pb-xl"></div>
131
+ {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
132
+ {{ DSSubsectionTitle({
133
+ title: "Espaciado preferido de desy-html para width"
134
+ }) }}
135
+ <div class="prose max-w-none">
136
+ <p>
137
+ Utiliza en la medida de lo posible estos valores para establecer valores de width y max-width.
138
+ </p>
139
+ <div class="max-w-full overflow-x-auto">
140
+ <table>
141
+ <thead>
142
+ <tr>
143
+ <th>Nombre</th>
144
+ <th>Tamaño</th>
145
+ <th>Pixels</th>
146
+ <th>Ejemplo de clases</th>
147
+ <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
148
+ </tr>
149
+ </thead>
150
+ <tbody>
151
+ <tr>
152
+ <td>xs</td>
153
+ <td>20rem</td>
154
+ <td>320px</td>
155
+ <td><code>w-xs</code></td>
156
+ <td class="hidden sm:table-cell">
157
+ <div class="inline-block w-xs h-4 bg-primary-base"></div>
158
+ </td>
159
+ </tr>
160
+ <tr class="sm:hidden">
161
+ <td colspan="4">
162
+ <div class="inline-block w-xs h-4 bg-primary-base" role="img" aria-label="anchura xs"></div>
163
+ </td>
164
+ </tr>
165
+ <tr>
166
+ <td>sm</td>
167
+ <td>24rem</td>
168
+ <td>384px</td>
169
+ <td><code>w-sm</code></td>
170
+ <td class="hidden sm:table-cell">
171
+ <div class="inline-block w-sm h-4 bg-primary-base"></div>
172
+ </td>
173
+ </tr>
174
+ <tr class="sm:hidden">
175
+ <td colspan="4">
176
+ <div class="inline-block w-sm h-4 bg-primary-base" role="img" aria-label="anchura sm"></div>
177
+ </td>
178
+ </tr>
179
+ <tr>
180
+ <td>md</td>
181
+ <td>28rem</td>
182
+ <td>448px</td>
183
+ <td><code>w-md</code></td>
184
+ <td class="hidden sm:table-cell">
185
+ <div class="inline-block w-md h-4 bg-primary-base"></div>
186
+ </td>
187
+ </tr>
188
+ <tr class="sm:hidden">
189
+ <td colspan="4">
190
+ <div class="inline-block w-md h-4 bg-primary-base" role="img" aria-label="anchura md"></div>
191
+ </td>
192
+ </tr>
193
+ <tr>
194
+ <td>lg</td>
195
+ <td>32rem</td>
196
+ <td>512px</td>
197
+ <td><code>w-lg</code></td>
198
+ <td class="hidden sm:table-cell">
199
+ <div class="inline-block w-lg h-4 bg-primary-base"></div>
200
+ </td>
201
+ </tr>
202
+ <tr class="sm:hidden">
203
+ <td colspan="4">
204
+ <div class="inline-block w-lg h-4 bg-primary-base" role="img" aria-label="anchura lg"></div>
205
+ </td>
206
+ </tr>
207
+ <tr>
208
+ <td>xl</td>
209
+ <td>36rem</td>
210
+ <td>576px</td>
211
+ <td><code>w-xl</code></td>
212
+ <td class="hidden sm:table-cell">
213
+ <div class="inline-block w-xl h-4 bg-primary-base"></div>
214
+ </td>
215
+ </tr>
216
+ <tr class="sm:hidden">
217
+ <td colspan="4">
218
+ <div class="inline-block w-xl h-4 bg-primary-base" role="img" aria-label="anchura xl"></div>
219
+ </td>
220
+ </tr>
221
+ </tbody>
222
+ </table>
223
+ </div>
224
+ </div>
225
+ <div class="pb-xl"></div>
226
+ {% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
227
+ {{ DSSubsectionTitle({
228
+ title: "Espaciado adicional de desy-html para max-width y max-height"
229
+ }) }}
230
+ <div class="prose max-w-none">
231
+ <p>
232
+ desy-html usa los valores de Tailwind CSS y adicionalmente estos otros:
233
+ </p>
234
+ <table>
235
+ <thead>
236
+ <tr>
237
+ <th>Nombre</th>
238
+ <th>Tamaño</th>
239
+ <th>Pixels</th>
240
+ <th>Ejemplo de clases</th>
241
+ <th class="hidden sm:table-cell"><span class="sr-only">Previsualización</span></th>
242
+ </tr>
243
+ </thead>
244
+ <tbody>
245
+ <tr>
246
+ <td>40</td>
247
+ <td>10rem</td>
248
+ <td>160px</td>
249
+ <td><code>max-w-40</code></td>
250
+ <td class="hidden sm:table-cell">
251
+ <div class="inline-block max-w-40 overflow-hidden">
252
+ <div class="h-4 bg-primary-base text-transparent" role="img" aria-label="anchura 40">
253
+ <span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span>
254
+ </div>
255
+ </div>
256
+ </td>
257
+ </tr>
258
+ <tr class="sm:hidden">
259
+ <td colspan="4">
260
+ <div class="inline-block max-w-40 overflow-hidden">
261
+ <div class="h-4 bg-primary-base text-transparent" role="img" aria-label="anchura 40">
262
+ <span class="sr-only">||||||||||||||||||||||||||||||||||||||||</span>
263
+ </div>
264
+ </div>
265
+ </td>
266
+ </tr>
267
+ <tr>
268
+ <td>64</td>
269
+ <td>16rem</td>
270
+ <td>256px</td>
271
+ <td><code>max-w-64</code></td>
272
+ <td class="hidden sm:table-cell">
273
+ <div class="inline-block max-w-64 overflow-hidden">
274
+ <div class="h-4 bg-primary-base text-transparent">
275
+ <span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
276
+ </div>
277
+ </div>
278
+ </td>
279
+ </tr>
280
+ <tr class="sm:hidden">
281
+ <td colspan="4">
282
+ <div class="inline-block max-w-64 overflow-hidden">
283
+ <div class="h-4 bg-primary-base text-transparent">
284
+ <span class="sr-only">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
285
+ </div>
286
+ </div>
287
+ </td>
288
+ </tr>
289
+ </tbody>
290
+ </table>
291
+ </div>
292
+ <div class="pb-xl"></div>
293
+ {{ DSSubsectionTitle({
294
+ title: "Más espaciados"
295
+ }) }}
296
+ <div class="prose">
297
+ <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="img"><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>
298
+ </div>
299
+ </div>