desy-html 16.0.4 → 17.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (528) hide show
  1. package/.node-version +1 -1
  2. package/.nvmrc +1 -1
  3. package/AGENTS.md +207 -207
  4. package/README.md +203 -203
  5. package/TESTING_PLAN.md +379 -379
  6. package/branding/BRANDING.md +398 -398
  7. package/branding/branding.config.js +76 -76
  8. package/branding/branding.config.yourorganization.js +72 -72
  9. package/branding/logos/aragon-compact.svg +1 -1
  10. package/branding/logos/aragon-expanded.svg +1 -1
  11. package/branding/logos/aragon-mini.svg +1 -1
  12. package/branding/logos/favicon.svg +1 -1
  13. package/branding/logos/yourlogo-compact.svg +13 -13
  14. package/branding/logos/yourlogo-expanded.svg +17 -17
  15. package/branding/logos/yourlogo-mini.svg +17 -17
  16. package/branding/logos/yourorganization-favicon.svg +13 -13
  17. package/branding/vite-branding-plugin.js +221 -221
  18. package/docs/_global.content-placeholder.njk +7 -7
  19. package/docs/_global.foot.njk +11 -11
  20. package/docs/_global.head.njk +42 -42
  21. package/docs/_include.template-header.njk +391 -386
  22. package/docs/_macro.component-example.njk +6 -6
  23. package/docs/_macro.example-render.njk +350 -346
  24. package/docs/_macro.load-component-params.njk +2 -2
  25. package/docs/_macro.load-component-template.njk +3 -3
  26. package/docs/_macro.render-caller.njk +3 -3
  27. package/docs/_macro.show-code-from-file.njk +57 -57
  28. package/docs/_macro.show-html-from-file.njk +42 -42
  29. package/docs/_template.default.njk +8 -8
  30. package/docs/_template.examples.njk +13 -13
  31. package/docs/catalogo.html +27 -27
  32. package/docs/componentes.html +187 -184
  33. package/docs/ds/_ds.example.accordion.njk +109 -109
  34. package/docs/ds/_ds.example.border.njk +39 -39
  35. package/docs/ds/_ds.example.botones-alert-sm.njk +264 -264
  36. package/docs/ds/_ds.example.botones-alert.njk +264 -264
  37. package/docs/ds/_ds.example.botones-default-sm.njk +264 -264
  38. package/docs/ds/_ds.example.botones-default.njk +258 -258
  39. package/docs/ds/_ds.example.botones-primary-lg.njk +264 -264
  40. package/docs/ds/_ds.example.botones-primary-sm.njk +264 -264
  41. package/docs/ds/_ds.example.botones-primary.njk +264 -264
  42. package/docs/ds/_ds.example.botones-transparent-sm.njk +264 -264
  43. package/docs/ds/_ds.example.botones-transparent.njk +264 -264
  44. package/docs/ds/_ds.example.breadcrumbs.njk +65 -65
  45. package/docs/ds/_ds.example.card.njk +198 -198
  46. package/docs/ds/_ds.example.checkboxes.njk +377 -377
  47. package/docs/ds/_ds.example.collapsible.njk +18 -18
  48. package/docs/ds/_ds.example.color-de-interaccion.njk +16 -16
  49. package/docs/ds/_ds.example.colores-cabecera.njk +15 -15
  50. package/docs/ds/_ds.example.colores-de-soporte.njk +82 -82
  51. package/docs/ds/_ds.example.colores-neutros.njk +26 -26
  52. package/docs/ds/_ds.example.combobox.njk +91 -0
  53. package/docs/ds/_ds.example.date-input.njk +363 -363
  54. package/docs/ds/_ds.example.description-list.njk +289 -289
  55. package/docs/ds/_ds.example.details.njk +23 -23
  56. package/docs/ds/_ds.example.dropdowns-default.njk +186 -186
  57. package/docs/ds/_ds.example.dropdowns-en-uso.njk +105 -105
  58. package/docs/ds/_ds.example.dropdowns-variaciones.njk +224 -224
  59. package/docs/ds/_ds.example.error-summary.njk +34 -34
  60. package/docs/ds/_ds.example.file-upload.njk +54 -54
  61. package/docs/ds/_ds.example.footer.njk +28 -28
  62. package/docs/ds/_ds.example.header-advanced.njk +70 -70
  63. package/docs/ds/_ds.example.header.njk +211 -211
  64. package/docs/ds/_ds.example.input-group.njk +242 -242
  65. package/docs/ds/_ds.example.input.njk +164 -164
  66. package/docs/ds/_ds.example.item.njk +176 -176
  67. package/docs/ds/_ds.example.layout-escritorio.njk +38 -38
  68. package/docs/ds/_ds.example.layout-movil.njk +14 -14
  69. package/docs/ds/_ds.example.layout-sidebar.njk +11 -11
  70. package/docs/ds/_ds.example.links-list.njk +170 -170
  71. package/docs/ds/_ds.example.listbox-default.njk +677 -677
  72. package/docs/ds/_ds.example.listbox-variaciones.njk +824 -824
  73. package/docs/ds/_ds.example.menu-horizontal.njk +66 -66
  74. package/docs/ds/_ds.example.menu-navigation.njk +493 -493
  75. package/docs/ds/_ds.example.menu-vertical.njk +129 -129
  76. package/docs/ds/_ds.example.menubar-en-uso.njk +244 -244
  77. package/docs/ds/_ds.example.menubar-variaciones.njk +785 -785
  78. package/docs/ds/_ds.example.modal.njk +210 -210
  79. package/docs/ds/_ds.example.nav.njk +158 -158
  80. package/docs/ds/_ds.example.notification.njk +122 -122
  81. package/docs/ds/_ds.example.pagination.njk +190 -190
  82. package/docs/ds/_ds.example.pills.njk +215 -215
  83. package/docs/ds/_ds.example.radios.njk +419 -419
  84. package/docs/ds/_ds.example.searchbar.njk +87 -87
  85. package/docs/ds/_ds.example.select.njk +390 -390
  86. package/docs/ds/_ds.example.status-item.njk +239 -239
  87. package/docs/ds/_ds.example.status.njk +47 -47
  88. package/docs/ds/_ds.example.table.njk +740 -740
  89. package/docs/ds/_ds.example.tabs.njk +136 -136
  90. package/docs/ds/_ds.example.textarea.njk +237 -237
  91. package/docs/ds/_ds.example.textos.njk +32 -32
  92. package/docs/ds/_ds.example.toggle.njk +75 -75
  93. package/docs/ds/_ds.example.tree.njk +456 -456
  94. package/docs/ds/_ds.example.treegrid.njk +810 -810
  95. package/docs/ds/_ds.example.typography.njk +225 -225
  96. package/docs/ds/_ds.macro.code-snippet.njk +32 -32
  97. package/docs/ds/_ds.macro.section-title.njk +2 -2
  98. package/docs/ds/_ds.macro.subsection-title.njk +2 -2
  99. package/docs/ds/_ds.section.avisos.njk +22 -22
  100. package/docs/ds/_ds.section.botones.njk +53 -53
  101. package/docs/ds/_ds.section.campo-y-area-de-texto.njk +19 -19
  102. package/docs/ds/_ds.section.color.njk +147 -147
  103. package/docs/ds/_ds.section.datos.njk +42 -42
  104. package/docs/ds/_ds.section.dropdowns.njk +23 -23
  105. package/docs/ds/_ds.section.espaciado.njk +296 -296
  106. package/docs/ds/_ds.section.forms.njk +73 -68
  107. package/docs/ds/_ds.section.informacion.njk +12 -12
  108. package/docs/ds/_ds.section.layout.njk +63 -63
  109. package/docs/ds/_ds.section.menubar.njk +18 -18
  110. package/docs/ds/_ds.section.mostrar-ocultar.njk +33 -33
  111. package/docs/ds/_ds.section.navigation.njk +57 -57
  112. package/docs/ds/_ds.section.textos.njk +287 -287
  113. package/docs/ds/_ds.section.typography.njk +28 -28
  114. package/docs/estilos.html +37 -37
  115. package/docs/examples-accordion-history.html +8 -8
  116. package/docs/examples-accordion.html +8 -8
  117. package/docs/examples-alert.html +8 -8
  118. package/docs/examples-breadcrumbs.html +8 -8
  119. package/docs/examples-button-loader.html +8 -8
  120. package/docs/examples-button.html +8 -8
  121. package/docs/examples-card.html +8 -8
  122. package/docs/examples-character-count.html +8 -8
  123. package/docs/examples-checkboxes.html +8 -8
  124. package/docs/examples-collapsible.html +8 -8
  125. package/docs/examples-combobox.html +8 -0
  126. package/docs/examples-date-input.html +8 -8
  127. package/docs/examples-datepicker.html +8 -8
  128. package/docs/examples-description-list.html +8 -8
  129. package/docs/examples-details.html +8 -8
  130. package/docs/examples-dialog.html +8 -8
  131. package/docs/examples-dropdown.html +8 -8
  132. package/docs/examples-error-message.html +8 -8
  133. package/docs/examples-error-summary.html +8 -8
  134. package/docs/examples-fieldset.html +8 -8
  135. package/docs/examples-file-upload.html +8 -8
  136. package/docs/examples-footer.html +8 -8
  137. package/docs/examples-header-advanced.html +8 -8
  138. package/docs/examples-header-mini.html +8 -8
  139. package/docs/examples-header.html +8 -8
  140. package/docs/examples-hint.html +8 -8
  141. package/docs/examples-input-group.html +8 -8
  142. package/docs/examples-input.html +8 -8
  143. package/docs/examples-item.html +8 -8
  144. package/docs/examples-label.html +8 -8
  145. package/docs/examples-links-list.html +8 -8
  146. package/docs/examples-listbox.html +8 -8
  147. package/docs/examples-media-object.html +8 -8
  148. package/docs/examples-menu-horizontal.html +8 -8
  149. package/docs/examples-menu-navigation.html +8 -8
  150. package/docs/examples-menu-vertical.html +8 -8
  151. package/docs/examples-menubar.html +8 -8
  152. package/docs/examples-modal.html +8 -8
  153. package/docs/examples-nav.html +8 -8
  154. package/docs/examples-notification.html +8 -8
  155. package/docs/examples-pagination.html +8 -8
  156. package/docs/examples-pill.html +8 -8
  157. package/docs/examples-radios.html +8 -8
  158. package/docs/examples-searchbar.html +8 -8
  159. package/docs/examples-select.html +8 -8
  160. package/docs/examples-skip-link.html +8 -8
  161. package/docs/examples-spinner.html +8 -8
  162. package/docs/examples-status-item.html +8 -8
  163. package/docs/examples-status.html +8 -8
  164. package/docs/examples-table-advanced.html +8 -8
  165. package/docs/examples-table.html +8 -8
  166. package/docs/examples-tabs.html +8 -8
  167. package/docs/examples-textarea.html +8 -8
  168. package/docs/examples-toggle.html +8 -8
  169. package/docs/examples-tooltip.html +8 -8
  170. package/docs/examples-tree.html +8 -8
  171. package/docs/examples-treegrid.html +8 -8
  172. package/docs/index.html +914 -908
  173. package/docs/pagina-accesibilidad.html +110 -110
  174. package/docs/pagina-mapa-web.html +137 -137
  175. package/docs/pagina-prueba.html +95 -95
  176. package/docs/plantilla-con-header-advanced.html +14 -14
  177. package/docs/plantilla-editar-con-cabecera-fija-y-sidebar-sticky.html +154 -154
  178. package/docs/plantilla-editar-con-cabecera-fija.html +17 -17
  179. package/docs/plantilla-logueado-con-cabecera-fija-headroom.html +15 -15
  180. package/docs/plantilla-logueado-con-cabecera-fija.html +15 -15
  181. package/docs/plantilla-logueado-con-selector-de-app-y-sidebar.html +164 -164
  182. package/docs/plantilla-logueado-con-selector-de-app-y-subheader.html +16 -16
  183. package/docs/plantilla-logueado-con-selector-de-app.html +14 -14
  184. package/docs/plantilla-logueado-con-titulo-de-app.html +14 -14
  185. package/docs/plantilla-sin-loguear.html +14 -14
  186. package/docs/plantillas.html +89 -89
  187. package/docs/spinner-plantilla-con-header-advanced.html +2 -2
  188. package/docs/spinner-plantilla-editar-con-cabecera-fija.html +4 -4
  189. package/docs/spinner-plantilla-logueado-con-cabecera-fija.html +2 -2
  190. package/docs/spinner-plantilla-logueado-con-selector-de-app-y-subheader.html +2 -2
  191. package/docs/spinner-plantilla-logueado-con-titulo-de-app.html +2 -2
  192. package/docs/spinner-plantilla-sin-loguear.html +18 -18
  193. package/docs/sprints/01-combobox-template.md +433 -0
  194. package/docs/sprints/02-combobox-styles.md +291 -0
  195. package/docs/sprints/03-combobox-javascript.md +589 -0
  196. package/docs/sprints/04-combobox-integration.md +386 -0
  197. package/docs/sprints/05-combobox-refinamiento-w3c.md +55 -0
  198. package/package.json +61 -61
  199. package/public/images/demo-icon.svg +9 -9
  200. package/replit.md +74 -74
  201. package/src/EUPL-1.2.txt +287 -287
  202. package/src/css/base.css +44 -44
  203. package/src/css/component.form-group.css +24 -24
  204. package/src/css/component.headroom.css +32 -32
  205. package/src/css/component.text.css +169 -169
  206. package/src/css/styles.css +247 -246
  207. package/src/js/aria/MenuHorizontal.js +65 -65
  208. package/src/js/aria/MenuNavigation.js +34 -2
  209. package/src/js/aria/MenuVertical.js +60 -60
  210. package/src/js/aria/Nav.js +60 -60
  211. package/src/js/aria/PopupMenuAction.js +30 -12
  212. package/src/js/aria/accordion.js +264 -264
  213. package/src/js/aria/checkBoxes.js +52 -52
  214. package/src/js/aria/collapsible.js +44 -44
  215. package/src/js/aria/combobox.js +584 -0
  216. package/src/js/aria/dataGrid.js +950 -950
  217. package/src/js/aria/linksList.js +42 -42
  218. package/src/js/aria/notification.js +56 -56
  219. package/src/js/aria/radioButton.js +50 -50
  220. package/src/js/aria/toggle.js +61 -61
  221. package/src/js/aria/treegrid.js +507 -507
  222. package/src/js/aria/utils.js +219 -219
  223. package/src/js/desy-html.js +860 -813
  224. package/src/js/headroom.min.js +6 -6
  225. package/src/js/index.js +74 -72
  226. package/src/main.js +2 -2
  227. package/src/templates/components/accordion/_examples.accordion.njk +482 -482
  228. package/src/templates/components/accordion/_macro.accordion.njk +3 -3
  229. package/src/templates/components/accordion/_template.accordion.njk +131 -131
  230. package/src/templates/components/accordion/params.accordion.yaml +125 -125
  231. package/src/templates/components/accordion-history/_examples.accordion-history.njk +521 -521
  232. package/src/templates/components/accordion-history/_macro.accordion-history.njk +3 -3
  233. package/src/templates/components/accordion-history/_template.accordion-history.njk +193 -193
  234. package/src/templates/components/accordion-history/params.accordion-history.yaml +129 -129
  235. package/src/templates/components/alert/_examples.alert.njk +91 -91
  236. package/src/templates/components/alert/_macro.alert.njk +3 -3
  237. package/src/templates/components/alert/_styles.alert.css +9 -9
  238. package/src/templates/components/alert/_template.alert.njk +16 -16
  239. package/src/templates/components/alert/params.alert.yaml +25 -25
  240. package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +464 -464
  241. package/src/templates/components/breadcrumbs/_macro.breadcrumbs.njk +3 -3
  242. package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css +81 -81
  243. package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +77 -77
  244. package/src/templates/components/breadcrumbs/params.breadcrumbs.yaml +44 -44
  245. package/src/templates/components/button/_examples.button.njk +518 -511
  246. package/src/templates/components/button/_macro.button.njk +3 -3
  247. package/src/templates/components/button/_styles.button.css +180 -180
  248. package/src/templates/components/button/_template.button.njk +49 -49
  249. package/src/templates/components/button/params.button.yaml +48 -48
  250. package/src/templates/components/button-loader/_examples.button-loader.njk +499 -492
  251. package/src/templates/components/button-loader/_macro.button-loader.njk +3 -3
  252. package/src/templates/components/button-loader/_styles.button-loader.css +194 -194
  253. package/src/templates/components/button-loader/_template.button-loader.njk +84 -84
  254. package/src/templates/components/button-loader/params.button-loader.yaml +74 -74
  255. package/src/templates/components/card/_examples.card.njk +381 -381
  256. package/src/templates/components/card/_macro.card.njk +3 -3
  257. package/src/templates/components/card/_template.card.njk +34 -34
  258. package/src/templates/components/card/params.card.yaml +112 -112
  259. package/src/templates/components/character-count/_examples.character-count.njk +195 -195
  260. package/src/templates/components/character-count/_macro.character-count.njk +5 -5
  261. package/src/templates/components/character-count/_template.character-count.njk +38 -38
  262. package/src/templates/components/character-count/params.character-count.yaml +77 -77
  263. package/src/templates/components/checkboxes/_examples.checkboxes.njk +835 -835
  264. package/src/templates/components/checkboxes/_macro.checkboxes.njk +3 -3
  265. package/src/templates/components/checkboxes/_styles.checkboxes.css +30 -30
  266. package/src/templates/components/checkboxes/_template.checkboxes.njk +137 -137
  267. package/src/templates/components/checkboxes/params.checkboxes.yaml +116 -116
  268. package/src/templates/components/collapsible/_examples.collapsible.njk +107 -107
  269. package/src/templates/components/collapsible/_macro.collapsible.njk +3 -3
  270. package/src/templates/components/collapsible/_styles.collapsible.css +35 -35
  271. package/src/templates/components/collapsible/_template.collapsible.njk +17 -17
  272. package/src/templates/components/collapsible/params.collapsible.yaml +48 -48
  273. package/src/templates/components/combobox/_examples.combobox.njk +440 -0
  274. package/src/templates/components/combobox/_macro.combobox.njk +3 -0
  275. package/src/templates/components/combobox/_styles.combobox.css +92 -0
  276. package/src/templates/components/combobox/_template.combobox.njk +97 -0
  277. package/src/templates/components/combobox/params.combobox.yaml +102 -0
  278. package/src/templates/components/date-input/_examples.date-input.njk +578 -578
  279. package/src/templates/components/date-input/_macro.date-input.njk +3 -3
  280. package/src/templates/components/date-input/_template.date-input.njk +125 -125
  281. package/src/templates/components/date-input/params.date-input.yaml +97 -97
  282. package/src/templates/components/datepicker/_examples.datepicker.njk +415 -415
  283. package/src/templates/components/datepicker/_macro.datepicker.njk +3 -3
  284. package/src/templates/components/datepicker/_styles.datepicker.css +87 -87
  285. package/src/templates/components/datepicker/_template.datepicker.njk +129 -129
  286. package/src/templates/components/datepicker/params.datepicker.yaml +104 -104
  287. package/src/templates/components/description-list/_examples.description-list.njk +502 -502
  288. package/src/templates/components/description-list/_macro.description-list.njk +3 -3
  289. package/src/templates/components/description-list/_template.description-list.njk +17 -17
  290. package/src/templates/components/description-list/params.description-list.yaml +61 -61
  291. package/src/templates/components/details/_examples.details.njk +68 -68
  292. package/src/templates/components/details/_macro.details.njk +3 -3
  293. package/src/templates/components/details/_template.details.njk +17 -17
  294. package/src/templates/components/details/params.details.yaml +40 -40
  295. package/src/templates/components/dialog/_examples.dialog.njk +156 -156
  296. package/src/templates/components/dialog/_macro.dialog.njk +3 -3
  297. package/src/templates/components/dialog/_styles.dialog.css +27 -27
  298. package/src/templates/components/dialog/_template.dialog.njk +12 -12
  299. package/src/templates/components/dialog/params.dialog.yaml +25 -25
  300. package/src/templates/components/dropdown/_examples.dropdown.njk +226 -226
  301. package/src/templates/components/dropdown/_macro.dropdown.njk +3 -3
  302. package/src/templates/components/dropdown/_styles.dropdown.css +191 -191
  303. package/src/templates/components/dropdown/_template.dropdown.njk +34 -34
  304. package/src/templates/components/dropdown/params.dropdown.yaml +32 -32
  305. package/src/templates/components/error-message/_examples.error-message.njk +28 -28
  306. package/src/templates/components/error-message/_macro.error-message.njk +5 -5
  307. package/src/templates/components/error-message/_template.error-message.njk +8 -8
  308. package/src/templates/components/error-message/params.error-message.yaml +23 -23
  309. package/src/templates/components/error-summary/_examples.error-summary.njk +111 -111
  310. package/src/templates/components/error-summary/_macro.error-summary.njk +5 -5
  311. package/src/templates/components/error-summary/_template.error-summary.njk +48 -48
  312. package/src/templates/components/error-summary/params.error-summary.yaml +50 -50
  313. package/src/templates/components/fieldset/_examples.fieldset.njk +79 -79
  314. package/src/templates/components/fieldset/_macro.fieldset.njk +2 -2
  315. package/src/templates/components/fieldset/_template.fieldset.njk +46 -46
  316. package/src/templates/components/fieldset/params.fieldset.yaml +49 -49
  317. package/src/templates/components/file-upload/_examples.file-upload.njk +103 -103
  318. package/src/templates/components/file-upload/_macro.file-upload.njk +2 -2
  319. package/src/templates/components/file-upload/_template.file-upload.njk +45 -45
  320. package/src/templates/components/file-upload/params.file-upload.yaml +48 -48
  321. package/src/templates/components/footer/_examples.footer.njk +558 -558
  322. package/src/templates/components/footer/_macro.footer.njk +3 -3
  323. package/src/templates/components/footer/_styles.footer.css +43 -43
  324. package/src/templates/components/footer/_template.footer.njk +130 -130
  325. package/src/templates/components/footer/params.footer.yaml +140 -140
  326. package/src/templates/components/header/_examples.header.njk +627 -627
  327. package/src/templates/components/header/_macro.header.header__dropdown.njk +3 -3
  328. package/src/templates/components/header/_macro.header.header__navigation.njk +3 -3
  329. package/src/templates/components/header/_macro.header.header__offcanvas.njk +3 -3
  330. package/src/templates/components/header/_macro.header.header__offcanvasButton.njk +3 -3
  331. package/src/templates/components/header/_macro.header.header__subnav.njk +3 -3
  332. package/src/templates/components/header/_macro.header.njk +3 -3
  333. package/src/templates/components/header/_styles.header.css +12 -12
  334. package/src/templates/components/header/_template.header.header__dropdown.njk +27 -27
  335. package/src/templates/components/header/_template.header.header__navigation.njk +25 -25
  336. package/src/templates/components/header/_template.header.header__offcanvas.njk +20 -20
  337. package/src/templates/components/header/_template.header.header__offcanvasButton.njk +10 -10
  338. package/src/templates/components/header/_template.header.header__subnav.njk +33 -33
  339. package/src/templates/components/header/_template.header.njk +155 -155
  340. package/src/templates/components/header/params.header.yaml +295 -295
  341. package/src/templates/components/header-advanced/_examples.header-advanced.njk +1110 -1110
  342. package/src/templates/components/header-advanced/_macro.header-advanced.njk +3 -3
  343. package/src/templates/components/header-advanced/_template.header-advanced.njk +171 -171
  344. package/src/templates/components/header-advanced/params.header-advanced.yaml +352 -352
  345. package/src/templates/components/header-mini/_examples.header-mini.njk +319 -316
  346. package/src/templates/components/header-mini/_macro.header-mini.njk +3 -3
  347. package/src/templates/components/header-mini/_template.header-mini.njk +51 -51
  348. package/src/templates/components/header-mini/params.header-mini.yaml +90 -90
  349. package/src/templates/components/hint/_examples.hint.njk +26 -26
  350. package/src/templates/components/hint/_macro.hint.njk +3 -3
  351. package/src/templates/components/hint/_template.hint.njk +3 -3
  352. package/src/templates/components/hint/params.hint.yaml +21 -21
  353. package/src/templates/components/input/_examples.input.njk +393 -393
  354. package/src/templates/components/input/_macro.input.njk +3 -3
  355. package/src/templates/components/input/_styles.input.css +17 -17
  356. package/src/templates/components/input/_template.input.njk +53 -53
  357. package/src/templates/components/input/params.input.yaml +80 -80
  358. package/src/templates/components/input-group/_examples.input-group.njk +558 -558
  359. package/src/templates/components/input-group/_macro.input-group.njk +3 -3
  360. package/src/templates/components/input-group/_template.input-group.njk +107 -107
  361. package/src/templates/components/input-group/params.input-group.yaml +123 -123
  362. package/src/templates/components/item/_examples.item.njk +370 -370
  363. package/src/templates/components/item/_macro.item.njk +3 -3
  364. package/src/templates/components/item/_template.item.njk +73 -73
  365. package/src/templates/components/item/params.item.yaml +101 -101
  366. package/src/templates/components/label/_examples.label.njk +58 -58
  367. package/src/templates/components/label/_macro.label.njk +5 -5
  368. package/src/templates/components/label/_template.label.njk +37 -37
  369. package/src/templates/components/label/params.label.yaml +28 -28
  370. package/src/templates/components/links-list/_examples.links-list.njk +761 -761
  371. package/src/templates/components/links-list/_macro.links-list.njk +3 -3
  372. package/src/templates/components/links-list/_template.links-list.njk +119 -119
  373. package/src/templates/components/links-list/params.links-list.yaml +101 -101
  374. package/src/templates/components/listbox/_examples.listbox.njk +813 -812
  375. package/src/templates/components/listbox/_macro.listbox.njk +3 -3
  376. package/src/templates/components/listbox/_styles.listbox.css +218 -218
  377. package/src/templates/components/listbox/_template.listbox.njk +90 -90
  378. package/src/templates/components/listbox/params.listbox.yaml +85 -85
  379. package/src/templates/components/media-object/_examples.media-object.njk +79 -79
  380. package/src/templates/components/media-object/_macro.media-object.njk +3 -3
  381. package/src/templates/components/media-object/_template.media-object.njk +21 -21
  382. package/src/templates/components/media-object/params.media-object.yaml +16 -16
  383. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +613 -613
  384. package/src/templates/components/menu-horizontal/_macro.menu-horizontal.njk +3 -3
  385. package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css +167 -167
  386. package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +36 -36
  387. package/src/templates/components/menu-horizontal/params.menu-horizontal.yaml +53 -53
  388. package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +1292 -1292
  389. package/src/templates/components/menu-navigation/_macro.menu-navigation.njk +3 -3
  390. package/src/templates/components/menu-navigation/_styles.menu-navigation.css +238 -238
  391. package/src/templates/components/menu-navigation/_template.menu-navigation.njk +87 -87
  392. package/src/templates/components/menu-navigation/params.menu-navigation.yaml +86 -86
  393. package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +835 -835
  394. package/src/templates/components/menu-vertical/_macro.menu-vertical.njk +3 -3
  395. package/src/templates/components/menu-vertical/_template.menu-vertical.njk +92 -92
  396. package/src/templates/components/menu-vertical/params.menu-vertical.yaml +77 -77
  397. package/src/templates/components/menubar/_examples.menubar.njk +1843 -1843
  398. package/src/templates/components/menubar/_macro.menubar.njk +3 -3
  399. package/src/templates/components/menubar/_styles.menubar.css +259 -259
  400. package/src/templates/components/menubar/_template.menubar.njk +106 -106
  401. package/src/templates/components/menubar/params.menubar.yaml +130 -130
  402. package/src/templates/components/modal/_examples.modal.njk +432 -432
  403. package/src/templates/components/modal/_macro.modal.njk +3 -3
  404. package/src/templates/components/modal/_template.modal.njk +129 -129
  405. package/src/templates/components/modal/params.modal.yaml +77 -77
  406. package/src/templates/components/nav/_examples.nav.njk +468 -468
  407. package/src/templates/components/nav/_macro.nav.njk +3 -3
  408. package/src/templates/components/nav/_template.nav.njk +53 -53
  409. package/src/templates/components/nav/params.nav.yaml +61 -61
  410. package/src/templates/components/notification/_examples.notification.njk +277 -277
  411. package/src/templates/components/notification/_macro.notification.njk +3 -3
  412. package/src/templates/components/notification/_styles.notification.css +30 -30
  413. package/src/templates/components/notification/_template.notification.njk +86 -86
  414. package/src/templates/components/notification/params.notification.yaml +101 -101
  415. package/src/templates/components/pagination/_examples.pagination.njk +444 -444
  416. package/src/templates/components/pagination/_macro.pagination.njk +3 -3
  417. package/src/templates/components/pagination/_template.pagination.njk +162 -162
  418. package/src/templates/components/pagination/params.pagination.yaml +150 -150
  419. package/src/templates/components/pill/_examples.pill.njk +180 -180
  420. package/src/templates/components/pill/_macro.pill.njk +3 -3
  421. package/src/templates/components/pill/_styles.pill.css +59 -59
  422. package/src/templates/components/pill/_template.pill.njk +38 -38
  423. package/src/templates/components/pill/params.pill.yaml +28 -28
  424. package/src/templates/components/radios/_examples.radios.njk +698 -698
  425. package/src/templates/components/radios/_macro.radios.njk +5 -5
  426. package/src/templates/components/radios/_styles.radios.css +30 -30
  427. package/src/templates/components/radios/_template.radios.njk +133 -133
  428. package/src/templates/components/radios/params.radios.yaml +104 -104
  429. package/src/templates/components/searchbar/_examples.searchbar.njk +147 -147
  430. package/src/templates/components/searchbar/_macro.searchbar.njk +3 -3
  431. package/src/templates/components/searchbar/_template.searchbar.njk +45 -45
  432. package/src/templates/components/searchbar/params.searchbar.yaml +46 -46
  433. package/src/templates/components/select/_examples.select.njk +364 -364
  434. package/src/templates/components/select/_macro.select.njk +5 -5
  435. package/src/templates/components/select/_styles.select.css +45 -45
  436. package/src/templates/components/select/_template.select.njk +67 -67
  437. package/src/templates/components/select/params.select.yaml +93 -93
  438. package/src/templates/components/skip-link/_examples.skip-link.njk +31 -31
  439. package/src/templates/components/skip-link/_macro.skip-link.njk +3 -3
  440. package/src/templates/components/skip-link/_styles.skip-link.css +12 -12
  441. package/src/templates/components/skip-link/_template.skip-link.njk +4 -4
  442. package/src/templates/components/skip-link/params.skip-link.yaml +20 -20
  443. package/src/templates/components/spinner/_examples.spinner.njk +91 -101
  444. package/src/templates/components/spinner/_macro.spinner.njk +3 -3
  445. package/src/templates/components/spinner/_styles.spinner.css +33 -33
  446. package/src/templates/components/spinner/_template.spinner.njk +12 -12
  447. package/src/templates/components/spinner/params.spinner.yaml +12 -12
  448. package/src/templates/components/status/_examples.status.njk +80 -80
  449. package/src/templates/components/status/_macro.status.njk +3 -3
  450. package/src/templates/components/status/_template.status.njk +23 -23
  451. package/src/templates/components/status/params.status.yaml +24 -24
  452. package/src/templates/components/status-item/_examples.status-item.njk +319 -319
  453. package/src/templates/components/status-item/_macro.status-item.njk +3 -3
  454. package/src/templates/components/status-item/_template.status-item.njk +99 -99
  455. package/src/templates/components/status-item/params.status-item.yaml +106 -106
  456. package/src/templates/components/table/_examples.table.njk +705 -705
  457. package/src/templates/components/table/_macro.table.njk +3 -3
  458. package/src/templates/components/table/_styles.table.css +19 -19
  459. package/src/templates/components/table/_template.table.njk +68 -68
  460. package/src/templates/components/table/params.table.yaml +130 -130
  461. package/src/templates/components/table-advanced/_examples.table-advanced.njk +839 -839
  462. package/src/templates/components/table-advanced/_macro.table-advanced.njk +3 -3
  463. package/src/templates/components/table-advanced/_styles.table-advanced.css +63 -63
  464. package/src/templates/components/table-advanced/_template.table-advanced.njk +210 -210
  465. package/src/templates/components/table-advanced/params.table-advanced.yaml +160 -160
  466. package/src/templates/components/tabs/_examples.tabs.njk +588 -588
  467. package/src/templates/components/tabs/_macro.tabs.njk +3 -3
  468. package/src/templates/components/tabs/_styles.tabs.css +132 -132
  469. package/src/templates/components/tabs/_template.tabs.njk +70 -70
  470. package/src/templates/components/tabs/params.tabs.yaml +83 -83
  471. package/src/templates/components/textarea/_examples.textarea.njk +174 -174
  472. package/src/templates/components/textarea/_macro.textarea.njk +5 -5
  473. package/src/templates/components/textarea/_template.textarea.njk +47 -47
  474. package/src/templates/components/textarea/params.textarea.yaml +64 -64
  475. package/src/templates/components/toggle/_examples.toggle.njk +248 -248
  476. package/src/templates/components/toggle/_macro.toggle.njk +3 -3
  477. package/src/templates/components/toggle/_styles.toggle.css +31 -31
  478. package/src/templates/components/toggle/_template.toggle.njk +27 -27
  479. package/src/templates/components/toggle/params.toggle.yaml +69 -69
  480. package/src/templates/components/tooltip/_examples.tooltip.njk +134 -134
  481. package/src/templates/components/tooltip/_macro.tooltip.njk +3 -3
  482. package/src/templates/components/tooltip/_styles.tooltip.css +9 -9
  483. package/src/templates/components/tooltip/_template.tooltip.njk +40 -40
  484. package/src/templates/components/tooltip/params.tooltip.yaml +40 -40
  485. package/src/templates/components/tree/_examples.tree.njk +2671 -2671
  486. package/src/templates/components/tree/_macro.tree.njk +3 -3
  487. package/src/templates/components/tree/_styles.tree.css +54 -54
  488. package/src/templates/components/tree/_template.tree.njk +232 -232
  489. package/src/templates/components/tree/params.tree.yaml +173 -173
  490. package/src/templates/components/treegrid/_examples.treegrid.njk +1269 -1269
  491. package/src/templates/components/treegrid/_macro.treegrid.njk +3 -3
  492. package/src/templates/components/treegrid/_styles.treegrid.css +31 -31
  493. package/src/templates/components/treegrid/_template.treegrid.njk +90 -90
  494. package/src/templates/components/treegrid/params.treegrid.yaml +131 -131
  495. package/src/templates/includes/_abrir-notificaciones-extra.njk +2 -2
  496. package/src/templates/includes/_abrir-notificaciones.njk +2 -2
  497. package/src/templates/includes/_acciones-de-cabecera.njk +28 -28
  498. package/src/templates/includes/_ejemplo-titulo-h2-parrafo.njk +4 -4
  499. package/src/templates/includes/_ejemplo-titulo-parrafo.njk +4 -4
  500. package/src/templates/includes/_test-include.njk +13 -13
  501. package/src/templates/pages/_page.foot-headroom.njk +30 -30
  502. package/src/templates/pages/_page.foot.njk +5 -5
  503. package/src/templates/pages/_page.footer.njk +19 -19
  504. package/src/templates/pages/_page.head.njk +27 -27
  505. package/src/templates/pages/_page.notification-edit-inner-content.njk +31 -31
  506. package/src/templates/pages/_page.notification-edit.njk +30 -30
  507. package/src/templates/pages/_page.notification-footer.njk +32 -32
  508. package/src/templates/pages/_page.notification-header-fixed.njk +30 -30
  509. package/src/templates/pages/_page.notification-header.njk +31 -31
  510. package/src/templates/pages/_page.sidebar-content.njk +20 -20
  511. package/src/templates/pages/_page.spinner-block.njk +14 -14
  512. package/src/templates/pages/_page.spinner-show.njk +15 -15
  513. package/src/templates/pages/_page.spinner.njk +15 -15
  514. package/src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk +36 -36
  515. package/src/templates/pages/_template.edit-fixed.njk +74 -74
  516. package/src/templates/pages/_template.home.njk +111 -111
  517. package/src/templates/pages/_template.logged-out.njk +56 -56
  518. package/src/templates/pages/_template.logged-selector-fixed-headroom.njk +198 -198
  519. package/src/templates/pages/_template.logged-selector-fixed.njk +195 -195
  520. package/src/templates/pages/_template.logged-selector-subheader.njk +80 -80
  521. package/src/templates/pages/_template.logged-selector-with-sidebar.njk +28 -28
  522. package/src/templates/pages/_template.logged-selector.njk +195 -195
  523. package/src/templates/pages/_template.logged.njk +141 -141
  524. package/src/templates/pages/_template.mfe-iframe-content.njk +31 -31
  525. package/src/templates/pages/_template.mfe.njk +83 -83
  526. package/src/templates/pages/_template.test.njk +48 -48
  527. package/src/templates/pages/_template.with-header-advanced.njk +311 -311
  528. package/vite.config.js +982 -982
package/docs/ds/_ds.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>