@vaadin/master-detail-layout 25.2.0-alpha8 → 25.2.0-beta1

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 (7) hide show
  1. package/README.md +0 -2
  2. package/package.json +8 -8
  3. package/src/styles/vaadin-master-detail-layout-base-styles.js +3 -5
  4. package/src/vaadin-master-detail-layout.js +26 -30
  5. package/web-types.json +21 -57
  6. package/web-types.lit.json +14 -14
  7. package/src/styles/vaadin-master-detail-layout-transition-base-styles.d.ts +0 -8
package/README.md CHANGED
@@ -2,8 +2,6 @@
2
2
 
3
3
  A web component for building UIs with a master (or primary) area and a detail (or secondary) area.
4
4
 
5
- > ⚠️ This component is experimental and the API may change. In order to use it, enable the feature flag by setting `window.Vaadin.featureFlags.masterDetailLayoutComponent = true`.
6
-
7
5
  ```html
8
6
  <vaadin-master-detail-layout>
9
7
  <div>Master content</div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/master-detail-layout",
3
- "version": "25.2.0-alpha8",
3
+ "version": "25.2.0-beta1",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -34,16 +34,16 @@
34
34
  "web-component"
35
35
  ],
36
36
  "dependencies": {
37
- "@vaadin/a11y-base": "25.2.0-alpha8",
38
- "@vaadin/component-base": "25.2.0-alpha8",
39
- "@vaadin/vaadin-themable-mixin": "25.2.0-alpha8",
37
+ "@vaadin/a11y-base": "25.2.0-beta1",
38
+ "@vaadin/component-base": "25.2.0-beta1",
39
+ "@vaadin/vaadin-themable-mixin": "25.2.0-beta1",
40
40
  "lit": "^3.0.0"
41
41
  },
42
42
  "devDependencies": {
43
- "@vaadin/aura": "25.2.0-alpha8",
44
- "@vaadin/chai-plugins": "25.2.0-alpha8",
43
+ "@vaadin/aura": "25.2.0-beta1",
44
+ "@vaadin/chai-plugins": "25.2.0-beta1",
45
45
  "@vaadin/testing-helpers": "^2.0.0",
46
- "@vaadin/vaadin-lumo-styles": "25.2.0-alpha8",
46
+ "@vaadin/vaadin-lumo-styles": "25.2.0-beta1",
47
47
  "sinon": "^21.0.2"
48
48
  },
49
49
  "customElements": "custom-elements.json",
@@ -51,5 +51,5 @@
51
51
  "web-types.json",
52
52
  "web-types.lit.json"
53
53
  ],
54
- "gitHead": "2b82e20cdfc605b1187e9a24ae42869e1500ab68"
54
+ "gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
55
55
  }
package/src/styles/vaadin-master-detail-layout-base-styles.js CHANGED
@@ -21,7 +21,7 @@ export const masterDetailLayoutStyles = css`
21
21
  }
22
22
 
23
23
  :host:not([overlay-containment='page']) {
24
- z-index: 0;
24
+ isolation: isolate;
25
25
  }
26
26
 
