@vaadin/master-detail-layout 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.
Files changed (8) hide show
  1. package/package.json +7 -7
  2. package/src/styles/vaadin-master-detail-layout-core-styles.js +73 -69
  3. package/src/styles/vaadin-master-detail-layout-transition-core-styles.js +94 -243
  4. package/src/vaadin-master-detail-layout.d.ts +0 -7
  5. package/src/vaadin-master-detail-layout.js +23 -20
  6. package/theme/lumo/vaadin-master-detail-layout-styles.js +6 -11
  7. package/web-types.json +2 -2
  8. package/web-types.lit.json +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/master-detail-layout",
3
- "version": "25.0.0-alpha7",
3
+ "version": "25.0.0-alpha8",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -34,14 +34,14 @@
34
34
  "web-component"
35
35
  ],
36
36
  "dependencies": {
37
- "@vaadin/a11y-base": "25.0.0-alpha7",
38
- "@vaadin/component-base": "25.0.0-alpha7",
39
- "@vaadin/vaadin-lumo-styles": "25.0.0-alpha7",
40
- "@vaadin/vaadin-themable-mixin": "25.0.0-alpha7",
37
+ "@vaadin/a11y-base": "25.0.0-alpha8",
38
+ "@vaadin/component-base": "25.0.0-alpha8",
39
+ "@vaadin/vaadin-lumo-styles": "25.0.0-alpha8",
40
+ "@vaadin/vaadin-themable-mixin": "25.0.0-alpha8",
41
41
  "lit": "^3.0.0"
42
42
  },
43
43
  "devDependencies": {
44
- "@vaadin/chai-plugins": "25.0.0-alpha7",
44
+ "@vaadin/chai-plugins": "25.0.0-alpha8",
45
45
  "@vaadin/testing-helpers": "^2.0.0",
46
46
  "sinon": "^18.0.0"
47
47
  },
@@ -49,5 +49,5 @@
49
49
  "web-types.json",
50
50
  "web-types.lit.json"
51
51
  ],
52
- "gitHead": "87f72707ce6866892f8be5782fa0da008e87dcbc"
52
+ "gitHead": "ebf53673d5f639d2b1b6f2b31f640f530643ee2f"
53
53
  }
package/src/styles/vaadin-master-detail-layout-core-styles.js CHANGED
@@ -6,64 +6,72 @@
6
6
  import { css } from 'lit';
7
7
 
8
8
  export const masterDetailLayoutStyles = css`
9
+ /* Layout and positioning styles */
10
+
9
11
  :host {
10
12
  display: flex;
11
13
  box-sizing: border-box;
12
14
  height: 100%;
15
+ max-width: 100%;
16
+ max-height: 100%;
17
+ position: relative; /* Keep the positioning context stable across all modes */
18
+ overflow: hidden;
13
19
  }
14
20
 
15
21
  :host([hidden]) {
16
22
  display: none !important;
17
23
  }
18
24
 
19
- :host(:not([has-detail])) [part='detail'],
20
- [part='backdrop'] {
21
- display: none;
25
+ :host([orientation='vertical']) {
26
+ flex-direction: column;
22
27
  }
23
28
 
24
- :host([orientation='horizontal']) [part='master'] {
25
- max-width: 100%;
29
+ [part='_detail-internal'] {
30
+ display: contents;
31
+ justify-content: end;
26
32
  }
27
33
 
28
- /* Drawer mode */
29
- :host(:is([drawer], [stack])) {
30
- position: relative;
34
+ :host([orientation='vertical']) [part='_detail-internal'] {
35
+ align-items: end;
31
36
  }
32
37
 
33
- :host(:is([drawer], [stack])[containment='layout']) [part='detail'],
34
- :host([drawer][containment='layout']) [part='backdrop'] {
38
+ :host(:is([drawer], [stack])) [part='_detail-internal'],
39
+ :host(:is([drawer], [stack])[has-detail]) [part='backdrop'] {
40
+ display: flex;
35
41
  position: absolute;
42
+ z-index: 1;
43
+ inset: 0;
44
+ overscroll-behavior: contain;
36
45
  }
37
46
 
38
- :host(:is([drawer], [stack])[containment='viewport']) [part='detail'],
39
- :host([drawer][containment='viewport']) [part='backdrop'] {
40
- position: fixed;
47
+ :host(:not([has-detail])) [part='_detail-internal'],
48
+ [part='backdrop'] {
49
+ display: none;
41
50
  }
42
51
 
43
- :host([drawer][has-detail]) [part='backdrop'] {
44
- display: block;
45
- inset: 0;
46
- z-index: 1;
52
+ :host([orientation='horizontal'][drawer]) [part='detail'] {
53
+ margin-inline-start: 50px;
47
54
  }
48
55
 
49
- :host(:is([drawer], [stack])) [part='detail'] {
50
- z-index: 1;
56
+ :host([orientation='vertical'][drawer]) [part='detail'] {
57
+ margin-top: 50px;
51
58
  }
52
59
 
53
- :host([drawer][orientation='horizontal']) [part='detail'] {
54
- inset-inline-end: 0;
55
- height: 100%;
56
- width: var(--_detail-min-size, min-content);
57
- max-width: 100%;
60
+ :host(:is([drawer], [stack])[containment='viewport']) :is([part='_detail-internal'], [part='backdrop']) {
61
+ position: fixed;
58
62
  }
59
63
 
60
- :host([drawer][orientation='horizontal'][containment='viewport']) [part='detail'] {
61
- inset-block-start: 0;
64
+ /* Sizing styles */
65
+
66
+ [part] {
67
+ box-sizing: border-box;
68
+ max-width: 100%;
69
+ max-height: 100%;
62
70
  }
63
71
 
64
72
  /* No fixed size */
65
73
  :host(:not([has-master-size])) [part='master'],
66
- :host(:not([has-detail-size])) [part='detail'] {
74
+ :host(:not([has-detail-size]):not([drawer], [stack])) [part='detail'] {
67
75
  flex-grow: 1;
68
76
  flex-basis: 50%;
69
77
  }
@@ -74,82 +82,78 @@ export const masterDetailLayoutStyles = css`
74
82
  flex-shrink: 0;
