@vaadin/master-detail-layout 24.8.0-alpha17 → 24.8.0-alpha18

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 +8 -8
  2. package/src/vaadin-master-detail-layout-transition-styles.js +28 -28
  3. package/src/vaadin-master-detail-layout.d.ts +18 -12
  4. package/src/vaadin-master-detail-layout.js +47 -41
  5. package/theme/lumo/vaadin-master-detail-layout-styles.js +5 -5
  6. package/theme/material/vaadin-master-detail-layout-styles.js +5 -5
  7. package/web-types.json +15 -15
  8. package/web-types.lit.json +9 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/master-detail-layout",
3
- "version": "24.8.0-alpha17",
3
+ "version": "24.8.0-alpha18",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -34,15 +34,15 @@
34
34
  "web-component"
35
35
  ],
36
36
  "dependencies": {
37
- "@vaadin/a11y-base": "24.8.0-alpha17",
38
- "@vaadin/component-base": "24.8.0-alpha17",
39
- "@vaadin/vaadin-lumo-styles": "24.8.0-alpha17",
40
- "@vaadin/vaadin-material-styles": "24.8.0-alpha17",
41
- "@vaadin/vaadin-themable-mixin": "24.8.0-alpha17",
37
+ "@vaadin/a11y-base": "24.8.0-alpha18",
38
+ "@vaadin/component-base": "24.8.0-alpha18",
39
+ "@vaadin/vaadin-lumo-styles": "24.8.0-alpha18",
40
+ "@vaadin/vaadin-material-styles": "24.8.0-alpha18",
41
+ "@vaadin/vaadin-themable-mixin": "24.8.0-alpha18",
42
42
  "lit": "^3.0.0"
43
43
  },
44
44
  "devDependencies": {
45
- "@vaadin/chai-plugins": "24.8.0-alpha17",
45
+ "@vaadin/chai-plugins": "24.8.0-alpha18",
46
46
  "@vaadin/testing-helpers": "^1.1.0",
47
47
  "sinon": "^18.0.0"
48
48
  },
@@ -50,5 +50,5 @@
50
50
  "web-types.json",
51
51
  "web-types.lit.json"
52
52
  ],
53
- "gitHead": "bf06d4d774049e0d19a3f008273864df15e085f6"
53
+ "gitHead": "57d1022f4c197d3a0100d360017ea37777cb3595"
54
54
  }
package/src/vaadin-master-detail-layout-transition-styles.js CHANGED
@@ -23,43 +23,43 @@ export const transitionStyles = css`
23
23
  animation-duration: var(--vaadin-master-detail-layout-transition-duration, 300ms);
24
24
  }
25
25
 
26
- /* Overlay - horizontal - add */
26
+ /* Drawer - horizontal - add */
27
27
 
28
- vaadin-master-detail-layout[overlay][orientation='horizontal'][transition='add']::part(detail) {
29
- view-transition-name: vaadin-master-detail-layout-overlay-horizontal-detail-add;
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
30
  }
31
31
 
32
- ::view-transition-group(vaadin-master-detail-layout-overlay-horizontal-detail-add) {
32
+ ::view-transition-group(vaadin-master-detail-layout-drawer-horizontal-detail-add) {
33
33
  clip-path: inset(0);
34
34
  }
35
35
 
36
- ::view-transition-new(vaadin-master-detail-layout-overlay-horizontal-detail-add) {
36
+ ::view-transition-new(vaadin-master-detail-layout-drawer-horizontal-detail-add) {
37
37
  animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
38
- vaadin-master-detail-layout-overlay-horizontal-detail-add;
38
+ vaadin-master-detail-layout-drawer-horizontal-detail-add;
39
39
  }
40
40
 
41
- @keyframes vaadin-master-detail-layout-overlay-horizontal-detail-add {
41
+ @keyframes vaadin-master-detail-layout-drawer-horizontal-detail-add {
42
42
  from {
43
43
  transform: translateX(calc(100% * var(--_vaadin-master-detail-layout-dir-multiplier)));
44
44
  }
45
45
  }
46
46
 
47
- /* Overlay - horizontal - remove */
47
+ /* Drawer - horizontal - remove */
48
48
 
49
- vaadin-master-detail-layout[overlay][orientation='horizontal'][transition='remove']::part(detail) {
50
- view-transition-name: vaadin-master-detail-layout-overlay-horizontal-detail-remove;
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
51
  }
52
52
 
53
- ::view-transition-group(vaadin-master-detail-layout-overlay-horizontal-detail-remove) {
53
+ ::view-transition-group(vaadin-master-detail-layout-drawer-horizontal-detail-remove) {
54
54
  clip-path: inset(0);
55
55
  }
56
56
 
57
- ::view-transition-old(vaadin-master-detail-layout-overlay-horizontal-detail-remove) {
57
+ ::view-transition-old(vaadin-master-detail-layout-drawer-horizontal-detail-remove) {
58
58
  animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
59
- vaadin-master-detail-layout-overlay-horizontal-detail-remove;
59
+ vaadin-master-detail-layout-drawer-horizontal-detail-remove;
60
60
  }
61
61
 
62
- @keyframes vaadin-master-detail-layout-overlay-horizontal-detail-remove {
62
+ @keyframes vaadin-master-detail-layout-drawer-horizontal-detail-remove {
63
63
  to {
64
64
  transform: translateX(calc(100% * var(--_vaadin-master-detail-layout-dir-multiplier)));
65
65
  }
@@ -155,43 +155,43 @@ export const transitionStyles = css`
155
155
  vaadin-master-detail-layout-stack-horizontal-remove-old;
