@vaadin/details 25.0.0-alpha7 → 25.0.0-alpha8
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/details",
|
|
3
|
-
"version": "25.0.0-
|
|
3
|
+
"version": "25.0.0-alpha8",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -37,16 +37,16 @@
|
|
|
37
37
|
],
|
|
38
38
|
"dependencies": {
|
|
39
39
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
40
|
-
"@vaadin/a11y-base": "25.0.0-
|
|
41
|
-
"@vaadin/button": "25.0.0-
|
|
42
|
-
"@vaadin/component-base": "25.0.0-
|
|
43
|
-
"@vaadin/vaadin-lumo-styles": "25.0.0-
|
|
44
|
-
"@vaadin/vaadin-themable-mixin": "25.0.0-
|
|
40
|
+
"@vaadin/a11y-base": "25.0.0-alpha8",
|
|
41
|
+
"@vaadin/button": "25.0.0-alpha8",
|
|
42
|
+
"@vaadin/component-base": "25.0.0-alpha8",
|
|
43
|
+
"@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
|
|
44
|
+
"@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
|
|
45
45
|
"lit": "^3.0.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
|
-
"@vaadin/chai-plugins": "25.0.0-
|
|
49
|
-
"@vaadin/test-runner-commands": "25.0.0-
|
|
48
|
+
"@vaadin/chai-plugins": "25.0.0-alpha8",
|
|
49
|
+
"@vaadin/test-runner-commands": "25.0.0-alpha8",
|
|
50
50
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
51
51
|
"sinon": "^18.0.0"
|
|
52
52
|
},
|
|
@@ -54,5 +54,5 @@
|
|
|
54
54
|
"web-types.json",
|
|
55
55
|
"web-types.lit.json"
|
|
56
56
|
],
|
|
57
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
|
|
58
58
|
}
|
|
@@ -7,95 +7,93 @@ import '@vaadin/component-base/src/style-props.js';
|
|
|
7
7
|
import { css, unsafeCSS } from 'lit';
|
|
8
8
|
|
|
9
9
|
export const detailsSummary = (partName = 'vaadin-details-summary') => css`
|
|
10
|
-
|
|
11
|
-
:
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
10
|
+
:host {
|
|
11
|
+
align-items: center;
|
|
12
|
+
background: var(--${unsafeCSS(partName)}-background, transparent);
|
|
13
|
+
background-origin: border-box;
|
|
14
|
+
border: var(--${unsafeCSS(partName)}-border, none);
|
|
15
|
+
border-radius: var(--${unsafeCSS(partName)}-border-radius, var(--vaadin-radius-m));
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
color: var(--${unsafeCSS(partName)}-text-color, var(--vaadin-color));
|
|
18
|
+
cursor: var(--vaadin-clickable-cursor);
|
|
19
|
+
display: flex;
|
|
20
|
+
font-size: var(--${unsafeCSS(partName)}-font-size, inherit);
|
|
21
|
+
font-weight: var(--${unsafeCSS(partName)}-font-weight, 500);
|
|
22
|
+
gap: var(--${unsafeCSS(partName)}-gap, 0 var(--vaadin-gap-container-inline));
|
|
23
|
+
height: var(--${unsafeCSS(partName)}-height, auto);
|
|
24
|
+
outline: calc(var(--vaadin-focus-ring-width) * var(--_focus-ring, 0)) solid var(--vaadin-focus-ring-color);
|
|
25
|
+
outline-offset: 1px;
|
|
26
|
+
padding: var(--${unsafeCSS(partName)}-padding, var(--vaadin-padding-container));
|
|
27
|
+
-webkit-tap-highlight-color: transparent;
|
|
28
|
+
-webkit-user-select: none;
|
|
29
|
+
user-select: none;
|
|
30
|
+
}
|
|
32
31
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
32
|
+
:host([focus-ring]) {
|
|
33
|
+
--_focus-ring: 1;
|
|
34
|
+
}
|
|
36
35
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
:host([hidden]) {
|
|
37
|
+
display: none !important;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
[part='toggle'] {
|
|
41
|
+
color: var(--vaadin-color-subtle);
|
|
42
|
+
}
|
|
40
43
|
|
|
44
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
41
45
|
[part='toggle'] {
|
|
42
|
-
|
|
46
|
+
transition-property: rotate;
|
|
47
|
+
transition-duration: 150ms;
|
|
48
|
+
animation: delay-initial-transition 1ms;
|
|
43
49
|
}
|
|
44
50
|
|
|
45
|
-
@
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
transition-duration: 150ms;
|
|
49
|
-
animation: delay-initial-transition 1ms;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
@keyframes delay-initial-transition {
|
|
53
|
-
0% {
|
|
54
|
-
rotate: 0deg;
|
|
55
|
-
}
|
|
51
|
+
@keyframes delay-initial-transition {
|
|
52
|
+
0% {
|
|
53
|
+
rotate: 0deg;
|
|
56
54
|
}
|
|
57
55
|
}
|
|
56
|
+
}
|
|
58
57
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
58
|
+
[part='toggle']::before {
|
|
59
|
+
background: currentColor;
|
|
60
|
+
content: '';
|
|
61
|
+
display: block;
|
|
62
|
+
height: var(--vaadin-icon-size, 1lh);
|
|
63
|
+
mask-image: var(--_vaadin-icon-chevron-down);
|
|
64
|
+
width: var(--vaadin-icon-size, 1lh);
|
|
65
|
+
rotate: -90deg;
|
|
66
|
+
}
|
|
68
67
|
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
68
|
+
:host([disabled]) {
|
|
69
|
+
opacity: 0.5;
|
|
70
|
+
cursor: var(--vaadin-disabled-cursor);
|
|
71
|
+
}
|
|
73
72
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
:host([dir='rtl']) [part='toggle']::before {
|
|
74
|
+
scale: -1;
|
|
75
|
+
}
|
|
77
76
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
77
|
+
:host([opened]) [part='toggle'] {
|
|
78
|
+
rotate: 90deg;
|
|
79
|
+
}
|
|
81
80
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
81
|
+
:host([dir='rtl'][opened]) [part='toggle'] {
|
|
82
|
+
rotate: -90deg;
|
|
83
|
+
}
|
|
85
84
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
85
|
+
@media (forced-colors: active) {
|
|
86
|
+
[part='toggle']::before {
|
|
87
|
+
background: CanvasText;
|
|
88
|
+
}
|
|
90
89
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
90
|
+
:host([disabled]) {
|
|
91
|
+
color: GrayText;
|
|
92
|
+
opacity: 1;
|
|
93
|
+
}
|
|
95
94
|
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
}
|
|
95
|
+
:host([disabled]) [part='toggle']::before {
|
|
96
|
+
background: GrayText;
|
|
99
97
|
}
|
|
100
98
|
}
|
|
101
99
|
`;
|
|
@@ -42,7 +42,7 @@ import { detailsSummary } from './styles/vaadin-details-summary-core-styles.js';
|
|
|
42
42
|
* @mixes DirMixin
|
|
43
43
|
* @mixes ThemableMixin
|
|
44
44
|
*/
|
|
45
|
-
class DetailsSummary extends ButtonMixin(DirMixin(
|
|
45
|
+
class DetailsSummary extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
46
46
|
static get is() {
|
|
47
47
|
return 'vaadin-details-summary';
|
|
48
48
|
}
|
package/src/vaadin-details.d.ts
CHANGED
|
@@ -22,7 +22,7 @@ export type DetailsEventMap = DetailsCustomEventMap & HTMLElementEventMap;
|
|
|
22
22
|
* `<vaadin-details>` is a Web Component which the creates an
|
|
23
23
|
* expandable panel similar to `<details>` HTML element.
|
|
24
24
|
*
|
|
25
|
-
* ```
|
|
25
|
+
* ```html
|
|
26
26
|
* <vaadin-details>
|
|
27
27
|
* <vaadin-details-summary slot="summary">Expandable Details</vaadin-details-summary>
|
|
28
28
|
* <div>
|
package/src/vaadin-details.js
CHANGED
|
@@ -16,7 +16,7 @@ import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
|
|
|
16
16
|
* `<vaadin-details>` is a Web Component which the creates an
|
|
17
17
|
* expandable panel similar to `<details>` HTML element.
|
|
18
18
|
*
|
|
19
|
-
* ```
|
|
19
|
+
* ```html
|
|
20
20
|
* <vaadin-details>
|
|
21
21
|
* <vaadin-details-summary slot="summary">Expandable Details</vaadin-details-summary>
|
|
22
22
|
* <div>
|
|
@@ -52,7 +52,7 @@ import { DetailsBaseMixin } from './vaadin-details-base-mixin.js';
|
|
|
52
52
|
* @mixes ElementMixin
|
|
53
53
|
* @mixes ThemableMixin
|
|
54
54
|
*/
|
|
55
|
-
class Details extends DetailsBaseMixin(ElementMixin(
|
|
55
|
+
class Details extends DetailsBaseMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
|
|
56
56
|
static get is() {
|
|
57
57
|
return 'vaadin-details';
|
|
58
58
|
}
|
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.0.0-
|
|
4
|
+
"version": "25.0.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
},
|
|
75
75
|
{
|
|
76
76
|
"name": "vaadin-details",
|
|
77
|
-
"description": "`<vaadin-details>` is a Web Component which the creates an\nexpandable panel similar to `<details>` HTML element.\n\n
|
|
77
|
+
"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 attributes are exposed 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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
78
78
|
"attributes": [
|
|
79
79
|
{
|
|
80
80
|
"name": "disabled",
|
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/details",
|
|
4
|
-
"version": "25.0.0-
|
|
4
|
+
"version": "25.0.0-alpha8",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
"name": "vaadin-details",
|
|
40
|
-
"description": "`<vaadin-details>` is a Web Component which the creates an\nexpandable panel similar to `<details>` HTML element.\n\n
|
|
40
|
+
"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 attributes are exposed 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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
41
41
|
"extension": true,
|
|
42
42
|
"attributes": [
|
|
43
43
|
{
|