desy-html 11.2.0 → 12.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (117) hide show
  1. package/docs/_global.foot.njk +1 -1
  2. package/docs/_macro.example-render.njk +62 -18
  3. package/docs/ds/_ds.section.textos.njk +1 -1
  4. package/docs/index.html +10 -0
  5. package/docs/pagina-prueba.html +2 -2
  6. package/package.json +2 -2
  7. package/src/css/component.text.css +0 -1
  8. package/src/js/aria/utils.js +80 -15
  9. package/src/js/desy-html.js +239 -196
  10. package/src/js/filters/filter-caller.js +4 -2
  11. package/src/js/filters/filter-escape-ltgt.js +7 -0
  12. package/src/js/filters/filter-quotes.js +50 -0
  13. package/src/js/filters/filter-version.js +8 -0
  14. package/src/js/filters/index.js +7 -1
  15. package/src/templates/components/accordion/_examples.accordion.njk +107 -107
  16. package/src/templates/components/accordion/_template.accordion.njk +5 -5
  17. package/src/templates/components/accordion-history/_examples.accordion-history.njk +119 -119
  18. package/src/templates/components/accordion-history/_template.accordion-history.njk +11 -11
  19. package/src/templates/components/alert/_examples.alert.njk +2 -2
  20. package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +4 -4
  21. package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +4 -4
  22. package/src/templates/components/button/_examples.button.njk +19 -19
  23. package/src/templates/components/button/_template.button.njk +2 -2
  24. package/src/templates/components/button-loader/_examples.button-loader.njk +17 -17
  25. package/src/templates/components/button-loader/_template.button-loader.njk +2 -2
  26. package/src/templates/components/card/_examples.card.njk +3 -3
  27. package/src/templates/components/card/_template.card.njk +4 -4
  28. package/src/templates/components/character-count/_examples.character-count.njk +2 -2
  29. package/src/templates/components/checkboxes/_examples.checkboxes.njk +6 -6
  30. package/src/templates/components/checkboxes/_template.checkboxes.njk +2 -2
  31. package/src/templates/components/collapsible/_examples.collapsible.njk +4 -4
  32. package/src/templates/components/collapsible/_template.collapsible.njk +1 -1
  33. package/src/templates/components/date-input/_template.date-input.njk +1 -1
  34. package/src/templates/components/datepicker/_examples.datepicker.njk +45 -62
  35. package/src/templates/components/datepicker/_styles.datepicker.css +4 -0
  36. package/src/templates/components/datepicker/_template.datepicker.njk +10 -2
  37. package/src/templates/components/description-list/_examples.description-list.njk +3 -3
  38. package/src/templates/components/description-list/_template.description-list.njk +2 -2
  39. package/src/templates/components/details/_examples.details.njk +3 -3
  40. package/src/templates/components/details/_template.details.njk +1 -1
  41. package/src/templates/components/dialog/_examples.dialog.njk +4 -4
  42. package/src/templates/components/dropdown/_examples.dropdown.njk +31 -17
  43. package/src/templates/components/dropdown/_template.dropdown.njk +1 -1
  44. package/src/templates/components/error-message/_examples.error-message.njk +1 -1
  45. package/src/templates/components/error-message/_template.error-message.njk +1 -1
  46. package/src/templates/components/error-summary/_template.error-summary.njk +2 -2
  47. package/src/templates/components/fieldset/_examples.fieldset.njk +3 -3
  48. package/src/templates/components/fieldset/_template.fieldset.njk +7 -7
  49. package/src/templates/components/footer/_examples.footer.njk +32 -32
  50. package/src/templates/components/footer/_template.footer.njk +6 -6
  51. package/src/templates/components/header/_examples.header.njk +14 -8
  52. package/src/templates/components/header/_template.header.header__navigation.njk +2 -2
  53. package/src/templates/components/header/_template.header.header__offcanvasButton.njk +1 -1
  54. package/src/templates/components/header/_template.header.header__subnav.njk +1 -1
  55. package/src/templates/components/header/_template.header.njk +2 -2
  56. package/src/templates/components/header-advanced/_examples.header-advanced.njk +14 -8
  57. package/src/templates/components/header-advanced/_template.header-advanced.njk +3 -3
  58. package/src/templates/components/header-mini/_examples.header-mini.njk +3 -3
  59. package/src/templates/components/header-mini/_template.header-mini.njk +2 -2
  60. package/src/templates/components/hint/_examples.hint.njk +1 -1
  61. package/src/templates/components/hint/_template.hint.njk +1 -1
  62. package/src/templates/components/input/_examples.input.njk +7 -7
  63. package/src/templates/components/input-group/_examples.input-group.njk +1 -1
  64. package/src/templates/components/input-group/_template.input-group.njk +1 -1
  65. package/src/templates/components/item/_examples.item.njk +23 -23
  66. package/src/templates/components/item/_template.item.njk +9 -9
  67. package/src/templates/components/label/_examples.label.njk +2 -2
  68. package/src/templates/components/label/_template.label.njk +1 -1
  69. package/src/templates/components/links-list/_examples.links-list.njk +29 -32
  70. package/src/templates/components/links-list/_template.links-list.njk +11 -11
  71. package/src/templates/components/listbox/_examples.listbox.njk +16 -16
  72. package/src/templates/components/listbox/_template.listbox.njk +3 -3
  73. package/src/templates/components/media-object/_examples.media-object.njk +5 -5
  74. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +16 -16
  75. package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +2 -2
  76. package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +6 -6
  77. package/src/templates/components/menu-navigation/_template.menu-navigation.njk +4 -4
  78. package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +8 -8
  79. package/src/templates/components/menu-vertical/_template.menu-vertical.njk +9 -9
  80. package/src/templates/components/menubar/_examples.menubar.njk +16 -16
  81. package/src/templates/components/menubar/_template.menubar.njk +7 -7
  82. package/src/templates/components/modal/_examples.modal.njk +18 -18
  83. package/src/templates/components/modal/_template.modal.njk +8 -8
  84. package/src/templates/components/nav/_examples.nav.njk +7 -7
  85. package/src/templates/components/nav/_template.nav.njk +2 -2
  86. package/src/templates/components/notification/_examples.notification.njk +9 -9
  87. package/src/templates/components/notification/_template.notification.njk +11 -11
  88. package/src/templates/components/pagination/_examples.pagination.njk +6 -6
  89. package/src/templates/components/pagination/_template.pagination.njk +3 -3
  90. package/src/templates/components/pill/_examples.pill.njk +8 -8
  91. package/src/templates/components/pill/_template.pill.njk +3 -3
  92. package/src/templates/components/radios/_examples.radios.njk +2 -2
  93. package/src/templates/components/radios/_template.radios.njk +1 -1
  94. package/src/templates/components/select/_examples.select.njk +1 -1
  95. package/src/templates/components/skip-link/_examples.skip-link.njk +1 -1
  96. package/src/templates/components/skip-link/_template.skip-link.njk +1 -1
  97. package/src/templates/components/status/_examples.status.njk +1 -1
  98. package/src/templates/components/status/_template.status.njk +1 -1
  99. package/src/templates/components/status-item/_examples.status-item.njk +15 -15
  100. package/src/templates/components/status-item/_template.status-item.njk +3 -3
  101. package/src/templates/components/table/_examples.table.njk +3 -3
  102. package/src/templates/components/table/_template.table.njk +2 -2
  103. package/src/templates/components/table-advanced/_examples.table-advanced.njk +7 -7
  104. package/src/templates/components/table-advanced/_template.table-advanced.njk +5 -5
  105. package/src/templates/components/tabs/_examples.tabs.njk +19 -19
  106. package/src/templates/components/tabs/_styles.tabs.css +2 -2
  107. package/src/templates/components/tabs/_template.tabs.njk +7 -7
  108. package/src/templates/components/textarea/_examples.textarea.njk +2 -2
  109. package/src/templates/components/toggle/_examples.toggle.njk +29 -29
  110. package/src/templates/components/toggle/_template.toggle.njk +2 -2
  111. package/src/templates/components/tooltip/_examples.tooltip.njk +11 -11
  112. package/src/templates/components/tooltip/_template.tooltip.njk +3 -3
  113. package/src/templates/components/tree/_examples.tree.njk +12 -60
  114. package/src/templates/components/tree/_template.tree.njk +4 -4
  115. package/src/templates/includes/_test-include.njk +2 -2
  116. package/src/templates/pages/_page.footer.njk +1 -1
  117. package/src/templates/pages/_template.logged-selector-subheader.njk +1 -1
