Merge remote-tracking branch 'origin/main' into mdl/detail-auto-size

# Conflicts:
#	packages/master-detail-layout/ARCHITECTURE.md
#	packages/master-detail-layout/src/vaadin-master-detail-layout.js
#	packages/master-detail-layout/test/dom/__snapshots__/master-detail-layout.test.snap.js
#	packages/master-detail-layout/test/dom/master-detail-layout.test.js
#	packages/master-detail-layout/test/master-detail-layout.test.js

Author: vursen

packages/master-detail-layout/test/dom/__snapshots__/master-detail-layout.test.snap.js

@@ -1,7 +1,7 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["vaadin-master-detail-layout host default"] = 
+snapshots["vaadin-master-detail-layout host default"] =
 `<vaadin-master-detail-layout
   expand="master"
   orientation="horizontal"
@@ -14,7 +14,7 @@ snapshots["vaadin-master-detail-layout host default"] =
 `;
 /* end snapshot vaadin-master-detail-layout host default */
 
-snapshots["vaadin-master-detail-layout host masterSize"] = 
+snapshots["vaadin-master-detail-layout host masterSize"] =
 `<vaadin-master-detail-layout
   expand="master"
   orientation="horizontal"
@@ -28,7 +28,7 @@ snapshots["vaadin-master-detail-layout host masterSize"] =
 `;
 /* end snapshot vaadin-master-detail-layout host masterSize */
 
-snapshots["vaadin-master-detail-layout host detailSize"] = 
+snapshots["vaadin-master-detail-layout host detailSize"] =
 `<vaadin-master-detail-layout
   expand="master"
   orientation="horizontal"
@@ -42,7 +42,7 @@ snapshots["vaadin-master-detail-layout host detailSize"] =
 `;
 /* end snapshot vaadin-master-detail-layout host detailSize */
 
-snapshots["vaadin-master-detail-layout host masterSize and detailSize"] = 
+snapshots["vaadin-master-detail-layout host masterSize and detailSize"] =
 `<vaadin-master-detail-layout
   expand="master"
   orientation="horizontal"
@@ -56,7 +56,7 @@ snapshots["vaadin-master-detail-layout host masterSize and detailSize"] =
 `;
 /* end snapshot vaadin-master-detail-layout host masterSize and detailSize */
 
-snapshots["vaadin-master-detail-layout shadow default"] = 
+snapshots["vaadin-master-detail-layout shadow default"] =
 `<div
   id="backdrop"
   part="backdrop"
@@ -94,7 +94,7 @@ snapshots["vaadin-master-detail-layout shadow default"] =
 `;
 /* end snapshot vaadin-master-detail-layout shadow default */
 
-snapshots["vaadin-master-detail-layout detail default"] = 
+snapshots["vaadin-master-detail-layout detail default"] =
 `<vaadin-master-detail-layout
   expand="master"
   has-detail=""
@@ -113,14 +113,15 @@ snapshots["vaadin-master-detail-layout detail default"] =
 `;
 /* end snapshot vaadin-master-detail-layout detail default */
 
-snapshots["vaadin-master-detail-layout detail overflow"] = 
+snapshots["vaadin-master-detail-layout detail overflow"] =
 `<vaadin-master-detail-layout
   expand="master"
   has-detail=""
   master-size="300px"
   orientation="horizontal"
+  overlay=""
   overlay-containment="layout"
-  style="--_master-size: 300px; --_detail-size: 300px;"
+  style="--_master-size: 300px; --_detail-size: 300px; --_detail-cached-size: 49px; width: 400px;"
 >
   <div>
     Master content
@@ -132,7 +133,7 @@ snapshots["vaadin-master-detail-layout detail overflow"] =
 `;
 /* end snapshot vaadin-master-detail-layout detail overflow */
 
-snapshots["vaadin-master-detail-layout detail hidden"] = 
+snapshots["vaadin-master-detail-layout detail hidden"] =
 `<vaadin-master-detail-layout
   expand="master"
   master-size="300px"
@@ -153,7 +154,7 @@ snapshots["vaadin-master-detail-layout detail hidden"] =
 `;
 /* end snapshot vaadin-master-detail-layout detail hidden */
 
-snapshots["vaadin-master-detail-layout detail removed"] = 
+snapshots["vaadin-master-detail-layout detail removed"] =
 `<vaadin-master-detail-layout
   expand="master"
   master-size="300px"
@@ -168,7 +169,7 @@ snapshots["vaadin-master-detail-layout detail removed"] =
 `;
 /* end snapshot vaadin-master-detail-layout detail removed */
 
-snapshots["vaadin-master-detail-layout detail placeholder default"] = 
+snapshots["vaadin-master-detail-layout detail placeholder default"] =
 `<vaadin-master-detail-layout
   expand="master"
   has-detail-placeholder=""
@@ -187,14 +188,14 @@ snapshots["vaadin-master-detail-layout detail placeholder default"] =
 `;
 /* end snapshot vaadin-master-detail-layout detail placeholder default */
 
-snapshots["vaadin-master-detail-layout detail placeholder overflow"] = 
+snapshots["vaadin-master-detail-layout detail placeholder overflow"] =
 `<vaadin-master-detail-layout
   expand="master"
   has-detail-placeholder=""
   master-size="300px"
   orientation="horizontal"
   overlay-containment="layout"
-  style="--_master-size: 300px; --_detail-size: 300px;"
+  style="--_master-size: 300px; --_detail-size: 300px; --_detail-cached-size: 76px; width: 400px;"
 >
   <div>
     Master content
@@ -206,7 +207,7 @@ snapshots["vaadin-master-detail-layout detail placeholder overflow"] =
 `;
 /* end snapshot vaadin-master-detail-layout detail placeholder overflow */
 
-snapshots["vaadin-master-detail-layout detail placeholder removed"] = 
+snapshots["vaadin-master-detail-layout detail placeholder removed"] =
 `<vaadin-master-detail-layout
   expand="master"
   master-size="300px"
@@ -220,4 +221,3 @@ snapshots["vaadin-master-detail-layout detail placeholder removed"] =
 </vaadin-master-detail-layout>
 `;
 /* end snapshot vaadin-master-detail-layout detail placeholder removed */
-

packages/master-detail-layout/test/dom/master-detail-layout.test.js

@@ -71,7 +71,7 @@ describe('vaadin-master-detail-layout', () => {
     });
 
     it('overflow', async () => {
-      layout.width = '400px';
+      layout.style.width = '400px';
       layout.detailSize = '300px';
       await onceResized(layout);
       await expect(layout).dom.to.equalSnapshot();
@@ -106,7 +106,7 @@ describe('vaadin-master-detail-layout', () => {
     });
 
     it('overflow', async () => {
-      layout.width = '400px';
+      layout.style.width = '400px';
       layout.detailSize = '300px';
       await onceResized(layout);
       await expect(layout).dom.to.equalSnapshot();