desy-html 12.1.0 → 13.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 (508) hide show
  1. package/README.md +36 -36
  2. package/config/tailwind.config.js +218 -218
  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 +381 -381
  7. package/docs/_macro.component-example.njk +6 -6
  8. package/docs/_macro.example-render.njk +376 -376
  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-lg.njk +264 -264
  25. package/docs/ds/_ds.example.botones-primary-sm.njk +264 -264
  26. package/docs/ds/_ds.example.botones-primary.njk +264 -264
  27. package/docs/ds/_ds.example.botones-transparent-sm.njk +264 -264
  28. package/docs/ds/_ds.example.botones-transparent.njk +264 -264
  29. package/docs/ds/_ds.example.breadcrumbs.njk +65 -65
  30. package/docs/ds/_ds.example.card.njk +198 -198
  31. package/docs/ds/_ds.example.checkboxes.njk +377 -377
  32. package/docs/ds/_ds.example.collapsible.njk +18 -18
  33. package/docs/ds/_ds.example.color-de-interaccion.njk +16 -16
  34. package/docs/ds/_ds.example.colores-cabecera.njk +15 -15
  35. package/docs/ds/_ds.example.colores-de-soporte.njk +82 -82
  36. package/docs/ds/_ds.example.colores-neutros.njk +26 -26
  37. package/docs/ds/_ds.example.date-input.njk +363 -363
  38. package/docs/ds/_ds.example.description-list.njk +289 -289
  39. package/docs/ds/_ds.example.details.njk +23 -23
  40. package/docs/ds/_ds.example.dropdowns-default.njk +186 -186
  41. package/docs/ds/_ds.example.dropdowns-en-uso.njk +105 -105
  42. package/docs/ds/_ds.example.dropdowns-variaciones.njk +224 -224
  43. package/docs/ds/_ds.example.error-summary.njk +34 -34
  44. package/docs/ds/_ds.example.file-upload.njk +54 -54
  45. package/docs/ds/_ds.example.footer.njk +28 -28
  46. package/docs/ds/_ds.example.header-advanced.njk +70 -70
  47. package/docs/ds/_ds.example.header.njk +211 -211
  48. package/docs/ds/_ds.example.input-group.njk +242 -242
  49. package/docs/ds/_ds.example.input.njk +164 -164
  50. package/docs/ds/_ds.example.item.njk +176 -176
  51. package/docs/ds/_ds.example.layout-escritorio.njk +38 -38
  52. package/docs/ds/_ds.example.layout-movil.njk +14 -14
  53. package/docs/ds/_ds.example.layout-sidebar.njk +11 -11
  54. package/docs/ds/_ds.example.links-list.njk +170 -170
  55. package/docs/ds/_ds.example.listbox-default.njk +677 -677
  56. package/docs/ds/_ds.example.listbox-variaciones.njk +824 -824
  57. package/docs/ds/_ds.example.menu-horizontal.njk +66 -66
  58. package/docs/ds/_ds.example.menu-navigation.njk +493 -493
  59. package/docs/ds/_ds.example.menu-vertical.njk +129 -129
  60. package/docs/ds/_ds.example.menubar-en-uso.njk +244 -244
  61. package/docs/ds/_ds.example.menubar-variaciones.njk +785 -785
  62. package/docs/ds/_ds.example.modal.njk +210 -210
  63. package/docs/ds/_ds.example.nav.njk +158 -158
  64. package/docs/ds/_ds.example.notification.njk +122 -122
  65. package/docs/ds/_ds.example.pagination.njk +190 -190
  66. package/docs/ds/_ds.example.pills.njk +215 -215
  67. package/docs/ds/_ds.example.radios.njk +419 -419
  68. package/docs/ds/_ds.example.searchbar.njk +87 -87
  69. package/docs/ds/_ds.example.select.njk +390 -390
  70. package/docs/ds/_ds.example.status-item.njk +239 -239
  71. package/docs/ds/_ds.example.status.njk +47 -47
  72. package/docs/ds/_ds.example.table.njk +740 -740
  73. package/docs/ds/_ds.example.tabs.njk +136 -136
  74. package/docs/ds/_ds.example.textarea.njk +237 -237
  75. package/docs/ds/_ds.example.textos.njk +32 -32
  76. package/docs/ds/_ds.example.toggle.njk +75 -75
  77. package/docs/ds/_ds.example.tree.njk +456 -456
  78. package/docs/ds/_ds.example.typography.njk +225 -225
  79. package/docs/ds/_ds.macro.code-snippet.njk +32 -32
  80. package/docs/ds/_ds.macro.section-title.njk +2 -2
  81. package/docs/ds/_ds.macro.subsection-title.njk +2 -2
  82. package/docs/ds/_ds.section.avisos.njk +22 -22
  83. package/docs/ds/_ds.section.botones.njk +53 -53
  84. package/docs/ds/_ds.section.campo-y-area-de-texto.njk +19 -19
  85. package/docs/ds/_ds.section.color.njk +147 -147
  86. package/docs/ds/_ds.section.datos.njk +37 -37
  87. package/docs/ds/_ds.section.dropdowns.njk +23 -23
  88. package/docs/ds/_ds.section.espaciado.njk +296 -296
  89. package/docs/ds/_ds.section.forms.njk +68 -68
  90. package/docs/ds/_ds.section.informacion.njk +12 -12
  91. package/docs/ds/_ds.section.layout.njk +63 -63
  92. package/docs/ds/_ds.section.menubar.njk +18 -18
  93. package/docs/ds/_ds.section.mostrar-ocultar.njk +33 -33
  94. package/docs/ds/_ds.section.navigation.njk +57 -57
  95. package/docs/ds/_ds.section.textos.njk +287 -287
  96. package/docs/ds/_ds.section.typography.njk +28 -28
  97. package/docs/estilos.html +37 -37
  98. package/docs/examples-accordion-history.html +8 -8
  99. package/docs/examples-accordion.html +8 -8
  100. package/docs/examples-alert.html +8 -8
  101. package/docs/examples-breadcrumbs.html +8 -8
  102. package/docs/examples-button-loader.html +8 -8
  103. package/docs/examples-button.html +8 -8
  104. package/docs/examples-card.html +7 -7
  105. package/docs/examples-character-count.html +8 -8
  106. package/docs/examples-checkboxes.html +7 -7
  107. package/docs/examples-collapsible.html +7 -7
  108. package/docs/examples-date-input.html +8 -8
  109. package/docs/examples-datepicker.html +8 -8
  110. package/docs/examples-description-list.html +8 -8
  111. package/docs/examples-details.html +8 -8
  112. package/docs/examples-dialog.html +7 -7
  113. package/docs/examples-dropdown.html +8 -8
  114. package/docs/examples-error-message.html +8 -8
  115. package/docs/examples-error-summary.html +8 -8
  116. package/docs/examples-fieldset.html +8 -8
  117. package/docs/examples-file-upload.html +8 -8
  118. package/docs/examples-footer.html +8 -8
  119. package/docs/examples-header-advanced.html +8 -8
  120. package/docs/examples-header-mini.html +8 -8
  121. package/docs/examples-header.html +8 -8
  122. package/docs/examples-hint.html +8 -8
  123. package/docs/examples-input-group.html +8 -8
  124. package/docs/examples-input.html +8 -8
  125. package/docs/examples-item.html +8 -8
  126. package/docs/examples-label.html +8 -8
  127. package/docs/examples-links-list.html +7 -7
  128. package/docs/examples-listbox.html +8 -8
  129. package/docs/examples-media-object.html +7 -7
  130. package/docs/examples-menu-horizontal.html +8 -8
  131. package/docs/examples-menu-navigation.html +8 -8
  132. package/docs/examples-menu-vertical.html +7 -7
  133. package/docs/examples-menubar.html +7 -7
  134. package/docs/examples-modal.html +7 -7
  135. package/docs/examples-nav.html +8 -8
  136. package/docs/examples-notification.html +8 -8
  137. package/docs/examples-pagination.html +8 -8
  138. package/docs/examples-pill.html +8 -8
  139. package/docs/examples-radios.html +8 -8
  140. package/docs/examples-searchbar.html +8 -8
  141. package/docs/examples-select.html +9 -9
  142. package/docs/examples-skip-link.html +8 -8
  143. package/docs/examples-spinner.html +8 -8
  144. package/docs/examples-status-item.html +8 -8
  145. package/docs/examples-status.html +8 -8
  146. package/docs/examples-table-advanced.html +8 -8
  147. package/docs/examples-table.html +8 -8
  148. package/docs/examples-tabs.html +8 -8
  149. package/docs/examples-textarea.html +8 -8
  150. package/docs/examples-toggle.html +8 -8
  151. package/docs/examples-tooltip.html +8 -8
  152. package/docs/examples-tree.html +8 -8
  153. package/docs/index.html +747 -739
  154. package/docs/pagina-accesibilidad.html +109 -109
  155. package/docs/pagina-mapa-web.html +136 -136
  156. package/docs/pagina-prueba.html +94 -94
  157. package/docs/plantilla-con-header-advanced.html +13 -13
  158. package/docs/plantilla-editar-con-cabecera-fija-y-sidebar-sticky.html +153 -153
  159. package/docs/plantilla-editar-con-cabecera-fija.html +16 -16
  160. package/docs/plantilla-logueado-con-cabecera-fija-headroom.html +14 -14
  161. package/docs/plantilla-logueado-con-cabecera-fija.html +14 -14
  162. package/docs/plantilla-logueado-con-selector-de-app-y-sidebar.html +163 -163
  163. package/docs/plantilla-logueado-con-selector-de-app-y-subheader.html +15 -15
  164. package/docs/plantilla-logueado-con-selector-de-app.html +13 -13
  165. package/docs/plantilla-logueado-con-titulo-de-app.html +13 -13
  166. package/docs/plantilla-sin-loguear.html +13 -13
  167. package/docs/plantillas.html +88 -88
  168. package/docs/spinner-plantilla-con-header-advanced.html +1 -1
  169. package/docs/spinner-plantilla-editar-con-cabecera-fija.html +5 -5
  170. package/docs/spinner-plantilla-logueado-con-cabecera-fija.html +1 -1
  171. package/docs/spinner-plantilla-logueado-con-selector-de-app-y-subheader.html +4 -4
  172. package/docs/spinner-plantilla-logueado-con-titulo-de-app.html +1 -1
  173. package/docs/spinner-plantilla-sin-loguear.html +17 -17
  174. package/gulpfile.js +127 -127
  175. package/package.json +67 -67
  176. package/src/EUPL-1.2.txt +287 -287
  177. package/src/css/base.css +44 -44
  178. package/src/css/component.form-group.css +23 -23
  179. package/src/css/component.headroom.css +31 -31
  180. package/src/css/component.text.css +165 -165
  181. package/src/css/component.tippy-box.css +11 -11
  182. package/src/css/styles.css +51 -51
  183. package/src/js/aria/MenuHorizontal.js +63 -63
  184. package/src/js/aria/MenuNavigation.js +4 -1
  185. package/src/js/aria/MenuVertical.js +60 -60
  186. package/src/js/aria/MenubarAction.js +100 -25
  187. package/src/js/aria/Nav.js +60 -60
  188. package/src/js/aria/accordion.js +264 -264
  189. package/src/js/aria/checkBoxes.js +52 -52
  190. package/src/js/aria/collapsible.js +44 -44
  191. package/src/js/aria/dataGrid.js +950 -950
  192. package/src/js/aria/linksList.js +42 -42
  193. package/src/js/aria/listbox.js +1 -1
  194. package/src/js/aria/notification.js +56 -56
  195. package/src/js/aria/radioButton.js +50 -50
  196. package/src/js/aria/tabs.js +0 -2
  197. package/src/js/aria/toggle.js +61 -61
  198. package/src/js/aria/utils.js +193 -193
  199. package/src/js/cally.js +1114 -1114
  200. package/src/js/desy-html.js +564 -573
  201. package/src/js/filters/filter-caller.js +8 -8
  202. package/src/js/filters/filter-escape-ltgt.js +6 -6
  203. package/src/js/filters/filter-quotes.js +49 -49
  204. package/src/js/filters/filter-slugify.js +11 -11
  205. package/src/js/filters/filter-version.js +8 -8
  206. package/src/js/filters/highlight.js +14 -14
  207. package/src/js/filters/index.js +19 -19
  208. package/src/js/globals/get-html-code-from-example.js +31 -31
  209. package/src/js/globals/get-html-code-from-file.js +26 -26
  210. package/src/js/globals/get-nunjucks-code-from-example.js +31 -31
  211. package/src/js/globals/get-nunjucks-code-from-file.js +24 -24
  212. package/src/js/globals/index.js +14 -14
  213. package/src/js/headroom.min.js +6 -6
  214. package/src/js/index.js +73 -75
  215. package/src/js/popper.min.js +6 -6
  216. package/src/js/tippy-bundle.umd.min.js +2 -2
  217. package/src/templates/components/accordion/_examples.accordion.njk +398 -398
  218. package/src/templates/components/accordion/_macro.accordion.njk +3 -3
  219. package/src/templates/components/accordion/_template.accordion.njk +131 -131
  220. package/src/templates/components/accordion/params.accordion.yaml +125 -125
  221. package/src/templates/components/accordion-history/_examples.accordion-history.njk +431 -431
  222. package/src/templates/components/accordion-history/_macro.accordion-history.njk +3 -3
  223. package/src/templates/components/accordion-history/_template.accordion-history.njk +193 -193
  224. package/src/templates/components/accordion-history/params.accordion-history.yaml +129 -129
  225. package/src/templates/components/alert/_examples.alert.njk +79 -79
  226. package/src/templates/components/alert/_macro.alert.njk +3 -3
  227. package/src/templates/components/alert/_styles.alert.css +9 -9
  228. package/src/templates/components/alert/_template.alert.njk +16 -16
  229. package/src/templates/components/alert/params.alert.yaml +25 -25
  230. package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +374 -374
  231. package/src/templates/components/breadcrumbs/_macro.breadcrumbs.njk +3 -3
  232. package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css +81 -78
  233. package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +77 -77
  234. package/src/templates/components/breadcrumbs/params.breadcrumbs.yaml +44 -44
  235. package/src/templates/components/button/_examples.button.njk +295 -296
  236. package/src/templates/components/button/_macro.button.njk +3 -3
  237. package/src/templates/components/button/_styles.button.css +189 -189
  238. package/src/templates/components/button/_template.button.njk +49 -49
  239. package/src/templates/components/button/params.button.yaml +48 -48
  240. package/src/templates/components/button-loader/_examples.button-loader.njk +288 -288
  241. package/src/templates/components/button-loader/_macro.button-loader.njk +3 -3
  242. package/src/templates/components/button-loader/_styles.button-loader.css +204 -204
  243. package/src/templates/components/button-loader/_template.button-loader.njk +84 -84
  244. package/src/templates/components/button-loader/params.button-loader.yaml +74 -74
  245. package/src/templates/components/card/_examples.card.njk +303 -303
  246. package/src/templates/components/card/_macro.card.njk +3 -3
  247. package/src/templates/components/card/_template.card.njk +34 -34
  248. package/src/templates/components/card/params.card.yaml +112 -112
  249. package/src/templates/components/character-count/_examples.character-count.njk +147 -147
  250. package/src/templates/components/character-count/_macro.character-count.njk +5 -5
  251. package/src/templates/components/character-count/_template.character-count.njk +38 -38
  252. package/src/templates/components/character-count/params.character-count.yaml +77 -77
  253. package/src/templates/components/checkboxes/_examples.checkboxes.njk +734 -734
  254. package/src/templates/components/checkboxes/_macro.checkboxes.njk +3 -3
  255. package/src/templates/components/checkboxes/_styles.checkboxes.css +31 -31
  256. package/src/templates/components/checkboxes/_template.checkboxes.njk +137 -138
  257. package/src/templates/components/checkboxes/params.checkboxes.yaml +116 -116
  258. package/src/templates/components/collapsible/_examples.collapsible.njk +77 -77
  259. package/src/templates/components/collapsible/_macro.collapsible.njk +3 -3
  260. package/src/templates/components/collapsible/_styles.collapsible.css +33 -33
  261. package/src/templates/components/collapsible/_template.collapsible.njk +17 -17
  262. package/src/templates/components/collapsible/params.collapsible.yaml +48 -48
  263. package/src/templates/components/date-input/_examples.date-input.njk +500 -500
  264. package/src/templates/components/date-input/_macro.date-input.njk +3 -3
  265. package/src/templates/components/date-input/_template.date-input.njk +125 -126
  266. package/src/templates/components/date-input/params.date-input.yaml +97 -97
  267. package/src/templates/components/datepicker/_examples.datepicker.njk +329 -329
  268. package/src/templates/components/datepicker/_macro.datepicker.njk +3 -3
  269. package/src/templates/components/datepicker/_styles.datepicker.css +89 -89
  270. package/src/templates/components/datepicker/_template.datepicker.njk +130 -131
  271. package/src/templates/components/datepicker/params.datepicker.yaml +104 -104
  272. package/src/templates/components/description-list/_examples.description-list.njk +436 -436
  273. package/src/templates/components/description-list/_macro.description-list.njk +3 -3
  274. package/src/templates/components/description-list/_template.description-list.njk +17 -17
  275. package/src/templates/components/description-list/params.description-list.yaml +61 -61
  276. package/src/templates/components/details/_examples.details.njk +44 -44
  277. package/src/templates/components/details/_macro.details.njk +3 -3
  278. package/src/templates/components/details/_template.details.njk +17 -17
  279. package/src/templates/components/details/params.details.yaml +40 -40
  280. package/src/templates/components/dialog/_examples.dialog.njk +138 -138
  281. package/src/templates/components/dialog/_macro.dialog.njk +3 -3
  282. package/src/templates/components/dialog/_styles.dialog.css +19 -19
  283. package/src/templates/components/dialog/_template.dialog.njk +12 -12
  284. package/src/templates/components/dialog/params.dialog.yaml +25 -25
  285. package/src/templates/components/dropdown/_examples.dropdown.njk +136 -136
  286. package/src/templates/components/dropdown/_macro.dropdown.njk +3 -3
  287. package/src/templates/components/dropdown/_styles.dropdown.css +203 -203
  288. package/src/templates/components/dropdown/_template.dropdown.njk +34 -34
  289. package/src/templates/components/dropdown/params.dropdown.yaml +32 -32
  290. package/src/templates/components/error-message/_examples.error-message.njk +14 -14
  291. package/src/templates/components/error-message/_macro.error-message.njk +5 -5
  292. package/src/templates/components/error-message/_template.error-message.njk +8 -8
  293. package/src/templates/components/error-message/params.error-message.yaml +23 -23
  294. package/src/templates/components/error-summary/_examples.error-summary.njk +81 -81
  295. package/src/templates/components/error-summary/_macro.error-summary.njk +5 -5
  296. package/src/templates/components/error-summary/_template.error-summary.njk +48 -48
  297. package/src/templates/components/error-summary/params.error-summary.yaml +52 -52
  298. package/src/templates/components/fieldset/_examples.fieldset.njk +88 -88
  299. package/src/templates/components/fieldset/_macro.fieldset.njk +2 -2
  300. package/src/templates/components/fieldset/_template.fieldset.njk +46 -46
  301. package/src/templates/components/fieldset/params.fieldset.yaml +49 -49
  302. package/src/templates/components/file-upload/_examples.file-upload.njk +84 -84
  303. package/src/templates/components/file-upload/_macro.file-upload.njk +2 -2
  304. package/src/templates/components/file-upload/_template.file-upload.njk +45 -46
  305. package/src/templates/components/file-upload/params.file-upload.yaml +48 -48
  306. package/src/templates/components/footer/_examples.footer.njk +450 -450
  307. package/src/templates/components/footer/_macro.footer.njk +3 -3
  308. package/src/templates/components/footer/_styles.footer.css +43 -43
  309. package/src/templates/components/footer/_template.footer.njk +115 -114
  310. package/src/templates/components/footer/params.footer.yaml +140 -140
  311. package/src/templates/components/header/_examples.header.njk +542 -542
  312. package/src/templates/components/header/_macro.header.header__dropdown.njk +3 -3
  313. package/src/templates/components/header/_macro.header.header__navigation.njk +3 -3
  314. package/src/templates/components/header/_macro.header.header__offcanvas.njk +3 -3
  315. package/src/templates/components/header/_macro.header.header__offcanvasButton.njk +3 -3
  316. package/src/templates/components/header/_macro.header.header__subnav.njk +3 -3
  317. package/src/templates/components/header/_macro.header.njk +3 -3
  318. package/src/templates/components/header/_styles.header.css +12 -12
  319. package/src/templates/components/header/_template.header.header__dropdown.njk +27 -27
  320. package/src/templates/components/header/_template.header.header__navigation.njk +26 -28
  321. package/src/templates/components/header/_template.header.header__offcanvas.njk +20 -20
  322. package/src/templates/components/header/_template.header.header__offcanvasButton.njk +10 -10
  323. package/src/templates/components/header/_template.header.header__subnav.njk +33 -33
  324. package/src/templates/components/header/_template.header.njk +139 -138
  325. package/src/templates/components/header/params.header.yaml +280 -280
  326. package/src/templates/components/header-advanced/_examples.header-advanced.njk +1033 -1023
  327. package/src/templates/components/header-advanced/_macro.header-advanced.njk +3 -3
  328. package/src/templates/components/header-advanced/_template.header-advanced.njk +168 -168
  329. package/src/templates/components/header-advanced/params.header-advanced.yaml +346 -346
  330. package/src/templates/components/header-mini/_examples.header-mini.njk +304 -304
  331. package/src/templates/components/header-mini/_macro.header-mini.njk +3 -3
  332. package/src/templates/components/header-mini/_template.header-mini.njk +39 -39
  333. package/src/templates/components/header-mini/params.header-mini.yaml +80 -80
  334. package/src/templates/components/hint/_examples.hint.njk +14 -14
  335. package/src/templates/components/hint/_macro.hint.njk +3 -3
  336. package/src/templates/components/hint/_template.hint.njk +3 -3
  337. package/src/templates/components/hint/params.hint.yaml +34 -34
  338. package/src/templates/components/input/_examples.input.njk +309 -309
  339. package/src/templates/components/input/_macro.input.njk +3 -3
  340. package/src/templates/components/input/_styles.input.css +18 -18
  341. package/src/templates/components/input/_template.input.njk +53 -54
  342. package/src/templates/components/input/params.input.yaml +80 -80
  343. package/src/templates/components/input-group/_examples.input-group.njk +503 -503
  344. package/src/templates/components/input-group/_macro.input-group.njk +3 -3
  345. package/src/templates/components/input-group/_template.input-group.njk +107 -108
  346. package/src/templates/components/input-group/params.input-group.yaml +123 -123
  347. package/src/templates/components/item/_examples.item.njk +273 -273
  348. package/src/templates/components/item/_macro.item.njk +3 -3
  349. package/src/templates/components/item/_template.item.njk +73 -73
  350. package/src/templates/components/item/params.item.yaml +101 -101
  351. package/src/templates/components/label/_examples.label.njk +34 -34
  352. package/src/templates/components/label/_macro.label.njk +5 -5
  353. package/src/templates/components/label/_template.label.njk +37 -37
  354. package/src/templates/components/label/params.label.yaml +28 -28
  355. package/src/templates/components/links-list/_examples.links-list.njk +647 -647
  356. package/src/templates/components/links-list/_macro.links-list.njk +3 -3
  357. package/src/templates/components/links-list/_template.links-list.njk +119 -119
  358. package/src/templates/components/links-list/params.links-list.yaml +101 -101
  359. package/src/templates/components/listbox/_examples.listbox.njk +691 -691
  360. package/src/templates/components/listbox/_macro.listbox.njk +3 -3
  361. package/src/templates/components/listbox/_styles.listbox.css +231 -231
  362. package/src/templates/components/listbox/_template.listbox.njk +90 -90
  363. package/src/templates/components/listbox/params.listbox.yaml +85 -85
  364. package/src/templates/components/media-object/_examples.media-object.njk +48 -48
  365. package/src/templates/components/media-object/_macro.media-object.njk +3 -3
  366. package/src/templates/components/media-object/_template.media-object.njk +21 -21
  367. package/src/templates/components/media-object/params.media-object.yaml +16 -16
  368. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +529 -529
  369. package/src/templates/components/menu-horizontal/_macro.menu-horizontal.njk +3 -3
  370. package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css +162 -162
  371. package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +36 -36
  372. package/src/templates/components/menu-horizontal/params.menu-horizontal.yaml +53 -53
  373. package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +1190 -1213
  374. package/src/templates/components/menu-navigation/_macro.menu-navigation.njk +3 -3
  375. package/src/templates/components/menu-navigation/_styles.menu-navigation.css +235 -235
  376. package/src/templates/components/menu-navigation/_template.menu-navigation.njk +87 -89
  377. package/src/templates/components/menu-navigation/params.menu-navigation.yaml +86 -86
  378. package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +739 -739
  379. package/src/templates/components/menu-vertical/_macro.menu-vertical.njk +3 -3
  380. package/src/templates/components/menu-vertical/_template.menu-vertical.njk +92 -92
  381. package/src/templates/components/menu-vertical/params.menu-vertical.yaml +77 -77
  382. package/src/templates/components/menubar/_examples.menubar.njk +1777 -1777
  383. package/src/templates/components/menubar/_macro.menubar.njk +3 -3
  384. package/src/templates/components/menubar/_styles.menubar.css +272 -262
  385. package/src/templates/components/menubar/_template.menubar.njk +106 -105
  386. package/src/templates/components/menubar/params.menubar.yaml +139 -139
  387. package/src/templates/components/modal/_examples.modal.njk +354 -354
  388. package/src/templates/components/modal/_macro.modal.njk +3 -3
  389. package/src/templates/components/modal/_template.modal.njk +129 -129
  390. package/src/templates/components/modal/params.modal.yaml +77 -77
  391. package/src/templates/components/nav/_examples.nav.njk +402 -402
  392. package/src/templates/components/nav/_macro.nav.njk +3 -3
  393. package/src/templates/components/nav/_template.nav.njk +53 -53
  394. package/src/templates/components/nav/params.nav.yaml +61 -61
  395. package/src/templates/components/notification/_examples.notification.njk +193 -193
  396. package/src/templates/components/notification/_macro.notification.njk +3 -3
  397. package/src/templates/components/notification/_styles.notification.css +28 -28
  398. package/src/templates/components/notification/_template.notification.njk +86 -86
  399. package/src/templates/components/notification/params.notification.yaml +101 -101
  400. package/src/templates/components/pagination/_examples.pagination.njk +402 -402
  401. package/src/templates/components/pagination/_macro.pagination.njk +3 -3
  402. package/src/templates/components/pagination/_template.pagination.njk +162 -162
  403. package/src/templates/components/pagination/params.pagination.yaml +150 -150
  404. package/src/templates/components/pill/_examples.pill.njk +101 -101
  405. package/src/templates/components/pill/_macro.pill.njk +3 -3
  406. package/src/templates/components/pill/_styles.pill.css +63 -63
  407. package/src/templates/components/pill/_template.pill.njk +38 -38
  408. package/src/templates/components/pill/params.pill.yaml +28 -28
  409. package/src/templates/components/radios/_examples.radios.njk +637 -637
  410. package/src/templates/components/radios/_macro.radios.njk +5 -5
  411. package/src/templates/components/radios/_styles.radios.css +31 -31
  412. package/src/templates/components/radios/_template.radios.njk +133 -134
  413. package/src/templates/components/radios/params.radios.yaml +104 -104
  414. package/src/templates/components/searchbar/_examples.searchbar.njk +98 -98
  415. package/src/templates/components/searchbar/_macro.searchbar.njk +3 -3
  416. package/src/templates/components/searchbar/_template.searchbar.njk +45 -46
  417. package/src/templates/components/searchbar/params.searchbar.yaml +46 -46
  418. package/src/templates/components/select/_examples.select.njk +336 -336
  419. package/src/templates/components/select/_macro.select.njk +5 -5
  420. package/src/templates/components/select/_styles.select.css +47 -47
  421. package/src/templates/components/select/_template.select.njk +67 -70
  422. package/src/templates/components/select/params.select.yaml +93 -93
  423. package/src/templates/components/skip-link/_examples.skip-link.njk +19 -19
  424. package/src/templates/components/skip-link/_macro.skip-link.njk +3 -3
  425. package/src/templates/components/skip-link/_styles.skip-link.css +13 -13
  426. package/src/templates/components/skip-link/_template.skip-link.njk +4 -4
  427. package/src/templates/components/skip-link/params.skip-link.yaml +20 -20
  428. package/src/templates/components/spinner/_examples.spinner.njk +52 -52
  429. package/src/templates/components/spinner/_macro.spinner.njk +3 -3
  430. package/src/templates/components/spinner/_styles.spinner.css +32 -32
  431. package/src/templates/components/spinner/_template.spinner.njk +12 -8
  432. package/src/templates/components/spinner/params.spinner.yaml +12 -12
  433. package/src/templates/components/status/_examples.status.njk +49 -49
  434. package/src/templates/components/status/_macro.status.njk +3 -3
  435. package/src/templates/components/status/_template.status.njk +23 -23
  436. package/src/templates/components/status/params.status.yaml +24 -24
  437. package/src/templates/components/status-item/_examples.status-item.njk +245 -245
  438. package/src/templates/components/status-item/_macro.status-item.njk +3 -3
  439. package/src/templates/components/status-item/_template.status-item.njk +99 -99
  440. package/src/templates/components/status-item/params.status-item.yaml +106 -106
  441. package/src/templates/components/table/_examples.table.njk +668 -668
  442. package/src/templates/components/table/_macro.table.njk +3 -3
  443. package/src/templates/components/table/_styles.table.css +20 -20
  444. package/src/templates/components/table/_template.table.njk +68 -68
  445. package/src/templates/components/table/params.table.yaml +130 -130
  446. package/src/templates/components/table-advanced/_examples.table-advanced.njk +785 -785
  447. package/src/templates/components/table-advanced/_macro.table-advanced.njk +3 -3
  448. package/src/templates/components/table-advanced/_styles.table-advanced.css +65 -65
  449. package/src/templates/components/table-advanced/_template.table-advanced.njk +210 -210
  450. package/src/templates/components/table-advanced/params.table-advanced.yaml +160 -160
  451. package/src/templates/components/tabs/_examples.tabs.njk +516 -516
  452. package/src/templates/components/tabs/_macro.tabs.njk +3 -3
  453. package/src/templates/components/tabs/_styles.tabs.css +78 -78
  454. package/src/templates/components/tabs/_template.tabs.njk +70 -70
  455. package/src/templates/components/tabs/params.tabs.yaml +83 -83
  456. package/src/templates/components/textarea/_examples.textarea.njk +131 -131
  457. package/src/templates/components/textarea/_macro.textarea.njk +5 -5
  458. package/src/templates/components/textarea/_template.textarea.njk +47 -48
  459. package/src/templates/components/textarea/params.textarea.yaml +64 -64
  460. package/src/templates/components/toggle/_examples.toggle.njk +188 -188
  461. package/src/templates/components/toggle/_macro.toggle.njk +3 -3
  462. package/src/templates/components/toggle/_styles.toggle.css +31 -31
  463. package/src/templates/components/toggle/_template.toggle.njk +27 -27
  464. package/src/templates/components/toggle/params.toggle.yaml +69 -69
  465. package/src/templates/components/tooltip/_examples.tooltip.njk +86 -86
  466. package/src/templates/components/tooltip/_macro.tooltip.njk +3 -3
  467. package/src/templates/components/tooltip/_styles.tooltip.css +12 -12
  468. package/src/templates/components/tooltip/_template.tooltip.njk +39 -39
  469. package/src/templates/components/tooltip/params.tooltip.yaml +40 -40
  470. package/src/templates/components/tree/_examples.tree.njk +2679 -2679
  471. package/src/templates/components/tree/_macro.tree.njk +3 -3
  472. package/src/templates/components/tree/_styles.tree.css +53 -53
  473. package/src/templates/components/tree/_template.tree.njk +222 -222
  474. package/src/templates/components/tree/params.tree.yaml +169 -169
  475. package/src/templates/includes/_abrir-notificaciones-extra.njk +2 -2
  476. package/src/templates/includes/_abrir-notificaciones.njk +2 -2
  477. package/src/templates/includes/_acciones-de-cabecera.njk +28 -28
  478. package/src/templates/includes/_ejemplo-titulo-h2-parrafo.njk +4 -4
  479. package/src/templates/includes/_ejemplo-titulo-parrafo.njk +4 -4
  480. package/src/templates/includes/_test-include.njk +13 -13
  481. package/src/templates/pages/_page.foot-headroom.njk +33 -33
  482. package/src/templates/pages/_page.foot.njk +8 -8
  483. package/src/templates/pages/_page.footer.njk +19 -19
  484. package/src/templates/pages/_page.head.njk +12 -12
  485. package/src/templates/pages/_page.notification-edit-inner-content.njk +31 -31
  486. package/src/templates/pages/_page.notification-edit.njk +30 -30
  487. package/src/templates/pages/_page.notification-footer.njk +32 -32
  488. package/src/templates/pages/_page.notification-header-fixed.njk +30 -30
  489. package/src/templates/pages/_page.notification-header.njk +31 -31
  490. package/src/templates/pages/_page.sidebar-content.njk +20 -20
  491. package/src/templates/pages/_page.spinner-block.njk +14 -14
  492. package/src/templates/pages/_page.spinner-show.njk +15 -15
  493. package/src/templates/pages/_page.spinner.njk +15 -15
  494. package/src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk +36 -36
  495. package/src/templates/pages/_template.edit-fixed.njk +74 -74
  496. package/src/templates/pages/_template.home.njk +111 -111
  497. package/src/templates/pages/_template.logged-out.njk +56 -56
  498. package/src/templates/pages/_template.logged-selector-fixed-headroom.njk +198 -198
  499. package/src/templates/pages/_template.logged-selector-fixed.njk +195 -195
  500. package/src/templates/pages/_template.logged-selector-subheader.njk +80 -80
  501. package/src/templates/pages/_template.logged-selector-with-sidebar.njk +28 -28
  502. package/src/templates/pages/_template.logged-selector.njk +195 -195
  503. package/src/templates/pages/_template.logged.njk +141 -141
  504. package/src/templates/pages/_template.mfe-iframe-content.njk +31 -31
  505. package/src/templates/pages/_template.mfe.njk +83 -83
  506. package/src/templates/pages/_template.test.njk +48 -48
  507. package/src/templates/pages/_template.with-header-advanced.njk +311 -311
  508. package/src/js/aria/HeaderNavigation.js +0 -55