27
27
  :host([dir='rtl']) {
@@ -183,13 +183,11 @@ export const masterDetailLayoutStyles = css`
183
183
 
184
184
  #detailPlaceholder {
185
185
  z-index: 1;
186
- opacity: 0;
187
- pointer-events: none;
186
+ visibility: hidden;
188
187
  }
189
188
 
190
189
  :host([has-detail-placeholder]:not([has-detail], [overlay])) #detailPlaceholder {
191
- opacity: 1;
192
- pointer-events: auto;
190
+ visibility: visible;
193
191
  }
194
192
 
195
193
  :is(#detail, #detailPlaceholder, #detailOutgoing) {
package/src/vaadin-master-detail-layout.js CHANGED
@@ -90,8 +90,6 @@ import {
90
90
  *
91
91
  * @customElement vaadin-master-detail-layout
92
92
  * @extends HTMLElement
93
- * @mixes ThemableMixin
94
- * @mixes ElementMixin
95
93
  */
96
94
  class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElement))) {
97
95
  static get is() {
@@ -239,10 +237,6 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
239
237
  };
240
238
  }
241
239
 
242
- static get experimental() {
243
- return true;
244
- }
245
-
246
240
  /** @protected */
247
241
  render() {
248
242
  const isOverlay = this.hasAttribute('has-detail') && this.hasAttribute('overlay');
@@ -337,7 +331,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
337
331
 
338
332
  /** @private */
339
333
  __initResizeObserver() {
340
- this.__resizeObserver = this.__resizeObserver || new ResizeObserver(() => this.__onResize());
334
+ this.__resizeObserver ||= new ResizeObserver(() => this.__onResize());
341
335
  this.__resizeObserver.disconnect();
342
336
 
343
337
  [this, this.$.master, this.$.detail, this.__slottedMaster, this.__slottedDetail].forEach((node) => {
@@ -410,7 +404,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
410
404
  // the slotted detail content to use as a fallback for the detail column size
411
405
  // while the detail content is rendered in an overlay.
412
406
  if ((hasDetail || hasDetailPlaceholder) && this.__isDetailAutoSized && detailSize > 0) {
413
- this.__detailCachedSize = this.__detailCachedSize || `${Math.ceil(detailSize)}px`;
407
+ this.__detailCachedSize ||= `${Math.ceil(detailSize)}px`;
414
408
  } else {
415
409
  this.__detailCachedSize = null;
416
410
  }
@@ -530,7 +524,7 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
530
524
  }
531
525
 
532
526
  const updateSlot = async () => {
533
- if (oldDetail && oldDetail.slot === 'detail') {
527
+ if (oldDetail?.slot === 'detail') {
534
528
  oldDetail.remove();
535
529
  }
536
530
 
@@ -614,10 +608,15 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
614
608
  await updateSlot();
615
609
 
616
610
  const progress = getCurrentAnimationProgress(this.$.detail);
617
- await Promise.all([
618
- animateIn(this.$.detail, ['fade', 'slide'], progress),
619
- animateIn(this.$.backdrop, ['fade'], this.hasAttribute('overlay') ? progress : 1),
620
- ]);
611
+
612
+ if (this.hasAttribute('overlay')) {
613
+ await Promise.all([
614
+ animateIn(this.$.detail, ['slide'], progress),
615
+ animateIn(this.$.backdrop, ['fade'], progress),
616
+ ]);
617
+ } else {
618
+ await animateIn(this.$.detail, ['slide', 'fade'], progress);
619
+ }
621
620
  }
622
621
 
623
622
  /** @private */
@@ -632,15 +631,17 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
632
631
 
633
632
  await updateSlot();
634
633
 
634
+ const isOverlay = this.hasAttribute('overlay');
635
635
  const progress = getCurrentAnimationProgress(this.$.detail);
636
+
636
637
  await Promise.all([
637
- animateIn(this.$.detail, ['fade', 'slide'], progress),
638
- animateOut(this.$.detailOutgoing, ['fade', 'slide'], progress),
638
+ animateIn(this.$.detail, isOverlay ? ['slide'] : ['slide', 'fade'], progress),
639
+ animateOut(this.$.detailOutgoing, isOverlay ? ['slide'] : ['slide', 'fade'], progress),
639
640
  ]);
640
641
  } finally {
641
642
  // Skip removal if the slot was reassigned during the transition.
642
643
  // The React component does this to let React handle the removal.
643
- if (oldDetail && oldDetail.slot === 'detail-outgoing') {
644
+ if (oldDetail?.slot === 'detail-outgoing') {
644
645
  oldDetail.remove();
645
646
  }
646
647
  }
@@ -649,10 +650,15 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
649
650
  /** @private */
650
651
  async __removeTransition(updateSlot) {
651
652
  const progress = getCurrentAnimationProgress(this.$.detail);
652
- await Promise.all([
653
- animateOut(this.$.detail, ['fade', 'slide'], progress),
654
- animateOut(this.$.backdrop, ['fade'], this.hasAttribute('overlay') ? progress : 1),
655
- ]);
653
+
654
+ if (this.hasAttribute('overlay')) {
655
+ await Promise.all([
656
+ animateOut(this.$.detail, ['slide'], progress),
657
+ animateOut(this.$.backdrop, ['fade'], progress),
658
+ ]);
659
+ } else {
660
+ await animateOut(this.$.detail, ['slide', 'fade'], progress);
661
+ }
656
662
 
657
663
  await updateSlot();
658
664
  }
@@ -671,16 +677,6 @@ class MasterDetailLayout extends ElementMixin(ThemableMixin(PolylitMixin(LitElem
671
677
  get __slottedDetailPlaceholder() {
672
678
  return this.querySelector(':scope > [slot="detail-placeholder"]');
673
679
  }
674
-
675
- /**
676
- * @event backdrop-click
677
- * Fired when the user clicks the backdrop in the overlay mode.
678
- */
679
-
680
- /**
681
- * @event detail-escape-press
682
- * Fired when the user presses Escape in the detail area.
683
- */
684
680
  }
685
681
 
686
682
  defineCustomElement(MasterDetailLayout);
package/web-types.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.2.0-alpha8",
4
+ "version": "25.2.0-beta1",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
@@ -15,9 +15,7 @@
15
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
  },
@@ -26,9 +24,7 @@
26
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
- "boolean",
30
- "null",
31
- "undefined"
27
+ "boolean"
32
28
  ]
33
29
  }
34
30
  },
@@ -37,9 +33,7 @@
37
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
- "boolean",
41
- "null",
42
- "undefined"
36
+ "boolean"
43
37
  ]
44
38
  }
45
39
  },
@@ -48,9 +42,7 @@
48
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
  },
@@ -59,9 +51,7 @@
59
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
  },
@@ -70,9 +60,7 @@
70
60
  "description": "When true, the layout does not use animated transitions for the detail area.",
71
61
  "value": {
72
62
  "type": [
73
- "boolean",
74
- "null",
75
- "undefined"
63
+ "boolean"
76
64
  ]
77
65
  }
78
66
  },
@@ -81,9 +69,7 @@
81
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
- "string",
85
- "null",
86
- "undefined"
72
+ "string"
87
73
  ]
88
74
  }
89
75
  },
@@ -92,9 +78,7 @@
92
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
  },
@@ -103,9 +87,7 @@
103
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
- "string",
107
- "null",
108
- "undefined"
90
+ "string"
109
91
  ]
110
92
  }
111
93
  },
@@ -128,9 +110,7 @@
128
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
  },
@@ -139,9 +119,7 @@
139
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
- "boolean",
143
- "null",
144
- "undefined"
122
+ "boolean"
145
123
  ]
146
124
  }
147
125
  },
@@ -150,9 +128,7 @@
150
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
- "boolean",
154
- "null",
155
- "undefined"
131
+ "boolean"
156
132
  ]
157
133
  }
158
134
  },
@@ -161,9 +137,7 @@
161
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
  },
@@ -172,9 +146,7 @@
172
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
  },
@@ -183,9 +155,7 @@
183
155
  "description": "When true, the layout does not use animated transitions for the detail area.",
184
156
  "value": {
185
157
  "type": [
186
- "boolean",
187
- "null",
188
- "undefined"
158
+ "boolean"
189
159
  ]
190
160
  }
191
161
  },
@@ -194,9 +164,7 @@
194
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
- "string",
198
- "null",
199
- "undefined"
167
+ "string"
200
168
  ]
201
169
  }
202
170
  },
@@ -205,9 +173,7 @@
205
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
  },
@@ -216,9 +182,7 @@
216
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
- "string",
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 overlay 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.2.0-alpha8",
4
+ "version": "25.2.0-beta1",
5
5
  "description-markup": "markdown",
6
6
  "framework": "lit",
7
7
  "framework-config": {
@@ -19,6 +19,13 @@
19
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
+ {
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
+ "value": {
26
+ "kind": "expression"
27
+ }
28
+ },
22
29
  {
23
30
  "name": "?expandDetail",
24
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.",
@@ -41,22 +48,15 @@
41
48
  }
42
49
  },
43
50
  {
44
- "name": "?noAnimation",
45
- "description": "When true, the layout does not use animated transitions for the detail area.",
46
- "value": {
47
- "kind": "expression"
48
- }
49
- },
50
- {
51
- "name": ".detailSize",
52
- "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.",
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": ".masterSize",
59
- "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.",
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
  }
@@ -84,14 +84,14 @@
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": "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.d.ts DELETED
@@ -1,8 +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 type { CSSResult } from 'lit';
7
-
8
- export const masterDetailLayoutTransitionStyles: CSSResult;