156
156
  }
157
157
 
158
- /* Overlay - vertical - add */
158
+ /* Drawer - vertical - add */
159
159
 
160
- vaadin-master-detail-layout[overlay][orientation='vertical'][transition='add']::part(detail) {
161
- view-transition-name: vaadin-master-detail-layout-overlay-vertical-detail-add;
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
162
  }
163
163
 
164
- ::view-transition-group(vaadin-master-detail-layout-overlay-vertical-detail-add) {
164
+ ::view-transition-group(vaadin-master-detail-layout-drawer-vertical-detail-add) {
165
165
  clip-path: inset(0);
166
166
  }
167
167
 
168
- ::view-transition-new(vaadin-master-detail-layout-overlay-vertical-detail-add) {
168
+ ::view-transition-new(vaadin-master-detail-layout-drawer-vertical-detail-add) {
169
169
  animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
170
- vaadin-master-detail-layout-overlay-vertical-detail-add;
170
+ vaadin-master-detail-layout-drawer-vertical-detail-add;
171
171
  }
172
172
 
173
- @keyframes vaadin-master-detail-layout-overlay-vertical-detail-add {
173
+ @keyframes vaadin-master-detail-layout-drawer-vertical-detail-add {
174
174
  from {
175
175
  transform: translateY(100%);
176
176
  }
177
177
  }
178
178
 
179
- /* Overlay - vertical - remove */
179
+ /* Drawer - vertical - remove */
180
180
 
181
- vaadin-master-detail-layout[overlay][orientation='vertical'][transition='remove']::part(detail) {
182
- view-transition-name: vaadin-master-detail-layout-overlay-vertical-detail-remove;
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
183
  }
184
184
 
185
- ::view-transition-group(vaadin-master-detail-layout-overlay-vertical-detail-remove) {
185
+ ::view-transition-group(vaadin-master-detail-layout-drawer-vertical-detail-remove) {
186
186
  clip-path: inset(0);
187
187
  }
188
188
 
189
- ::view-transition-old(vaadin-master-detail-layout-overlay-vertical-detail-remove) {
189
+ ::view-transition-old(vaadin-master-detail-layout-drawer-vertical-detail-remove) {
190
190
  animation: var(--vaadin-master-detail-layout-transition-duration, 300ms) ease both
191
- vaadin-master-detail-layout-overlay-vertical-detail-remove;
191
+ vaadin-master-detail-layout-drawer-vertical-detail-remove;
192
192
  }
193
193
 
194
- @keyframes vaadin-master-detail-layout-overlay-vertical-detail-remove {
194
+ @keyframes vaadin-master-detail-layout-drawer-vertical-detail-remove {
195
195
  to {
196
196
  transform: translateY(100%);
197
197
  }
package/src/vaadin-master-detail-layout.d.ts CHANGED
@@ -34,7 +34,7 @@ export interface MasterDetailLayoutEventMap extends HTMLElementEventMap, MasterD
34
34
  *
35
35
  * Part name | Description
36
36
  * ---------------|----------------------
37
- * `backdrop` | Backdrop covering the master area in the overlay mode
37
+ * `backdrop` | Backdrop covering the master area in the drawer mode
38
38
  * `master` | The master area
39
39
  * `detail` | The detail area
40
40
  *
@@ -45,12 +45,12 @@ export interface MasterDetailLayoutEventMap extends HTMLElementEventMap, MasterD
45
45
  * `containment` | Set to `layout` or `viewport` depending on the containment.
46
46
  * `orientation` | Set to `horizontal` or `vertical` depending on the orientation.
47
47
  * `has-detail` | Set when the detail content is provided.
48
- * `overlay` | Set when the layout is using the overlay mode.
48
+ * `drawer` | Set when the layout is using the drawer mode.
49
49
  * `stack` | Set when the layout is using the stack mode.
50
50
  *
51
51
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
52
52
  *
53
- * @fires {CustomEvent} backdrop-click - Fired when the user clicks the backdrop in the overlay mode.
53
+ * @fires {CustomEvent} backdrop-click - Fired when the user clicks the backdrop in the drawer mode.
54
54
  * @fires {CustomEvent} detail-escape-press - Fired when the user presses Escape in the detail area.
55
55
  */
56
56
  declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
@@ -58,7 +58,8 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
58
58
  * Fixed size (in CSS length units) to be set on the detail area.
59
59
  * When specified, it prevents the detail area from growing or
60
60
  * shrinking. If there is not enough space to show master and detail
61
- * areas next to each other, the layout switches to the overlay mode.
61
+ * areas next to each other, the details are shown as an overlay:
62
+ * either as drawer or stack, depending on the `stackOverlay` property.
62
63
  *
63
64
  * @attr {string} detail-size
64
65
  */
@@ -68,7 +69,8 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
68
69
  * Minimum size (in CSS length units) to be set on the detail area.
69
70
  * When specified, it prevents the detail area from shrinking below
70
71
  * this size. If there is not enough space to show master and detail
71
- * areas next to each other, the layout switches to the overlay mode.
72
+ * areas next to each other, the details are shown as an overlay:
73
+ * either as drawer or stack, depending on the `stackOverlay` property.
72
74
  *
73
75
  * @attr {string} detail-min-size
74
76
  */
@@ -78,7 +80,8 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
78
80
  * Fixed size (in CSS length units) to be set on the master area.
79
81
  * When specified, it prevents the master area from growing or
80
82
  * shrinking. If there is not enough space to show master and detail
81
- * areas next to each other, the layout switches to the overlay mode.
83
+ * areas next to each other, the details are shown as an overlay:
84
+ * either as drawer or stack, depending on the `stackOverlay` property.
82
85
  *
83
86
  * @attr {string} master-size
84
87
  */
@@ -88,7 +91,8 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
88
91
  * Minimum size (in CSS length units) to be set on the master area.
89
92
  * When specified, it prevents the master area from shrinking below
90
93
  * this size. If there is not enough space to show master and detail
91
- * areas next to each other, the layout switches to the overlay mode.
94
+ * areas next to each other, the details are shown as an overlay:
95
+ * either as drawer or stack, depending on the `stackOverlay` property.
92
96
  *
93
97
  * @attr {string} master-min-size
94
98
  */
@@ -103,9 +107,10 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
103
107
  orientation: 'horizontal' | 'vertical';
104
108
 
105
109
  /**
106
- * When specified, forces the layout to use overlay mode, even if
107
- * there is enough space for master and detail to be shown next to
108
- * each other using the default (split) mode.
110
+ * When specified, forces the details to be shown as an overlay
111
+ * (either as drawer or stack), even if there is enough space for
112
+ * master and detail to be shown next to each other using the default
113
+ * (split) mode.
109
114
  *
110
115
  * In order to enforce the stack mode, use this property together with
111
116
  * `stackOverlay` property and set both to `true`.
@@ -123,8 +128,9 @@ declare class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ThemableMix
123
128
  containment: 'layout' | 'viewport';
124
129
 
125
130
  /**
126
- * When true, the layout in the overlay mode is rendered as a "stack",
127
- * making detail area fully cover the master area.
131
+ * When true, the layout in the overlay mode is rendered as a stack,
132
+ * making detail area fully cover the master area. Otherwise, it is
133
+ * rendered as a drawer and has a visual backdrop.
128
134
  *
129
135
  * In order to enforce the stack mode, use this property together with
130
136
  * `forceOverlay` property and set both to `true`.
package/src/vaadin-master-detail-layout.js CHANGED
@@ -31,7 +31,7 @@ import { transitionStyles } from './vaadin-master-detail-layout-transition-style
31
31
  *
32
32
  * Part name | Description
33
33
  * ---------------|----------------------
34
- * `backdrop` | Backdrop covering the master area in the overlay mode
34
+ * `backdrop` | Backdrop covering the master area in the drawer mode
35
35
  * `master` | The master area
36
36
  * `detail` | The detail area
37
37
  *
@@ -42,12 +42,12 @@ import { transitionStyles } from './vaadin-master-detail-layout-transition-style
42
42
  * `containment` | Set to `layout` or `viewport` depending on the containment.
43
43
  * `orientation` | Set to `horizontal` or `vertical` depending on the orientation.
44
44
  * `has-detail` | Set when the detail content is provided.
45
- * `overlay` | Set when the layout is using the overlay mode.
45
+ * `drawer` | Set when the layout is using the drawer mode.
46
46
  * `stack` | Set when the layout is using the stack mode.
47
47
  *
48
48
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
49
49
  *
50
- * @fires {CustomEvent} backdrop-click - Fired when the user clicks the backdrop in the overlay mode.
50
+ * @fires {CustomEvent} backdrop-click - Fired when the user clicks the backdrop in the drawer mode.
51
51
  * @fires {CustomEvent} detail-escape-press - Fired when the user presses Escape in the detail area.
52
52
  *
53
53
  * @customElement
@@ -83,39 +83,39 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
83
83
  max-width: 100%;
84
84
  }
85
85
 
86
- /* Overlay mode */
87
- :host(:is([overlay], [stack])) {
86
+ /* Drawer mode */
87
+ :host(:is([drawer], [stack])) {
88
88
  position: relative;
89
89
  }
90
90
 
91
- :host(:is([overlay], [stack])[containment='layout']) [part='detail'],
92
- :host([overlay][containment='layout']) [part='backdrop'] {
91
+ :host(:is([drawer], [stack])[containment='layout']) [part='detail'],
92
+ :host([drawer][containment='layout']) [part='backdrop'] {
93
93
  position: absolute;
94
94
  }
95
95
 
96
- :host(:is([overlay], [stack])[containment='viewport']) [part='detail'],
97
- :host([overlay][containment='viewport']) [part='backdrop'] {
96
+ :host(:is([drawer], [stack])[containment='viewport']) [part='detail'],
97
+ :host([drawer][containment='viewport']) [part='backdrop'] {
98
98
  position: fixed;
99
99
  }
100
100
 
101
- :host([overlay][has-detail]) [part='backdrop'] {
101
+ :host([drawer][has-detail]) [part='backdrop'] {
102
102
  display: block;
103
103
  inset: 0;
104
104
  z-index: 1;
105
105
  }
106
106
 
107
- :host(:is([overlay], [stack])) [part='detail'] {
107
+ :host(:is([drawer], [stack])) [part='detail'] {
108
108
  z-index: 1;
109
109
  }
110
110
 
111
- :host([overlay][orientation='horizontal']) [part='detail'] {
111
+ :host([drawer][orientation='horizontal']) [part='detail'] {
112
112
  inset-inline-end: 0;
113
113
  height: 100%;
114
114
  width: var(--_detail-min-size, min-content);
115
115
  max-width: 100%;
116
116
  }
117
117
 
118
- :host([overlay][orientation='horizontal'][containment='viewport']) [part='detail'] {
118
+ :host([drawer][orientation='horizontal'][containment='viewport']) [part='detail'] {
119
119
  inset-block-start: 0;
120
120
  }
121
121
 
@@ -151,11 +151,11 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
151
151
  }
152
152
 
153
153
  /* Min size */
154
- :host([has-master-min-size][has-detail][orientation='horizontal']:not([overlay]):not([stack])) [part='master'] {
154
+ :host([has-master-min-size][has-detail][orientation='horizontal']:not([drawer]):not([stack])) [part='master'] {
155
155
  min-width: var(--_master-min-size);
156
156
  }
157
157
 
158
- :host([has-detail-min-size][orientation='horizontal']:not([overlay]):not([stack])) [part='detail'] {
158
+ :host([has-detail-min-size][orientation='horizontal']:not([drawer]):not([stack])) [part='detail'] {
159
159
  min-width: var(--_detail-min-size);
160
160
  }
161
161
 
@@ -169,17 +169,17 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
169
169
  flex-direction: column;
170
170
  }
171
171
 
172
- :host([orientation='vertical'][overlay]) [part='master'] {
172
+ :host([orientation='vertical'][drawer]) [part='master'] {
173
173
  max-height: 100%;
174
174
  }
175
175
 
176
- :host([orientation='vertical'][overlay]) [part='detail'] {
176
+ :host([orientation='vertical'][drawer]) [part='detail'] {
177
177
  inset-block-end: 0;
178
178
  width: 100%;
179
179
  height: var(--_detail-min-size, min-content);
180
180
  }
181
181
 
182
- :host([overlay][orientation='vertical'][containment='viewport']) [part='detail'] {
182
+ :host([drawer][orientation='vertical'][containment='viewport']) [part='detail'] {
183
183
  inset-inline-start: 0;
184
184
  }
185
185
 
@@ -193,12 +193,12 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
193
193
  }
194
194
 
195
195
  /* Min size */
196
- :host([has-master-min-size][orientation='vertical']:not([overlay])) [part='master'],
197
- :host([has-master-min-size][orientation='vertical'][overlay]) {
196
+ :host([has-master-min-size][orientation='vertical']:not([drawer])) [part='master'],
197
+ :host([has-master-min-size][orientation='vertical'][drawer]) {
198
198
  min-height: var(--_master-min-size);
199
199
  }
200
200
 
201
- :host([has-detail-min-size][orientation='vertical']:not([overlay]):not([stack])) [part='detail'] {
201
+ :host([has-detail-min-size][orientation='vertical']:not([drawer]):not([stack])) [part='detail'] {
202
202
  min-height: var(--_detail-min-size);
203
203
  }
204
204
 
@@ -219,7 +219,8 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
219
219
  * Fixed size (in CSS length units) to be set on the detail area.
220
220
  * When specified, it prevents the detail area from growing or
221
221
  * shrinking. If there is not enough space to show master and detail
222
- * areas next to each other, the layout switches to the overlay mode.
222
+ * areas next to each other, the details are shown as an overlay:
223
+ * either as drawer or stack, depending on the `stackOverlay` property.
223
224
  *
224
225
  * @attr {string} detail-size
225
226
  */
@@ -233,7 +234,8 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
233
234
  * Minimum size (in CSS length units) to be set on the detail area.
234
235
  * When specified, it prevents the detail area from shrinking below
235
236
  * this size. If there is not enough space to show master and detail
236
- * areas next to each other, the layout switches to the overlay mode.
237
+ * areas next to each other, the details are shown as an overlay:
238
+ * either as drawer or stack, depending on the `stackOverlay` property.
237
239
  *
238
240
  * @attr {string} detail-min-size
239
241
  */
@@ -247,7 +249,8 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
247
249
  * Fixed size (in CSS length units) to be set on the master area.
248
250
  * When specified, it prevents the master area from growing or
249
251
  * shrinking. If there is not enough space to show master and detail
250
- * areas next to each other, the layout switches to the overlay mode.
252
+ * areas next to each other, the details are shown as an overlay:
253
+ * either as drawer or stack, depending on the `stackOverlay` property.
251
254
  *
252
255
  * @attr {string} master-size
253
256
  */
@@ -261,7 +264,8 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
261
264
  * Minimum size (in CSS length units) to be set on the master area.
262
265
  * When specified, it prevents the master area from shrinking below
263
266
  * this size. If there is not enough space to show master and detail
264
- * areas next to each other, the layout switches to the overlay mode.
267
+ * areas next to each other, the details are shown as an overlay:
268
+ * either as drawer or stack, depending on the `stackOverlay` property.
265
269
  *
266
270
  * @attr {string} master-min-size
267
271
  */
@@ -286,9 +290,10 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
286
290
  },
287
291
 
288
292
  /**
289
- * When specified, forces the layout to use overlay mode, even if
290
- * there is enough space for master and detail to be shown next to
291
- * each other using the default (split) mode.
293
+ * When specified, forces the details to be shown as an overlay
294
+ * (either as drawer or stack), even if there is enough space for
295
+ * master and detail to be shown next to each other using the default
296
+ * (split) mode.
292
297
  *
293
298
  * In order to enforce the stack mode, use this property together with
294
299
  * `stackOverlay` property and set both to `true`.
@@ -316,8 +321,9 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
316
321
  },
317
322
 
318
323
  /**
319
- * When true, the layout in the overlay mode is rendered as a "stack",
320
- * making detail area fully cover the master area.
324
+ * When true, the layout in the overlay mode is rendered as a stack,
325
+ * making detail area fully cover the master area. Otherwise, it is
326
+ * rendered as a drawer and has a visual backdrop.
321
327
  *
322
328
  * In order to enforce the stack mode, use this property together with
323
329
  * `forceOverlay` property and set both to `true`.
@@ -342,12 +348,12 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
342
348
  },
343
349
 
344
350
  /**
345
- * When true, the component uses the overlay mode. This property is read-only.
351
+ * When true, the component uses the drawer mode. This property is read-only.
346
352
  * @protected
347
353
  */
348
- _overlay: {
354
+ _drawer: {
349
355
  type: Boolean,
350
- attribute: 'overlay',
356
+ attribute: 'drawer',
351
357
  reflectToAttribute: true,
352
358
  sync: true,
353
359
  },
@@ -389,14 +395,14 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
389
395
  render() {
390
396
  return html`
391
397
  <div part="backdrop" @click="${this.__onBackdropClick}"></div>
392
- <div id="master" part="master" ?inert="${this._hasDetail && this._overlay && this.containment === 'layout'}">
398
+ <div id="master" part="master" ?inert="${this._hasDetail && this._drawer && this.containment === 'layout'}">
393
399
  <slot></slot>
394
400
  </div>
395
401
  <div
396
402
  id="detail"
397
403
  part="detail"
398
- role="${this._overlay || this._stack ? 'dialog' : nothing}"
399
- aria-modal="${this._overlay && this.containment === 'viewport' ? 'true' : nothing}"
404
+ role="${this._drawer || this._stack ? 'dialog' : nothing}"
405
+ aria-modal="${this._drawer && this.containment === 'viewport' ? 'true' : nothing}"
400
406
  @keydown="${this.__onDetailKeydown}"
401
407
  >
402
408
  <slot name="detail" @slotchange="${this.__onDetailSlotChange}"></slot>
@@ -412,8 +418,8 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
412
418
  this.__detectLayoutMode();
413
419
 
414
420
  // Move focus to the detail area when it is added to the DOM,
415
- // in case if the layout is using overlay or stack mode.
416
- if ((this.hasAttribute('overlay') || this.hasAttribute('stack')) && children.length > 0) {
421
+ // in case if the layout is using drawer or stack mode.
422
+ if ((this._drawer || this._stack) && children.length > 0) {
417
423
  const focusables = getFocusableElements(children[0]);
418
424
  if (focusables.length) {
419
425
  focusables[0].focus();
@@ -504,13 +510,13 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
504
510
  if (this.stackOverlay) {
505
511
  this._stack = value;
506
512
  } else {
507
- this._overlay = value;
513
+ this._drawer = value;
508
514
  }
509
515
  }
510
516
 
511
517
  /** @private */
512
518
  __detectLayoutMode() {
513
- this._overlay = false;
519
+ this._drawer = false;
514
520
  this._stack = false;
515
521
 
516
522
  if (this.forceOverlay) {
@@ -676,7 +682,7 @@ class MasterDetailLayout extends SlotStylesMixin(ResizeMixin(ElementMixin(Themab
676
682
 
677
683
  /**
678
684
  * @event backdrop-click
679
- * Fired when the user clicks the backdrop in the overlay mode.
685
+ * Fired when the user clicks the backdrop in the drawer mode.
680
686
  */
681
687
 
682
688
  /**
package/theme/lumo/vaadin-master-detail-layout-styles.js CHANGED
@@ -4,23 +4,23 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
4
4
  registerStyles(
5
5
  'vaadin-master-detail-layout',
6
6
  css`
7
- :host(:is([overlay], [stack])) [part='detail'] {
7
+ :host(:is([drawer], [stack])) [part='detail'] {
8
8
  background-color: var(--lumo-base-color);
9
9
  }
10
10
 
11
- :host([overlay]) [part='detail'] {
11
+ :host([drawer]) [part='detail'] {
12
12
  box-shadow: var(--lumo-box-shadow-s);
13
13
  }
14
14
 
15
- :host([overlay][orientation='horizontal']) [part='detail'] {
15
+ :host([drawer][orientation='horizontal']) [part='detail'] {
16
16
  border-inline-start: 1px solid var(--lumo-contrast-10pct);
17
17
  }
18
18
 
19
- :host([overlay][orientation='vertical']) [part='detail'] {
19
+ :host([drawer][orientation='vertical']) [part='detail'] {
20
20
  border-block-start: 1px solid var(--lumo-contrast-10pct);
21
21
  }
22
22
 
23
- :host([overlay]) [part='backdrop'] {
23
+ :host([drawer]) [part='backdrop'] {
24
24
  background-color: var(--lumo-shade-20pct);
25
25
  }
26
26
  `,
package/theme/material/vaadin-master-detail-layout-styles.js CHANGED
@@ -5,23 +5,23 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
5
5
  registerStyles(
6
6
  'vaadin-master-detail-layout',
7
7
  css`
8
- :host(:is([overlay], [stack])) [part='detail'] {
8
+ :host(:is([drawer], [stack])) [part='detail'] {
9
9
  background-color: var(--material-background-color);
10
10
  }
11
11
 
12
- :host([overlay]) [part='detail'] {
12
+ :host([drawer]) [part='detail'] {
13
13
  box-shadow: var(--material-shadow-elevation-4dp);
14
14
  }
15
15
 
16
- :host([overlay][orientation='horizontal']) [part='detail'] {
16
+ :host([drawer][orientation='horizontal']) [part='detail'] {
17
17
  border-inline-start: 1px solid var(--material-divider-color);
18
18
  }
19
19
 
20
- :host([overlay][orientation='vertical']) [part='detail'] {
20
+ :host([drawer][orientation='vertical']) [part='detail'] {
21
21
  border-block-start: 1px solid var(--material-divider-color);
22
22
  }
23
23
 
24
- :host([overlay]) [part='backdrop'] {
24
+ :host([drawer]) [part='backdrop'] {
25
25
  background-color: var(--material-secondary-background-color);
26
26
  opacity: 0.5;
27
27
  }
package/web-types.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/master-detail-layout",
4
- "version": "24.8.0-alpha17",
4
+ "version": "24.8.0-alpha18",
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 overlay 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`overlay` | Set when the layout is using the overlay 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 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.",
12
12
  "attributes": [
13
13
  {
14
14
  "name": "detail-size",
15
- "description": "Fixed size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
15
+ "description": "Fixed size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
16
16
  "value": {
17
17
  "type": [
18
18
  "string",
@@ -23,7 +23,7 @@
23
23
  },
24
24
  {
25
25
  "name": "detail-min-size",
26
- "description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
26
+ "description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
27
27
  "value": {
28
28
  "type": [
29
29
  "string",
@@ -34,7 +34,7 @@
34
34
  },
35
35
  {
36
36
  "name": "master-size",
37
- "description": "Fixed size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
37
+ "description": "Fixed size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
38
38
  "value": {
39
39
  "type": [
40
40
  "string",
@@ -45,7 +45,7 @@
45
45
  },
46
46
  {
47
47
  "name": "master-min-size",
48
- "description": "Minimum size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
48
+ "description": "Minimum size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
49
49
  "value": {
50
50
  "type": [
51
51
  "string",
@@ -67,7 +67,7 @@
67
67
  },
68
68
  {
69
69
  "name": "force-overlay",
70
- "description": "When specified, forces the layout to use overlay mode, even if\nthere is enough space for master and detail to be shown next to\neach other using the default (split) mode.\n\nIn order to enforce the stack mode, use this property together with\n`stackOverlay` property and set both to `true`.",
70
+ "description": "When specified, forces the details to be shown as an overlay\n(either as drawer or stack), even if there is enough space for\nmaster and detail to be shown next to each other using the default\n(split) mode.\n\nIn order to enforce the stack mode, use this property together with\n`stackOverlay` property and set both to `true`.",
71
71
  "value": {
72
72
  "type": [
73
73
  "boolean",
@@ -89,7 +89,7 @@
89
89
  },
90
90
  {
91
91
  "name": "stack-overlay",
92
- "description": "When true, the layout in the overlay mode is rendered as a \"stack\",\nmaking detail area fully cover the master area.\n\nIn order to enforce the stack mode, use this property together with\n`forceOverlay` property and set both to `true`.",
92
+ "description": "When true, the layout in the overlay mode is rendered as a stack,\nmaking detail area fully cover the master area. Otherwise, it is\nrendered as a drawer and has a visual backdrop.\n\nIn order to enforce the stack mode, use this property together with\n`forceOverlay` property and set both to `true`.",
93
93
  "value": {
94
94
  "type": [
95
95
  "boolean",
@@ -125,7 +125,7 @@
125
125
  "properties": [
126
126
  {
127
127
  "name": "detailSize",
128
- "description": "Fixed size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
128
+ "description": "Fixed size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
129
129
  "value": {
130
130
  "type": [
131
131
  "string",
@@ -136,7 +136,7 @@
136
136
  },
137
137
  {
138
138
  "name": "detailMinSize",
139
- "description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
139
+ "description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
140
140
  "value": {
141
141
  "type": [
142
142
  "string",
@@ -147,7 +147,7 @@
147
147
  },
148
148
  {
149
149
  "name": "masterSize",
150
- "description": "Fixed size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
150
+ "description": "Fixed size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
151
151
  "value": {
152
152
  "type": [
153
153
  "string",
@@ -158,7 +158,7 @@
158
158
  },
159
159
  {
160
160
  "name": "masterMinSize",
161
- "description": "Minimum size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
161
+ "description": "Minimum size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
162
162
  "value": {
163
163
  "type": [
164
164
  "string",
@@ -180,7 +180,7 @@
180
180
  },
181
181
  {
182
182
  "name": "forceOverlay",
183
- "description": "When specified, forces the layout to use overlay mode, even if\nthere is enough space for master and detail to be shown next to\neach other using the default (split) mode.\n\nIn order to enforce the stack mode, use this property together with\n`stackOverlay` property and set both to `true`.",
183
+ "description": "When specified, forces the details to be shown as an overlay\n(either as drawer or stack), even if there is enough space for\nmaster and detail to be shown next to each other using the default\n(split) mode.\n\nIn order to enforce the stack mode, use this property together with\n`stackOverlay` property and set both to `true`.",
184
184
  "value": {
185
185
  "type": [
186
186
  "boolean",
@@ -202,7 +202,7 @@
202
202
  },
203
203
  {
204
204
  "name": "stackOverlay",
205
- "description": "When true, the layout in the overlay mode is rendered as a \"stack\",\nmaking detail area fully cover the master area.\n\nIn order to enforce the stack mode, use this property together with\n`forceOverlay` property and set both to `true`.",
205
+ "description": "When true, the layout in the overlay mode is rendered as a stack,\nmaking detail area fully cover the master area. Otherwise, it is\nrendered as a drawer and has a visual backdrop.\n\nIn order to enforce the stack mode, use this property together with\n`forceOverlay` property and set both to `true`.",
206
206
  "value": {
207
207
  "type": [
208
208
  "boolean",
@@ -226,7 +226,7 @@
226
226
  "events": [
227
227
  {
228
228
  "name": "backdrop-click",
229
- "description": "backdrop-click\nFired when the user clicks the backdrop in the overlay mode."
229
+ "description": "backdrop-click\nFired when the user clicks the backdrop in the drawer mode."
230
230
  },
231
231
  {
232
232
  "name": "detail-escape-press",
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": "24.8.0-alpha17",
4
+ "version": "24.8.0-alpha18",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,19 +16,19 @@
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 overlay 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`overlay` | Set when the layout is using the overlay 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 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.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
23
23
  "name": "?forceOverlay",
24
- "description": "When specified, forces the layout to use overlay mode, even if\nthere is enough space for master and detail to be shown next to\neach other using the default (split) mode.\n\nIn order to enforce the stack mode, use this property together with\n`stackOverlay` property and set both to `true`.",
24
+ "description": "When specified, forces the details to be shown as an overlay\n(either as drawer or stack), even if there is enough space for\nmaster and detail to be shown next to each other using the default\n(split) mode.\n\nIn order to enforce the stack mode, use this property together with\n`stackOverlay` property and set both to `true`.",
25
25
  "value": {
26
26
  "kind": "expression"
27
27
  }
28
28
  },
29
29
  {
30
30
  "name": "?stackOverlay",
31
- "description": "When true, the layout in the overlay mode is rendered as a \"stack\",\nmaking detail area fully cover the master area.\n\nIn order to enforce the stack mode, use this property together with\n`forceOverlay` property and set both to `true`.",
31
+ "description": "When true, the layout in the overlay mode is rendered as a stack,\nmaking detail area fully cover the master area. Otherwise, it is\nrendered as a drawer and has a visual backdrop.\n\nIn order to enforce the stack mode, use this property together with\n`forceOverlay` property and set both to `true`.",
32
32
  "value": {
33
33
  "kind": "expression"
34
34
  }
@@ -42,28 +42,28 @@
42
42
  },
43
43
  {
44
44
  "name": ".detailSize",
45
- "description": "Fixed size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
45
+ "description": "Fixed size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
46
46
  "value": {
47
47
  "kind": "expression"
48
48
  }
49
49
  },
50
50
  {
51
51
  "name": ".detailMinSize",
52
- "description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
52
+ "description": "Minimum size (in CSS length units) to be set on the detail area.\nWhen specified, it prevents the detail area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
53
53
  "value": {
54
54
  "kind": "expression"
55
55
  }
56
56
  },
57
57
  {
58
58
  "name": ".masterSize",
59
- "description": "Fixed size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
59
+ "description": "Fixed size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from growing or\nshrinking. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
60
60
  "value": {
61
61
  "kind": "expression"
62
62
  }
63
63
  },
64
64
  {
65
65
  "name": ".masterMinSize",
66
- "description": "Minimum size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the layout switches to the overlay mode.",
66
+ "description": "Minimum size (in CSS length units) to be set on the master area.\nWhen specified, it prevents the master area from shrinking below\nthis size. If there is not enough space to show master and detail\nareas next to each other, the details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
67
67
  "value": {
68
68
  "kind": "expression"
69
69
  }
@@ -84,7 +84,7 @@
84
84
  },
85
85
  {
86
86
  "name": "@backdrop-click",
87
- "description": "backdrop-click\nFired when the user clicks the backdrop in the overlay mode.",
87
+ "description": "backdrop-click\nFired when the user clicks the backdrop in the drawer mode.",
88
88
  "value": {
89
89
  "kind": "expression"
90
90
  }