package/docs/ds/_ds.example.dropdowns-default.njk CHANGED
@@ -1,186 +1,186 @@
1
- {% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
2
-
3
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
4
- <div>
5
- Normal
6
- </div>
7
- <div>
8
- {% call componentDropdown({
9
- "text": "Por defecto"
10
- }) %}
11
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
12
- {% endcall %}
13
- </div>
14
- <div>
15
- {% call componentDropdown({
16
- "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M100 0H40a15 15 0 00-15 15v120a5 5 0 008.54 3.53l34.69-34.69a2.5 2.5 0 013.54 0l34.69 34.69A5 5 0 00115 135V15a15 15 0 00-15-15z" fill="currentColor"/></svg>'
17
- }) %}
18
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
19
- {% endcall %}
20
- </div>
21
- <div>
22
- {% call componentDropdown({
23
- "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M135.57 22.29l-17.9-17.88a15.17 15.17 0 00-21.39 0L14.05 86.73a4.93 4.93 0 00-1.28 2.18L.19 133.64A5 5 0 005 140a4.84 4.84 0 001.35-.19l44.8-12.56a5.16 5.16 0 002.19-1.28l82.23-82.31a15.1 15.1 0 000-21.37z" fill="currentColor"/></svg>Con icono'
24
- }) %}
25
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
26
- {% endcall %}
27
- </div>
28
- <div>
29
- {% call componentDropdown({
30
- "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
31
- "classes": "align-bottom"
32
- }) %}
33
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
34
- {% endcall %}
35
- </div>
36
- </div>
37
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
38
- <div>
39
- :active
40
- </div>
41
- <div>
42
- {% call componentDropdown({
43
- "text": "Active",
44
- "classes": "ds-active"
45
- }) %}
46
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
47
- {% endcall %}
48
- </div>
49
- <div>
50
- {% call componentDropdown({
51
- "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M100 0H40a15 15 0 00-15 15v120a5 5 0 008.54 3.53l34.69-34.69a2.5 2.5 0 013.54 0l34.69 34.69A5 5 0 00115 135V15a15 15 0 00-15-15z" fill="currentColor"/></svg>',
52
- "classes": "ds-active"
53
- }) %}
54
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
55
- {% endcall %}
56
- </div>
57
- <div>
58
- {% call componentDropdown({
59
- "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M135.57 22.29l-17.9-17.88a15.17 15.17 0 00-21.39 0L14.05 86.73a4.93 4.93 0 00-1.28 2.18L.19 133.64A5 5 0 005 140a4.84 4.84 0 001.35-.19l44.8-12.56a5.16 5.16 0 002.19-1.28l82.23-82.31a15.1 15.1 0 000-21.37z" fill="currentColor"/></svg>Con icono',
60
- "classes": "ds-active"
61
- }) %}
62
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
63
- {% endcall %}
64
- </div>
65
- <div>
66
- {% call componentDropdown({
67
- "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
68
- "classes": "ds-active align-bottom"
69
- }) %}
70
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
71
- {% endcall %}
72
- </div>
73
- </div>
74
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
75
- <div>
76
- :hover
77
- </div>
78
- <div>
79
- {% call componentDropdown({
80
- "text": "Hover",
81
- "classes": "ds-hover"
82
- }) %}
83
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
84
- {% endcall %}
85
- </div>
86
-
87
- <div>
88
- {% call componentDropdown({
89
- "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M100 0H40a15 15 0 00-15 15v120a5 5 0 008.54 3.53l34.69-34.69a2.5 2.5 0 013.54 0l34.69 34.69A5 5 0 00115 135V15a15 15 0 00-15-15z" fill="currentColor"/></svg>',
90
- "classes": "ds-hover"
91
- }) %}
92
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
93
- {% endcall %}
94
- </div>
95
- <div>
96
- {% call componentDropdown({
97
- "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M135.57 22.29l-17.9-17.88a15.17 15.17 0 00-21.39 0L14.05 86.73a4.93 4.93 0 00-1.28 2.18L.19 133.64A5 5 0 005 140a4.84 4.84 0 001.35-.19l44.8-12.56a5.16 5.16 0 002.19-1.28l82.23-82.31a15.1 15.1 0 000-21.37z" fill="currentColor"/></svg>Con icono',
98
- "classes": "ds-hover"
99
- }) %}
100
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
101
- {% endcall %}
102
- </div>
103
- <div>
104
- {% call componentDropdown({
105
- "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
106
- "classes": "ds-hover align-bottom"
107
- }) %}
108
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
109
- {% endcall %}
110
- </div>
111
- </div>
112
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
113
- <div>
114
- :focus
115
- </div>
116
- <div>
117
- {% call componentDropdown({
118
- "text": "Focus",
119
- "classes": "ds-focus"
120
- }) %}
121
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
122
- {% endcall %}
123
- </div>
124
- <div>
125
- {% call componentDropdown({
126
- "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M100 0H40a15 15 0 00-15 15v120a5 5 0 008.54 3.53l34.69-34.69a2.5 2.5 0 013.54 0l34.69 34.69A5 5 0 00115 135V15a15 15 0 00-15-15z" fill="currentColor"/></svg>',
127
- "classes": "ds-focus"
128
- }) %}
129
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
130
- {% endcall %}
131
- </div>
132
- <div>
133
- {% call componentDropdown({
134
- "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M135.57 22.29l-17.9-17.88a15.17 15.17 0 00-21.39 0L14.05 86.73a4.93 4.93 0 00-1.28 2.18L.19 133.64A5 5 0 005 140a4.84 4.84 0 001.35-.19l44.8-12.56a5.16 5.16 0 002.19-1.28l82.23-82.31a15.1 15.1 0 000-21.37z" fill="currentColor"/></svg>Con icono',
135
- "classes": "ds-focus"
136
- }) %}
137
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
138
- {% endcall %}
139
- </div>
140
- <div>
141
- {% call componentDropdown({
142
- "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
143
- "classes": "ds-focus align-bottom"
144
- }) %}
145
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
146
- {% endcall %}
147
- </div>
148
- </div>
149
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
150
- <div>
151
- Disabled
152
- </div>
153
- <div>
154
- {% call componentDropdown({
155
- "text": "Deshabilitado",
156
- "disabled": true
157
- }) %}
158
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
159
- {% endcall %}
160
- </div>
161
- <div>
162
- {% call componentDropdown({
163
- "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M100 0H40a15 15 0 00-15 15v120a5 5 0 008.54 3.53l34.69-34.69a2.5 2.5 0 013.54 0l34.69 34.69A5 5 0 00115 135V15a15 15 0 00-15-15z" fill="currentColor"/></svg>',
164
- "disabled": true
165
- }) %}
166
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
167
- {% endcall %}
168
- </div>
169
- <div>
170
- {% call componentDropdown({
171
- "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M135.57 22.29l-17.9-17.88a15.17 15.17 0 00-21.39 0L14.05 86.73a4.93 4.93 0 00-1.28 2.18L.19 133.64A5 5 0 005 140a4.84 4.84 0 001.35-.19l44.8-12.56a5.16 5.16 0 002.19-1.28l82.23-82.31a15.1 15.1 0 000-21.37z" fill="currentColor"/></svg>Con icono',
172
- "disabled": true
173
- }) %}
174
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
175
- {% endcall %}
176
- </div>
177
- <div>
178
- {% call componentDropdown({
179
- "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
180
- "classes": "align-bottom",
181
- "disabled": true
182
- }) %}
183
- <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
184
- {% endcall %}
185
- </div>
186
- </div>
1
+ {% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
2
+
3
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
4
+ <div>
5
+ Normal
6
+ </div>
7
+ <div>
8
+ {% call componentDropdown({
9
+ "text": "Por defecto"
10
+ }) %}
11
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
12
+ {% endcall %}
13
+ </div>
14
+ <div>
15
+ {% call componentDropdown({
16
+ "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M100 0H40a15 15 0 00-15 15v120a5 5 0 008.54 3.53l34.69-34.69a2.5 2.5 0 013.54 0l34.69 34.69A5 5 0 00115 135V15a15 15 0 00-15-15z" fill="currentColor"/></svg>'
17
+ }) %}
18
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
19
+ {% endcall %}
20
+ </div>
21
+ <div>
22
+ {% call componentDropdown({
23
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M135.57 22.29l-17.9-17.88a15.17 15.17 0 00-21.39 0L14.05 86.73a4.93 4.93 0 00-1.28 2.18L.19 133.64A5 5 0 005 140a4.84 4.84 0 001.35-.19l44.8-12.56a5.16 5.16 0 002.19-1.28l82.23-82.31a15.1 15.1 0 000-21.37z" fill="currentColor"/></svg>Con icono'
24
+ }) %}
25
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
26
+ {% endcall %}
27
+ </div>
28
+ <div>
29
+ {% call componentDropdown({
30
+ "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
31
+ "classes": "align-bottom"
32
+ }) %}
33
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
34
+ {% endcall %}
35
+ </div>
36
+ </div>
37
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
38
+ <div>
39
+ :active
40
+ </div>
41
+ <div>
42
+ {% call componentDropdown({
43
+ "text": "Active",
44
+ "classes": "ds-active"
45
+ }) %}
46
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
47
+ {% endcall %}
48
+ </div>
49
+ <div>
50
+ {% call componentDropdown({
51
+ "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M100 0H40a15 15 0 00-15 15v120a5 5 0 008.54 3.53l34.69-34.69a2.5 2.5 0 013.54 0l34.69 34.69A5 5 0 00115 135V15a15 15 0 00-15-15z" fill="currentColor"/></svg>',
52
+ "classes": "ds-active"
53
+ }) %}
54
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
55
+ {% endcall %}
56
+ </div>
57
+ <div>
58
+ {% call componentDropdown({
59
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M135.57 22.29l-17.9-17.88a15.17 15.17 0 00-21.39 0L14.05 86.73a4.93 4.93 0 00-1.28 2.18L.19 133.64A5 5 0 005 140a4.84 4.84 0 001.35-.19l44.8-12.56a5.16 5.16 0 002.19-1.28l82.23-82.31a15.1 15.1 0 000-21.37z" fill="currentColor"/></svg>Con icono',
60
+ "classes": "ds-active"
61
+ }) %}
62
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
63
+ {% endcall %}
64
+ </div>
65
+ <div>
66
+ {% call componentDropdown({
67
+ "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
68
+ "classes": "ds-active align-bottom"
69
+ }) %}
70
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
71
+ {% endcall %}
72
+ </div>
73
+ </div>
74
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
75
+ <div>
76
+ :hover
77
+ </div>
78
+ <div>
79
+ {% call componentDropdown({
80
+ "text": "Hover",
81
+ "classes": "ds-hover"
82
+ }) %}
83
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
84
+ {% endcall %}
85
+ </div>
86
+
87
+ <div>
88
+ {% call componentDropdown({
89
+ "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M100 0H40a15 15 0 00-15 15v120a5 5 0 008.54 3.53l34.69-34.69a2.5 2.5 0 013.54 0l34.69 34.69A5 5 0 00115 135V15a15 15 0 00-15-15z" fill="currentColor"/></svg>',
90
+ "classes": "ds-hover"
91
+ }) %}
92
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
93
+ {% endcall %}
94
+ </div>
95
+ <div>
96
+ {% call componentDropdown({
97
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M135.57 22.29l-17.9-17.88a15.17 15.17 0 00-21.39 0L14.05 86.73a4.93 4.93 0 00-1.28 2.18L.19 133.64A5 5 0 005 140a4.84 4.84 0 001.35-.19l44.8-12.56a5.16 5.16 0 002.19-1.28l82.23-82.31a15.1 15.1 0 000-21.37z" fill="currentColor"/></svg>Con icono',
98
+ "classes": "ds-hover"
99
+ }) %}
100
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
101
+ {% endcall %}
102
+ </div>
103
+ <div>
104
+ {% call componentDropdown({
105
+ "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
106
+ "classes": "ds-hover align-bottom"
107
+ }) %}
108
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
109
+ {% endcall %}
110
+ </div>
111
+ </div>
112
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
113
+ <div>
114
+ :focus
115
+ </div>
116
+ <div>
117
+ {% call componentDropdown({
118
+ "text": "Focus",
119
+ "classes": "ds-focus"
120
+ }) %}
121
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
122
+ {% endcall %}
123
+ </div>
124
+ <div>
125
+ {% call componentDropdown({
126
+ "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M100 0H40a15 15 0 00-15 15v120a5 5 0 008.54 3.53l34.69-34.69a2.5 2.5 0 013.54 0l34.69 34.69A5 5 0 00115 135V15a15 15 0 00-15-15z" fill="currentColor"/></svg>',
127
+ "classes": "ds-focus"
128
+ }) %}
129
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
130
+ {% endcall %}
131
+ </div>
132
+ <div>
133
+ {% call componentDropdown({
134
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M135.57 22.29l-17.9-17.88a15.17 15.17 0 00-21.39 0L14.05 86.73a4.93 4.93 0 00-1.28 2.18L.19 133.64A5 5 0 005 140a4.84 4.84 0 001.35-.19l44.8-12.56a5.16 5.16 0 002.19-1.28l82.23-82.31a15.1 15.1 0 000-21.37z" fill="currentColor"/></svg>Con icono',
135
+ "classes": "ds-focus"
136
+ }) %}
137
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
138
+ {% endcall %}
139
+ </div>
140
+ <div>
141
+ {% call componentDropdown({
142
+ "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
143
+ "classes": "ds-focus align-bottom"
144
+ }) %}
145
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
146
+ {% endcall %}
147
+ </div>
148
+ </div>
149
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
150
+ <div>
151
+ Disabled
152
+ </div>
153
+ <div>
154
+ {% call componentDropdown({
155
+ "text": "Deshabilitado",
156
+ "disabled": true
157
+ }) %}
158
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
159
+ {% endcall %}
160
+ </div>
161
+ <div>
162
+ {% call componentDropdown({
163
+ "html": 'Con icono<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center ml-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M100 0H40a15 15 0 00-15 15v120a5 5 0 008.54 3.53l34.69-34.69a2.5 2.5 0 013.54 0l34.69 34.69A5 5 0 00115 135V15a15 15 0 00-15-15z" fill="currentColor"/></svg>',
164
+ "disabled": true
165
+ }) %}
166
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
167
+ {% endcall %}
168
+ </div>
169
+ <div>
170
+ {% call componentDropdown({
171
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="self-center mr-2" aria-hidden="true" focusable="false" width="1em" height="1em"><path d="M135.57 22.29l-17.9-17.88a15.17 15.17 0 00-21.39 0L14.05 86.73a4.93 4.93 0 00-1.28 2.18L.19 133.64A5 5 0 005 140a4.84 4.84 0 001.35-.19l44.8-12.56a5.16 5.16 0 002.19-1.28l82.23-82.31a15.1 15.1 0 000-21.37z" fill="currentColor"/></svg>Con icono',
172
+ "disabled": true
173
+ }) %}
174
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
175
+ {% endcall %}
176
+ </div>
177
+ <div>
178
+ {% call componentDropdown({
179
+ "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 140 140\" class=\"self-center\" aria-hidden=\"true\" focusable=\"false\" width=\"1em\" height=\"1em\" role=\"img\" aria-label=\"Borrar\"><path d=\"M113.72 61.66A5 5 0 00110 60H30a5 5 0 00-5 5.53l7.5 70a5 5 0 005 4.47h65a5 5 0 005-4.47l7.5-70a5 5 0 00-1.28-3.87zM125 27.92h-25a2.5 2.5 0 01-2.5-2.5V17.5A17.52 17.52 0 0080 0H60a17.58 17.58 0 00-17.5 17.23l-.12 8.22a2.51 2.51 0 01-2.5 2.47H15a10 10 0 000 20h110a10 10 0 000-20zM57.5 17.46A2.51 2.51 0 0160 15h20a2.5 2.5 0 012.5 2.5v7.92a2.5 2.5 0 01-2.5 2.5H59.88a2.51 2.51 0 01-2.5-2.54z\" fill=\"currentColor\"/></svg>",
180
+ "classes": "align-bottom",
181
+ "disabled": true
182
+ }) %}
183
+ <div class=" w-48 p-2 "><div class=" border-4 border-dashed border-gray-200 rounded-lg h-40 "></div></div>
184
+ {% endcall %}
185
+ </div>
186
+ </div>
package/docs/ds/_ds.example.dropdowns-en-uso.njk CHANGED
@@ -1,105 +1,105 @@
1
- {% from "components/button/_macro.button.njk" import componentButton %}
2
- {% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
3
- {% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
4
- {% from "components/nav/_macro.nav.njk" import componentNav %}
5
- {% from "components/radios/_macro.radios.njk" import componentRadios %}
6
- {% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
7
-
8
- <div class="grid lg:grid-cols-3 gap-xl mb-lg">
9
- <div>
10
- Con navs
11
- </div>
12
- <div>
13
- {% call componentDropdown({
14
- "text": "Dropdown con nav"
15
- }) %}
16
- {{ componentNav({
17
- "items": [
18
- {
19
- "href": "#",
20
- "text": "Opción 1"
21
- },
22
- {
23
- "href": "#",
24
- "text": "Opción 2"
25
- },
26
- {
27
- "href": "#",
28
- "text": "Opción 3 con separador",
29
- "divider": true
30
- },
31
- {
32
- "href": "#",
33
- "text": "Opción 4"
34
- },
35
- {
36
- "href": "#",
37
- "text": "Opción 5 con texto muy largo para ver cómo salta de línea"
38
- }
39
- ],
40
- "classes": "w-max max-w-64",
41
- "attributes": {
42
- "aria-label": "Nav"
43
- }
44
- }) }}
45
- {% endcall %}
46
- </div>
47
- <div>
48
- {% call componentDropdown({
49
- "text": "Dropdown con scroll y nav",
50
- "classesTooltip": "max-h-64 overflow-y-auto",
51
- "classes": "w-full justify-between"
52
- }) %}
53
- {{ componentNav({
54
- "items": [
55
- {
56
- "href": "#",
57
- "text": "Opción 1"
58
- },
59
- {
60
- "href": "#",
61
- "text": "Opción 2"
62
- },
63
- {
64
- "href": "#",
65
- "text": "Opción 3 con separador",
66
- "divider": true
67
- },
68
- {
69
- "href": "#",
70
- "text": "Opción 4"
71
- },
72
- {
73
- "href": "#",
74
- "text": "Opción 5"
75
- },
76
- {
77
- "href": "#",
78
- "text": "Opción 6"
79
- },
80
- {
81
- "href": "#",
82
- "text": "Opción 7"
83
- },
84
- {
85
- "href": "#",
86
- "text": "Opción 8 con separador",
87
- "divider": true
88
- },
89
- {
90
- "href": "#",
91
- "text": "Opción 9"
92
- },
93
- {
94
- "href": "#",
95
- "text": "Opción 10 con texto muy largo para ver cómo salta de línea"
96
- }
97
- ],
98
- "classes": "w-max max-w-64",
99
- "attributes": {
100
- "aria-label": "Nav"
101
- }
102
- }) }}
103
- {% endcall %}
104
- </div>
105
- </div>
1
+ {% from "components/button/_macro.button.njk" import componentButton %}
2
+ {% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
3
+ {% from "components/dropdown/_macro.dropdown.njk" import componentDropdown %}
4
+ {% from "components/nav/_macro.nav.njk" import componentNav %}
5
+ {% from "components/radios/_macro.radios.njk" import componentRadios %}
6
+ {% from "components/searchbar/_macro.searchbar.njk" import componentSearchbar %}
7
+
8
+ <div class="grid lg:grid-cols-3 gap-xl mb-lg">
9
+ <div>
10
+ Con navs
11
+ </div>
12
+ <div>
13
+ {% call componentDropdown({
14
+ "text": "Dropdown con nav"
15
+ }) %}
16
+ {{ componentNav({
17
+ "items": [
18
+ {
19
+ "href": "#",
20
+ "text": "Opción 1"
21
+ },
22
+ {
23
+ "href": "#",
24
+ "text": "Opción 2"
25
+ },
26
+ {
27
+ "href": "#",
28
+ "text": "Opción 3 con separador",
29
+ "divider": true
30
+ },
31
+ {
32
+ "href": "#",
33
+ "text": "Opción 4"
34
+ },
35
+ {
36
+ "href": "#",
37
+ "text": "Opción 5 con texto muy largo para ver cómo salta de línea"
38
+ }
39
+ ],
40
+ "classes": "w-max max-w-64",
41
+ "attributes": {
42
+ "aria-label": "Nav"
43
+ }
44
+ }) }}
45
+ {% endcall %}
46
+ </div>
47
+ <div>
48
+ {% call componentDropdown({
49
+ "text": "Dropdown con scroll y nav",
50
+ "classesTooltip": "max-h-64 overflow-y-auto",
51
+ "classes": "w-full justify-between"
52
+ }) %}
53
+ {{ componentNav({
54
+ "items": [
55
+ {
56
+ "href": "#",
57
+ "text": "Opción 1"
58
+ },
59
+ {
60
+ "href": "#",
61
+ "text": "Opción 2"
62
+ },
63
+ {
64
+ "href": "#",
65
+ "text": "Opción 3 con separador",
66
+ "divider": true
67
+ },
68
+ {
69
+ "href": "#",
70
+ "text": "Opción 4"
71
+ },
72
+ {
73
+ "href": "#",
74
+ "text": "Opción 5"
75
+ },
76
+ {
77
+ "href": "#",
78
+ "text": "Opción 6"
79
+ },
80
+ {
81
+ "href": "#",
82
+ "text": "Opción 7"
83
+ },
84
+ {
85
+ "href": "#",
86
+ "text": "Opción 8 con separador",
87
+ "divider": true
88
+ },
89
+ {
90
+ "href": "#",
91
+ "text": "Opción 9"
92
+ },
93
+ {
94
+ "href": "#",
95
+ "text": "Opción 10 con texto muy largo para ver cómo salta de línea"
96
+ }
97
+ ],
98
+ "classes": "w-max max-w-64",
99
+ "attributes": {
100
+ "aria-label": "Nav"
101
+ }
102
+ }) }}
103
+ {% endcall %}
104
+ </div>
105
+ </div>