package/src/templates/components/accordion-history/_examples.accordion-history.njk CHANGED
@@ -2,56 +2,56 @@
2
2
  {% set examples = [
3
3
  {
4
4
  "name": "Por defecto",
5
- "description": 'Si abres uno, se cierran el resto. Una vez que abres un item, se mantiene al menos un item abierto. Asume que <code>allowmultiple: false</code> y <code>allowToggle: false</code> aunque no se defina expresamente.',
5
+ "description": "Si abres uno, se cierran el resto. Una vez que abres un item, se mantiene al menos un item abierto. Asume que <code>allowmultiple: false</code> y <code>allowToggle: false</code> aunque no se defina expresamente.",
6
6
  "data": {
7
7
  "idPrefix": "accordion-example",
8
8
  "headingLevel": 3,
9
9
  "items": [
10
10
  {
11
- "headerText": "Item de acordeón 1",
12
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
11
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
12
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
13
13
  },
14
14
  {
15
- "headerText": "Item de acordeón 2",
16
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
15
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
16
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
17
17
  },
18
18
  {
19
- "headerText": "Item de acordeón 3",
20
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
19
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
20
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
21
21
  }
22
22
  ]
23
23
  }
24
24
  },
25
25
  {
26
26
  "name": "Con estado",
27
- "description": 'Usa el parámetro <code>"status": past/current/pending</code> para establecer su apariencia de estado pasado, actual, pendiente. Usa el parámetro <code>"status": muted/currentmuted</code> para establecer su apariencia de estado muteado, actual muteado, que lo utilizamos para eventos sobre los que ya no se puede actuar.',
27
+ "description": "Usa el parámetro <code>'status': past/current/pending</code> para establecer su apariencia de estado pasado, actual, pendiente. Usa el parámetro <code>'status': muted/currentmuted</code> para establecer su apariencia de estado muteado, actual muteado, que lo utilizamos para eventos sobre los que ya no se puede actuar.",
28
28
  "data": {
29
29
  "idPrefix": "accordion-status",
30
30
  "headingLevel": 3,
31
31
  "items": [
32
32
  {
33
- "headerText": "Item de acordeón muteado",
34
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
33
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón muteado</span>",
34
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
35
35
  "status": "muted"
36
36
  },
37
37
  {
38
- "headerText": "Item de acordeón actual muteado",
39
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
38
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón actual muteado</span>",
39
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
40
40
  "status": "currentmuted"
41
41
  },
42
42
  {
43
- "headerText": "Item de acordeón pasado",
44
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
43
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón pasado</span>",
44
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
45
45
  "status": "past"
46
46
  },
47
47
  {
48
- "headerText": "Item de acordeón actual",
49
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
48
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón actual</span>",
49
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
50
50
  "status": "current"
51
51
  },
52
52
  {
53
- "headerText": "Item de acordeón pendiente",
54
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
53
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón pendiente</span>",
54
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
55
55
  "status": "pending"
56
56
  }
57
57
  ]
@@ -59,30 +59,30 @@
59
59
  },
60
60
  {
61
61
  "name": "Permite múltiples",
62
- "description": 'Permite tener abiertos varios items a la vez sin cerrar automáticamente ninguno. Define <code>allowmultiple: true</code> y asume que <code>allowToggle: true</code>.',
62
+ "description": "Permite tener abiertos varios items a la vez sin cerrar automáticamente ninguno. Define <code>allowmultiple: true</code> y asume que <code>allowToggle: true</code>.",
63
63
  "data": {
64
64
  "idPrefix": "allowmultiple-example",
65
65
  "headingLevel": 3,
66
66
  "allowMultiple": true,
67
67
  "items": [
68
68
  {
69
- "headerText": "Item de acordeón 1",
70
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
69
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
70
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
71
71
  },
72
72
  {
73
- "headerText": "Item de acordeón 2",
74
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
73
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
74
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
75
75
  },
76
76
  {
77
- "headerText": "Item de acordeón 3",
78
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
77
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
78
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
79
79
  }
80
80
  ]
81
81
  }
82
82
  },
83
83
  {
84
84
  "name": "Permite cerrar",
85
- "description": 'Si abres uno, se cierran el resto. Permite que cierres el que está abierto para que queden todos cerrados. Define <code>allowToggle: true</code> y asume que <code>allowMultiple: false</code>.',
85
+ "description": "Si abres uno, se cierran el resto. Permite que cierres el que está abierto para que queden todos cerrados. Define <code>allowToggle: true</code> y asume que <code>allowMultiple: false</code>.",
86
86
  "data": {
87
87
  "idPrefix": "allowtoggle-example",
88
88
  "headingLevel": 3,
@@ -90,40 +90,40 @@
90
90
  "showControl": false,
91
91
  "items": [
92
92
  {
93
- "headerText": "Item de acordeón 1",
94
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
93
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
94
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
95
95
  },
96
96
  {
97
- "headerText": "Item de acordeón 2",
98
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
97
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
98
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
99
99
  },
100
100
  {
101
- "headerText": "Item de acordeón 3",
102
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
101
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
102
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
103
103
  }
104
104
  ]
105
105
  }
106
106
  },
107
107
  {
108
108
  "name": "Con un item abierto",
109
- "description": 'Podemos abrir inicialmente un item si le añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemId)</code> para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion-history", "with-one-item-opened-example-1-title")</code> para cerrar el item actual y abrir el primer item de este ejemplo.',
109
+ "description": "Podemos abrir inicialmente un item si le añadimos el parámetro <code>'open': true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemId)</code> para abrir un item, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion('accordion-history', 'with-one-item-opened-example-1-title')</code> para cerrar el item actual y abrir el primer item de este ejemplo.",
110
110
  "data": {
111
111
  "idPrefix": "with-one-item-opened-example",
112
112
  "headingLevel": 3,
113
113
  "allowToggle": true,
114
114
  "items": [
115
115
  {
116
- "headerText": "Item de acordeón 1",
117
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
116
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
117
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
118
118
  },
119
119
  {
120
- "headerText": "Item de acordeón 2",
121
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
120
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
121
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
122
122
  "open": true
123
123
  },
124
124
  {
125
- "headerText": "Item de acordeón 3",
126
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
125
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
126
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
127
127
  }
128
128
  ],
129
129
  "attributes": {
@@ -133,24 +133,24 @@
133
133
  },
134
134
  {
135
135
  "name": "Con 2 items abiertos",
136
- "description": 'Podemos abrir inicialmente items si les añadimos el parámetro <code>"open": true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemsIds)</code> para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion("accordion-history-multiple", ["with-2-items-opened-example-2-title", "with-2-items-opened-example-3-title"])</code>.',
136
+ "description": "Podemos abrir inicialmente items si les añadimos el parámetro <code>'open': true</code>. También puedes usar con javascript la función global <code>activateItemAccordion(elementMenu, activeItemsIds)</code> para abrir varios items, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemAccordion('accordion-history-multiple', ['with-2-items-opened-example-2-title', 'with-2-items-opened-example-3-title'])</code>.",
137
137
  "data": {
138
138
  "idPrefix": "with-2-items-opened-example",
139
139
  "headingLevel": 3,
140
140
  "allowMultiple": true,
141
141
  "items": [
142
142
  {
143
- "headerText": "Item de acordeón 1",
144
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
143
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
144
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
145
145
  "open": true
146
146
  },
147
147
  {
148
- "headerText": "Item de acordeón 2",
149
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
148
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
149
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
150
150
  },
151
151
  {
152
- "headerText": "Item de acordeón 3",
153
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
152
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
153
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
154
154
  "open": true
155
155
  }
156
156
  ],
@@ -161,7 +161,7 @@
161
161
  },
162
162
  {
163
163
  "name": "Deshabilitados con allowToggle y allowMultiple",
164
- "description": 'Ocultará la infomación de mostrar/ocultar y deshabilitará el item para no poder ser clicado. Usando el parámetro <code>"disabled": true</code>.',
164
+ "description": "Ocultará la infomación de mostrar/ocultar y deshabilitará el item para no poder ser clicado. Usando el parámetro <code>'disabled': true</code>.",
165
165
  "data": {
166
166
  "idPrefix": "accordion-disabled",
167
167
  "headingLevel": 3,
@@ -169,17 +169,17 @@
169
169
  "allowMultiple": true,
170
170
  "items": [
171
171
  {
172
- "headerText": "Item de acordeón not deshabilitado",
173
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
172
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón no deshabilitado</span>",
173
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
174
174
  },
175
175
  {
176
- "headerText": "Item de acordeón deshabilitado",
177
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
176
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón deshabilitado</span>",
177
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
178
178
  "disabled": true
179
179
  },
180
180
  {
181
- "headerText": "Item de acordeón disabled and open",
182
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
181
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón deshabilitado y abierto</span>",
182
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
183
183
  "disabled": true,
184
184
  "open": true
185
185
  }
@@ -188,7 +188,7 @@
188
188
  },
189
189
  {
190
190
  "name": "Con encabezado",
191
- "description": 'Usa el parámetro <code>"heading"</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. Por ejemplo: <code>"headingLevel": 3</code> creará un encabezado <code>&lt;h3&gt;</code>.',
191
+ "description": "Usa el parámetro <code>'heading'</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
192
192
  "data": {
193
193
  "idPrefix": "heading-example",
194
194
  "headingLevel": 3,
@@ -197,48 +197,48 @@
197
197
  },
198
198
  "items": [
199
199
  {
200
- "headerText": "Item de acordeón 1",
201
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
200
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
201
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
202
202
  },
203
203
  {
204
- "headerText": "Item de acordeón 2",
205
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
204
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
205
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
206
206
  },
207
207
  {
208
- "headerText": "Item de acordeón 3",
209
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
208
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
209
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
210
210
  }
211
211
  ]
212
212
  }
213
213
  },
214
214
  {
215
215
  "name": "Con encabezado de nivel 4",
216
- "description": 'Usa el parámetro <code>"heading"</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>"headingLevel"</code> para establecer el nivel del encabezado. En este ejemplo: <code>"headingLevel": 4</code> creará un encabezado de componente <code>&lt;h4&gt;</code> y los botones interiores tendrán los siguientes niveles de encabezado para conservar la jerarquía de encabezados correspondiente: en este caso <code>&lt;h5&gt;</code>.',
216
+ "description": "Usa el parámetro <code>'heading'</code> para añadir un encabezado asociado al componente. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. En este ejemplo: <code>'headingLevel': 4</code> creará un encabezado de componente <code>&lt;h4&gt;</code> y los botones interiores tendrán los siguientes niveles de encabezado para conservar la jerarquía de encabezados correspondiente: en este caso <code>&lt;h5&gt;</code>.",
217
217
  "data": {
218
218
  "idPrefix": "accordion-heading-level-example",
219
219
  "headingLevel": 4,
220
220
  "heading": {
221
- "text": "This header starts with h4"
221
+ "text": "Este encabezado con h4"
222
222
  },
223
223
  "items": [
224
224
  {
225
- "headerText": "This is Item 1 with h5",
226
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
225
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 1 con &lt;h5&gt;</span>",
226
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
227
227
  },
228
228
  {
229
- "headerText": "This is Item 2 with h5",
230
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
229
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 2 con &lt;h5&gt;</span>",
230
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
231
231
  },
232
232
  {
233
- "headerText": "This is Item 3 with h5",
234
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
233
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Este Item 3 con &lt;h5&gt;</span>",
234
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
235
235
  }
236
236
  ]
237
237
  }
238
238
  },
239
239
  {
240
240
  "name": "Con encabezado y controles de Mostrar todo",
241
- "description": 'Usa el parámetro <code>"showControl": true</code> para mostrar un controlador que permite mostrar/ocultar todos los items de una vez.',
241
+ "description": "Usa el parámetro <code>'showControl': true</code> para mostrar un controlador que permite mostrar/ocultar todos los items de una vez.",
242
242
  "data": {
243
243
  "idPrefix": "heading-and-show-controls-example",
244
244
  "headingLevel": 3,
@@ -249,24 +249,24 @@
249
249
  "allowMultiple": true,
250
250
  "items": [
251
251
  {
252
- "headerText": "Item de acordeón 1",
253
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
252
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
253
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
254
254
  },
255
255
  {
256
- "headerText": "Item de acordeón 2",
257
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
256
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
257
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
258
258
  "open": true
259
259
  },
260
260
  {
261
- "headerText": "Item de acordeón 3",
262
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
261
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
262
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
263
263
  }
264
264
  ]
265
265
  }
266
266
  },
267
267
  {
268
268
  "name": "Mostrar todo u ocultar todo con JavaScript",
269
- "description": 'Es necesario usar el parámetro <code>"showControl": true</code>. Puedes usar con javascript la función global <code>activateAllAccordion(element, show)</code>, para mostrar u ocultar todos los items, usando el id del botón, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateAllAccordion("show-all-accordion-history-button-js", true)</code> para mostrar todos los items expandidos.',
269
+ "description": "Es necesario usar el parámetro <code>'showControl': true</code>. Puedes usar con javascript la función global <code>activateAllAccordion(element, show)</code>, para mostrar u ocultar todos los items, usando el id del botón, el parámetro <code>show</code> admite <code>true</code> o <code>false</code>, si le pasamos true se mostrarán todos los items expandidos, y si le pasamos false se mostrarán cerrados. Ej: Abre la consola del navegador y escribe <code>activateAllAccordion('show-all-accordion-history-button-js', true)</code> para mostrar todos los items expandidos.",
270
270
  "data": {
271
271
  "idPrefix": "show-all-accordion-example-history-js",
272
272
  "id": "show-all-accordion-history-button-js",
@@ -278,32 +278,32 @@
278
278
  "allowMultiple": true,
279
279
  "items": [
280
280
  {
281
- "headerText": "Item de acordeón 1",
282
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
281
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
282
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
283
283
  },
284
284
  {
285
- "headerText": "Item de acordeón 2",
286
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
285
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
286
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
287
287
  "open": true
288
288
  },
289
289
  {
290
- "headerText": "Item de acordeón 3",
291
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
290
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
291
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
292
292
  }
293
293
  ]
294
294
  }
295
295
  },
296
296
  {
297
297
  "name": "Con controles personalizados para mostrar/ocultar",
298
- "description": 'Usa los parámetros <code>"show"</code> y <code>"hide"</code> para personalizar los controles que permiten abrir cada item. El último item de este ejemplo no muestra ningún controlador visible.',
298
+ "description": "Usa los parámetros <code>'show'</code> y <code>'hide'</code> para personalizar los controles que permiten abrir cada item. El último item de este ejemplo no muestra ningún controlador visible.",
299
299
  "data": {
300
300
  "idPrefix": "accordion-show-hide",
301
301
  "headingLevel": 3,
302
302
  "allowMultiple": true,
303
303
  "items": [
304
304
  {
305
- "headerText": "Item de acordeón 1",
306
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
305
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
306
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
307
307
  "show": {
308
308
  "text": "Expandir detalles"
309
309
  },
@@ -312,31 +312,31 @@
312
312
  }
313
313
  },
314
314
  {
315
- "headerText": "Item de acordeón 2",
316
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
315
+ "headerHtml": "<span class='block pr-lg pointer-events-none'>Item de acordeón 2</span>",
316
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
317
317
  "show": {
318
- "html": '<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z" fill="currentColor" transform="scale(3.42857)"/></svg>'
318
+ "html": "<svg class='w-4 h-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M14 7a1 1 0 0 0-1-1H8.25A.25.25 0 0 1 8 5.75V1a1 1 0 0 0-2 0v4.75a.25.25 0 0 1-.25.25H1a1 1 0 0 0 0 2h4.75a.25.25 0 0 1 .25.25V13a1 1 0 0 0 2 0V8.25A.25.25 0 0 1 8.25 8H13a1 1 0 0 0 1-1Z' fill='currentColor' transform='scale(3.42857)'/></svg>"
319
319
  },
320
320
  "hide": {
321
- "html": '<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z" fill="currentColor" transform="scale(3.42857)"/></svg>'
321
+ "html": "<svg class='w-4 h-4' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><path d='M13 8H1a1 1 0 0 1 0-2h12a1 1 0 0 1 0 2Z' fill='currentColor' transform='scale(3.42857)'/></svg>"
322
322
  }
323
323
  },
324
324
  {
325
- "headerText": "Item de acordeón 3",
326
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
325
+ "headerHtml": "<span class='block pr-lg pointer-events-none'>Item de acordeón 3</span>",
326
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
327
327
  "show": {
328
- "html": '<div class="c-link">
329
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="-0.5 -0.5 16 16" xml:space="preserve" height="1.25em" width="1.25em"><path d="M7.5 12.1875c-0.4375 0 -0.8125 -0.1875 -1.0625 -0.5L0.25 4.75c-0.375 -0.5 -0.3125 -1.25 0.1875 -1.625 0.5 -0.375 1.1875 -0.375 1.5625 0.125l5.375 6.125c0.0625 0.0625 0.125 0.0625 0.25 0l5.375 -6.125c0.4375 -0.5 1.125 -0.5625 1.625 -0.125s0.5625 1.125 0.125 1.625l-0.0625 0.0625 -6.125 6.9375c-0.25 0.25 -0.6875 0.4375 -1.0625 0.4375z" fill="currentColor" stroke-width="1"></path></svg>
330
- </div>'
328
+ "html": "<span class='c-link'>
329
+ <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='-0.5 -0.5 16 16' xml:space='preserve' height='1.25em' width='1.25em'><path d='M7.5 12.1875c-0.4375 0 -0.8125 -0.1875 -1.0625 -0.5L0.25 4.75c-0.375 -0.5 -0.3125 -1.25 0.1875 -1.625 0.5 -0.375 1.1875 -0.375 1.5625 0.125l5.375 6.125c0.0625 0.0625 0.125 0.0625 0.25 0l5.375 -6.125c0.4375 -0.5 1.125 -0.5625 1.625 -0.125s0.5625 1.125 0.125 1.625l-0.0625 0.0625 -6.125 6.9375c-0.25 0.25 -0.6875 0.4375 -1.0625 0.4375z' fill='currentColor' stroke-width='1'></path></svg>
330
+ </span>"
331
331
  },
332
332
  "hide": {
333
- "html": '<div class="c-link">
334
- <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="-0.5 -0.5 16 16" xml:space="preserve" height="1.25em" width="1.25em"><path d="M7.5625 2.8125c0.4375 0 0.8125 0.1875 1.0625 0.5l6.0625 6.875c0.4375 0.4375 0.375 1.1875 -0.0625 1.625s-1.1875 0.375 -1.625 -0.0625l-0.0625 -0.0625 -5.3125 -6c-0.0625 -0.0625 -0.125 -0.0625 -0.25 0l-5.3125 6c-0.4375 0.5 -1.125 0.5625 -1.625 0.125s-0.5625 -1.125 -0.125 -1.625l0.0625 -0.0625 6.0625 -6.875c0.3125 -0.25 0.6875 -0.4375 1.125 -0.4375z" fill="currentColor" stroke-width="1"></path></svg></div>'
333
+ "html": "<span class='c-link'>
334
+ <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' viewBox='-0.5 -0.5 16 16' xml:space='preserve' height='1.25em' width='1.25em'><path d='M7.5625 2.8125c0.4375 0 0.8125 0.1875 1.0625 0.5l6.0625 6.875c0.4375 0.4375 0.375 1.1875 -0.0625 1.625s-1.1875 0.375 -1.625 -0.0625l-0.0625 -0.0625 -5.3125 -6c-0.0625 -0.0625 -0.125 -0.0625 -0.25 0l-5.3125 6c-0.4375 0.5 -1.125 0.5625 -1.625 0.125s-0.5625 -1.125 -0.125 -1.625l0.0625 -0.0625 6.0625 -6.875c0.3125 -0.25 0.6875 -0.4375 1.125 -0.4375z' fill='currentColor' stroke-width='1'></path></svg></span>"
335
335
  }
336
336
  },
337
337
  {
338
- "headerText": "Item de acordeón 4",
339
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
338
+ "headerHtml": "Item de acordeón 4",
339
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
340
340
  "show": {
341
341
  "text": ""
342
342
  },
@@ -349,54 +349,54 @@
349
349
  },
350
350
  {
351
351
  "name": "Con HTML en las cabeceras de los items",
352
- "description": 'Podemos añadir texto adicional bajo las cabeceras de los items. Para evitar problemas de eventos el el click, usamos la clase <code>pointer-events-none</code> en los subelementos.',
352
+ "description": "Podemos añadir texto adicional bajo las cabeceras de los items. Para evitar problemas de eventos el el click, usamos la clase <code>pointer-events-none</code> en los subelementos.",
353
353
  "data": {
354
354
  "idPrefix": "accordion-example-pointer-events-none",
355
355
  "headingLevel": 3,
356
356
  "items": [
357
357
  {
358
- "headerHtml": '<span class="block pointer-events-none">Item de acordeón 1</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
359
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
358
+ "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 1</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
359
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
360
360
  },
361
361
  {
362
- "headerHtml": '<span class="block pointer-events-none">Item de acordeón 2</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
363
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
362
+ "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 2</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
363
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
364
364
  },
365
365
  {
366
- "headerHtml": '<span class="block pointer-events-none">Item de acordeón 3</span><span class="block pointer-events-none font-normal">El subelemento también recibe eventos</span>',
367
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
366
+ "headerHtml": "<span class='block pointer-events-none'>Item de acordeón 3</span><span class='block pointer-events-none font-normal'>El subelemento también recibe eventos</span>",
367
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
368
368
  }
369
369
  ]
370
370
  }
371
371
  },
372
372
  {
373
373
  "name": "Con clases de CSS aplicadas",
374
- "description": 'Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.',
374
+ "description": "Los parámetros <code>classes</code> nos permiten aplicar clases de Tailwind CSS a nuestro componente.",
375
375
  "data": {
376
376
  "idPrefix": "classes-example",
377
377
  "headingLevel": 3,
378
378
  "classes": "px-lg pt-base border-t border-b border-neutral-base",
379
379
  "items": [
380
380
  {
381
- "headerText": "Item de acordeón 1",
382
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
381
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
382
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
383
383
  },
384
384
  {
385
- "headerText": "Item de acordeón 2",
386
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-white rounded-lg h-40"></div></div>',
385
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
386
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-white rounded-lg h-40'></div></div>",
387
387
  "classes": "p-sm bg-primary-light",
388
388
  "open": true
389
389
  },
390
390
  {
391
- "headerText": "Item de acordeón 3",
392
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>'
391
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
392
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>"
393
393
  }
394
394
  ]
395
395
  }
396
396
  },
397
397
  {
398
398
  "name": "Con atributos aplicados",
399
- "description": 'Los parámetros <code>attributes</code> nos permiten aplicar atributos de HTML a nuestro componente, como por ejemplo <code>id</code> o etiquetas ARIA como <code>aria-label</code>. Mira el código para ver los atributos aplicados.',
399
+ "description": "Los parámetros <code>attributes</code> nos permiten aplicar atributos de HTML a nuestro componente, como por ejemplo <code>id</code> o etiquetas ARIA como <code>aria-label</code>. Mira el código para ver los atributos aplicados.",
400
400
  "data": {
401
401
  "idPrefix": "attributes-example",
402
402
  "headingLevel": 3,
@@ -405,22 +405,22 @@
405
405
  },
406
406
  "items": [
407
407
  {
408
- "headerText": "Item de acordeón 1",
409
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
408
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 1</span>",
409
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
410
410
  "attributes": {
411
411
  "data-attr": "accordion-item-test-a"
412
412
  }
413
413
  },
414
414
  {
415
- "headerText": "Item de acordeón 2",
416
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
415
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 2</span>",
416
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
417
417
  "attributes": {
418
418
  "data-attr": "accordion-item-test-b"
419
419
  }
420
420
  },
421
421
  {
422
- "headerText": "Item de acordeón 3",
423
- "html": '<div class="w-48 p-2"><div class="border-4 border-dashed border-neutral-light rounded-lg h-40"></div></div>',
422
+ "headerHtml": "<span class='block pr-2xl pointer-events-none'>Item de acordeón 3</span>",
423
+ "html": "<div class='w-48 p-2'><div class='border-4 border-dashed border-neutral-light rounded-lg h-40'></div></div>",
424
424
  "attributes": {
425
425
  "data-attr": "accordion-item-test-c"
426
426
  }