@vaadin/details 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-details-base-mixin.js +1 -1
- package/web-types.json +13 -37
- package/web-types.lit.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -89,6 +89,34 @@
|
|
|
89
89
|
"description": "",
|
|
90
90
|
"name": "DetailsBaseMixin",
|
|
91
91
|
"members": [
|
|
92
|
+
{
|
|
93
|
+
"kind": "field",
|
|
94
|
+
"name": "autofocus",
|
|
95
|
+
"privacy": "public",
|
|
96
|
+
"type": {
|
|
97
|
+
"text": "boolean"
|
|
98
|
+
},
|
|
99
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
100
|
+
"attribute": "autofocus",
|
|
101
|
+
"inheritedFrom": {
|
|
102
|
+
"name": "DelegateFocusMixin",
|
|
103
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"kind": "field",
|
|
108
|
+
"name": "disabled",
|
|
109
|
+
"privacy": "public",
|
|
110
|
+
"type": {
|
|
111
|
+
"text": "boolean"
|
|
112
|
+
},
|
|
113
|
+
"description": "If true, the user cannot interact with this element.",
|
|
114
|
+
"attribute": "disabled",
|
|
115
|
+
"inheritedFrom": {
|
|
116
|
+
"name": "TabindexMixin",
|
|
117
|
+
"package": "@vaadin/a11y-base/src/tabindex-mixin.js"
|
|
118
|
+
}
|
|
119
|
+
},
|
|
92
120
|
{
|
|
93
121
|
"kind": "field",
|
|
94
122
|
"name": "opened",
|
|
@@ -115,6 +143,30 @@
|
|
|
115
143
|
}
|
|
116
144
|
],
|
|
117
145
|
"attributes": [
|
|
146
|
+
{
|
|
147
|
+
"name": "autofocus",
|
|
148
|
+
"type": {
|
|
149
|
+
"text": "boolean"
|
|
150
|
+
},
|
|
151
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
152
|
+
"fieldName": "autofocus",
|
|
153
|
+
"inheritedFrom": {
|
|
154
|
+
"name": "DelegateFocusMixin",
|
|
155
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
156
|
+
}
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"name": "disabled",
|
|
160
|
+
"type": {
|
|
161
|
+
"text": "boolean"
|
|
162
|
+
},
|
|
163
|
+
"description": "If true, the user cannot interact with this element.",
|
|
164
|
+
"fieldName": "disabled",
|
|
165
|
+
"inheritedFrom": {
|
|
166
|
+
"name": "TabindexMixin",
|
|
167
|
+
"package": "@vaadin/a11y-base/src/tabindex-mixin.js"
|
|
168
|
+
}
|
|
169
|
+
},
|
|
118
170
|
{
|
|
119
171
|
"name": "opened",
|
|
120
172
|
"type": {
|
|
@@ -177,6 +229,20 @@
|
|
|
177
229
|
"description": "The details summary element.\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 element is expanded and related collapsible content is 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:------------------------------------------|\n| `--vaadin-details-summary-background` |\n| `--vaadin-details-summary-border-color` |\n| `--vaadin-details-summary-border-radius` |\n| `--vaadin-details-summary-border-width` |\n| `--vaadin-details-summary-font-size` |\n| `--vaadin-details-summary-font-weight` |\n| `--vaadin-details-summary-gap` |\n| `--vaadin-details-summary-height` |\n| `--vaadin-details-summary-padding` |\n| `--vaadin-details-summary-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
178
230
|
"name": "DetailsSummary",
|
|
179
231
|
"members": [
|
|
232
|
+
{
|
|
233
|
+
"kind": "field",
|
|
234
|
+
"name": "disabled",
|
|
235
|
+
"privacy": "public",
|
|
236
|
+
"type": {
|
|
237
|
+
"text": "boolean"
|
|
238
|
+
},
|
|
239
|
+
"description": "If true, the user cannot interact with this element.",
|
|
240
|
+
"attribute": "disabled",
|
|
241
|
+
"inheritedFrom": {
|
|
242
|
+
"name": "DisabledMixin",
|
|
243
|
+
"package": "@vaadin/a11y-base/src/disabled-mixin.js"
|
|
244
|
+
}
|
|
245
|
+
},
|
|
180
246
|
{
|
|
181
247
|
"kind": "field",
|
|
182
248
|
"name": "opened",
|
|
@@ -189,6 +255,18 @@
|
|
|
189
255
|
}
|
|
190
256
|
],
|
|
191
257
|
"attributes": [
|
|
258
|
+
{
|
|
259
|
+
"name": "disabled",
|
|
260
|
+
"type": {
|
|
261
|
+
"text": "boolean"
|
|
262
|
+
},
|
|
263
|
+
"description": "If true, the user cannot interact with this element.",
|
|
264
|
+
"fieldName": "disabled",
|
|
265
|
+
"inheritedFrom": {
|
|
266
|
+
"name": "DisabledMixin",
|
|
267
|
+
"package": "@vaadin/a11y-base/src/disabled-mixin.js"
|
|
268
|
+
}
|
|
269
|
+
},
|
|
192
270
|
{
|
|
193
271
|
"name": "opened",
|
|
194
272
|
"type": {
|
|
@@ -249,6 +327,34 @@
|
|
|
249
327
|
"description": "`<vaadin-details>` is a Web Component which the creates an\nexpandable panel similar to `<details>` HTML element.\n\n```html\n<vaadin-details>\n <vaadin-details-summary slot=\"summary\">Expandable Details</vaadin-details-summary>\n <div>\n Toggle using mouse, Enter and Space keys.\n </div>\n</vaadin-details>\n```\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 details 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.",
|
|
250
328
|
"name": "Details",
|
|
251
329
|
"members": [
|
|
330
|
+
{
|
|
331
|
+
"kind": "field",
|
|
332
|
+
"name": "autofocus",
|
|
333
|
+
"privacy": "public",
|
|
334
|
+
"type": {
|
|
335
|
+
"text": "boolean"
|
|
336
|
+
},
|
|
337
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
338
|
+
"attribute": "autofocus",
|
|
339
|
+
"inheritedFrom": {
|
|
340
|
+
"name": "DelegateFocusMixin",
|
|
341
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
342
|
+
}
|
|
343
|
+
},
|
|
344
|
+
{
|
|
345
|
+
"kind": "field",
|
|
346
|
+
"name": "disabled",
|
|
347
|
+
"privacy": "public",
|
|
348
|
+
"type": {
|
|
349
|
+
"text": "boolean"
|
|
350
|
+
},
|
|
351
|
+
"description": "If true, the user cannot interact with this element.",
|
|
352
|
+
"attribute": "disabled",
|
|
353
|
+
"inheritedFrom": {
|
|
354
|
+
"name": "TabindexMixin",
|
|
355
|
+
"package": "@vaadin/a11y-base/src/tabindex-mixin.js"
|
|
356
|
+
}
|
|
357
|
+
},
|
|
252
358
|
{
|
|
253
359
|
"kind": "field",
|
|
254
360
|
"name": "opened",
|
|
@@ -316,6 +422,30 @@
|
|
|
316
422
|
"tagName": "vaadin-details",
|
|
317
423
|
"customElement": true,
|
|
318
424
|
"attributes": [
|
|
425
|
+
{
|
|
426
|
+
"name": "autofocus",
|
|
427
|
+
"type": {
|
|
428
|
+
"text": "boolean"
|
|
429
|
+
},
|
|
430
|
+
"description": "Specify that this control should have input focus when the page loads.",
|
|
431
|
+
"fieldName": "autofocus",
|
|
432
|
+
"inheritedFrom": {
|
|
433
|
+
"name": "DelegateFocusMixin",
|
|
434
|
+
"package": "@vaadin/a11y-base/src/delegate-focus-mixin.js"
|
|
435
|
+
}
|
|
436
|
+
},
|
|
437
|
+
{
|
|
438
|
+
"name": "disabled",
|
|
439
|
+
"type": {
|
|
440
|
+
"text": "boolean"
|
|
441
|
+
},
|
|
442
|
+
"description": "If true, the user cannot interact with this element.",
|
|
443
|
+
"fieldName": "disabled",
|
|
444
|
+
"inheritedFrom": {
|
|
445
|
+
"name": "TabindexMixin",
|
|
446
|
+
"package": "@vaadin/a11y-base/src/tabindex-mixin.js"
|
|
447
|
+
}
|
|
448
|
+
},
|
|
319
449
|
{
|
|
320
450
|
"name": "opened",
|
|
321
451
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/details",
|
|
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/button": "25.2.0-
|
|
40
|
-
"@vaadin/component-base": "25.2.0-
|
|
41
|
-
"@vaadin/vaadin-themable-mixin": "25.2.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.2.0-alpha10",
|
|
39
|
+
"@vaadin/button": "25.2.0-alpha10",
|
|
40
|
+
"@vaadin/component-base": "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
|
}
|
|
@@ -103,7 +103,7 @@ export const DetailsBaseMixin = (superClass) =>
|
|
|
103
103
|
if (summary && contentElements) {
|
|
104
104
|
const node = contentElements[0];
|
|
105
105
|
|
|
106
|
-
if (node
|
|
106
|
+
if (node?.id) {
|
|
107
107
|
summary.setAttribute('aria-controls', node.id);
|
|
108
108
|
} else {
|
|
109
109
|
summary.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/details",
|
|
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 summary, 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 summary, 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
|
}
|