desy-html 10.2.0 → 10.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (497) hide show
  1. package/README.md +36 -36
  2. package/config/tailwind.config.js +217 -213
  3. package/docs/_global.content-placeholder.njk +7 -7
  4. package/docs/_global.foot.njk +14 -14
  5. package/docs/_global.head.njk +28 -28
  6. package/docs/_include.template-header.njk +387 -387
  7. package/docs/_macro.component-example.njk +6 -6
  8. package/docs/_macro.example-render.njk +330 -330
  9. package/docs/_macro.load-component-params.njk +2 -2
  10. package/docs/_macro.load-component-template.njk +3 -3
  11. package/docs/_macro.render-caller.njk +3 -3
  12. package/docs/_macro.show-code-from-file.njk +57 -57
  13. package/docs/_macro.show-html-from-file.njk +42 -42
  14. package/docs/_template.default.njk +8 -8
  15. package/docs/_template.examples.njk +13 -13
  16. package/docs/catalogo.html +26 -26
  17. package/docs/componentes.html +180 -180
  18. package/docs/ds/_ds.example.accordion.njk +109 -109
  19. package/docs/ds/_ds.example.border.njk +39 -39
  20. package/docs/ds/_ds.example.botones-alert-sm.njk +264 -264
  21. package/docs/ds/_ds.example.botones-alert.njk +264 -264
  22. package/docs/ds/_ds.example.botones-default-sm.njk +264 -264
  23. package/docs/ds/_ds.example.botones-default.njk +258 -258
  24. package/docs/ds/_ds.example.botones-primary-sm.njk +264 -264
  25. package/docs/ds/_ds.example.botones-primary.njk +264 -264
  26. package/docs/ds/_ds.example.botones-transparent-sm.njk +264 -264
  27. package/docs/ds/_ds.example.botones-transparent.njk +264 -264
  28. package/docs/ds/_ds.example.breadcrumbs.njk +65 -65
  29. package/docs/ds/_ds.example.card.njk +198 -198
  30. package/docs/ds/_ds.example.checkboxes.njk +377 -377
  31. package/docs/ds/_ds.example.collapsible.njk +18 -18
  32. package/docs/ds/_ds.example.color-de-interaccion.njk +16 -16
  33. package/docs/ds/_ds.example.colores-cabecera.njk +15 -15
  34. package/docs/ds/_ds.example.colores-de-soporte.njk +82 -82
  35. package/docs/ds/_ds.example.colores-neutros.njk +26 -26
  36. package/docs/ds/_ds.example.date-input.njk +363 -363
  37. package/docs/ds/_ds.example.description-list.njk +289 -289
  38. package/docs/ds/_ds.example.details.njk +23 -23
  39. package/docs/ds/_ds.example.dropdowns-default.njk +186 -186
  40. package/docs/ds/_ds.example.dropdowns-en-uso.njk +105 -105
  41. package/docs/ds/_ds.example.dropdowns-variaciones.njk +187 -187
  42. package/docs/ds/_ds.example.error-summary.njk +34 -34
  43. package/docs/ds/_ds.example.file-upload.njk +54 -54
  44. package/docs/ds/_ds.example.footer.njk +28 -28
  45. package/docs/ds/_ds.example.header-advanced.njk +70 -70
  46. package/docs/ds/_ds.example.header.njk +211 -211
  47. package/docs/ds/_ds.example.input-group.njk +242 -242
  48. package/docs/ds/_ds.example.input.njk +164 -164
  49. package/docs/ds/_ds.example.item.njk +176 -176
  50. package/docs/ds/_ds.example.layout-escritorio.njk +38 -38
  51. package/docs/ds/_ds.example.layout-movil.njk +14 -14
  52. package/docs/ds/_ds.example.layout-sidebar.njk +11 -11
  53. package/docs/ds/_ds.example.links-list.njk +170 -170
  54. package/docs/ds/_ds.example.listbox-default.njk +677 -677
  55. package/docs/ds/_ds.example.listbox-variaciones.njk +687 -687
  56. package/docs/ds/_ds.example.menu-horizontal.njk +66 -66
  57. package/docs/ds/_ds.example.menu-navigation.njk +493 -493
  58. package/docs/ds/_ds.example.menu-vertical.njk +129 -129
  59. package/docs/ds/_ds.example.menubar-en-uso.njk +244 -244
  60. package/docs/ds/_ds.example.menubar-variaciones.njk +785 -785
  61. package/docs/ds/_ds.example.modal.njk +210 -210
  62. package/docs/ds/_ds.example.nav.njk +158 -158
  63. package/docs/ds/_ds.example.notification.njk +122 -122
  64. package/docs/ds/_ds.example.pagination.njk +190 -190
  65. package/docs/ds/_ds.example.pills.njk +215 -215
  66. package/docs/ds/_ds.example.radios.njk +419 -419
  67. package/docs/ds/_ds.example.searchbar.njk +87 -87
  68. package/docs/ds/_ds.example.select.njk +390 -390
  69. package/docs/ds/_ds.example.status-item.njk +239 -239
  70. package/docs/ds/_ds.example.status.njk +47 -47
  71. package/docs/ds/_ds.example.table.njk +740 -740
  72. package/docs/ds/_ds.example.tabs.njk +92 -92
  73. package/docs/ds/_ds.example.textarea.njk +237 -237
  74. package/docs/ds/_ds.example.textos.njk +27 -27
  75. package/docs/ds/_ds.example.toggle.njk +75 -75
  76. package/docs/ds/_ds.example.tree.njk +456 -456
  77. package/docs/ds/_ds.example.typography.njk +225 -225
  78. package/docs/ds/_ds.macro.code-snippet.njk +32 -32
  79. package/docs/ds/_ds.macro.section-title.njk +2 -2
  80. package/docs/ds/_ds.macro.subsection-title.njk +2 -2
  81. package/docs/ds/_ds.section.avisos.njk +22 -22
  82. package/docs/ds/_ds.section.botones.njk +48 -48
  83. package/docs/ds/_ds.section.campo-y-area-de-texto.njk +19 -19
  84. package/docs/ds/_ds.section.color.njk +150 -150
  85. package/docs/ds/_ds.section.datos.njk +37 -37
  86. package/docs/ds/_ds.section.dropdowns.njk +23 -23
  87. package/docs/ds/_ds.section.espaciado.njk +299 -299
  88. package/docs/ds/_ds.section.forms.njk +68 -68
  89. package/docs/ds/_ds.section.informacion.njk +12 -12
  90. package/docs/ds/_ds.section.layout.njk +70 -70
  91. package/docs/ds/_ds.section.menubar.njk +18 -18
  92. package/docs/ds/_ds.section.mostrar-ocultar.njk +33 -33
  93. package/docs/ds/_ds.section.navigation.njk +57 -57
  94. package/docs/ds/_ds.section.textos.njk +259 -259
  95. package/docs/ds/_ds.section.typography.njk +31 -31
  96. package/docs/estilos.html +19 -19
  97. package/docs/examples-accordion-history.html +8 -8
  98. package/docs/examples-accordion.html +8 -8
  99. package/docs/examples-alert.html +8 -8
  100. package/docs/examples-breadcrumbs.html +8 -8
  101. package/docs/examples-button-loader.html +8 -8
  102. package/docs/examples-button.html +8 -8
  103. package/docs/examples-card.html +7 -7
  104. package/docs/examples-character-count.html +8 -8
  105. package/docs/examples-checkboxes.html +7 -7
  106. package/docs/examples-collapsible.html +7 -7
  107. package/docs/examples-date-input.html +8 -8
  108. package/docs/examples-datepicker.html +8 -8
  109. package/docs/examples-description-list.html +8 -8
  110. package/docs/examples-details.html +8 -8
  111. package/docs/examples-dialog.html +7 -7
  112. package/docs/examples-dropdown.html +8 -8
  113. package/docs/examples-error-message.html +8 -8
  114. package/docs/examples-error-summary.html +8 -8
  115. package/docs/examples-fieldset.html +8 -8
  116. package/docs/examples-file-upload.html +8 -8
  117. package/docs/examples-footer.html +8 -8
  118. package/docs/examples-header-advanced.html +8 -8
  119. package/docs/examples-header-mini.html +8 -8
  120. package/docs/examples-header.html +8 -8
  121. package/docs/examples-hint.html +8 -8
  122. package/docs/examples-input-group.html +8 -8
  123. package/docs/examples-input.html +8 -8
  124. package/docs/examples-item.html +8 -8
  125. package/docs/examples-label.html +8 -8
  126. package/docs/examples-links-list.html +7 -7
  127. package/docs/examples-listbox.html +8 -8
  128. package/docs/examples-media-object.html +7 -7
  129. package/docs/examples-menu-horizontal.html +8 -8
  130. package/docs/examples-menu-navigation.html +8 -8
  131. package/docs/examples-menu-vertical.html +7 -7
  132. package/docs/examples-menubar.html +7 -7
  133. package/docs/examples-modal.html +7 -7
  134. package/docs/examples-nav.html +8 -8
  135. package/docs/examples-notification.html +8 -8
  136. package/docs/examples-pagination.html +8 -8
  137. package/docs/examples-pill.html +8 -8
  138. package/docs/examples-radios.html +8 -8
  139. package/docs/examples-searchbar.html +8 -8
  140. package/docs/examples-select.html +9 -9
  141. package/docs/examples-skip-link.html +8 -8
  142. package/docs/examples-spinner.html +8 -8
  143. package/docs/examples-status-item.html +8 -8
  144. package/docs/examples-status.html +8 -8
  145. package/docs/examples-table-advanced.html +8 -8
  146. package/docs/examples-table.html +8 -8
  147. package/docs/examples-tabs.html +8 -8
  148. package/docs/examples-textarea.html +8 -8
  149. package/docs/examples-toggle.html +8 -8
  150. package/docs/examples-tooltip.html +8 -8
  151. package/docs/examples-tree.html +8 -8
  152. package/docs/index.html +667 -658
  153. package/docs/pagina-accesibilidad.html +109 -109
  154. package/docs/pagina-mapa-web.html +136 -136
  155. package/docs/pagina-prueba.html +94 -94
  156. package/docs/plantilla-con-header-advanced.html +13 -13
  157. package/docs/plantilla-editar-con-cabecera-fija-y-sidebar-sticky.html +153 -153
  158. package/docs/plantilla-editar-con-cabecera-fija.html +16 -16
  159. package/docs/plantilla-logueado-con-cabecera-fija-headroom.html +14 -14
  160. package/docs/plantilla-logueado-con-cabecera-fija.html +14 -14
  161. package/docs/plantilla-logueado-con-selector-de-app-y-sidebar.html +163 -163
  162. package/docs/plantilla-logueado-con-selector-de-app-y-subheader.html +15 -15
  163. package/docs/plantilla-logueado-con-selector-de-app.html +13 -13
  164. package/docs/plantilla-logueado-con-titulo-de-app.html +13 -13
  165. package/docs/plantilla-sin-loguear.html +13 -13
  166. package/docs/plantillas.html +88 -88
  167. package/docs/spinner-plantilla-con-header-advanced.html +1 -1
  168. package/docs/spinner-plantilla-editar-con-cabecera-fija.html +5 -5
  169. package/docs/spinner-plantilla-logueado-con-cabecera-fija.html +1 -1
  170. package/docs/spinner-plantilla-logueado-con-selector-de-app-y-subheader.html +4 -4
  171. package/docs/spinner-plantilla-logueado-con-titulo-de-app.html +1 -1
  172. package/docs/spinner-plantilla-sin-loguear.html +17 -17
  173. package/gulpfile.js +127 -127
  174. package/package.json +67 -67
  175. package/src/EUPL-1.2.txt +287 -287
  176. package/src/css/base.css +42 -42
  177. package/src/css/component.form-group.css +23 -23
  178. package/src/css/component.headroom.css +31 -31
  179. package/src/css/component.text.css +157 -157
  180. package/src/css/component.tippy-box.css +11 -11
  181. package/src/css/styles.css +49 -49
  182. package/src/js/aria/HeaderNavigation.js +55 -55
  183. package/src/js/aria/MenuHorizontal.js +63 -63
  184. package/src/js/aria/MenuVertical.js +60 -60
  185. package/src/js/aria/Nav.js +60 -60
  186. package/src/js/aria/accordion.js +264 -264
  187. package/src/js/aria/checkBoxes.js +52 -52
  188. package/src/js/aria/collapsible.js +44 -44
  189. package/src/js/aria/dataGrid.js +950 -950
  190. package/src/js/aria/notification.js +56 -56
  191. package/src/js/aria/radioButton.js +50 -50
  192. package/src/js/aria/toggle.js +61 -61
  193. package/src/js/aria/utils.js +128 -128
  194. package/src/js/cally.js +1114 -1114
  195. package/src/js/desy-html.js +525 -525
  196. package/src/js/filters/filter-caller.js +6 -6
  197. package/src/js/filters/filter-slugify.js +11 -11
  198. package/src/js/filters/highlight.js +14 -14
  199. package/src/js/filters/index.js +13 -13
  200. package/src/js/globals/get-html-code-from-example.js +31 -31
  201. package/src/js/globals/get-html-code-from-file.js +26 -26
  202. package/src/js/globals/get-nunjucks-code-from-example.js +31 -31
  203. package/src/js/globals/get-nunjucks-code-from-file.js +24 -24
  204. package/src/js/globals/index.js +14 -14
  205. package/src/js/headroom.min.js +6 -6
  206. package/src/js/index.js +73 -73
  207. package/src/js/popper.min.js +6 -6
  208. package/src/js/tippy-bundle.umd.min.js +2 -2
  209. package/src/templates/components/accordion/_examples.accordion.njk +386 -386
  210. package/src/templates/components/accordion/_macro.accordion.njk +3 -3
  211. package/src/templates/components/accordion/_template.accordion.njk +131 -131
  212. package/src/templates/components/accordion/params.accordion.yaml +125 -125
  213. package/src/templates/components/accordion-history/_examples.accordion-history.njk +418 -418
  214. package/src/templates/components/accordion-history/_macro.accordion-history.njk +3 -3
  215. package/src/templates/components/accordion-history/_template.accordion-history.njk +193 -193
  216. package/src/templates/components/accordion-history/params.accordion-history.yaml +129 -129
  217. package/src/templates/components/alert/_examples.alert.njk +79 -79
  218. package/src/templates/components/alert/_macro.alert.njk +3 -3
  219. package/src/templates/components/alert/_styles.alert.css +9 -9
  220. package/src/templates/components/alert/_template.alert.njk +16 -16
  221. package/src/templates/components/alert/params.alert.yaml +25 -25
  222. package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +374 -374
  223. package/src/templates/components/breadcrumbs/_macro.breadcrumbs.njk +3 -3
  224. package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css +69 -69
  225. package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +77 -77
  226. package/src/templates/components/breadcrumbs/params.breadcrumbs.yaml +44 -44
  227. package/src/templates/components/button/_examples.button.njk +289 -289
  228. package/src/templates/components/button/_macro.button.njk +3 -3
  229. package/src/templates/components/button/_styles.button.css +182 -182
  230. package/src/templates/components/button/_template.button.njk +49 -49
  231. package/src/templates/components/button/params.button.yaml +48 -48
  232. package/src/templates/components/button-loader/_examples.button-loader.njk +281 -281
  233. package/src/templates/components/button-loader/_macro.button-loader.njk +3 -3
  234. package/src/templates/components/button-loader/_styles.button-loader.css +198 -198
  235. package/src/templates/components/button-loader/_template.button-loader.njk +84 -84
  236. package/src/templates/components/button-loader/params.button-loader.yaml +74 -74
  237. package/src/templates/components/card/_examples.card.njk +300 -300
  238. package/src/templates/components/card/_macro.card.njk +3 -3
  239. package/src/templates/components/card/_template.card.njk +34 -34
  240. package/src/templates/components/card/params.card.yaml +112 -112
  241. package/src/templates/components/character-count/_examples.character-count.njk +147 -147
  242. package/src/templates/components/character-count/_macro.character-count.njk +5 -5
  243. package/src/templates/components/character-count/_template.character-count.njk +38 -38
  244. package/src/templates/components/character-count/params.character-count.yaml +77 -77
  245. package/src/templates/components/checkboxes/_examples.checkboxes.njk +734 -734
  246. package/src/templates/components/checkboxes/_macro.checkboxes.njk +3 -3
  247. package/src/templates/components/checkboxes/_styles.checkboxes.css +31 -31
  248. package/src/templates/components/checkboxes/_template.checkboxes.njk +138 -138
  249. package/src/templates/components/checkboxes/params.checkboxes.yaml +116 -116
  250. package/src/templates/components/collapsible/_examples.collapsible.njk +77 -77
  251. package/src/templates/components/collapsible/_macro.collapsible.njk +3 -3
  252. package/src/templates/components/collapsible/_styles.collapsible.css +33 -33
  253. package/src/templates/components/collapsible/_template.collapsible.njk +17 -17
  254. package/src/templates/components/collapsible/params.collapsible.yaml +48 -48
  255. package/src/templates/components/date-input/_examples.date-input.njk +500 -500
  256. package/src/templates/components/date-input/_macro.date-input.njk +3 -3
  257. package/src/templates/components/date-input/_template.date-input.njk +126 -126
  258. package/src/templates/components/date-input/params.date-input.yaml +97 -97
  259. package/src/templates/components/datepicker/_examples.datepicker.njk +346 -346
  260. package/src/templates/components/datepicker/_macro.datepicker.njk +3 -3
  261. package/src/templates/components/datepicker/_styles.datepicker.css +85 -85
  262. package/src/templates/components/datepicker/_template.datepicker.njk +123 -123
  263. package/src/templates/components/datepicker/params.datepicker.yaml +104 -104
  264. package/src/templates/components/description-list/_examples.description-list.njk +436 -436
  265. package/src/templates/components/description-list/_macro.description-list.njk +3 -3
  266. package/src/templates/components/description-list/_template.description-list.njk +17 -17
  267. package/src/templates/components/description-list/params.description-list.yaml +61 -61
  268. package/src/templates/components/details/_examples.details.njk +44 -44
  269. package/src/templates/components/details/_macro.details.njk +3 -3
  270. package/src/templates/components/details/_template.details.njk +17 -17
  271. package/src/templates/components/details/params.details.yaml +40 -40
  272. package/src/templates/components/dialog/_examples.dialog.njk +138 -138
  273. package/src/templates/components/dialog/_macro.dialog.njk +3 -3
  274. package/src/templates/components/dialog/_styles.dialog.css +19 -19
  275. package/src/templates/components/dialog/_template.dialog.njk +12 -12
  276. package/src/templates/components/dialog/params.dialog.yaml +25 -25
  277. package/src/templates/components/dropdown/_examples.dropdown.njk +114 -114
  278. package/src/templates/components/dropdown/_macro.dropdown.njk +3 -3
  279. package/src/templates/components/dropdown/_styles.dropdown.css +187 -187
  280. package/src/templates/components/dropdown/_template.dropdown.njk +34 -34
  281. package/src/templates/components/dropdown/params.dropdown.yaml +32 -32
  282. package/src/templates/components/error-message/_examples.error-message.njk +14 -14
  283. package/src/templates/components/error-message/_macro.error-message.njk +5 -5
  284. package/src/templates/components/error-message/_template.error-message.njk +8 -8
  285. package/src/templates/components/error-message/params.error-message.yaml +23 -23
  286. package/src/templates/components/error-summary/_examples.error-summary.njk +81 -81
  287. package/src/templates/components/error-summary/_macro.error-summary.njk +5 -5
  288. package/src/templates/components/error-summary/_template.error-summary.njk +48 -48
  289. package/src/templates/components/error-summary/params.error-summary.yaml +52 -52
  290. package/src/templates/components/fieldset/_examples.fieldset.njk +88 -88
  291. package/src/templates/components/fieldset/_macro.fieldset.njk +2 -2
  292. package/src/templates/components/fieldset/_template.fieldset.njk +46 -46
  293. package/src/templates/components/fieldset/params.fieldset.yaml +49 -49
  294. package/src/templates/components/file-upload/_examples.file-upload.njk +84 -84
  295. package/src/templates/components/file-upload/_macro.file-upload.njk +2 -2
  296. package/src/templates/components/file-upload/_template.file-upload.njk +46 -46
  297. package/src/templates/components/file-upload/params.file-upload.yaml +48 -48
  298. package/src/templates/components/footer/_examples.footer.njk +492 -492
  299. package/src/templates/components/footer/_macro.footer.njk +3 -3
  300. package/src/templates/components/footer/_styles.footer.css +43 -43
  301. package/src/templates/components/footer/_template.footer.njk +114 -114
  302. package/src/templates/components/footer/params.footer.yaml +140 -140
  303. package/src/templates/components/header/_examples.header.njk +535 -535
  304. package/src/templates/components/header/_macro.header.header__dropdown.njk +3 -3
  305. package/src/templates/components/header/_macro.header.header__navigation.njk +3 -3
  306. package/src/templates/components/header/_macro.header.header__offcanvas.njk +3 -3
  307. package/src/templates/components/header/_macro.header.header__offcanvasButton.njk +3 -3
  308. package/src/templates/components/header/_macro.header.header__subnav.njk +3 -3
  309. package/src/templates/components/header/_macro.header.njk +3 -3
  310. package/src/templates/components/header/_styles.header.css +12 -12
  311. package/src/templates/components/header/_template.header.header__dropdown.njk +27 -27
  312. package/src/templates/components/header/_template.header.header__navigation.njk +27 -27
  313. package/src/templates/components/header/_template.header.header__offcanvas.njk +20 -20
  314. package/src/templates/components/header/_template.header.header__offcanvasButton.njk +10 -10
  315. package/src/templates/components/header/_template.header.header__subnav.njk +33 -33
  316. package/src/templates/components/header/_template.header.njk +138 -138
  317. package/src/templates/components/header/params.header.yaml +280 -280
  318. package/src/templates/components/header-advanced/_examples.header-advanced.njk +1016 -1016
  319. package/src/templates/components/header-advanced/_macro.header-advanced.njk +3 -3
  320. package/src/templates/components/header-advanced/_template.header-advanced.njk +168 -168
  321. package/src/templates/components/header-advanced/params.header-advanced.yaml +346 -346
  322. package/src/templates/components/header-mini/_examples.header-mini.njk +304 -304
  323. package/src/templates/components/header-mini/_macro.header-mini.njk +3 -3
  324. package/src/templates/components/header-mini/_template.header-mini.njk +39 -39
  325. package/src/templates/components/header-mini/params.header-mini.yaml +80 -80
  326. package/src/templates/components/hint/_examples.hint.njk +14 -14
  327. package/src/templates/components/hint/_macro.hint.njk +3 -3
  328. package/src/templates/components/hint/_template.hint.njk +3 -3
  329. package/src/templates/components/hint/params.hint.yaml +34 -34
  330. package/src/templates/components/input/_examples.input.njk +309 -309
  331. package/src/templates/components/input/_macro.input.njk +3 -3
  332. package/src/templates/components/input/_styles.input.css +18 -18
  333. package/src/templates/components/input/_template.input.njk +54 -54
  334. package/src/templates/components/input/params.input.yaml +80 -80
  335. package/src/templates/components/input-group/_examples.input-group.njk +503 -503
  336. package/src/templates/components/input-group/_macro.input-group.njk +3 -3
  337. package/src/templates/components/input-group/_template.input-group.njk +108 -108
  338. package/src/templates/components/input-group/params.input-group.yaml +123 -123
  339. package/src/templates/components/item/_examples.item.njk +262 -262
  340. package/src/templates/components/item/_macro.item.njk +3 -3
  341. package/src/templates/components/item/_template.item.njk +73 -73
  342. package/src/templates/components/item/params.item.yaml +101 -101
  343. package/src/templates/components/label/_examples.label.njk +34 -34
  344. package/src/templates/components/label/_macro.label.njk +5 -5
  345. package/src/templates/components/label/_template.label.njk +37 -37
  346. package/src/templates/components/label/params.label.yaml +28 -28
  347. package/src/templates/components/links-list/_examples.links-list.njk +594 -594
  348. package/src/templates/components/links-list/_macro.links-list.njk +3 -3
  349. package/src/templates/components/links-list/_template.links-list.njk +118 -118
  350. package/src/templates/components/links-list/params.links-list.yaml +101 -101
  351. package/src/templates/components/listbox/_examples.listbox.njk +656 -656
  352. package/src/templates/components/listbox/_macro.listbox.njk +3 -3
  353. package/src/templates/components/listbox/_styles.listbox.css +218 -218
  354. package/src/templates/components/listbox/_template.listbox.njk +90 -90
  355. package/src/templates/components/listbox/params.listbox.yaml +85 -85
  356. package/src/templates/components/media-object/_examples.media-object.njk +48 -48
  357. package/src/templates/components/media-object/_macro.media-object.njk +3 -3
  358. package/src/templates/components/media-object/_template.media-object.njk +21 -21
  359. package/src/templates/components/media-object/params.media-object.yaml +16 -16
  360. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +514 -514
  361. package/src/templates/components/menu-horizontal/_macro.menu-horizontal.njk +3 -3
  362. package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css +161 -161
  363. package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +36 -36
  364. package/src/templates/components/menu-horizontal/params.menu-horizontal.yaml +53 -53
  365. package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +1106 -1106
  366. package/src/templates/components/menu-navigation/_macro.menu-navigation.njk +3 -3
  367. package/src/templates/components/menu-navigation/_styles.menu-navigation.css +227 -227
  368. package/src/templates/components/menu-navigation/_template.menu-navigation.njk +89 -89
  369. package/src/templates/components/menu-navigation/params.menu-navigation.yaml +86 -86
  370. package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +739 -739
  371. package/src/templates/components/menu-vertical/_macro.menu-vertical.njk +3 -3
  372. package/src/templates/components/menu-vertical/_template.menu-vertical.njk +92 -92
  373. package/src/templates/components/menu-vertical/params.menu-vertical.yaml +77 -77
  374. package/src/templates/components/menubar/_examples.menubar.njk +1623 -1623
  375. package/src/templates/components/menubar/_macro.menubar.njk +3 -3
  376. package/src/templates/components/menubar/_styles.menubar.css +253 -253
  377. package/src/templates/components/menubar/_template.menubar.njk +105 -105
  378. package/src/templates/components/menubar/params.menubar.yaml +139 -139
  379. package/src/templates/components/modal/_examples.modal.njk +354 -354
  380. package/src/templates/components/modal/_macro.modal.njk +3 -3
  381. package/src/templates/components/modal/_template.modal.njk +129 -129
  382. package/src/templates/components/modal/params.modal.yaml +77 -77
  383. package/src/templates/components/nav/_examples.nav.njk +402 -402
  384. package/src/templates/components/nav/_macro.nav.njk +3 -3
  385. package/src/templates/components/nav/_template.nav.njk +53 -53
  386. package/src/templates/components/nav/params.nav.yaml +61 -61
  387. package/src/templates/components/notification/_examples.notification.njk +193 -181
  388. package/src/templates/components/notification/_macro.notification.njk +3 -3
  389. package/src/templates/components/notification/_styles.notification.css +28 -28
  390. package/src/templates/components/notification/_template.notification.njk +86 -78
  391. package/src/templates/components/notification/params.notification.yaml +101 -85
  392. package/src/templates/components/pagination/_examples.pagination.njk +397 -397
  393. package/src/templates/components/pagination/_macro.pagination.njk +3 -3
  394. package/src/templates/components/pagination/_template.pagination.njk +153 -169
  395. package/src/templates/components/pagination/params.pagination.yaml +150 -150
  396. package/src/templates/components/pill/_examples.pill.njk +101 -101
  397. package/src/templates/components/pill/_macro.pill.njk +3 -3
  398. package/src/templates/components/pill/_styles.pill.css +63 -63
  399. package/src/templates/components/pill/_template.pill.njk +38 -38
  400. package/src/templates/components/pill/params.pill.yaml +28 -28
  401. package/src/templates/components/radios/_examples.radios.njk +637 -637
  402. package/src/templates/components/radios/_macro.radios.njk +5 -5
  403. package/src/templates/components/radios/_styles.radios.css +31 -31
  404. package/src/templates/components/radios/_template.radios.njk +134 -134
  405. package/src/templates/components/radios/params.radios.yaml +104 -104
  406. package/src/templates/components/searchbar/_examples.searchbar.njk +98 -98
  407. package/src/templates/components/searchbar/_macro.searchbar.njk +3 -3
  408. package/src/templates/components/searchbar/_template.searchbar.njk +46 -46
  409. package/src/templates/components/searchbar/params.searchbar.yaml +46 -46
  410. package/src/templates/components/select/_examples.select.njk +336 -336
  411. package/src/templates/components/select/_macro.select.njk +5 -5
  412. package/src/templates/components/select/_styles.select.css +47 -47
  413. package/src/templates/components/select/_template.select.njk +70 -70
  414. package/src/templates/components/select/params.select.yaml +93 -93
  415. package/src/templates/components/skip-link/_examples.skip-link.njk +19 -19
  416. package/src/templates/components/skip-link/_macro.skip-link.njk +3 -3
  417. package/src/templates/components/skip-link/_styles.skip-link.css +13 -13
  418. package/src/templates/components/skip-link/_template.skip-link.njk +4 -4
  419. package/src/templates/components/skip-link/params.skip-link.yaml +20 -20
  420. package/src/templates/components/spinner/_examples.spinner.njk +52 -52
  421. package/src/templates/components/spinner/_macro.spinner.njk +3 -3
  422. package/src/templates/components/spinner/_styles.spinner.css +32 -32
  423. package/src/templates/components/spinner/_template.spinner.njk +8 -8
  424. package/src/templates/components/spinner/params.spinner.yaml +12 -12
  425. package/src/templates/components/status/_examples.status.njk +49 -49
  426. package/src/templates/components/status/_macro.status.njk +3 -3
  427. package/src/templates/components/status/_template.status.njk +23 -23
  428. package/src/templates/components/status/params.status.yaml +24 -24
  429. package/src/templates/components/status-item/_examples.status-item.njk +245 -245
  430. package/src/templates/components/status-item/_macro.status-item.njk +3 -3
  431. package/src/templates/components/status-item/_template.status-item.njk +99 -99
  432. package/src/templates/components/status-item/params.status-item.yaml +106 -106
  433. package/src/templates/components/table/_examples.table.njk +887 -887
  434. package/src/templates/components/table/_macro.table.njk +3 -3
  435. package/src/templates/components/table/_template.table.njk +68 -68
  436. package/src/templates/components/table/params.table.yaml +126 -126
  437. package/src/templates/components/table-advanced/_examples.table-advanced.njk +875 -875
  438. package/src/templates/components/table-advanced/_macro.table-advanced.njk +3 -3
  439. package/src/templates/components/table-advanced/_styles.table-advanced.css +65 -65
  440. package/src/templates/components/table-advanced/_template.table-advanced.njk +207 -207
  441. package/src/templates/components/table-advanced/params.table-advanced.yaml +156 -156
  442. package/src/templates/components/tabs/_examples.tabs.njk +473 -473
  443. package/src/templates/components/tabs/_macro.tabs.njk +3 -3
  444. package/src/templates/components/tabs/_styles.tabs.css +55 -55
  445. package/src/templates/components/tabs/_template.tabs.njk +70 -70
  446. package/src/templates/components/tabs/params.tabs.yaml +79 -79
  447. package/src/templates/components/textarea/_examples.textarea.njk +131 -131
  448. package/src/templates/components/textarea/_macro.textarea.njk +5 -5
  449. package/src/templates/components/textarea/_template.textarea.njk +48 -48
  450. package/src/templates/components/textarea/params.textarea.yaml +64 -64
  451. package/src/templates/components/toggle/_examples.toggle.njk +188 -181
  452. package/src/templates/components/toggle/_macro.toggle.njk +3 -3
  453. package/src/templates/components/toggle/_styles.toggle.css +31 -31
  454. package/src/templates/components/toggle/_template.toggle.njk +27 -27
  455. package/src/templates/components/toggle/params.toggle.yaml +69 -65
  456. package/src/templates/components/tooltip/_examples.tooltip.njk +86 -86
  457. package/src/templates/components/tooltip/_macro.tooltip.njk +3 -3
  458. package/src/templates/components/tooltip/_template.tooltip.njk +39 -39
  459. package/src/templates/components/tooltip/params.tooltip.yaml +40 -40
  460. package/src/templates/components/tree/_examples.tree.njk +2261 -2261
  461. package/src/templates/components/tree/_macro.tree.njk +3 -3
  462. package/src/templates/components/tree/_styles.tree.css +53 -53
  463. package/src/templates/components/tree/_template.tree.njk +182 -182
  464. package/src/templates/components/tree/params.tree.yaml +167 -167
  465. package/src/templates/includes/_abrir-notificaciones-extra.njk +2 -2
  466. package/src/templates/includes/_abrir-notificaciones.njk +2 -2
  467. package/src/templates/includes/_acciones-de-cabecera.njk +28 -28
  468. package/src/templates/includes/_ejemplo-titulo-h2-parrafo.njk +4 -4
  469. package/src/templates/includes/_ejemplo-titulo-parrafo.njk +4 -4
  470. package/src/templates/includes/_test-include.njk +13 -13
  471. package/src/templates/pages/_page.foot-headroom.njk +33 -33
  472. package/src/templates/pages/_page.foot.njk +8 -8
  473. package/src/templates/pages/_page.footer.njk +19 -19
  474. package/src/templates/pages/_page.head.njk +12 -12
  475. package/src/templates/pages/_page.notification-edit-inner-content.njk +31 -31
  476. package/src/templates/pages/_page.notification-edit.njk +30 -30
  477. package/src/templates/pages/_page.notification-footer.njk +32 -32
  478. package/src/templates/pages/_page.notification-header-fixed.njk +30 -30
  479. package/src/templates/pages/_page.notification-header.njk +31 -31
  480. package/src/templates/pages/_page.sidebar-content.njk +20 -20
  481. package/src/templates/pages/_page.spinner-block.njk +14 -14
  482. package/src/templates/pages/_page.spinner-show.njk +15 -15
  483. package/src/templates/pages/_page.spinner.njk +15 -15
  484. package/src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk +36 -36
  485. package/src/templates/pages/_template.edit-fixed.njk +74 -74
  486. package/src/templates/pages/_template.home.njk +111 -111
  487. package/src/templates/pages/_template.logged-out.njk +56 -56
  488. package/src/templates/pages/_template.logged-selector-fixed-headroom.njk +198 -198
  489. package/src/templates/pages/_template.logged-selector-fixed.njk +195 -195
  490. package/src/templates/pages/_template.logged-selector-subheader.njk +80 -80
  491. package/src/templates/pages/_template.logged-selector-with-sidebar.njk +28 -28
  492. package/src/templates/pages/_template.logged-selector.njk +195 -195
  493. package/src/templates/pages/_template.logged.njk +141 -141
  494. package/src/templates/pages/_template.mfe-iframe-content.njk +31 -31
  495. package/src/templates/pages/_template.mfe.njk +83 -83
  496. package/src/templates/pages/_template.test.njk +48 -48
  497. package/src/templates/pages/_template.with-header-advanced.njk +311 -311
package/docs/ds/_ds.example.listbox-default.njk CHANGED
@@ -1,677 +1,677 @@
1
- {% from "components/listbox/_macro.listbox.njk" import componentListbox %}
2
-
3
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
4
- <div>
5
- Normal
6
- </div>
7
- <div>
8
- {{ componentListbox({
9
- "id": "default-1",
10
- "text": "Por defecto",
11
- "label": {
12
- "text": "Label"
13
- },
14
- "items": [
15
- {
16
- "href": "#",
17
- "html": "Opción 1"
18
- },
19
- {
20
- "href": "#",
21
- "text": "Opción 2"
22
- },
23
- {
24
- "href": "#",
25
- "text": "Opción 3"
26
- },
27
- {
28
- "href": "#",
29
- "text": "Opción 4"
30
- },
31
- {
32
- "href": "#",
33
- "text": "Opción 5"
34
- }
35
- ]
36
- }) }}
37
- </div>
38
- <div>
39
- {{ componentListbox({
40
- "id": "default-2",
41
- "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>',
42
- "label": {
43
- "text": "Label"
44
- },
45
- "items": [
46
- {
47
- "href": "#",
48
- "html": "Opción 1"
49
- },
50
- {
51
- "href": "#",
52
- "text": "Opción 2"
53
- },
54
- {
55
- "href": "#",
56
- "text": "Opción 3"
57
- },
58
- {
59
- "href": "#",
60
- "text": "Opción 4"
61
- },
62
- {
63
- "href": "#",
64
- "text": "Opción 5"
65
- }
66
- ]
67
- }) }}
68
- </div>
69
- <div>
70
- {{ componentListbox({
71
- "id": "default-3",
72
- "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',
73
- "label": {
74
- "text": "Label"
75
- },
76
- "items": [
77
- {
78
- "href": "#",
79
- "html": "Opción 1"
80
- },
81
- {
82
- "href": "#",
83
- "text": "Opción 2"
84
- },
85
- {
86
- "href": "#",
87
- "text": "Opción 3"
88
- },
89
- {
90
- "href": "#",
91
- "text": "Opción 4"
92
- },
93
- {
94
- "href": "#",
95
- "text": "Opción 5"
96
- }
97
- ]
98
- }) }}
99
- </div>
100
- <div>
101
- {{ componentListbox({
102
- "id": "default-4",
103
- "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>",
104
- "label": {
105
- "text": "Label"
106
- },
107
- "items": [
108
- {
109
- "href": "#",
110
- "html": "Opción 1"
111
- },
112
- {
113
- "href": "#",
114
- "text": "Opción 2"
115
- },
116
- {
117
- "href": "#",
118
- "text": "Opción 3"
119
- },
120
- {
121
- "href": "#",
122
- "text": "Opción 4"
123
- },
124
- {
125
- "href": "#",
126
- "text": "Opción 5"
127
- }
128
- ],
129
- "classes": "align-bottom"
130
- }) }}
131
- </div>
132
- </div>
133
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
134
- <div>
135
- :active
136
- </div>
137
- <div>
138
- {{ componentListbox({
139
- "id": "default-5",
140
- "text": "Active",
141
- "label": {
142
- "text": "Label"
143
- },
144
- "items": [
145
- {
146
- "href": "#",
147
- "html": "Opción 1"
148
- },
149
- {
150
- "href": "#",
151
- "text": "Opción 2"
152
- },
153
- {
154
- "href": "#",
155
- "text": "Opción 3"
156
- },
157
- {
158
- "href": "#",
159
- "text": "Opción 4"
160
- },
161
- {
162
- "href": "#",
163
- "text": "Opción 5"
164
- }
165
- ],
166
- "classes": "ds-active"
167
-
168
- }) }}
169
- </div>
170
- <div>
171
- {{ componentListbox({
172
- "id": "default-6",
173
- "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>',
174
- "label": {
175
- "text": "Label"
176
- },
177
- "items": [
178
- {
179
- "href": "#",
180
- "html": "Opción 1"
181
- },
182
- {
183
- "href": "#",
184
- "text": "Opción 2"
185
- },
186
- {
187
- "href": "#",
188
- "text": "Opción 3"
189
- },
190
- {
191
- "href": "#",
192
- "text": "Opción 4"
193
- },
194
- {
195
- "href": "#",
196
- "text": "Opción 5"
197
- }
198
- ],
199
- "classes": "ds-active"
200
-
201
- }) }}
202
- </div>
203
- <div>
204
- {{ componentListbox({
205
- "id": "default-7",
206
- "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',
207
- "label": {
208
- "text": "Label"
209
- },
210
- "items": [
211
- {
212
- "href": "#",
213
- "html": "Opción 1"
214
- },
215
- {
216
- "href": "#",
217
- "text": "Opción 2"
218
- },
219
- {
220
- "href": "#",
221
- "text": "Opción 3"
222
- },
223
- {
224
- "href": "#",
225
- "text": "Opción 4"
226
- },
227
- {
228
- "href": "#",
229
- "text": "Opción 5"
230
- }
231
- ],
232
- "classes": "ds-active"
233
-
234
- }) }}
235
- </div>
236
- <div>
237
- {{ componentListbox({
238
- "id": "default-8",
239
- "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>",
240
- "label": {
241
- "text": "Label"
242
- },
243
- "items": [
244
- {
245
- "href": "#",
246
- "html": "Opción 1"
247
- },
248
- {
249
- "href": "#",
250
- "text": "Opción 2"
251
- },
252
- {
253
- "href": "#",
254
- "text": "Opción 3"
255
- },
256
- {
257
- "href": "#",
258
- "text": "Opción 4"
259
- },
260
- {
261
- "href": "#",
262
- "text": "Opción 5"
263
- }
264
- ],
265
- "classes": "ds-active align-bottom"
266
-
267
- }) }}
268
- </div>
269
- </div>
270
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
271
- <div>
272
- :hover
273
- </div>
274
- <div>
275
- {{ componentListbox({
276
- "id": "default-9",
277
- "text": "Hover",
278
- "label": {
279
- "text": "Label"
280
- },
281
- "items": [
282
- {
283
- "href": "#",
284
- "html": "Opción 1"
285
- },
286
- {
287
- "href": "#",
288
- "text": "Opción 2"
289
- },
290
- {
291
- "href": "#",
292
- "text": "Opción 3"
293
- },
294
- {
295
- "href": "#",
296
- "text": "Opción 4"
297
- },
298
- {
299
- "href": "#",
300
- "text": "Opción 5"
301
- }
302
- ],
303
- "classes": "ds-hover"
304
-
305
- }) }}
306
- </div>
307
-
308
- <div>
309
- {{ componentListbox({
310
- "id": "default-10",
311
- "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>',
312
- "label": {
313
- "text": "Label"
314
- },
315
- "items": [
316
- {
317
- "href": "#",
318
- "html": "Opción 1"
319
- },
320
- {
321
- "href": "#",
322
- "text": "Opción 2"
323
- },
324
- {
325
- "href": "#",
326
- "text": "Opción 3"
327
- },
328
- {
329
- "href": "#",
330
- "text": "Opción 4"
331
- },
332
- {
333
- "href": "#",
334
- "text": "Opción 5"
335
- }
336
- ],
337
- "classes": "ds-hover"
338
-
339
- }) }}
340
- </div>
341
- <div>
342
- {{ componentListbox({
343
- "id": "default-11",
344
- "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',
345
- "label": {
346
- "text": "Label"
347
- },
348
- "items": [
349
- {
350
- "href": "#",
351
- "html": "Opción 1"
352
- },
353
- {
354
- "href": "#",
355
- "text": "Opción 2"
356
- },
357
- {
358
- "href": "#",
359
- "text": "Opción 3"
360
- },
361
- {
362
- "href": "#",
363
- "text": "Opción 4"
364
- },
365
- {
366
- "href": "#",
367
- "text": "Opción 5"
368
- }
369
- ],
370
- "classes": "ds-hover"
371
-
372
- }) }}
373
- </div>
374
- <div>
375
- {{ componentListbox({
376
- "id": "default-12",
377
- "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>",
378
- "label": {
379
- "text": "Label"
380
- },
381
- "items": [
382
- {
383
- "href": "#",
384
- "html": "Opción 1"
385
- },
386
- {
387
- "href": "#",
388
- "text": "Opción 2"
389
- },
390
- {
391
- "href": "#",
392
- "text": "Opción 3"
393
- },
394
- {
395
- "href": "#",
396
- "text": "Opción 4"
397
- },
398
- {
399
- "href": "#",
400
- "text": "Opción 5"
401
- }
402
- ],
403
- "classes": "ds-hover align-bottom"
404
-
405
- }) }}
406
- </div>
407
- </div>
408
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
409
- <div>
410
- :focus
411
- </div>
412
- <div>
413
- {{ componentListbox({
414
- "id": "default-13",
415
- "text": "Focus",
416
- "label": {
417
- "text": "Label"
418
- },
419
- "items": [
420
- {
421
- "href": "#",
422
- "html": "Opción 1"
423
- },
424
- {
425
- "href": "#",
426
- "text": "Opción 2"
427
- },
428
- {
429
- "href": "#",
430
- "text": "Opción 3"
431
- },
432
- {
433
- "href": "#",
434
- "text": "Opción 4"
435
- },
436
- {
437
- "href": "#",
438
- "text": "Opción 5"
439
- }
440
- ],
441
- "classes": "ds-focus"
442
-
443
- }) }}
444
- </div>
445
- <div>
446
- {{ componentListbox({
447
- "id": "default-14",
448
- "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>',
449
- "label": {
450
- "text": "Label"
451
- },
452
- "items": [
453
- {
454
- "href": "#",
455
- "html": "Opción 1"
456
- },
457
- {
458
- "href": "#",
459
- "text": "Opción 2"
460
- },
461
- {
462
- "href": "#",
463
- "text": "Opción 3"
464
- },
465
- {
466
- "href": "#",
467
- "text": "Opción 4"
468
- },
469
- {
470
- "href": "#",
471
- "text": "Opción 5"
472
- }
473
- ],
474
- "classes": "ds-focus"
475
-
476
- }) }}
477
- </div>
478
- <div>
479
- {{ componentListbox({
480
- "id": "default-15",
481
- "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',
482
- "label": {
483
- "text": "Label"
484
- },
485
- "items": [
486
- {
487
- "href": "#",
488
- "html": "Opción 1"
489
- },
490
- {
491
- "href": "#",
492
- "text": "Opción 2"
493
- },
494
- {
495
- "href": "#",
496
- "text": "Opción 3"
497
- },
498
- {
499
- "href": "#",
500
- "text": "Opción 4"
501
- },
502
- {
503
- "href": "#",
504
- "text": "Opción 5"
505
- }
506
- ],
507
- "classes": "ds-focus"
508
- }) }}
509
- </div>
510
- <div>
511
- {{ componentListbox({
512
- "id": "default-16",
513
- "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>",
514
- "label": {
515
- "text": "Label"
516
- },
517
- "items": [
518
- {
519
- "href": "#",
520
- "html": "Opción 1"
521
- },
522
- {
523
- "href": "#",
524
- "text": "Opción 2"
525
- },
526
- {
527
- "href": "#",
528
- "text": "Opción 3"
529
- },
530
- {
531
- "href": "#",
532
- "text": "Opción 4"
533
- },
534
- {
535
- "href": "#",
536
- "text": "Opción 5"
537
- }
538
- ],
539
- "classes": "ds-focus align-bottom"
540
-
541
- }) }}
542
- </div>
543
- </div>
544
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
545
- <div>
546
- Disabled
547
- </div>
548
- <div>
549
- {{ componentListbox({
550
- "id": "default-17",
551
- "text": "Disabled",
552
- "label": {
553
- "text": "Label"
554
- },
555
- "items": [
556
- {
557
- "href": "#",
558
- "html": "Opción 1"
559
- },
560
- {
561
- "href": "#",
562
- "text": "Opción 2"
563
- },
564
- {
565
- "href": "#",
566
- "text": "Opción 3"
567
- },
568
- {
569
- "href": "#",
570
- "text": "Opción 4"
571
- },
572
- {
573
- "href": "#",
574
- "text": "Opción 5"
575
- }
576
- ],
577
- "disabled": true
578
- }) }}
579
- </div>
580
- <div>
581
- {{ componentListbox({
582
- "id": "default-18",
583
- "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>',
584
- "label": {
585
- "text": "Label"
586
- },
587
- "items": [
588
- {
589
- "href": "#",
590
- "html": "Opción 1"
591
- },
592
- {
593
- "href": "#",
594
- "text": "Opción 2"
595
- },
596
- {
597
- "href": "#",
598
- "text": "Opción 3"
599
- },
600
- {
601
- "href": "#",
602
- "text": "Opción 4"
603
- },
604
- {
605
- "href": "#",
606
- "text": "Opción 5"
607
- }
608
- ],
609
- "disabled": true
610
- }) }}
611
- </div>
612
- <div>
613
- {{ componentListbox({
614
- "id": "default-19",
615
- "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',
616
- "label": {
617
- "text": "Label"
618
- },
619
- "items": [
620
- {
621
- "href": "#",
622
- "html": "Opción 1"
623
- },
624
- {
625
- "href": "#",
626
- "text": "Opción 2"
627
- },
628
- {
629
- "href": "#",
630
- "text": "Opción 3"
631
- },
632
- {
633
- "href": "#",
634
- "text": "Opción 4"
635
- },
636
- {
637
- "href": "#",
638
- "text": "Opción 5"
639
- }
640
- ],
641
- "disabled": true
642
- }) }}
643
- </div>
644
- <div>
645
- {{ componentListbox({
646
- "id": "default-20",
647
- "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>",
648
- "label": {
649
- "text": "Label"
650
- },
651
- "items": [
652
- {
653
- "href": "#",
654
- "html": "Opción 1"
655
- },
656
- {
657
- "href": "#",
658
- "text": "Opción 2"
659
- },
660
- {
661
- "href": "#",
662
- "text": "Opción 3"
663
- },
664
- {
665
- "href": "#",
666
- "text": "Opción 4"
667
- },
668
- {
669
- "href": "#",
670
- "text": "Opción 5"
671
- }
672
- ],
673
- "classes": "align-bottom",
674
- "disabled": true
675
- }) }}
676
- </div>
677
- </div>
1
+ {% from "components/listbox/_macro.listbox.njk" import componentListbox %}
2
+
3
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
4
+ <div>
5
+ Normal
6
+ </div>
7
+ <div>
8
+ {{ componentListbox({
9
+ "id": "default-1",
10
+ "text": "Por defecto",
11
+ "label": {
12
+ "text": "Label"
13
+ },
14
+ "items": [
15
+ {
16
+ "href": "#",
17
+ "html": "Opción 1"
18
+ },
19
+ {
20
+ "href": "#",
21
+ "text": "Opción 2"
22
+ },
23
+ {
24
+ "href": "#",
25
+ "text": "Opción 3"
26
+ },
27
+ {
28
+ "href": "#",
29
+ "text": "Opción 4"
30
+ },
31
+ {
32
+ "href": "#",
33
+ "text": "Opción 5"
34
+ }
35
+ ]
36
+ }) }}
37
+ </div>
38
+ <div>
39
+ {{ componentListbox({
40
+ "id": "default-2",
41
+ "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>',
42
+ "label": {
43
+ "text": "Label"
44
+ },
45
+ "items": [
46
+ {
47
+ "href": "#",
48
+ "html": "Opción 1"
49
+ },
50
+ {
51
+ "href": "#",
52
+ "text": "Opción 2"
53
+ },
54
+ {
55
+ "href": "#",
56
+ "text": "Opción 3"
57
+ },
58
+ {
59
+ "href": "#",
60
+ "text": "Opción 4"
61
+ },
62
+ {
63
+ "href": "#",
64
+ "text": "Opción 5"
65
+ }
66
+ ]
67
+ }) }}
68
+ </div>
69
+ <div>
70
+ {{ componentListbox({
71
+ "id": "default-3",
72
+ "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',
73
+ "label": {
74
+ "text": "Label"
75
+ },
76
+ "items": [
77
+ {
78
+ "href": "#",
79
+ "html": "Opción 1"
80
+ },
81
+ {
82
+ "href": "#",
83
+ "text": "Opción 2"
84
+ },
85
+ {
86
+ "href": "#",
87
+ "text": "Opción 3"
88
+ },
89
+ {
90
+ "href": "#",
91
+ "text": "Opción 4"
92
+ },
93
+ {
94
+ "href": "#",
95
+ "text": "Opción 5"
96
+ }
97
+ ]
98
+ }) }}
99
+ </div>
100
+ <div>
101
+ {{ componentListbox({
102
+ "id": "default-4",
103
+ "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>",
104
+ "label": {
105
+ "text": "Label"
106
+ },
107
+ "items": [
108
+ {
109
+ "href": "#",
110
+ "html": "Opción 1"
111
+ },
112
+ {
113
+ "href": "#",
114
+ "text": "Opción 2"
115
+ },
116
+ {
117
+ "href": "#",
118
+ "text": "Opción 3"
119
+ },
120
+ {
121
+ "href": "#",
122
+ "text": "Opción 4"
123
+ },
124
+ {
125
+ "href": "#",
126
+ "text": "Opción 5"
127
+ }
128
+ ],
129
+ "classes": "align-bottom"
130
+ }) }}
131
+ </div>
132
+ </div>
133
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
134
+ <div>
135
+ :active
136
+ </div>
137
+ <div>
138
+ {{ componentListbox({
139
+ "id": "default-5",
140
+ "text": "Active",
141
+ "label": {
142
+ "text": "Label"
143
+ },
144
+ "items": [
145
+ {
146
+ "href": "#",
147
+ "html": "Opción 1"
148
+ },
149
+ {
150
+ "href": "#",
151
+ "text": "Opción 2"
152
+ },
153
+ {
154
+ "href": "#",
155
+ "text": "Opción 3"
156
+ },
157
+ {
158
+ "href": "#",
159
+ "text": "Opción 4"
160
+ },
161
+ {
162
+ "href": "#",
163
+ "text": "Opción 5"
164
+ }
165
+ ],
166
+ "classes": "ds-active"
167
+
168
+ }) }}
169
+ </div>
170
+ <div>
171
+ {{ componentListbox({
172
+ "id": "default-6",
173
+ "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>',
174
+ "label": {
175
+ "text": "Label"
176
+ },
177
+ "items": [
178
+ {
179
+ "href": "#",
180
+ "html": "Opción 1"
181
+ },
182
+ {
183
+ "href": "#",
184
+ "text": "Opción 2"
185
+ },
186
+ {
187
+ "href": "#",
188
+ "text": "Opción 3"
189
+ },
190
+ {
191
+ "href": "#",
192
+ "text": "Opción 4"
193
+ },
194
+ {
195
+ "href": "#",
196
+ "text": "Opción 5"
197
+ }
198
+ ],
199
+ "classes": "ds-active"
200
+
201
+ }) }}
202
+ </div>
203
+ <div>
204
+ {{ componentListbox({
205
+ "id": "default-7",
206
+ "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',
207
+ "label": {
208
+ "text": "Label"
209
+ },
210
+ "items": [
211
+ {
212
+ "href": "#",
213
+ "html": "Opción 1"
214
+ },
215
+ {
216
+ "href": "#",
217
+ "text": "Opción 2"
218
+ },
219
+ {
220
+ "href": "#",
221
+ "text": "Opción 3"
222
+ },
223
+ {
224
+ "href": "#",
225
+ "text": "Opción 4"
226
+ },
227
+ {
228
+ "href": "#",
229
+ "text": "Opción 5"
230
+ }
231
+ ],
232
+ "classes": "ds-active"
233
+
234
+ }) }}
235
+ </div>
236
+ <div>
237
+ {{ componentListbox({
238
+ "id": "default-8",
239
+ "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>",
240
+ "label": {
241
+ "text": "Label"
242
+ },
243
+ "items": [
244
+ {
245
+ "href": "#",
246
+ "html": "Opción 1"
247
+ },
248
+ {
249
+ "href": "#",
250
+ "text": "Opción 2"
251
+ },
252
+ {
253
+ "href": "#",
254
+ "text": "Opción 3"
255
+ },
256
+ {
257
+ "href": "#",
258
+ "text": "Opción 4"
259
+ },
260
+ {
261
+ "href": "#",
262
+ "text": "Opción 5"
263
+ }
264
+ ],
265
+ "classes": "ds-active align-bottom"
266
+
267
+ }) }}
268
+ </div>
269
+ </div>
270
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
271
+ <div>
272
+ :hover
273
+ </div>
274
+ <div>
275
+ {{ componentListbox({
276
+ "id": "default-9",
277
+ "text": "Hover",
278
+ "label": {
279
+ "text": "Label"
280
+ },
281
+ "items": [
282
+ {
283
+ "href": "#",
284
+ "html": "Opción 1"
285
+ },
286
+ {
287
+ "href": "#",
288
+ "text": "Opción 2"
289
+ },
290
+ {
291
+ "href": "#",
292
+ "text": "Opción 3"
293
+ },
294
+ {
295
+ "href": "#",
296
+ "text": "Opción 4"
297
+ },
298
+ {
299
+ "href": "#",
300
+ "text": "Opción 5"
301
+ }
302
+ ],
303
+ "classes": "ds-hover"
304
+
305
+ }) }}
306
+ </div>
307
+
308
+ <div>
309
+ {{ componentListbox({
310
+ "id": "default-10",
311
+ "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>',
312
+ "label": {
313
+ "text": "Label"
314
+ },
315
+ "items": [
316
+ {
317
+ "href": "#",
318
+ "html": "Opción 1"
319
+ },
320
+ {
321
+ "href": "#",
322
+ "text": "Opción 2"
323
+ },
324
+ {
325
+ "href": "#",
326
+ "text": "Opción 3"
327
+ },
328
+ {
329
+ "href": "#",
330
+ "text": "Opción 4"
331
+ },
332
+ {
333
+ "href": "#",
334
+ "text": "Opción 5"
335
+ }
336
+ ],
337
+ "classes": "ds-hover"
338
+
339
+ }) }}
340
+ </div>
341
+ <div>
342
+ {{ componentListbox({
343
+ "id": "default-11",
344
+ "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',
345
+ "label": {
346
+ "text": "Label"
347
+ },
348
+ "items": [
349
+ {
350
+ "href": "#",
351
+ "html": "Opción 1"
352
+ },
353
+ {
354
+ "href": "#",
355
+ "text": "Opción 2"
356
+ },
357
+ {
358
+ "href": "#",
359
+ "text": "Opción 3"
360
+ },
361
+ {
362
+ "href": "#",
363
+ "text": "Opción 4"
364
+ },
365
+ {
366
+ "href": "#",
367
+ "text": "Opción 5"
368
+ }
369
+ ],
370
+ "classes": "ds-hover"
371
+
372
+ }) }}
373
+ </div>
374
+ <div>
375
+ {{ componentListbox({
376
+ "id": "default-12",
377
+ "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>",
378
+ "label": {
379
+ "text": "Label"
380
+ },
381
+ "items": [
382
+ {
383
+ "href": "#",
384
+ "html": "Opción 1"
385
+ },
386
+ {
387
+ "href": "#",
388
+ "text": "Opción 2"
389
+ },
390
+ {
391
+ "href": "#",
392
+ "text": "Opción 3"
393
+ },
394
+ {
395
+ "href": "#",
396
+ "text": "Opción 4"
397
+ },
398
+ {
399
+ "href": "#",
400
+ "text": "Opción 5"
401
+ }
402
+ ],
403
+ "classes": "ds-hover align-bottom"
404
+
405
+ }) }}
406
+ </div>
407
+ </div>
408
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
409
+ <div>
410
+ :focus
411
+ </div>
412
+ <div>
413
+ {{ componentListbox({
414
+ "id": "default-13",
415
+ "text": "Focus",
416
+ "label": {
417
+ "text": "Label"
418
+ },
419
+ "items": [
420
+ {
421
+ "href": "#",
422
+ "html": "Opción 1"
423
+ },
424
+ {
425
+ "href": "#",
426
+ "text": "Opción 2"
427
+ },
428
+ {
429
+ "href": "#",
430
+ "text": "Opción 3"
431
+ },
432
+ {
433
+ "href": "#",
434
+ "text": "Opción 4"
435
+ },
436
+ {
437
+ "href": "#",
438
+ "text": "Opción 5"
439
+ }
440
+ ],
441
+ "classes": "ds-focus"
442
+
443
+ }) }}
444
+ </div>
445
+ <div>
446
+ {{ componentListbox({
447
+ "id": "default-14",
448
+ "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>',
449
+ "label": {
450
+ "text": "Label"
451
+ },
452
+ "items": [
453
+ {
454
+ "href": "#",
455
+ "html": "Opción 1"
456
+ },
457
+ {
458
+ "href": "#",
459
+ "text": "Opción 2"
460
+ },
461
+ {
462
+ "href": "#",
463
+ "text": "Opción 3"
464
+ },
465
+ {
466
+ "href": "#",
467
+ "text": "Opción 4"
468
+ },
469
+ {
470
+ "href": "#",
471
+ "text": "Opción 5"
472
+ }
473
+ ],
474
+ "classes": "ds-focus"
475
+
476
+ }) }}
477
+ </div>
478
+ <div>
479
+ {{ componentListbox({
480
+ "id": "default-15",
481
+ "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',
482
+ "label": {
483
+ "text": "Label"
484
+ },
485
+ "items": [
486
+ {
487
+ "href": "#",
488
+ "html": "Opción 1"
489
+ },
490
+ {
491
+ "href": "#",
492
+ "text": "Opción 2"
493
+ },
494
+ {
495
+ "href": "#",
496
+ "text": "Opción 3"
497
+ },
498
+ {
499
+ "href": "#",
500
+ "text": "Opción 4"
501
+ },
502
+ {
503
+ "href": "#",
504
+ "text": "Opción 5"
505
+ }
506
+ ],
507
+ "classes": "ds-focus"
508
+ }) }}
509
+ </div>
510
+ <div>
511
+ {{ componentListbox({
512
+ "id": "default-16",
513
+ "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>",
514
+ "label": {
515
+ "text": "Label"
516
+ },
517
+ "items": [
518
+ {
519
+ "href": "#",
520
+ "html": "Opción 1"
521
+ },
522
+ {
523
+ "href": "#",
524
+ "text": "Opción 2"
525
+ },
526
+ {
527
+ "href": "#",
528
+ "text": "Opción 3"
529
+ },
530
+ {
531
+ "href": "#",
532
+ "text": "Opción 4"
533
+ },
534
+ {
535
+ "href": "#",
536
+ "text": "Opción 5"
537
+ }
538
+ ],
539
+ "classes": "ds-focus align-bottom"
540
+
541
+ }) }}
542
+ </div>
543
+ </div>
544
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
545
+ <div>
546
+ Disabled
547
+ </div>
548
+ <div>
549
+ {{ componentListbox({
550
+ "id": "default-17",
551
+ "text": "Disabled",
552
+ "label": {
553
+ "text": "Label"
554
+ },
555
+ "items": [
556
+ {
557
+ "href": "#",
558
+ "html": "Opción 1"
559
+ },
560
+ {
561
+ "href": "#",
562
+ "text": "Opción 2"
563
+ },
564
+ {
565
+ "href": "#",
566
+ "text": "Opción 3"
567
+ },
568
+ {
569
+ "href": "#",
570
+ "text": "Opción 4"
571
+ },
572
+ {
573
+ "href": "#",
574
+ "text": "Opción 5"
575
+ }
576
+ ],
577
+ "disabled": true
578
+ }) }}
579
+ </div>
580
+ <div>
581
+ {{ componentListbox({
582
+ "id": "default-18",
583
+ "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>',
584
+ "label": {
585
+ "text": "Label"
586
+ },
587
+ "items": [
588
+ {
589
+ "href": "#",
590
+ "html": "Opción 1"
591
+ },
592
+ {
593
+ "href": "#",
594
+ "text": "Opción 2"
595
+ },
596
+ {
597
+ "href": "#",
598
+ "text": "Opción 3"
599
+ },
600
+ {
601
+ "href": "#",
602
+ "text": "Opción 4"
603
+ },
604
+ {
605
+ "href": "#",
606
+ "text": "Opción 5"
607
+ }
608
+ ],
609
+ "disabled": true
610
+ }) }}
611
+ </div>
612
+ <div>
613
+ {{ componentListbox({
614
+ "id": "default-19",
615
+ "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',
616
+ "label": {
617
+ "text": "Label"
618
+ },
619
+ "items": [
620
+ {
621
+ "href": "#",
622
+ "html": "Opción 1"
623
+ },
624
+ {
625
+ "href": "#",
626
+ "text": "Opción 2"
627
+ },
628
+ {
629
+ "href": "#",
630
+ "text": "Opción 3"
631
+ },
632
+ {
633
+ "href": "#",
634
+ "text": "Opción 4"
635
+ },
636
+ {
637
+ "href": "#",
638
+ "text": "Opción 5"
639
+ }
640
+ ],
641
+ "disabled": true
642
+ }) }}
643
+ </div>
644
+ <div>
645
+ {{ componentListbox({
646
+ "id": "default-20",
647
+ "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>",
648
+ "label": {
649
+ "text": "Label"
650
+ },
651
+ "items": [
652
+ {
653
+ "href": "#",
654
+ "html": "Opción 1"
655
+ },
656
+ {
657
+ "href": "#",
658
+ "text": "Opción 2"
659
+ },
660
+ {
661
+ "href": "#",
662
+ "text": "Opción 3"
663
+ },
664
+ {
665
+ "href": "#",
666
+ "text": "Opción 4"
667
+ },
668
+ {
669
+ "href": "#",
670
+ "text": "Opción 5"
671
+ }
672
+ ],
673
+ "classes": "align-bottom",
674
+ "disabled": true
675
+ }) }}
676
+ </div>
677
+ </div>