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