75
83
  }
76
84
 
77
- :host([has-master-size][orientation='horizontal']) [part='master'] {
85
+ :host([orientation='horizontal'][has-master-size][has-detail]) [part='master'] {
78
86
  width: var(--_master-size);
79
87
  }
80
88
 
81
- :host([has-detail-size][orientation='horizontal']:not([stack])) [part='detail'] {
89
+ :host([orientation='vertical'][has-master-size][has-detail]) [part='master'] {
90
+ height: var(--_master-size);
91
+ }
92
+
93
+ :host([orientation='horizontal'][has-detail-size]:not([stack])) [part='detail'] {
82
94
  width: var(--_detail-size);
83
95
  }
84
96
 
97
+ :host([orientation='vertical'][has-detail-size]:not([stack])) [part='detail'] {
98
+ height: var(--_detail-size);
99
+ }
100
+
85
101
  :host([has-master-size][has-detail-size]) [part='master'] {
86
102
  flex-grow: 1;
87
103
  flex-basis: var(--_master-size);
88
104
  }
89
105
 
90
- :host([has-master-size][has-detail-size]) [part='detail'] {
106
+ :host([has-master-size][has-detail-size]:not([drawer], [stack])) [part='detail'] {
91
107
  flex-grow: 1;
92
108
  flex-basis: var(--_detail-size);
93
109
  }
94
110
 
95
111
  /* Min size */
96
- :host([has-master-min-size][has-detail][orientation='horizontal']:not([drawer]):not([stack])) [part='master'] {
97
- min-width: var(--_master-min-size);
112
+ :host([orientation='horizontal'][has-master-min-size]) [part='master'] {
113
+ min-width: min(100%, var(--_master-min-size));
98
114
  }
99
115
 
100
- :host([has-detail-min-size][orientation='horizontal']:not([drawer]):not([stack])) [part='detail'] {
101
- min-width: var(--_detail-min-size);
116
+ :host([orientation='vertical'][has-master-min-size]) [part='master'] {
117
+ min-height: min(100%, var(--_master-min-size));
102
118
  }
103
119
 
104
- :host([has-master-min-size]) [part='master'],
105
- :host([has-detail-min-size]) [part='detail'] {
106
- flex-shrink: 0;
120
+ :host([orientation='horizontal'][has-detail-min-size]) [part='detail'] {
121
+ min-width: min(100%, var(--_detail-min-size));
107
122
  }
108
123
 
109
- /* Vertical */
110
- :host([orientation='vertical']) {
111
- flex-direction: column;
124
+ :host([orientation='vertical'][has-detail-min-size]) [part='detail'] {
125
+ min-height: min(100%, var(--_detail-min-size));
112
126
  }
113
127
 
114
- :host([orientation='vertical'][drawer]) [part='master'] {
115
- max-height: 100%;
128
+ :host([drawer]) [part='master'],
129
+ :host([stack]) [part] {
130
+ width: 100% !important;
131
+ height: 100% !important;
132
+ min-width: auto !important;
133
+ min-height: auto !important;
134
+ max-width: 100% !important;
135
+ max-height: 100% !important;
116
136
  }
117
137
 
118
- :host([orientation='vertical'][drawer]) [part='detail'] {
119
- inset-block-end: 0;
120
- width: 100%;
121
- height: var(--_detail-min-size, min-content);
122
- }
138
+ /* Decorative/visual styles */
123
139
 
124
- :host([drawer][orientation='vertical'][containment='viewport']) [part='detail'] {
125
- inset-inline-start: 0;
126
- }
127
-
128
- /* Fixed size */
129
- :host([has-master-size][orientation='vertical']) [part='master'] {
130
- height: var(--_master-size);
131
- }
132
-
133
- :host([has-detail-size][orientation='vertical']:not([stack])) [part='detail'] {
134
- height: var(--_detail-size);
140
+ [part='backdrop'] {
141
+ background-color: rgba(0, 0, 0, 0.2);
135
142
  }
136
143
 
137
- /* Min size */
138
- :host([has-master-min-size][orientation='vertical']:not([drawer])) [part='master'],
139
- :host([has-master-min-size][orientation='vertical'][drawer]) {
140
- min-height: var(--_master-min-size);
144
+ [part='detail'] {
145
+ background: #fff;
141
146
  }
142
147
 
143
- :host([has-detail-min-size][orientation='vertical']:not([drawer]):not([stack])) [part='detail'] {
144
- min-height: var(--_detail-min-size);
148
+ :host(:is([drawer], [stack])) [part='detail'] {
149
+ box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
145
150
  }
146
151
 
147
- /* Stack mode */
148
- :host([stack]) [part='master'] {
149
- max-height: 100%;
152
+ :host([orientation='horizontal']:not([drawer], [stack])) [part='detail'] {
153
+ border-inline-start: 1px solid rgba(0, 0, 0, 0.1);
150
154
  }
151
155
 
152
- :host([stack]) [part='detail'] {
153
- inset: 0;
156
+ :host([orientation='vertical']:not([drawer], [stack])) [part='detail'] {
157
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
154
158
  }
155
159
  `;
package/src/styles/vaadin-master-detail-layout-transition-core-styles.js CHANGED
@@ -6,284 +6,135 @@
6
6
  import { css } from 'lit';
7
7
 
8
8
  export const masterDetailLayoutTransitionStyles = css`
9
- html:not([dir='rtl']) {
10
- --_vaadin-master-detail-layout-dir-multiplier: 1;
11
- }
12
-
13
- html[dir='rtl'] {
14
- --_vaadin-master-detail-layout-dir-multiplier: -1;
15
- }
16
-
17
- /* Default cross-fade animation */
18
- vaadin-master-detail-layout[transition] {
19
- view-transition-name: vaadin-master-detail-layout;
20
- }
21
-
22
- ::view-transition-group(vaadin-master-detail-layout) {
23
- animation-duration: var(--vaadin-master-detail-layout-transition-duration, 300ms);
24
- }
25
-
26
- /* Drawer - horizontal - add */
27
-
28
- vaadin-master-detail-layout[drawer][orientation='horizontal'][transition='add']::part(detail) {
29
- view-transition-name: vaadin-master-detail-layout-drawer-horizontal-detail-add;
30
- }
31
-
32
- ::view-transition-group(vaadin-master-detail-layout-drawer-horizontal-detail-add) {
33
- clip-path: inset(0);
34
- }
35
-
36
- ::view-transition-new(vaadin-master-detail-layout-drawer-horizontal-detail-add) {
37
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
38
- vaadin-master-detail-layout-drawer-horizontal-detail-add;
39
- }
40
-
41
- @keyframes vaadin-master-detail-layout-drawer-horizontal-detail-add {
42
- from {
43
- transform: translateX(calc(100% * var(--_vaadin-master-detail-layout-dir-multiplier)));
9
+ @media (prefers-reduced-motion: no-preference) {
10
+ html {
11
+ --_vaadin-mdl-dir-multiplier: 1;
12
+ --_vaadin-mdl-stack-master-offset: 20%;
13
+ --_vaadin-mdl-stack-master-clip-path: inset(0 0 0 var(--_vaadin-mdl-stack-master-offset));
14
+ --_vaadin-mdl-easing: cubic-bezier(0.78, 0, 0.22, 1);
44
15
  }
45
- }
46
-
47
- /* Drawer - horizontal - remove */
48
-
49
- vaadin-master-detail-layout[drawer][orientation='horizontal'][transition='remove']::part(detail) {
50
- view-transition-name: vaadin-master-detail-layout-drawer-horizontal-detail-remove;
51
- }
52
-
53
- ::view-transition-group(vaadin-master-detail-layout-drawer-horizontal-detail-remove) {
54
- clip-path: inset(0);
55
- }
56
16
 
57
- ::view-transition-old(vaadin-master-detail-layout-drawer-horizontal-detail-remove) {
58
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
59
- vaadin-master-detail-layout-drawer-horizontal-detail-remove;
60
- }
61
-
62
- @keyframes vaadin-master-detail-layout-drawer-horizontal-detail-remove {
63
- to {
64
- transform: translateX(calc(100% * var(--_vaadin-master-detail-layout-dir-multiplier)));
17
+ html[dir='rtl'] {
18
+ --_vaadin-mdl-dir-multiplier: -1;
19
+ --_vaadin-mdl-stack-master-clip-path: inset(0 var(--_vaadin-mdl-stack-master-offset) 0 0);
65
20
  }
66
- }
67
-
68
- /* Stack - horizontal - add */
69
21
 
70
- vaadin-master-detail-layout[stack][orientation='horizontal'][transition='add'] {
71
- view-transition-name: vaadin-master-detail-layout-stack-horizontal-add;
72
- }
73
-
74
- ::view-transition-group(vaadin-master-detail-layout-stack-horizontal-add) {
75
- clip-path: inset(0);
76
- }
77
-
78
- ::view-transition-new(vaadin-master-detail-layout-stack-horizontal-add) {
79
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
80
- vaadin-master-detail-layout-stack-horizontal-add-new;
81
- }
82
-
83
- ::view-transition-old(vaadin-master-detail-layout-stack-horizontal-add) {
84
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
85
- vaadin-master-detail-layout-stack-horizontal-add-old;
86
- }
87
-
88
- @keyframes vaadin-master-detail-layout-stack-horizontal-add-new {
89
- from {
90
- transform: translateX(calc(100px * var(--_vaadin-master-detail-layout-dir-multiplier)));
91
- opacity: 0;
22
+ ::view-transition-group(vaadin-mdl-backdrop),
23
+ ::view-transition-group(vaadin-mdl-master),
24
+ ::view-transition-group(vaadin-mdl-detail) {
25
+ animation-duration: 0.4s;
92
26
  }
93
- }
94
27
 
95
- @keyframes vaadin-master-detail-layout-stack-horizontal-add-old {
96
- to {
97
- transform: translateX(calc(-100px * var(--_vaadin-master-detail-layout-dir-multiplier)));
98
- opacity: 0;
28
+ ::view-transition-group(vaadin-mdl-master),
29
+ ::view-transition-group(vaadin-mdl-detail) {
30
+ animation-timing-function: var(--_vaadin-mdl-easing);
99
31
  }
100
- }
101
-
102
- /* Stack - horizontal - remove */
103
-
104
- vaadin-master-detail-layout[stack][orientation='horizontal'][transition='remove'] {
105
- view-transition-name: vaadin-master-detail-layout-stack-horizontal-remove;
106
- }
107
-
108
- ::view-transition-group(vaadin-master-detail-layout-stack-horizontal-remove) {
109
- clip-path: inset(0);
110
- }
111
32
 
112
- ::view-transition-new(vaadin-master-detail-layout-stack-horizontal-remove) {
113
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
114
- vaadin-master-detail-layout-stack-horizontal-remove-new;
115
- }
116
-
117
- ::view-transition-old(vaadin-master-detail-layout-stack-horizontal-remove) {
118
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
119
- vaadin-master-detail-layout-stack-horizontal-remove-old;
120
- }
121
-
122
- @keyframes vaadin-master-detail-layout-stack-horizontal-remove-new {
123
- from {
124
- transform: translateX(calc(-100px * var(--_vaadin-master-detail-layout-dir-multiplier)));
125
- opacity: 0;
33
+ ::view-transition-image-pair(vaadin-mdl-master),
34
+ ::view-transition-image-pair(vaadin-mdl-detail),
35
+ ::view-transition-new(vaadin-mdl-master),
36
+ ::view-transition-new(vaadin-mdl-detail),
37
+ ::view-transition-old(vaadin-mdl-master),
38
+ ::view-transition-old(vaadin-mdl-detail) {
39
+ animation-timing-function: inherit;
126
40
  }
127
- }
128
41
 
129
- @keyframes vaadin-master-detail-layout-stack-horizontal-remove-old {
130
- to {
131
- transform: translateX(calc(100px * var(--_vaadin-master-detail-layout-dir-multiplier)));
132
- opacity: 0;
42
+ /* Needed to promote the backdrop on top the master during the transition */
43
+ vaadin-master-detail-layout[transition]:not([transition='replace'])::part(backdrop) {
44
+ view-transition-name: vaadin-mdl-backdrop;
133
45
  }
134
- }
135
-
136
- /* Stack - horizontal - viewport - add */
137
-
138
- vaadin-master-detail-layout[stack][orientation='horizontal'][containment='viewport'][transition='add'] {
139
- view-transition-name: vaadin-master-detail-layout-stack-horizontal-viewport-add;
140
- }
141
-
142
- ::view-transition-new(vaadin-master-detail-layout-stack-horizontal-viewport-add) {
143
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
144
- vaadin-master-detail-layout-stack-horizontal-add-new;
145
- }
146
46
 
147
- /* Stack - horizontal - viewport - remove */
148
-
149
- vaadin-master-detail-layout[stack][orientation='horizontal'][containment='viewport'][transition='remove'] {
150
- view-transition-name: vaadin-master-detail-layout-stack-horizontal-viewport-remove;
151
- }
152
-
153
- ::view-transition-old(vaadin-master-detail-layout-stack-horizontal-viewport-remove) {
154
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
155
- vaadin-master-detail-layout-stack-horizontal-remove-old;
156
- }
157
-
158
- /* Drawer - vertical - add */
159
-
160
- vaadin-master-detail-layout[drawer][orientation='vertical'][transition='add']::part(detail) {
161
- view-transition-name: vaadin-master-detail-layout-drawer-vertical-detail-add;
162
- }
163
-
164
- ::view-transition-group(vaadin-master-detail-layout-drawer-vertical-detail-add) {
165
- clip-path: inset(0);
166
- }
167
-
168
- ::view-transition-new(vaadin-master-detail-layout-drawer-vertical-detail-add) {
169
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
170
- vaadin-master-detail-layout-drawer-vertical-detail-add;
171
- }
172
-
173
- @keyframes vaadin-master-detail-layout-drawer-vertical-detail-add {
174
- from {
175
- transform: translateY(100%);
47
+ vaadin-master-detail-layout[transition]:not([transition='replace']):not([drawer], [stack])::part(detail),
48
+ vaadin-master-detail-layout[transition]:is([drawer], [stack])::part(_detail-internal) {
49
+ view-transition-name: vaadin-mdl-detail;
176
50
  }
177
- }
178
-
179
- /* Drawer - vertical - remove */
180
51
 
181
- vaadin-master-detail-layout[drawer][orientation='vertical'][transition='remove']::part(detail) {
182
- view-transition-name: vaadin-master-detail-layout-drawer-vertical-detail-remove;
183
- }
184
-
185
- ::view-transition-group(vaadin-master-detail-layout-drawer-vertical-detail-remove) {
186
- clip-path: inset(0);
187
- }
188
-
189
- ::view-transition-old(vaadin-master-detail-layout-drawer-vertical-detail-remove) {
190
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
191
- vaadin-master-detail-layout-drawer-vertical-detail-remove;
192
- }
193
-
194
- @keyframes vaadin-master-detail-layout-drawer-vertical-detail-remove {
195
- to {
196
- transform: translateY(100%);
52
+ ::view-transition-group(vaadin-mdl-detail) {
53
+ clip-path: inset(0);
197
54
  }
198
- }
199
55
 
200
- /* Stack - vertical - add */
201
-
202
- vaadin-master-detail-layout[stack][orientation='vertical'][transition='add'] {
203
- view-transition-name: vaadin-master-detail-layout-stack-vertical-add;
204
- }
205
-
206
- ::view-transition-group(vaadin-master-detail-layout-stack-vertical-add) {
207
- clip-path: inset(0);
208
- }
209
-
210
- ::view-transition-new(vaadin-master-detail-layout-stack-vertical-add) {
211
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
212
- vaadin-master-detail-layout-stack-vertical-add-new;
213
- }
56
+ ::view-transition-new(vaadin-mdl-detail),
57
+ ::view-transition-old(vaadin-mdl-detail) {
58
+ animation-name: vaadin-mdl-detail-slide-in;
59
+ }
214
60
 
215
- ::view-transition-old(vaadin-master-detail-layout-stack-vertical-add) {
216
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
217
- vaadin-master-detail-layout-stack-vertical-add-old;
218
- }
61
+ ::view-transition-old(vaadin-mdl-detail) {
62
+ animation-direction: reverse;
63
+ }
219
64
 
220
- @keyframes vaadin-master-detail-layout-stack-vertical-add-new {
221
- from {
222
- transform: translateY(100px);
223
- opacity: 0;
65
+ @keyframes vaadin-mdl-detail-slide-in {
66
+ 0% {
67
+ translate: calc((100% + 30px) * var(--_vaadin-mdl-dir-multiplier));
68
+ }
224
69
  }
225
- }
226
70
 
227
- @keyframes vaadin-master-detail-layout-stack-vertical-add-old {
228
- to {
229
- transform: translateY(-100px);
71
+ vaadin-master-detail-layout[orientation='horizontal'][stack][has-detail]::part(master) {
72
+ translate: calc(var(--_vaadin-mdl-stack-master-offset) * var(--_vaadin-mdl-dir-multiplier) * -1);
230
73
  opacity: 0;
231
74
  }
232
- }
233
-
234
- /* Stack - vertical - remove */
235
75
 
236
- vaadin-master-detail-layout[stack][orientation='vertical'][transition='remove'] {
237
- view-transition-name: vaadin-master-detail-layout-stack-vertical-remove;
238
- }
76
+ vaadin-master-detail-layout[transition]::part(master) {
77
+ view-transition-name: vaadin-mdl-master;
78
+ }
239
79
 
240
- ::view-transition-group(vaadin-master-detail-layout-stack-vertical-remove) {
241
- clip-path: inset(0);
242
- }
80
+ vaadin-master-detail-layout[orientation='horizontal'][stack][transition='add']::part(master) {
81
+ view-transition-class: stack-add;
82
+ }
243
83
 
244
- ::view-transition-new(vaadin-master-detail-layout-stack-vertical-remove) {
245
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
246
- vaadin-master-detail-layout-stack-vertical-remove-new;
247
- }
84
+ vaadin-master-detail-layout[orientation='horizontal'][stack][transition='remove']::part(master) {
85
+ view-transition-class: stack-remove;
86
+ }
248
87
 
249
- ::view-transition-old(vaadin-master-detail-layout-stack-vertical-remove) {
250
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
251
- vaadin-master-detail-layout-stack-vertical-remove-old;
252
- }
88
+ ::view-transition-new(vaadin-mdl-master),
89
+ ::view-transition-old(vaadin-mdl-master) {
90
+ object-fit: none;
91
+ object-position: max(0%, var(--_vaadin-mdl-dir-multiplier) * -100%) 0;
92
+ }
253
93
 
254
- @keyframes vaadin-master-detail-layout-stack-vertical-remove-new {
255
- from {
256
- transform: translateY(-100px);
257
- opacity: 0;
94
+ ::view-transition-new(vaadin-mdl-master.stack-remove),
95
+ ::view-transition-old(vaadin-mdl-master.stack-remove) {
96
+ animation-name: vaadin-mdl-master-stack-remove;
97
+ clip-path: var(--_vaadin-mdl-stack-master-clip-path);
258
98
  }
259
- }
260
99
 
261
- @keyframes vaadin-master-detail-layout-stack-vertical-remove-old {
262
- to {
263
- transform: translateY(100px);
264
- opacity: 0;
100
+ @keyframes vaadin-mdl-master-stack-remove {
101
+ 100% {
102
+ clip-path: inset(0);
103
+ }
265
104
  }
266
- }
267
105
 
268
- /* Stack - vertical - viewport - add */
106
+ ::view-transition-new(vaadin-mdl-master.stack-add),
107
+ ::view-transition-old(vaadin-mdl-master.stack-add) {
108
+ animation-name: vaadin-mdl-master-stack-add;
109
+ clip-path: inset(0);
110
+ }
269
111
 
270
- vaadin-master-detail-layout[stack][orientation='vertical'][containment='viewport'][transition='add'] {
271
- view-transition-name: vaadin-master-detail-layout-stack-vertical-viewport-add;
272
- }
112
+ @keyframes vaadin-mdl-master-stack-add {
113
+ 100% {
114
+ clip-path: var(--_vaadin-mdl-stack-master-clip-path);
115
+ }
116
+ }
273
117
 
274
- ::view-transition-new(vaadin-master-detail-layout-stack-vertical-viewport-add) {
275
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
276
- vaadin-master-detail-layout-stack-vertical-add-new;
277
- }
118
+ /* prettier-ignore */
119
+ vaadin-master-detail-layout[orientation='vertical']:not([drawer], [stack])[transition]:not([transition='replace'])::part(detail),
120
+ vaadin-master-detail-layout[orientation='vertical']:is([drawer], [stack])[transition]::part(_detail-internal) {
121
+ view-transition-name: vaadin-mdl-detail;
122
+ view-transition-class: vertical;
123
+ }
278
124
 
279
- /* Stack - vertical - viewport - remove */
125
+ ::view-transition-new(vaadin-mdl-detail.vertical),
126
+ ::view-transition-old(vaadin-mdl-detail.vertical) {
127
+ animation-name: vaadin-mdl-vertical-detail-slide-in;
128
+ }
280
129
 
281
- vaadin-master-detail-layout[stack][orientation='vertical'][containment='viewport'][transition='remove'] {
282
- view-transition-name: vaadin-master-detail-layout-stack-vertical-viewport-remove;
283
- }
130
+ ::view-transition-old(vaadin-mdl-detail.vertical) {
131
+ animation-direction: reverse;
132
+ }
284
133
 
285
- ::view-transition-old(vaadin-master-detail-layout-stack-vertical-viewport-remove) {
286
- animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
287
- vaadin-master-detail-layout-stack-vertical-remove-old;
134
+ @keyframes vaadin-mdl-vertical-detail-slide-in {
135
+ 0% {
136
+ transform: translateY(calc(100% + 30px));
137
+ }
138
+ }
288
139
  }
289
140
  `;
package/src/vaadin-master-detail-layout.d.ts CHANGED
@@ -23,13 +23,6 @@ export interface MasterDetailLayoutEventMap extends HTMLElementEventMap, MasterD
23
23
  *
24
24
  * ### Styling
25
25
  *
26
- * The following custom CSS property are available for styling (needed to be set
27
- * on the `<html>` element since they are used by the global view transitions):
28
- *
29
- * Custom CSS property | Description | Default
30
- * -----------------------------------------------------|---------------------|--------
31
- * `--vaadin-master-detail-layout-transition-duration` | Transition duration | 300ms
32
- *
33
26
  * The following shadow DOM parts are available for styling:
34
27
  *
35
28
  * Part name | Description
package/src/vaadin-master-detail-layout.js CHANGED
@@ -22,13 +22,6 @@ import { masterDetailLayoutTransitionStyles } from './styles/vaadin-master-detai
22
22
  *
23
23
  * ### Styling
24
24
  *
25
- * The following custom CSS properties are available for styling (needed to be set
26
- * on the `<html>` element since they are used by the global view transitions):
27
- *
28
- * Custom CSS property | Description | Default
29
- * -----------------------------------------------------|---------------------|--------
30
- * `--vaadin-master-detail-layout-transition-duration` | Transition duration | 300ms
31
- *
32
25
  * The following shadow DOM parts are available for styling:
33
26
  *
34
27
  * Part name | Description
@@ -60,7 +53,7 @@ import { masterDetailLayoutTransitionStyles } from './styles/vaadin-master-detai
60
53
  * @mixes SlotStylesMixin
61
54
  */
62
55
  class MasterDetailLayout extends SlotStylesMixin(
63
- ResizeMixin(ElementMixin(ThemableMixin(LumoInjectionMixin(PolylitMixin(LitElement))))),
56
+ ResizeMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
64
57
  ) {
65
58
  static get is() {
66
59
  return 'vaadin-master-detail-layout';
@@ -257,18 +250,24 @@ class MasterDetailLayout extends SlotStylesMixin(
257
250
  /** @protected */
258
251
  render() {
259
252
  return html`
260
- <div part="backdrop" @click="${this.__onBackdropClick}"></div>
261
- <div id="master" part="master" ?inert="${this._hasDetail && this._drawer && this.containment === 'layout'}">
262
- <slot></slot>
263
- </div>
253
+ <div part="backdrop"></div>
264
254
  <div
265
- id="detail"
266
- part="detail"
267
- role="${this._drawer || this._stack ? 'dialog' : nothing}"
268
- aria-modal="${this._drawer && this.containment === 'viewport' ? 'true' : nothing}"
269
- @keydown="${this.__onDetailKeydown}"
255
+ id="master"
256
+ part="master"
257
+ ?inert="${this._hasDetail && (this._stack || (this._drawer && this.containment === 'layout'))}"
270
258
  >
271
- <slot name="detail" @slotchange="${this.__onDetailSlotChange}"></slot>
259
+ <slot></slot>
260
+ </div>
261
+ <div part="_detail-internal" @click="${this.__onDetailClick}">
262
+ <div
263
+ id="detail"
264
+ part="detail"
265
+ role="${this._drawer || this._stack ? 'dialog' : nothing}"
266
+ aria-modal="${this._drawer && this.containment === 'viewport' ? 'true' : nothing}"
267
+ @keydown="${this.__onDetailKeydown}"
268
+ >
269
+ <slot name="detail" @slotchange="${this.__onDetailSlotChange}"></slot>
270
+ </div>
272
271
  </div>
273
272
  `;
274
273
  }
@@ -291,8 +290,12 @@ class MasterDetailLayout extends SlotStylesMixin(
291
290
  }
292
291
 
293
292
  /** @private */
294
- __onBackdropClick() {
295
- this.dispatchEvent(new CustomEvent('backdrop-click'));
293
+ __onDetailClick(e) {
294
+ // The detail wrapper element fully covers the backdrop part, so listen
295
+ // to click event on it and detect if it was outside the detail content
296
+ if (!e.composedPath().includes(this.$.detail)) {
297
+ this.dispatchEvent(new CustomEvent('backdrop-click'));
298
+ }
296
299
  }
297
300
 
298
301
  /** @private */
package/theme/lumo/vaadin-master-detail-layout-styles.js CHANGED
@@ -7,21 +7,16 @@ registerStyles(
7
7
  css`
8
8
  :host(:is([drawer], [stack])) [part='detail'] {
9
9
  background-color: var(--lumo-base-color);
10
+ box-shadow:
11
+ 0 0 0 1px var(--lumo-shade-5pct),
12
+ var(--lumo-box-shadow-m);
10
13
  }
11
14
 
12
- :host([drawer]) [part='detail'] {
13
- box-shadow: var(--lumo-box-shadow-s);
15
+ [part='detail'] {
16
+ border-color: var(--lumo-contrast-10pct);
14
17
  }
15
18
 
16
- :host([drawer][orientation='horizontal']) [part='detail'] {
17
- border-inline-start: 1px solid var(--lumo-contrast-10pct);
18
- }
19
-
20
- :host([drawer][orientation='vertical']) [part='detail'] {
21
- border-block-start: 1px solid var(--lumo-contrast-10pct);
22
- }
23
-
24
- :host([drawer]) [part='backdrop'] {
19
+ [part='backdrop'] {
25
20
  background-color: var(--lumo-shade-20pct);
26
21
  }
27
22
  `,
package/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/master-detail-layout",
4
- "version": "25.0.0-alpha7",
4
+ "version": "25.0.0-alpha8",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "vaadin-master-detail-layout",
11
- "description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Styling\n\nThe following custom CSS properties are available for styling (needed to be set\non the `<html>` element since they are used by the global view transitions):\n\nCustom CSS property | Description | Default\n-----------------------------------------------------|---------------------|--------\n`--vaadin-master-detail-layout-transition-duration` | Transition duration | 300ms\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------|----------------------\n`backdrop` | Backdrop covering the master area in the drawer mode\n`master` | The master area\n`detail` | The detail area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------| -----------\n`containment` | Set to `layout` or `viewport` depending on the containment.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided.\n`drawer` | Set when the layout is using the drawer mode.\n`stack` | Set when the layout is using the stack mode.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
11
+ "description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------|----------------------\n`backdrop` | Backdrop covering the master area in the drawer mode\n`master` | The master area\n`detail` | The detail area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------| -----------\n`containment` | Set to `layout` or `viewport` depending on the containment.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided.\n`drawer` | Set when the layout is using the drawer mode.\n`stack` | Set when the layout is using the stack mode.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "detail-size",
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/master-detail-layout",
4
- "version": "25.0.0-alpha7",
4
+ "version": "25.0.0-alpha8",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,7 +16,7 @@
16
16
  "elements": [
17
17
  {
18
18
  "name": "vaadin-master-detail-layout",
19
- "description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Styling\n\nThe following custom CSS properties are available for styling (needed to be set\non the `<html>` element since they are used by the global view transitions):\n\nCustom CSS property | Description | Default\n-----------------------------------------------------|---------------------|--------\n`--vaadin-master-detail-layout-transition-duration` | Transition duration | 300ms\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------|----------------------\n`backdrop` | Backdrop covering the master area in the drawer mode\n`master` | The master area\n`detail` | The detail area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------| -----------\n`containment` | Set to `layout` or `viewport` depending on the containment.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided.\n`drawer` | Set when the layout is using the drawer mode.\n`stack` | Set when the layout is using the stack mode.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
19
+ "description": "`<vaadin-master-detail-layout>` is a web component for building UIs with a master\n(or primary) area and a detail (or secondary) area that is displayed next to, or\noverlaid on top of, the master area, depending on configuration and viewport size.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------|----------------------\n`backdrop` | Backdrop covering the master area in the drawer mode\n`master` | The master area\n`detail` | The detail area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------| -----------\n`containment` | Set to `layout` or `viewport` depending on the containment.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided.\n`drawer` | Set when the layout is using the drawer mode.\n`stack` | Set when the layout is using the stack mode.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {