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-variaciones.njk CHANGED
@@ -1,687 +1,687 @@
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
- Primario
6
- </div>
7
- <div>
8
- {{ componentListbox({
9
- "id":"listbox-1",
10
- "text": "Primario",
11
- "label": {
12
- "text": "Label",
13
- "classes": "sr-only"
14
- },
15
- "classes": "c-listbox--primary",
16
- "items": [
17
- {
18
- "href": "#",
19
- "html": "Opción 1"
20
- },
21
- {
22
- "href": "#",
23
- "text": "Opción 2"
24
- },
25
- {
26
- "href": "#",
27
- "text": "Opción 3"
28
- },
29
- {
30
- "href": "#",
31
- "text": "Opción 4"
32
- },
33
- {
34
- "href": "#",
35
- "text": "Opción 5"
36
- }
37
- ]
38
- }) }}
39
- </div>
40
- <div>
41
- {{ componentListbox({
42
- "id":"listbox-2",
43
- "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>',
44
- "label": {
45
- "text": "Label",
46
- "classes": "sr-only"
47
- },
48
- "classes": "c-listbox--primary",
49
- "items": [
50
- {
51
- "href": "#",
52
- "html": "Opción 1"
53
- },
54
- {
55
- "href": "#",
56
- "text": "Opción 2"
57
- },
58
- {
59
- "href": "#",
60
- "text": "Opción 3"
61
- },
62
- {
63
- "href": "#",
64
- "text": "Opción 4"
65
- },
66
- {
67
- "href": "#",
68
- "text": "Opción 5"
69
- }
70
- ]
71
- }) }}
72
- </div>
73
- <div>
74
- {{ componentListbox({
75
- "id":"listbox-3",
76
- "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',
77
- "label": {
78
- "text": "Label",
79
- "classes": "sr-only"
80
- },
81
- "classes": "c-listbox--primary",
82
- "items": [
83
- {
84
- "href": "#",
85
- "html": "Opción 1"
86
- },
87
- {
88
- "href": "#",
89
- "text": "Opción 2"
90
- },
91
- {
92
- "href": "#",
93
- "text": "Opción 3"
94
- },
95
- {
96
- "href": "#",
97
- "text": "Opción 4"
98
- },
99
- {
100
- "href": "#",
101
- "text": "Opción 5"
102
- }
103
- ]
104
- }) }}
105
- </div>
106
- <div>
107
- {{ componentListbox({
108
- "id":"listbox-4",
109
- "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>",
110
- "label": {
111
- "text": "Label",
112
- "classes": "sr-only"
113
- },
114
- "classes": "c-listbox--primary align-bottom",
115
- "items": [
116
- {
117
- "href": "#",
118
- "html": "Opción 1"
119
- },
120
- {
121
- "href": "#",
122
- "text": "Opción 2"
123
- },
124
- {
125
- "href": "#",
126
- "text": "Opción 3"
127
- },
128
- {
129
- "href": "#",
130
- "text": "Opción 4"
131
- },
132
- {
133
- "href": "#",
134
- "text": "Opción 5"
135
- }
136
- ]
137
- }) }}
138
- </div>
139
- </div>
140
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
141
- <div>
142
- Transparent
143
- </div>
144
- <div>
145
- {{ componentListbox({
146
- "id":"listbox-5",
147
- "text": "Primario",
148
- "label": {
149
- "text": "Label",
150
- "classes": "sr-only"
151
- },
152
- "classes": "c-listbox--transparent",
153
- "items": [
154
- {
155
- "href": "#",
156
- "html": "Opción 1"
157
- },
158
- {
159
- "href": "#",
160
- "text": "Opción 2"
161
- },
162
- {
163
- "href": "#",
164
- "text": "Opción 3"
165
- },
166
- {
167
- "href": "#",
168
- "text": "Opción 4"
169
- },
170
- {
171
- "href": "#",
172
- "text": "Opción 5"
173
- }
174
- ]
175
- }) }}
176
- </div>
177
- <div>
178
- {{ componentListbox({
179
- "id":"listbox-6",
180
- "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>',
181
- "label": {
182
- "text": "Label",
183
- "classes": "sr-only"
184
- },
185
- "classes": "c-listbox--transparent",
186
- "items": [
187
- {
188
- "href": "#",
189
- "html": "Opción 1"
190
- },
191
- {
192
- "href": "#",
193
- "text": "Opción 2"
194
- },
195
- {
196
- "href": "#",
197
- "text": "Opción 3"
198
- },
199
- {
200
- "href": "#",
201
- "text": "Opción 4"
202
- },
203
- {
204
- "href": "#",
205
- "text": "Opción 5"
206
- }
207
- ]
208
- }) }}
209
- </div>
210
- <div>
211
- {{ componentListbox({
212
- "id":"listbox-7",
213
- "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',
214
- "label": {
215
- "text": "Label",
216
- "classes": "sr-only"
217
- },
218
- "classes": "c-listbox--transparent",
219
- "items": [
220
- {
221
- "href": "#",
222
- "html": "Opción 1"
223
- },
224
- {
225
- "href": "#",
226
- "text": "Opción 2"
227
- },
228
- {
229
- "href": "#",
230
- "text": "Opción 3"
231
- },
232
- {
233
- "href": "#",
234
- "text": "Opción 4"
235
- },
236
- {
237
- "href": "#",
238
- "text": "Opción 5"
239
- }
240
- ]
241
- }) }}
242
- </div>
243
- <div>
244
- {{ componentListbox({
245
- "id":"listbox-8",
246
- "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>",
247
- "label": {
248
- "text": "Label",
249
- "classes": "sr-only"
250
- },
251
- "classes": "c-listbox--transparent align-bottom",
252
- "items": [
253
- {
254
- "href": "#",
255
- "html": "Opción 1"
256
- },
257
- {
258
- "href": "#",
259
- "text": "Opción 2"
260
- },
261
- {
262
- "href": "#",
263
- "text": "Opción 3"
264
- },
265
- {
266
- "href": "#",
267
- "text": "Opción 4"
268
- },
269
- {
270
- "href": "#",
271
- "text": "Opción 5"
272
- }
273
- ]
274
- }) }}
275
- </div>
276
- </div>
277
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
278
- <div>
279
- Header
280
- </div>
281
- <div>
282
- {{ componentListbox({
283
- "id":"listbox-9",
284
- "text": "Primario",
285
- "label": {
286
- "text": "Label",
287
- "classes": "sr-only"
288
- },
289
- "classes": "c-listbox--header",
290
- "items": [
291
- {
292
- "href": "#",
293
- "html": "Opción 1"
294
- },
295
- {
296
- "href": "#",
297
- "text": "Opción 2"
298
- },
299
- {
300
- "href": "#",
301
- "text": "Opción 3"
302
- },
303
- {
304
- "href": "#",
305
- "text": "Opción 4"
306
- },
307
- {
308
- "href": "#",
309
- "text": "Opción 5"
310
- }
311
- ]
312
- }) }}
313
- </div>
314
- <div>
315
- {{ componentListbox({
316
- "id":"listbox-10",
317
- "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>',
318
- "label": {
319
- "text": "Label",
320
- "classes": "sr-only"
321
- },
322
- "classes": "c-listbox--header",
323
- "items": [
324
- {
325
- "href": "#",
326
- "html": "Opción 1"
327
- },
328
- {
329
- "href": "#",
330
- "text": "Opción 2"
331
- },
332
- {
333
- "href": "#",
334
- "text": "Opción 3"
335
- },
336
- {
337
- "href": "#",
338
- "text": "Opción 4"
339
- },
340
- {
341
- "href": "#",
342
- "text": "Opción 5"
343
- }
344
- ]
345
- }) }}
346
- </div>
347
- <div>
348
- {{ componentListbox({
349
- "id":"listbox-11",
350
- "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',
351
- "label": {
352
- "text": "Label",
353
- "classes": "sr-only"
354
- },
355
- "classes": "c-listbox--header",
356
- "items": [
357
- {
358
- "href": "#",
359
- "html": "Opción 1"
360
- },
361
- {
362
- "href": "#",
363
- "text": "Opción 2"
364
- },
365
- {
366
- "href": "#",
367
- "text": "Opción 3"
368
- },
369
- {
370
- "href": "#",
371
- "text": "Opción 4"
372
- },
373
- {
374
- "href": "#",
375
- "text": "Opción 5"
376
- }
377
- ]
378
- }) }}
379
- </div>
380
- <div>
381
- {{ componentListbox({
382
- "id":"listbox-12",
383
- "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>",
384
- "label": {
385
- "text": "Label",
386
- "classes": "sr-only"
387
- },
388
- "classes": "c-listbox--header align-bottom",
389
- "items": [
390
- {
391
- "href": "#",
392
- "html": "Opción 1"
393
- },
394
- {
395
- "href": "#",
396
- "text": "Opción 2"
397
- },
398
- {
399
- "href": "#",
400
- "text": "Opción 3"
401
- },
402
- {
403
- "href": "#",
404
- "text": "Opción 4"
405
- },
406
- {
407
- "href": "#",
408
- "text": "Opción 5"
409
- }
410
- ]
411
- }) }}
412
- </div>
413
- </div>
414
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
415
- <div>
416
- Pequeño
417
- </div>
418
- <div>
419
- {{ componentListbox({
420
- "id":"listbox-13",
421
- "text": "Primario",
422
- "label": {
423
- "text": "Label",
424
- "classes": "sr-only"
425
- },
426
- "classes": "c-listbox--sm",
427
- "items": [
428
- {
429
- "href": "#",
430
- "html": "Opción 1"
431
- },
432
- {
433
- "href": "#",
434
- "text": "Opción 2"
435
- },
436
- {
437
- "href": "#",
438
- "text": "Opción 3"
439
- },
440
- {
441
- "href": "#",
442
- "text": "Opción 4"
443
- },
444
- {
445
- "href": "#",
446
- "text": "Opción 5"
447
- }
448
- ]
449
- }) }}
450
- </div>
451
- <div>
452
- {{ componentListbox({
453
- "id":"listbox-14",
454
- "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>',
455
- "label": {
456
- "text": "Label",
457
- "classes": "sr-only"
458
- },
459
- "classes": "c-listbox--sm",
460
- "items": [
461
- {
462
- "href": "#",
463
- "html": "Opción 1"
464
- },
465
- {
466
- "href": "#",
467
- "text": "Opción 2"
468
- },
469
- {
470
- "href": "#",
471
- "text": "Opción 3"
472
- },
473
- {
474
- "href": "#",
475
- "text": "Opción 4"
476
- },
477
- {
478
- "href": "#",
479
- "text": "Opción 5"
480
- }
481
- ]
482
- }) }}
483
- </div>
484
- <div>
485
- {{ componentListbox({
486
- "id":"listbox-15",
487
- "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',
488
- "label": {
489
- "text": "Label",
490
- "classes": "sr-only"
491
- },
492
- "classes": "c-listbox--sm",
493
- "items": [
494
- {
495
- "href": "#",
496
- "html": "Opción 1"
497
- },
498
- {
499
- "href": "#",
500
- "text": "Opción 2"
501
- },
502
- {
503
- "href": "#",
504
- "text": "Opción 3"
505
- },
506
- {
507
- "href": "#",
508
- "text": "Opción 4"
509
- },
510
- {
511
- "href": "#",
512
- "text": "Opción 5"
513
- }
514
- ]
515
- }) }}
516
- </div>
517
- <div>
518
- {{ componentListbox({
519
- "id":"listbox-16",
520
- "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>",
521
- "label": {
522
- "text": "Label",
523
- "classes": "sr-only"
524
- },
525
- "classes": "c-listbox--sm align-bottom",
526
- "items": [
527
- {
528
- "href": "#",
529
- "html": "Opción 1"
530
- },
531
- {
532
- "href": "#",
533
- "text": "Opción 2"
534
- },
535
- {
536
- "href": "#",
537
- "text": "Opción 3"
538
- },
539
- {
540
- "href": "#",
541
- "text": "Opción 4"
542
- },
543
- {
544
- "href": "#",
545
- "text": "Opción 5"
546
- }
547
- ]
548
- }) }}
549
- </div>
550
- </div>
551
- <div class="grid lg:grid-cols-5 gap-xl mb-lg">
552
- <div>
553
- Pequeño tiene selección
554
- </div>
555
- <div>
556
- {{ componentListbox({
557
- "id":"listbox-17",
558
- "text": "Primario",
559
- "label": {
560
- "text": "Label",
561
- "classes": "sr-only"
562
- },
563
- "classes": "c-listbox--sm c-listbox--has-selection",
564
- "items": [
565
- {
566
- "href": "#",
567
- "html": "Opción 1"
568
- },
569
- {
570
- "href": "#",
571
- "text": "Opción 2"
572
- },
573
- {
574
- "href": "#",
575
- "text": "Opción 3"
576
- },
577
- {
578
- "href": "#",
579
- "text": "Opción 4"
580
- },
581
- {
582
- "href": "#",
583
- "text": "Opción 5"
584
- }
585
- ]
586
- }) }}
587
- </div>
588
- <div>
589
- {{ componentListbox({
590
- "id":"listbox-18",
591
- "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>',
592
- "label": {
593
- "text": "Label",
594
- "classes": "sr-only"
595
- },
596
- "classes": "c-listbox--sm c-listbox--has-selection",
597
- "items": [
598
- {
599
- "href": "#",
600
- "html": "Opción 1"
601
- },
602
- {
603
- "href": "#",
604
- "text": "Opción 2"
605
- },
606
- {
607
- "href": "#",
608
- "text": "Opción 3"
609
- },
610
- {
611
- "href": "#",
612
- "text": "Opción 4"
613
- },
614
- {
615
- "href": "#",
616
- "text": "Opción 5"
617
- }
618
- ]
619
- }) }}
620
- </div>
621
- <div>
622
- {{ componentListbox({
623
- "id":"listbox-19",
624
- "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',
625
- "label": {
626
- "text": "Label",
627
- "classes": "sr-only"
628
- },
629
- "classes": "c-listbox--sm c-listbox--has-selection",
630
- "items": [
631
- {
632
- "href": "#",
633
- "html": "Opción 1"
634
- },
635
- {
636
- "href": "#",
637
- "text": "Opción 2"
638
- },
639
- {
640
- "href": "#",
641
- "text": "Opción 3"
642
- },
643
- {
644
- "href": "#",
645
- "text": "Opción 4"
646
- },
647
- {
648
- "href": "#",
649
- "text": "Opción 5"
650
- }
651
- ]
652
- }) }}
653
- </div>
654
- <div>
655
- {{ componentListbox({
656
- "id":"listbox-20",
657
- "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>",
658
- "label": {
659
- "text": "Label",
660
- "classes": "sr-only"
661
- },
662
- "classes": "c-listbox--sm c-listbox--has-selection align-bottom",
663
- "items": [
664
- {
665
- "href": "#",
666
- "html": "Opción 1"
667
- },
668
- {
669
- "href": "#",
670
- "text": "Opción 2"
671
- },
672
- {
673
- "href": "#",
674
- "text": "Opción 3"
675
- },
676
- {
677
- "href": "#",
678
- "text": "Opción 4"
679
- },
680
- {
681
- "href": "#",
682
- "text": "Opción 5"
683
- }
684
- ]
685
- }) }}
686
- </div>
687
- </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
+ Primario
6
+ </div>
7
+ <div>
8
+ {{ componentListbox({
9
+ "id":"listbox-1",
10
+ "text": "Primario",
11
+ "label": {
12
+ "text": "Label",
13
+ "classes": "sr-only"
14
+ },
15
+ "classes": "c-listbox--primary",
16
+ "items": [
17
+ {
18
+ "href": "#",
19
+ "html": "Opción 1"
20
+ },
21
+ {
22
+ "href": "#",
23
+ "text": "Opción 2"
24
+ },
25
+ {
26
+ "href": "#",
27
+ "text": "Opción 3"
28
+ },
29
+ {
30
+ "href": "#",
31
+ "text": "Opción 4"
32
+ },
33
+ {
34
+ "href": "#",
35
+ "text": "Opción 5"
36
+ }
37
+ ]
38
+ }) }}
39
+ </div>
40
+ <div>
41
+ {{ componentListbox({
42
+ "id":"listbox-2",
43
+ "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>',
44
+ "label": {
45
+ "text": "Label",
46
+ "classes": "sr-only"
47
+ },
48
+ "classes": "c-listbox--primary",
49
+ "items": [
50
+ {
51
+ "href": "#",
52
+ "html": "Opción 1"
53
+ },
54
+ {
55
+ "href": "#",
56
+ "text": "Opción 2"
57
+ },
58
+ {
59
+ "href": "#",
60
+ "text": "Opción 3"
61
+ },
62
+ {
63
+ "href": "#",
64
+ "text": "Opción 4"
65
+ },
66
+ {
67
+ "href": "#",
68
+ "text": "Opción 5"
69
+ }
70
+ ]
71
+ }) }}
72
+ </div>
73
+ <div>
74
+ {{ componentListbox({
75
+ "id":"listbox-3",
76
+ "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',
77
+ "label": {
78
+ "text": "Label",
79
+ "classes": "sr-only"
80
+ },
81
+ "classes": "c-listbox--primary",
82
+ "items": [
83
+ {
84
+ "href": "#",
85
+ "html": "Opción 1"
86
+ },
87
+ {
88
+ "href": "#",
89
+ "text": "Opción 2"
90
+ },
91
+ {
92
+ "href": "#",
93
+ "text": "Opción 3"
94
+ },
95
+ {
96
+ "href": "#",
97
+ "text": "Opción 4"
98
+ },
99
+ {
100
+ "href": "#",
101
+ "text": "Opción 5"
102
+ }
103
+ ]
104
+ }) }}
105
+ </div>
106
+ <div>
107
+ {{ componentListbox({
108
+ "id":"listbox-4",
109
+ "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>",
110
+ "label": {
111
+ "text": "Label",
112
+ "classes": "sr-only"
113
+ },
114
+ "classes": "c-listbox--primary align-bottom",
115
+ "items": [
116
+ {
117
+ "href": "#",
118
+ "html": "Opción 1"
119
+ },
120
+ {
121
+ "href": "#",
122
+ "text": "Opción 2"
123
+ },
124
+ {
125
+ "href": "#",
126
+ "text": "Opción 3"
127
+ },
128
+ {
129
+ "href": "#",
130
+ "text": "Opción 4"
131
+ },
132
+ {
133
+ "href": "#",
134
+ "text": "Opción 5"
135
+ }
136
+ ]
137
+ }) }}
138
+ </div>
139
+ </div>
140
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
141
+ <div>
142
+ Transparent
143
+ </div>
144
+ <div>
145
+ {{ componentListbox({
146
+ "id":"listbox-5",
147
+ "text": "Primario",
148
+ "label": {
149
+ "text": "Label",
150
+ "classes": "sr-only"
151
+ },
152
+ "classes": "c-listbox--transparent",
153
+ "items": [
154
+ {
155
+ "href": "#",
156
+ "html": "Opción 1"
157
+ },
158
+ {
159
+ "href": "#",
160
+ "text": "Opción 2"
161
+ },
162
+ {
163
+ "href": "#",
164
+ "text": "Opción 3"
165
+ },
166
+ {
167
+ "href": "#",
168
+ "text": "Opción 4"
169
+ },
170
+ {
171
+ "href": "#",
172
+ "text": "Opción 5"
173
+ }
174
+ ]
175
+ }) }}
176
+ </div>
177
+ <div>
178
+ {{ componentListbox({
179
+ "id":"listbox-6",
180
+ "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>',
181
+ "label": {
182
+ "text": "Label",
183
+ "classes": "sr-only"
184
+ },
185
+ "classes": "c-listbox--transparent",
186
+ "items": [
187
+ {
188
+ "href": "#",
189
+ "html": "Opción 1"
190
+ },
191
+ {
192
+ "href": "#",
193
+ "text": "Opción 2"
194
+ },
195
+ {
196
+ "href": "#",
197
+ "text": "Opción 3"
198
+ },
199
+ {
200
+ "href": "#",
201
+ "text": "Opción 4"
202
+ },
203
+ {
204
+ "href": "#",
205
+ "text": "Opción 5"
206
+ }
207
+ ]
208
+ }) }}
209
+ </div>
210
+ <div>
211
+ {{ componentListbox({
212
+ "id":"listbox-7",
213
+ "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',
214
+ "label": {
215
+ "text": "Label",
216
+ "classes": "sr-only"
217
+ },
218
+ "classes": "c-listbox--transparent",
219
+ "items": [
220
+ {
221
+ "href": "#",
222
+ "html": "Opción 1"
223
+ },
224
+ {
225
+ "href": "#",
226
+ "text": "Opción 2"
227
+ },
228
+ {
229
+ "href": "#",
230
+ "text": "Opción 3"
231
+ },
232
+ {
233
+ "href": "#",
234
+ "text": "Opción 4"
235
+ },
236
+ {
237
+ "href": "#",
238
+ "text": "Opción 5"
239
+ }
240
+ ]
241
+ }) }}
242
+ </div>
243
+ <div>
244
+ {{ componentListbox({
245
+ "id":"listbox-8",
246
+ "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>",
247
+ "label": {
248
+ "text": "Label",
249
+ "classes": "sr-only"
250
+ },
251
+ "classes": "c-listbox--transparent align-bottom",
252
+ "items": [
253
+ {
254
+ "href": "#",
255
+ "html": "Opción 1"
256
+ },
257
+ {
258
+ "href": "#",
259
+ "text": "Opción 2"
260
+ },
261
+ {
262
+ "href": "#",
263
+ "text": "Opción 3"
264
+ },
265
+ {
266
+ "href": "#",
267
+ "text": "Opción 4"
268
+ },
269
+ {
270
+ "href": "#",
271
+ "text": "Opción 5"
272
+ }
273
+ ]
274
+ }) }}
275
+ </div>
276
+ </div>
277
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
278
+ <div>
279
+ Header
280
+ </div>
281
+ <div>
282
+ {{ componentListbox({
283
+ "id":"listbox-9",
284
+ "text": "Primario",
285
+ "label": {
286
+ "text": "Label",
287
+ "classes": "sr-only"
288
+ },
289
+ "classes": "c-listbox--header",
290
+ "items": [
291
+ {
292
+ "href": "#",
293
+ "html": "Opción 1"
294
+ },
295
+ {
296
+ "href": "#",
297
+ "text": "Opción 2"
298
+ },
299
+ {
300
+ "href": "#",
301
+ "text": "Opción 3"
302
+ },
303
+ {
304
+ "href": "#",
305
+ "text": "Opción 4"
306
+ },
307
+ {
308
+ "href": "#",
309
+ "text": "Opción 5"
310
+ }
311
+ ]
312
+ }) }}
313
+ </div>
314
+ <div>
315
+ {{ componentListbox({
316
+ "id":"listbox-10",
317
+ "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>',
318
+ "label": {
319
+ "text": "Label",
320
+ "classes": "sr-only"
321
+ },
322
+ "classes": "c-listbox--header",
323
+ "items": [
324
+ {
325
+ "href": "#",
326
+ "html": "Opción 1"
327
+ },
328
+ {
329
+ "href": "#",
330
+ "text": "Opción 2"
331
+ },
332
+ {
333
+ "href": "#",
334
+ "text": "Opción 3"
335
+ },
336
+ {
337
+ "href": "#",
338
+ "text": "Opción 4"
339
+ },
340
+ {
341
+ "href": "#",
342
+ "text": "Opción 5"
343
+ }
344
+ ]
345
+ }) }}
346
+ </div>
347
+ <div>
348
+ {{ componentListbox({
349
+ "id":"listbox-11",
350
+ "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',
351
+ "label": {
352
+ "text": "Label",
353
+ "classes": "sr-only"
354
+ },
355
+ "classes": "c-listbox--header",
356
+ "items": [
357
+ {
358
+ "href": "#",
359
+ "html": "Opción 1"
360
+ },
361
+ {
362
+ "href": "#",
363
+ "text": "Opción 2"
364
+ },
365
+ {
366
+ "href": "#",
367
+ "text": "Opción 3"
368
+ },
369
+ {
370
+ "href": "#",
371
+ "text": "Opción 4"
372
+ },
373
+ {
374
+ "href": "#",
375
+ "text": "Opción 5"
376
+ }
377
+ ]
378
+ }) }}
379
+ </div>
380
+ <div>
381
+ {{ componentListbox({
382
+ "id":"listbox-12",
383
+ "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>",
384
+ "label": {
385
+ "text": "Label",
386
+ "classes": "sr-only"
387
+ },
388
+ "classes": "c-listbox--header align-bottom",
389
+ "items": [
390
+ {
391
+ "href": "#",
392
+ "html": "Opción 1"
393
+ },
394
+ {
395
+ "href": "#",
396
+ "text": "Opción 2"
397
+ },
398
+ {
399
+ "href": "#",
400
+ "text": "Opción 3"
401
+ },
402
+ {
403
+ "href": "#",
404
+ "text": "Opción 4"
405
+ },
406
+ {
407
+ "href": "#",
408
+ "text": "Opción 5"
409
+ }
410
+ ]
411
+ }) }}
412
+ </div>
413
+ </div>
414
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
415
+ <div>
416
+ Pequeño
417
+ </div>
418
+ <div>
419
+ {{ componentListbox({
420
+ "id":"listbox-13",
421
+ "text": "Primario",
422
+ "label": {
423
+ "text": "Label",
424
+ "classes": "sr-only"
425
+ },
426
+ "classes": "c-listbox--sm",
427
+ "items": [
428
+ {
429
+ "href": "#",
430
+ "html": "Opción 1"
431
+ },
432
+ {
433
+ "href": "#",
434
+ "text": "Opción 2"
435
+ },
436
+ {
437
+ "href": "#",
438
+ "text": "Opción 3"
439
+ },
440
+ {
441
+ "href": "#",
442
+ "text": "Opción 4"
443
+ },
444
+ {
445
+ "href": "#",
446
+ "text": "Opción 5"
447
+ }
448
+ ]
449
+ }) }}
450
+ </div>
451
+ <div>
452
+ {{ componentListbox({
453
+ "id":"listbox-14",
454
+ "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>',
455
+ "label": {
456
+ "text": "Label",
457
+ "classes": "sr-only"
458
+ },
459
+ "classes": "c-listbox--sm",
460
+ "items": [
461
+ {
462
+ "href": "#",
463
+ "html": "Opción 1"
464
+ },
465
+ {
466
+ "href": "#",
467
+ "text": "Opción 2"
468
+ },
469
+ {
470
+ "href": "#",
471
+ "text": "Opción 3"
472
+ },
473
+ {
474
+ "href": "#",
475
+ "text": "Opción 4"
476
+ },
477
+ {
478
+ "href": "#",
479
+ "text": "Opción 5"
480
+ }
481
+ ]
482
+ }) }}
483
+ </div>
484
+ <div>
485
+ {{ componentListbox({
486
+ "id":"listbox-15",
487
+ "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',
488
+ "label": {
489
+ "text": "Label",
490
+ "classes": "sr-only"
491
+ },
492
+ "classes": "c-listbox--sm",
493
+ "items": [
494
+ {
495
+ "href": "#",
496
+ "html": "Opción 1"
497
+ },
498
+ {
499
+ "href": "#",
500
+ "text": "Opción 2"
501
+ },
502
+ {
503
+ "href": "#",
504
+ "text": "Opción 3"
505
+ },
506
+ {
507
+ "href": "#",
508
+ "text": "Opción 4"
509
+ },
510
+ {
511
+ "href": "#",
512
+ "text": "Opción 5"
513
+ }
514
+ ]
515
+ }) }}
516
+ </div>
517
+ <div>
518
+ {{ componentListbox({
519
+ "id":"listbox-16",
520
+ "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>",
521
+ "label": {
522
+ "text": "Label",
523
+ "classes": "sr-only"
524
+ },
525
+ "classes": "c-listbox--sm align-bottom",
526
+ "items": [
527
+ {
528
+ "href": "#",
529
+ "html": "Opción 1"
530
+ },
531
+ {
532
+ "href": "#",
533
+ "text": "Opción 2"
534
+ },
535
+ {
536
+ "href": "#",
537
+ "text": "Opción 3"
538
+ },
539
+ {
540
+ "href": "#",
541
+ "text": "Opción 4"
542
+ },
543
+ {
544
+ "href": "#",
545
+ "text": "Opción 5"
546
+ }
547
+ ]
548
+ }) }}
549
+ </div>
550
+ </div>
551
+ <div class="grid lg:grid-cols-5 gap-xl mb-lg">
552
+ <div>
553
+ Pequeño tiene selección
554
+ </div>
555
+ <div>
556
+ {{ componentListbox({
557
+ "id":"listbox-17",
558
+ "text": "Primario",
559
+ "label": {
560
+ "text": "Label",
561
+ "classes": "sr-only"
562
+ },
563
+ "classes": "c-listbox--sm c-listbox--has-selection",
564
+ "items": [
565
+ {
566
+ "href": "#",
567
+ "html": "Opción 1"
568
+ },
569
+ {
570
+ "href": "#",
571
+ "text": "Opción 2"
572
+ },
573
+ {
574
+ "href": "#",
575
+ "text": "Opción 3"
576
+ },
577
+ {
578
+ "href": "#",
579
+ "text": "Opción 4"
580
+ },
581
+ {
582
+ "href": "#",
583
+ "text": "Opción 5"
584
+ }
585
+ ]
586
+ }) }}
587
+ </div>
588
+ <div>
589
+ {{ componentListbox({
590
+ "id":"listbox-18",
591
+ "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>',
592
+ "label": {
593
+ "text": "Label",
594
+ "classes": "sr-only"
595
+ },
596
+ "classes": "c-listbox--sm c-listbox--has-selection",
597
+ "items": [
598
+ {
599
+ "href": "#",
600
+ "html": "Opción 1"
601
+ },
602
+ {
603
+ "href": "#",
604
+ "text": "Opción 2"
605
+ },
606
+ {
607
+ "href": "#",
608
+ "text": "Opción 3"
609
+ },
610
+ {
611
+ "href": "#",
612
+ "text": "Opción 4"
613
+ },
614
+ {
615
+ "href": "#",
616
+ "text": "Opción 5"
617
+ }
618
+ ]
619
+ }) }}
620
+ </div>
621
+ <div>
622
+ {{ componentListbox({
623
+ "id":"listbox-19",
624
+ "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',
625
+ "label": {
626
+ "text": "Label",
627
+ "classes": "sr-only"
628
+ },
629
+ "classes": "c-listbox--sm c-listbox--has-selection",
630
+ "items": [
631
+ {
632
+ "href": "#",
633
+ "html": "Opción 1"
634
+ },
635
+ {
636
+ "href": "#",
637
+ "text": "Opción 2"
638
+ },
639
+ {
640
+ "href": "#",
641
+ "text": "Opción 3"
642
+ },
643
+ {
644
+ "href": "#",
645
+ "text": "Opción 4"
646
+ },
647
+ {
648
+ "href": "#",
649
+ "text": "Opción 5"
650
+ }
651
+ ]
652
+ }) }}
653
+ </div>
654
+ <div>
655
+ {{ componentListbox({
656
+ "id":"listbox-20",
657
+ "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>",
658
+ "label": {
659
+ "text": "Label",
660
+ "classes": "sr-only"
661
+ },
662
+ "classes": "c-listbox--sm c-listbox--has-selection align-bottom",
663
+ "items": [
664
+ {
665
+ "href": "#",
666
+ "html": "Opción 1"
667
+ },
668
+ {
669
+ "href": "#",
670
+ "text": "Opción 2"
671
+ },
672
+ {
673
+ "href": "#",
674
+ "text": "Opción 3"
675
+ },
676
+ {
677
+ "href": "#",
678
+ "text": "Opción 4"
679
+ },
680
+ {
681
+ "href": "#",
682
+ "text": "Opción 5"
683
+ }
684
+ ]
685
+ }) }}
686
+ </div>
687
+ </div>