@vaadin/accordion 25.2.0-alpha1 → 25.2.0-alpha10
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.
- package/custom-elements.json +130 -0
- package/package.json +10 -10
- package/src/vaadin-accordion-panel-mixin.js +1 -1
- package/web-types.json +16 -44
- package/web-types.lit.json +2 -2
package/custom-elements.json
CHANGED
|
@@ -56,6 +56,20 @@
|
|
|
56
56
|
"description": "The accordion heading element.\n\n`vaadin-accordion-heading` is the element for the headings in the accordion.\nAs recommended by the WAI ARIA Best Practices, each heading needs to wrap a\n`<button>`. This element puts that button in the Shadow DOM, as it is more\nconvenient to use and doesn't make styling of the heading more problematic.\n\nThe WAI ARIA Best Practices also recommend setting `aria-level` depending\non what level the headings are. It is hard to determine the level of a heading\nalgorithmically, and setting it is not strictly required to have an accessible\naccordion. To keep things easier to use, this element does not set `aria-level`\nattribute but leaves that to the developer creating an accordion.\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n-----------|-------------------\n`toggle` | The icon element\n`content` | The content wrapper\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------| -----------\n`active` | Set when the element is pressed down, either with mouse, touch or the keyboard.\n`opened` | Set when the collapsible content is expanded and visible.\n`disabled` | Set when the element is disabled.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n| `--vaadin-accordion-heading-background` |\n| `--vaadin-accordion-heading-border-color` |\n| `--vaadin-accordion-heading-border-radius` |\n| `--vaadin-accordion-heading-border-width` |\n| `--vaadin-accordion-heading-font-size` |\n| `--vaadin-accordion-heading-font-weight` |\n| `--vaadin-accordion-heading-gap` |\n| `--vaadin-accordion-heading-height` |\n| `--vaadin-accordion-heading-padding` |\n| `--vaadin-accordion-heading-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
57
57
|
"name": "AccordionHeading",
|
|
58
58
|
"members": [
|
|
59
|
+
{
|
|
60
|
+
"kind": "field",
|
|
61
|
+
"name": "disabled",
|
|
62
|
+
"privacy": "public",
|
|
63
|
+
"type": {
|
|
64
|
+
"text": "boolean"
|
|
65
|
+
},
|
|
66
|
+
"description": "If true, the user cannot interact with this element.",
|
|
67
|
+
"attribute": "disabled",
|
|
68
|
+
"inheritedFrom": {
|
|
69
|
+
"name": "DisabledMixin",
|
|
70
|
+
"package": "@vaadin/a11y-base/src/disabled-mixin.js"
|
|
71
|
+
}
|
|
72
|
+
},
|
|
59
73
|
{
|
|
60
74
|
"kind": "field",
|
|
61
75
|
"name": "opened",
|
|
@@ -68,6 +82,18 @@
|
|
|
68
82
|
}
|
|
69
83
|
],
|
|
70
84
|
"attributes": [
|
|
85
|
+
{
|
|
86
|
+
"name": "disabled",
|
|
87
|
+
"type": {
|
|
88
|
+
"text": "boolean"
|
|
89
|
+
},
|
|
90
|
+
"description": "If true, the user cannot interact with this element.",
|
|
91
|
+
"fieldName": "disabled",
|
|
92
|
+
"inheritedFrom": {
|
|
93
|
+
"name": "DisabledMixin",
|
|
94
|
+
"package": "@vaadin/a11y-base/src/disabled-mixin.js"
|
|
95
|
+
}
|
|
96
|
+
},
|
|
71
97
|
{
|
|
72
98
|
"name": "opened",
|
|
73
99
|
"type": {
|
|
@@ -193,6 +219,34 @@
|
|
|
193
219
|
"description": "A mixin providing common accordion panel functionality.",
|
|
194
220
|
"name": "AccordionPanelMixin",
|
|
195
221
|
"members": [
|
|
222
|
+
{
|
|
223
|
+
"kind": "field",
|
|
224
|
+
"name": "autofocus",
|
|
225
|
+
"privacy": "public",
|
|
226
|
+
"type": {
|
|
227
|
+
"text": "boolean"
|
|
228
|
+
},
|
|
229
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
230
|
+
"attribute": "autofocus",
|
|
231
|
+
"inheritedFrom": {
|
|
232
|
+
"name": "DelegateFocusMixin",
|
|
233
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
234
|
+
}
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"kind": "field",
|
|
238
|
+
"name": "disabled",
|
|
239
|
+
"privacy": "public",
|
|
240
|
+
"type": {
|
|
241
|
+
"text": "boolean"
|
|
242
|
+
},
|
|
243
|
+
"description": "If true, the user cannot interact with this element.",
|
|
244
|
+
"attribute": "disabled",
|
|
245
|
+
"inheritedFrom": {
|
|
246
|
+
"name": "TabindexMixin",
|
|
247
|
+
"package": "@vaadin/a11y-base/src/tabindex-mixin.js"
|
|
248
|
+
}
|
|
249
|
+
},
|
|
196
250
|
{
|
|
197
251
|
"kind": "field",
|
|
198
252
|
"name": "opened",
|
|
@@ -219,6 +273,30 @@
|
|
|
219
273
|
}
|
|
220
274
|
],
|
|
221
275
|
"attributes": [
|
|
276
|
+
{
|
|
277
|
+
"name": "autofocus",
|
|
278
|
+
"type": {
|
|
279
|
+
"text": "boolean"
|
|
280
|
+
},
|
|
281
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
282
|
+
"fieldName": "autofocus",
|
|
283
|
+
"inheritedFrom": {
|
|
284
|
+
"name": "DelegateFocusMixin",
|
|
285
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
286
|
+
}
|
|
287
|
+
},
|
|
288
|
+
{
|
|
289
|
+
"name": "disabled",
|
|
290
|
+
"type": {
|
|
291
|
+
"text": "boolean"
|
|
292
|
+
},
|
|
293
|
+
"description": "If true, the user cannot interact with this element.",
|
|
294
|
+
"fieldName": "disabled",
|
|
295
|
+
"inheritedFrom": {
|
|
296
|
+
"name": "TabindexMixin",
|
|
297
|
+
"package": "@vaadin/a11y-base/src/tabindex-mixin.js"
|
|
298
|
+
}
|
|
299
|
+
},
|
|
222
300
|
{
|
|
223
301
|
"name": "opened",
|
|
224
302
|
"type": {
|
|
@@ -281,6 +359,34 @@
|
|
|
281
359
|
"description": "The accordion panel element.\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n-----------------|----------------\n`content` | The wrapper for the collapsible panel content.\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|------------\n`opened` | Set when the collapsible content is expanded and visible\n`disabled` | Set when the element is disabled\n`focus-ring` | Set when the element is focused using the keyboard\n`focused` | Set when the element is focused\n`has-tooltip` | Set when the element has a slotted tooltip\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
282
360
|
"name": "AccordionPanel",
|
|
283
361
|
"members": [
|
|
362
|
+
{
|
|
363
|
+
"kind": "field",
|
|
364
|
+
"name": "autofocus",
|
|
365
|
+
"privacy": "public",
|
|
366
|
+
"type": {
|
|
367
|
+
"text": "boolean"
|
|
368
|
+
},
|
|
369
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
370
|
+
"attribute": "autofocus",
|
|
371
|
+
"inheritedFrom": {
|
|
372
|
+
"name": "DelegateFocusMixin",
|
|
373
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
374
|
+
}
|
|
375
|
+
},
|
|
376
|
+
{
|
|
377
|
+
"kind": "field",
|
|
378
|
+
"name": "disabled",
|
|
379
|
+
"privacy": "public",
|
|
380
|
+
"type": {
|
|
381
|
+
"text": "boolean"
|
|
382
|
+
},
|
|
383
|
+
"description": "If true, the user cannot interact with this element.",
|
|
384
|
+
"attribute": "disabled",
|
|
385
|
+
"inheritedFrom": {
|
|
386
|
+
"name": "TabindexMixin",
|
|
387
|
+
"package": "@vaadin/a11y-base/src/tabindex-mixin.js"
|
|
388
|
+
}
|
|
389
|
+
},
|
|
284
390
|
{
|
|
285
391
|
"kind": "field",
|
|
286
392
|
"name": "opened",
|
|
@@ -344,6 +450,30 @@
|
|
|
344
450
|
"tagName": "vaadin-accordion-panel",
|
|
345
451
|
"customElement": true,
|
|
346
452
|
"attributes": [
|
|
453
|
+
{
|
|
454
|
+
"name": "autofocus",
|
|
455
|
+
"type": {
|
|
456
|
+
"text": "boolean"
|
|
457
|
+
},
|
|
458
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
459
|
+
"fieldName": "autofocus",
|
|
460
|
+
"inheritedFrom": {
|
|
461
|
+
"name": "DelegateFocusMixin",
|
|
462
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
463
|
+
}
|
|
464
|
+
},
|
|
465
|
+
{
|
|
466
|
+
"name": "disabled",
|
|
467
|
+
"type": {
|
|
468
|
+
"text": "boolean"
|
|
469
|
+
},
|
|
470
|
+
"description": "If true, the user cannot interact with this element.",
|
|
471
|
+
"fieldName": "disabled",
|
|
472
|
+
"inheritedFrom": {
|
|
473
|
+
"name": "TabindexMixin",
|
|
474
|
+
"package": "@vaadin/a11y-base/src/tabindex-mixin.js"
|
|
475
|
+
}
|
|
476
|
+
},
|
|
347
477
|
{
|
|
348
478
|
"name": "opened",
|
|
349
479
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/accordion",
|
|
3
|
-
"version": "25.2.0-
|
|
3
|
+
"version": "25.2.0-alpha10",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,18 +35,18 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.2.0-
|
|
39
|
-
"@vaadin/component-base": "25.2.0-
|
|
40
|
-
"@vaadin/details": "25.2.0-
|
|
41
|
-
"@vaadin/vaadin-themable-mixin": "25.2.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.2.0-alpha10",
|
|
39
|
+
"@vaadin/component-base": "25.2.0-alpha10",
|
|
40
|
+
"@vaadin/details": "25.2.0-alpha10",
|
|
41
|
+
"@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
|
|
42
42
|
"lit": "^3.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@vaadin/aura": "25.2.0-
|
|
46
|
-
"@vaadin/chai-plugins": "25.2.0-
|
|
47
|
-
"@vaadin/test-runner-commands": "25.2.0-
|
|
45
|
+
"@vaadin/aura": "25.2.0-alpha10",
|
|
46
|
+
"@vaadin/chai-plugins": "25.2.0-alpha10",
|
|
47
|
+
"@vaadin/test-runner-commands": "25.2.0-alpha10",
|
|
48
48
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
49
|
-
"@vaadin/vaadin-lumo-styles": "25.2.0-
|
|
49
|
+
"@vaadin/vaadin-lumo-styles": "25.2.0-alpha10",
|
|
50
50
|
"sinon": "^21.0.2"
|
|
51
51
|
},
|
|
52
52
|
"customElements": "custom-elements.json",
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
|
|
58
58
|
}
|
|
@@ -125,7 +125,7 @@ export const AccordionPanelMixin = (superClass) =>
|
|
|
125
125
|
node.setAttribute('aria-labelledby', focusElement.id);
|
|
126
126
|
}
|
|
127
127
|
|
|
128
|
-
if (node
|
|
128
|
+
if (node?.id) {
|
|
129
129
|
focusElement.setAttribute('aria-controls', node.id);
|
|
130
130
|
} else {
|
|
131
131
|
focusElement.removeAttribute('aria-controls');
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/accordion",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,9 +15,7 @@
|
|
|
15
15
|
"description": "If true, the user cannot interact with this element.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"boolean"
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
18
|
+
"boolean"
|
|
21
19
|
]
|
|
22
20
|
}
|
|
23
21
|
},
|
|
@@ -26,9 +24,7 @@
|
|
|
26
24
|
"description": "When true, the element is opened.",
|
|
27
25
|
"value": {
|
|
28
26
|
"type": [
|
|
29
|
-
"boolean"
|
|
30
|
-
"null",
|
|
31
|
-
"undefined"
|
|
27
|
+
"boolean"
|
|
32
28
|
]
|
|
33
29
|
}
|
|
34
30
|
},
|
|
@@ -51,9 +47,7 @@
|
|
|
51
47
|
"description": "If true, the user cannot interact with this element.",
|
|
52
48
|
"value": {
|
|
53
49
|
"type": [
|
|
54
|
-
"boolean"
|
|
55
|
-
"null",
|
|
56
|
-
"undefined"
|
|
50
|
+
"boolean"
|
|
57
51
|
]
|
|
58
52
|
}
|
|
59
53
|
},
|
|
@@ -62,9 +56,7 @@
|
|
|
62
56
|
"description": "When true, the element is opened.",
|
|
63
57
|
"value": {
|
|
64
58
|
"type": [
|
|
65
|
-
"boolean"
|
|
66
|
-
"null",
|
|
67
|
-
"undefined"
|
|
59
|
+
"boolean"
|
|
68
60
|
]
|
|
69
61
|
}
|
|
70
62
|
}
|
|
@@ -81,9 +73,7 @@
|
|
|
81
73
|
"description": "Specify that this control should have input focus when the page loads.",
|
|
82
74
|
"value": {
|
|
83
75
|
"type": [
|
|
84
|
-
"boolean"
|
|
85
|
-
"null",
|
|
86
|
-
"undefined"
|
|
76
|
+
"boolean"
|
|
87
77
|
]
|
|
88
78
|
}
|
|
89
79
|
},
|
|
@@ -92,9 +82,7 @@
|
|
|
92
82
|
"description": "If true, the user cannot interact with this element.",
|
|
93
83
|
"value": {
|
|
94
84
|
"type": [
|
|
95
|
-
"boolean"
|
|
96
|
-
"null",
|
|
97
|
-
"undefined"
|
|
85
|
+
"boolean"
|
|
98
86
|
]
|
|
99
87
|
}
|
|
100
88
|
},
|
|
@@ -103,9 +91,7 @@
|
|
|
103
91
|
"description": "If true, the collapsible content is visible.",
|
|
104
92
|
"value": {
|
|
105
93
|
"type": [
|
|
106
|
-
"boolean"
|
|
107
|
-
"null",
|
|
108
|
-
"undefined"
|
|
94
|
+
"boolean"
|
|
109
95
|
]
|
|
110
96
|
}
|
|
111
97
|
},
|
|
@@ -114,9 +100,7 @@
|
|
|
114
100
|
"description": "A text that is displayed in the heading, if no\nelement is assigned to the `summary` slot.",
|
|
115
101
|
"value": {
|
|
116
102
|
"type": [
|
|
117
|
-
"string"
|
|
118
|
-
"null",
|
|
119
|
-
"undefined"
|
|
103
|
+
"string"
|
|
120
104
|
]
|
|
121
105
|
}
|
|
122
106
|
},
|
|
@@ -139,9 +123,7 @@
|
|
|
139
123
|
"description": "Specify that this control should have input focus when the page loads.",
|
|
140
124
|
"value": {
|
|
141
125
|
"type": [
|
|
142
|
-
"boolean"
|
|
143
|
-
"null",
|
|
144
|
-
"undefined"
|
|
126
|
+
"boolean"
|
|
145
127
|
]
|
|
146
128
|
}
|
|
147
129
|
},
|
|
@@ -150,9 +132,7 @@
|
|
|
150
132
|
"description": "If true, the user cannot interact with this element.",
|
|
151
133
|
"value": {
|
|
152
134
|
"type": [
|
|
153
|
-
"boolean"
|
|
154
|
-
"null",
|
|
155
|
-
"undefined"
|
|
135
|
+
"boolean"
|
|
156
136
|
]
|
|
157
137
|
}
|
|
158
138
|
},
|
|
@@ -161,9 +141,7 @@
|
|
|
161
141
|
"description": "If true, the collapsible content is visible.",
|
|
162
142
|
"value": {
|
|
163
143
|
"type": [
|
|
164
|
-
"boolean"
|
|
165
|
-
"null",
|
|
166
|
-
"undefined"
|
|
144
|
+
"boolean"
|
|
167
145
|
]
|
|
168
146
|
}
|
|
169
147
|
},
|
|
@@ -172,9 +150,7 @@
|
|
|
172
150
|
"description": "A text that is displayed in the heading, if no\nelement is assigned to the `summary` slot.",
|
|
173
151
|
"value": {
|
|
174
152
|
"type": [
|
|
175
|
-
"string"
|
|
176
|
-
"null",
|
|
177
|
-
"undefined"
|
|
153
|
+
"string"
|
|
178
154
|
]
|
|
179
155
|
}
|
|
180
156
|
}
|
|
@@ -189,16 +165,14 @@
|
|
|
189
165
|
},
|
|
190
166
|
{
|
|
191
167
|
"name": "vaadin-accordion",
|
|
192
|
-
"description": "`<vaadin-accordion>` is a Web Component implementing accordion widget:\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```html\n<vaadin-accordion>\n <vaadin-accordion-panel>\n <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n <div>This panel is opened, so the text is visible by default.</div>\n </vaadin-accordion-panel>\n <vaadin-accordion-panel>\n <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n <div>After opening this panel, the first one becomes closed.</div>\n </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nAccordion does not have own stylable shadow parts or state attributes. Instead, apply styles to\nthe following components:\n\n- [`<vaadin-accordion-heading>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-
|
|
168
|
+
"description": "`<vaadin-accordion>` is a Web Component implementing accordion widget:\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```html\n<vaadin-accordion>\n <vaadin-accordion-panel>\n <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n <div>This panel is opened, so the text is visible by default.</div>\n </vaadin-accordion-panel>\n <vaadin-accordion-panel>\n <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n <div>After opening this panel, the first one becomes closed.</div>\n </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nAccordion does not have own stylable shadow parts or state attributes. Instead, apply styles to\nthe following components:\n\n- [`<vaadin-accordion-heading>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-accordion-heading)\n- [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-accordion-panel)\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
193
169
|
"attributes": [
|
|
194
170
|
{
|
|
195
171
|
"name": "opened",
|
|
196
172
|
"description": "The index of currently opened panel. First panel is opened by\ndefault. Only one panel can be opened at the same time.\nSetting null or undefined closes all the accordion panels.",
|
|
197
173
|
"value": {
|
|
198
174
|
"type": [
|
|
199
|
-
"number"
|
|
200
|
-
"null",
|
|
201
|
-
"undefined"
|
|
175
|
+
"number"
|
|
202
176
|
]
|
|
203
177
|
}
|
|
204
178
|
},
|
|
@@ -221,9 +195,7 @@
|
|
|
221
195
|
"description": "The index of currently opened panel. First panel is opened by\ndefault. Only one panel can be opened at the same time.\nSetting null or undefined closes all the accordion panels.",
|
|
222
196
|
"value": {
|
|
223
197
|
"type": [
|
|
224
|
-
"number"
|
|
225
|
-
"null",
|
|
226
|
-
"undefined"
|
|
198
|
+
"number"
|
|
227
199
|
]
|
|
228
200
|
}
|
|
229
201
|
}
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/accordion",
|
|
4
|
-
"version": "25.2.0-
|
|
4
|
+
"version": "25.2.0-alpha10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
},
|
|
80
80
|
{
|
|
81
81
|
"name": "vaadin-accordion",
|
|
82
|
-
"description": "`<vaadin-accordion>` is a Web Component implementing accordion widget:\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```html\n<vaadin-accordion>\n <vaadin-accordion-panel>\n <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n <div>This panel is opened, so the text is visible by default.</div>\n </vaadin-accordion-panel>\n <vaadin-accordion-panel>\n <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n <div>After opening this panel, the first one becomes closed.</div>\n </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nAccordion does not have own stylable shadow parts or state attributes. Instead, apply styles to\nthe following components:\n\n- [`<vaadin-accordion-heading>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-
|
|
82
|
+
"description": "`<vaadin-accordion>` is a Web Component implementing accordion widget:\na vertically stacked set of expandable panels. The component should be\nused as a wrapper for two or more `<vaadin-accordion-panel>` components.\n\nPanel headings function as controls that enable users to open (expand)\nor hide (collapse) their associated sections of content. The user can\ntoggle panels by mouse click, Enter and Space keys.\n\nOnly one panel can be opened at a time, opening a new one forces\nprevious panel to close and hide its content.\n\n```html\n<vaadin-accordion>\n <vaadin-accordion-panel>\n <vaadin-accordion-heading slot=\"summary\">Panel 1</vaadin-accordion-heading>\n <div>This panel is opened, so the text is visible by default.</div>\n </vaadin-accordion-panel>\n <vaadin-accordion-panel>\n <vaadin-accordion-heading slot=\"summary\">Panel 2</vaadin-accordion-heading>\n <div>After opening this panel, the first one becomes closed.</div>\n </vaadin-accordion-panel>\n</vaadin-accordion>\n```\n\n### Styling\n\nAccordion does not have own stylable shadow parts or state attributes. Instead, apply styles to\nthe following components:\n\n- [`<vaadin-accordion-heading>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-accordion-heading)\n- [`<vaadin-accordion-panel>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha10/#/elements/vaadin-accordion-panel)\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
83
83
|
"extension": true,
|
|
84
84
|
"attributes": [
|
|
85
85
|
{
|