@vaadin/master-detail-layout 25.1.2 → 25.2.0-alpha10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/custom-elements.json +276 -64
  2. package/package.json +8 -8
  3. package/src/styles/vaadin-master-detail-layout-base-styles.js +204 -105
  4. package/src/vaadin-master-detail-layout-helpers.js +173 -0
  5. package/src/vaadin-master-detail-layout.d.ts +102 -66
  6. package/src/vaadin-master-detail-layout.js +446 -329
  7. package/web-types.json +56 -92
  8. package/web-types.lit.json +22 -22
  9. package/src/styles/vaadin-master-detail-layout-transition-base-styles.js +0 -147
package/web-types.json CHANGED
@@ -1,111 +1,93 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/web-types",
3
3
  "name": "@vaadin/master-detail-layout",
4
- "version": "25.1.2",
4
+ "version": "25.2.0-alpha10",
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 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-master-detail-layout-border-color` |\n| `--vaadin-master-detail-layout-border-width` |\n| `--vaadin-master-detail-layout-detail-background` |\n| `--vaadin-master-detail-layout-detail-shadow` |\n| `--vaadin-overlay-backdrop-background` |\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### Slots\n\nThe component has two main content areas: the master area (default slot)\nand the detail area (`detail` slot). When the detail doesn't fit next to\nthe master, it is shown as an overlay on top of the master area:\n\n```html\n<vaadin-master-detail-layout>\n <div>Master content</div>\n <div slot=\"detail\">Detail content</div>\n</vaadin-master-detail-layout>\n```\n\nThe component also supports a `detail-placeholder` slot for content shown\nin the detail area when no detail is selected. Unlike the `detail` slot,\nthe placeholder is simply hidden when it doesn't fit next to the master area,\nrather than shown as an overlay:\n\n```html\n<vaadin-master-detail-layout>\n <div>Master content</div>\n <div slot=\"detail-placeholder\">Select an item</div>\n</vaadin-master-detail-layout>\n```\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 overlay mode\n`master` | The master area\n`detail` | The detail area\n`detail-placeholder` | The detail placeholder area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------------|----------------------\n`expand-master` | Set when the master area expands to fill available space.\n`expand-detail` | Set when the detail area expands to fill available space.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided and visible.\n`has-detail-placeholder` | Set when the detail placeholder content is provided.\n`overlay` | Set when columns don't fit and the detail is shown as an overlay.\n`overlay-containment` | Set to `layout` or `page`.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-master-detail-layout-border-color` |\n| `--vaadin-master-detail-layout-border-width` |\n| `--vaadin-master-detail-layout-detail-background` |\n| `--vaadin-master-detail-layout-detail-shadow` |\n| `--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
12
12
  "attributes": [
13
13
  {
14
- "name": "containment",
15
- "description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
14
+ "name": "detail-size",
15
+ "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
16
16
  "value": {
17
17
  "type": [
18
- "string",
19
- "null",
20
- "undefined"
18
+ "string"
21
19
  ]
22
20
  }
23
21
  },
24
22
  {
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 details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
23
+ "name": "expand-detail",
24
+ "description": "When true, the detail area grows to fill the available space.\nIf `expandMaster` is also true, both areas share the available\nspace equally.",
27
25
  "value": {
28
26
  "type": [
29
- "string",
30
- "null",
31
- "undefined"
27
+ "boolean"
32
28
  ]
33
29
  }
34
30
  },
35
31
  {
36
- "name": "detail-size",
37
- "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.",
32
+ "name": "expand-master",
33
+ "description": "When true, the master area grows to fill the available space.\nIf `expandDetail` is also true, both areas share the available\nspace equally.",
38
34
  "value": {
39
35
  "type": [
40
- "string",
41
- "null",
42
- "undefined"
36
+ "boolean"
43
37
  ]
44
38
  }
45
39
  },
46
40
  {
47
41
  "name": "force-overlay",
48
- "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`.",
42
+ "description": "When true, the layout forces the detail area to be shown as an overlay,\neven if there is enough space for master and detail to be shown next to\neach other using the default (split) mode.",
49
43
  "value": {
50
44
  "type": [
51
- "boolean",
52
- "null",
53
- "undefined"
45
+ "boolean"
54
46
  ]
55
47
  }
56
48
  },
57
49
  {
58
- "name": "master-min-size",
59
- "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.",
50
+ "name": "master-size",
51
+ "description": "Size (in CSS length units) to be set on the master area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 30em.",
60
52
  "value": {
61
53
  "type": [
62
- "string",
63
- "null",
64
- "undefined"
54
+ "string"
65
55
  ]
66
56
  }
67
57
  },
68
58
  {
69
- "name": "master-size",
70
- "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.",
59
+ "name": "no-animation",
60
+ "description": "When true, the layout does not use animated transitions for the detail area.",
71
61
  "value": {
72
62
  "type": [
73
- "string",
74
- "null",
75
- "undefined"
63
+ "boolean"
76
64
  ]
77
65
  }
78
66
  },
79
67
  {
80
- "name": "no-animation",
81
- "description": "When true, the layout does not use animated transitions for the detail area.",
68
+ "name": "orientation",
69
+ "description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
82
70
  "value": {
83
71
  "type": [
84
- "boolean",
85
- "null",
86
- "undefined"
72
+ "string"
87
73
  ]
88
74
  }
89
75
  },
90
76
  {
91
- "name": "orientation",
92
- "description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
77
+ "name": "overlay-containment",
78
+ "description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `page`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
93
79
  "value": {
94
80
  "type": [
95
- "string",
96
- "null",
97
- "undefined"
81
+ "string"
98
82
  ]
99
83
  }
100
84
  },
101
85
  {
102
- "name": "stack-overlay",
103
- "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`.",
86
+ "name": "overlay-size",
87
+ "description": "Size (in CSS length units) for the detail area when shown as an\noverlay. When not set, falls back to `detailSize`. Set to `100%`\nto make the detail cover the full layout.",
104
88
  "value": {
105
89
  "type": [
106
- "boolean",
107
- "null",
108
- "undefined"
90
+ "string"
109
91
  ]
110
92
  }
111
93
  },
@@ -124,101 +106,83 @@
124
106
  "js": {
125
107
  "properties": [
126
108
  {
127
- "name": "containment",
128
- "description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
109
+ "name": "detailSize",
110
+ "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
129
111
  "value": {
130
112
  "type": [
131
- "string",
132
- "null",
133
- "undefined"
113
+ "string"
134
114
  ]
135
115
  }
136
116
  },
137
117
  {
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 details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
118
+ "name": "expandDetail",
119
+ "description": "When true, the detail area grows to fill the available space.\nIf `expandMaster` is also true, both areas share the available\nspace equally.",
140
120
  "value": {
141
121
  "type": [
142
- "string",
143
- "null",
144
- "undefined"
122
+ "boolean"
145
123
  ]
146
124
  }
147
125
  },
148
126
  {
149
- "name": "detailSize",
150
- "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.",
127
+ "name": "expandMaster",
128
+ "description": "When true, the master area grows to fill the available space.\nIf `expandDetail` is also true, both areas share the available\nspace equally.",
151
129
  "value": {
152
130
  "type": [
153
- "string",
154
- "null",
155
- "undefined"
131
+ "boolean"
156
132
  ]
157
133
  }
158
134
  },
159
135
  {
160
136
  "name": "forceOverlay",
161
- "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`.",
137
+ "description": "When true, the layout forces the detail area to be shown as an overlay,\neven if there is enough space for master and detail to be shown next to\neach other using the default (split) mode.",
162
138
  "value": {
163
139
  "type": [
164
- "boolean",
165
- "null",
166
- "undefined"
140
+ "boolean"
167
141
  ]
168
142
  }
169
143
  },
170
144
  {
171
- "name": "masterMinSize",
172
- "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.",
145
+ "name": "masterSize",
146
+ "description": "Size (in CSS length units) to be set on the master area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 30em.",
173
147
  "value": {
174
148
  "type": [
175
- "string",
176
- "null",
177
- "undefined"
149
+ "string"
178
150
  ]
179
151
  }
180
152
  },
181
153
  {
182
- "name": "masterSize",
183
- "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.",
154
+ "name": "noAnimation",
155
+ "description": "When true, the layout does not use animated transitions for the detail area.",
184
156
  "value": {
185
157
  "type": [
186
- "string",
187
- "null",
188
- "undefined"
158
+ "boolean"
189
159
  ]
190
160
  }
191
161
  },
192
162
  {
193
- "name": "noAnimation",
194
- "description": "When true, the layout does not use animated transitions for the detail area.",
163
+ "name": "orientation",
164
+ "description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
195
165
  "value": {
196
166
  "type": [
197
- "boolean",
198
- "null",
199
- "undefined"
167
+ "string"
200
168
  ]
201
169
  }
202
170
  },
203
171
  {
204
- "name": "orientation",
205
- "description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
172
+ "name": "overlayContainment",
173
+ "description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `page`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
206
174
  "value": {
207
175
  "type": [
208
- "string",
209
- "null",
210
- "undefined"
176
+ "string"
211
177
  ]
212
178
  }
213
179
  },
214
180
  {
215
- "name": "stackOverlay",
216
- "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`.",
181
+ "name": "overlaySize",
182
+ "description": "Size (in CSS length units) for the detail area when shown as an\noverlay. When not set, falls back to `detailSize`. Set to `100%`\nto make the detail cover the full layout.",
217
183
  "value": {
218
184
  "type": [
219
- "boolean",
220
- "null",
221
- "undefined"
185
+ "string"
222
186
  ]
223
187
  }
224
188
  }
@@ -226,11 +190,11 @@
226
190
  "events": [
227
191
  {
228
192
  "name": "backdrop-click",
229
- "description": "backdrop-click\nFired when the user clicks the backdrop in the drawer mode."
193
+ "description": "Fired when the user clicks the backdrop in the overlay mode."
230
194
  },
231
195
  {
232
196
  "name": "detail-escape-press",
233
- "description": "detail-escape-press\nFired when the user presses Escape in the detail area."
197
+ "description": "Fired when the user presses Escape in the detail area."
234
198
  }
235
199
  ]
236
200
  }
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.1.2",
4
+ "version": "25.2.0-alpha10",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -16,82 +16,82 @@
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 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\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-master-detail-layout-border-color` |\n| `--vaadin-master-detail-layout-border-width` |\n| `--vaadin-master-detail-layout-detail-background` |\n| `--vaadin-master-detail-layout-detail-shadow` |\n| `--vaadin-overlay-backdrop-background` |\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### Slots\n\nThe component has two main content areas: the master area (default slot)\nand the detail area (`detail` slot). When the detail doesn't fit next to\nthe master, it is shown as an overlay on top of the master area:\n\n```html\n<vaadin-master-detail-layout>\n <div>Master content</div>\n <div slot=\"detail\">Detail content</div>\n</vaadin-master-detail-layout>\n```\n\nThe component also supports a `detail-placeholder` slot for content shown\nin the detail area when no detail is selected. Unlike the `detail` slot,\nthe placeholder is simply hidden when it doesn't fit next to the master area,\nrather than shown as an overlay:\n\n```html\n<vaadin-master-detail-layout>\n <div>Master content</div>\n <div slot=\"detail-placeholder\">Select an item</div>\n</vaadin-master-detail-layout>\n```\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 overlay mode\n`master` | The master area\n`detail` | The detail area\n`detail-placeholder` | The detail placeholder area\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n--------------------------|----------------------\n`expand-master` | Set when the master area expands to fill available space.\n`expand-detail` | Set when the detail area expands to fill available space.\n`orientation` | Set to `horizontal` or `vertical` depending on the orientation.\n`has-detail` | Set when the detail content is provided and visible.\n`has-detail-placeholder` | Set when the detail placeholder content is provided.\n`overlay` | Set when columns don't fit and the detail is shown as an overlay.\n`overlay-containment` | Set to `layout` or `page`.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------------------------|\n| `--vaadin-master-detail-layout-border-color` |\n| `--vaadin-master-detail-layout-border-width` |\n| `--vaadin-master-detail-layout-detail-background` |\n| `--vaadin-master-detail-layout-detail-shadow` |\n| `--vaadin-overlay-backdrop-background` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
20
20
  "extension": true,
21
21
  "attributes": [
22
22
  {
23
- "name": "?forceOverlay",
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`.",
23
+ "name": ".detailSize",
24
+ "description": "Size (in CSS length units) to be set on the detail area in\nthe CSS grid layout. When there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay.\n<p>\nIf not specified, the size is determined automatically by measuring\nthe detail content in a `min-content` CSS grid column when it first\nbecomes visible, and then caching the resulting intrinsic size. To\nrecalculate the cached intrinsic size, use the `recalculateLayout`\nmethod.",
25
25
  "value": {
26
26
  "kind": "expression"
27
27
  }
28
28
  },
29
29
  {
30
- "name": "?noAnimation",
31
- "description": "When true, the layout does not use animated transitions for the detail area.",
30
+ "name": "?expandDetail",
31
+ "description": "When true, the detail area grows to fill the available space.\nIf `expandMaster` is also true, both areas share the available\nspace equally.",
32
32
  "value": {
33
33
  "kind": "expression"
34
34
  }
35
35
  },
36
36
  {
37
- "name": "?stackOverlay",
38
- "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`.",
37
+ "name": "?expandMaster",
38
+ "description": "When true, the master area grows to fill the available space.\nIf `expandDetail` is also true, both areas share the available\nspace equally.",
39
39
  "value": {
40
40
  "kind": "expression"
41
41
  }
42
42
  },
43
43
  {
44
- "name": ".containment",
45
- "description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `viewport`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
44
+ "name": "?forceOverlay",
45
+ "description": "When true, the layout forces the detail area to be shown as an overlay,\neven if there is enough space for master and detail to be shown next to\neach other using the default (split) mode.",
46
46
  "value": {
47
47
  "kind": "expression"
48
48
  }
49
49
  },
50
50
  {
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 details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
51
+ "name": ".masterSize",
52
+ "description": "Size (in CSS length units) to be set on the master area in\nthe CSS grid layout. If there is not enough space to show\nmaster and detail areas next to each other, the detail area\nis shown as an overlay. Defaults to 30em.",
53
53
  "value": {
54
54
  "kind": "expression"
55
55
  }
56
56
  },
57
57
  {
58
- "name": ".detailSize",
59
- "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.",
58
+ "name": "?noAnimation",
59
+ "description": "When true, the layout does not use animated transitions for the detail area.",
60
60
  "value": {
61
61
  "kind": "expression"
62
62
  }
63
63
  },
64
64
  {
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 details are shown as an overlay:\neither as drawer or stack, depending on the `stackOverlay` property.",
65
+ "name": ".orientation",
66
+ "description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
67
67
  "value": {
68
68
  "kind": "expression"
69
69
  }
70
70
  },
71
71
  {
72
- "name": ".masterSize",
73
- "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.",
72
+ "name": ".overlayContainment",
73
+ "description": "Defines the containment of the detail area when the layout is in\noverlay mode. When set to `layout`, the overlay is confined to the\nlayout. When set to `page`, the overlay is confined to the\nbrowser's viewport. Defaults to `layout`.",
74
74
  "value": {
75
75
  "kind": "expression"
76
76
  }
77
77
  },
78
78
  {
79
- "name": ".orientation",
80
- "description": "Define how master and detail areas are shown next to each other,\nand the way how size and min-size properties are applied to them.\nPossible values are: `horizontal` or `vertical`.\nDefaults to horizontal.",
79
+ "name": ".overlaySize",
80
+ "description": "Size (in CSS length units) for the detail area when shown as an\noverlay. When not set, falls back to `detailSize`. Set to `100%`\nto make the detail cover the full layout.",
81
81
  "value": {
82
82
  "kind": "expression"
83
83
  }
84
84
  },
85
85
  {
86
86
  "name": "@backdrop-click",
87
- "description": "backdrop-click\nFired when the user clicks the backdrop in the drawer mode.",
87
+ "description": "Fired when the user clicks the backdrop in the overlay mode.",
88
88
  "value": {
89
89
  "kind": "expression"
90
90
  }
91
91
  },
92
92
  {
93
93
  "name": "@detail-escape-press",
94
- "description": "detail-escape-press\nFired when the user presses Escape in the detail area.",
94
+ "description": "Fired when the user presses Escape in the detail area.",
95
95
  "value": {
96
96
  "kind": "expression"
97
97
  }
package/src/styles/vaadin-master-detail-layout-transition-base-styles.js DELETED
@@ -1,147 +0,0 @@
1
- /**
2
- * @license
3
- * Copyright (c) 2025 - 2026 Vaadin Ltd.
4
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
5
- */
6
- import { css } from 'lit';
7
-
8
- export const masterDetailLayoutTransitionStyles = css`
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);
15
- }
16
-
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);
20
- }
21
-
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;
26
- }
27
-
28
- ::view-transition-group(vaadin-mdl-master),
29
- ::view-transition-group(vaadin-mdl-detail) {
30
- animation-timing-function: var(--_vaadin-mdl-easing);
31
- }
32
-
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;
40
- }
41
-
42
- /* Needed to promote the backdrop on top the master during the transition */
43
- vaadin-master-detail-layout[transition]::part(backdrop) {
44
- view-transition-name: vaadin-mdl-backdrop;
45
- }
46
-
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;
50
- }
51
-
52
- ::view-transition-group(vaadin-mdl-detail) {
53
- clip-path: inset(0);
54
- }
55
-
56
- ::view-transition-new(vaadin-mdl-detail),
57
- ::view-transition-old(vaadin-mdl-detail) {
58
- animation-name: vaadin-mdl-detail-slide-in;
59
- }
60
-
61
- ::view-transition-old(vaadin-mdl-detail) {
62
- animation-direction: reverse;
63
- }
64
-
65
- @keyframes vaadin-mdl-detail-slide-in {
66
- 0% {
67
- translate: calc((100% + 30px) * var(--_vaadin-mdl-dir-multiplier));
68
- }
69
- }
70
-
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);
73
- opacity: 0;
74
- }
75
-
76
- vaadin-master-detail-layout[transition]::part(master) {
77
- view-transition-name: vaadin-mdl-master;
78
- }
79
-
80
- vaadin-master-detail-layout[orientation='horizontal'][stack][transition='add']::part(master) {
81
- view-transition-class: stack-add;
82
- }
83
-
84
- vaadin-master-detail-layout[orientation='horizontal'][stack][transition='remove']::part(master) {
85
- view-transition-class: stack-remove;
86
- }
87
-
88
- ::view-transition-new(vaadin-mdl-master),
89
- ::view-transition-old(vaadin-mdl-master) {
90
- object-fit: none;
91
- object-position: 0% 0;
92
- width: 100%;
93
- height: 100%;
94
- }
95
-
96
- :dir(rtl)::view-transition-new(vaadin-mdl-master),
97
- :dir(rtl)::view-transition-old(vaadin-mdl-master) {
98
- object-position: 100% 0;
99
- }
100
-
101
- ::view-transition-new(vaadin-mdl-master.stack-remove),
102
- ::view-transition-old(vaadin-mdl-master.stack-remove) {
103
- animation-name: vaadin-mdl-master-stack-remove;
104
- clip-path: var(--_vaadin-mdl-stack-master-clip-path);
105
- }
106
-
107
- @keyframes vaadin-mdl-master-stack-remove {
108
- 100% {
109
- clip-path: inset(0);
110
- }
111
- }
112
-
113
- ::view-transition-new(vaadin-mdl-master.stack-add),
114
- ::view-transition-old(vaadin-mdl-master.stack-add) {
115
- animation-name: vaadin-mdl-master-stack-add;
116
- clip-path: inset(0);
117
- }
118
-
119
- @keyframes vaadin-mdl-master-stack-add {
120
- 100% {
121
- clip-path: var(--_vaadin-mdl-stack-master-clip-path);
122
- }
123
- }
124
-
125
- /* prettier-ignore */
126
- vaadin-master-detail-layout[orientation='vertical']:not([drawer], [stack])[transition]:not([transition='replace'])::part(detail),
127
- vaadin-master-detail-layout[orientation='vertical']:is([drawer], [stack])[transition]::part(_detail-internal) {
128
- view-transition-name: vaadin-mdl-detail;
129
- view-transition-class: vertical;
130
- }
131
-
132
- ::view-transition-new(vaadin-mdl-detail.vertical),
133
- ::view-transition-old(vaadin-mdl-detail.vertical) {
134
- animation-name: vaadin-mdl-vertical-detail-slide-in;
135
- }
136
-
137
- ::view-transition-old(vaadin-mdl-detail.vertical) {
138
- animation-direction: reverse;
139
- }
140
-
141
- @keyframes vaadin-mdl-vertical-detail-slide-in {
142
- 0% {
143
- transform: translateY(calc(100% + 30px));
144
- }
145
- }
146
- }
147
- `;