@vaadin/app-layout 25.3.0-dev.1fa5a51482 → 25.3.0-rc1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "25.3.0-dev.1fa5a51482",
+  "version": "25.3.0-rc1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,18 +35,18 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.3.0-dev.1fa5a51482",
-    "@vaadin/button": "25.3.0-dev.1fa5a51482",
-    "@vaadin/component-base": "25.3.0-dev.1fa5a51482",
-    "@vaadin/vaadin-themable-mixin": "25.3.0-dev.1fa5a51482",
+    "@vaadin/a11y-base": "25.3.0-rc1",
+    "@vaadin/button": "25.3.0-rc1",
+    "@vaadin/component-base": "25.3.0-rc1",
+    "@vaadin/vaadin-themable-mixin": "25.3.0-rc1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.3.0-dev.1fa5a51482",
-    "@vaadin/chai-plugins": "25.3.0-dev.1fa5a51482",
-    "@vaadin/test-runner-commands": "25.3.0-dev.1fa5a51482",
+    "@vaadin/aura": "25.3.0-rc1",
+    "@vaadin/chai-plugins": "25.3.0-rc1",
+    "@vaadin/test-runner-commands": "25.3.0-rc1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.3.0-dev.1fa5a51482",
+    "@vaadin/vaadin-lumo-styles": "25.3.0-rc1",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "1cd5964b758ffbce3ddb6248a1997f55f8e0ebf6"
+  "gitHead": "d4809590b2f61bd607e376ab3dec84f4bfb059a7"
 }

package/src/vaadin-app-layout-mixin.js

@@ -154,6 +154,18 @@ export const AppLayoutMixin = (superclass) =>
       this.addController(this.__focusTrapController);
       this.__setAriaExpanded();
 
+      this.__updateDrawerSize();
+      this._blockAnimationUntilAfterNextRender();
+
+      const { overlayMode, touchOptimized } = this.__readCSSState();
+      this.__setOverlayMode(overlayMode);
+      this.__setTouchOptimized(touchOptimized);
+
+      const { drawerOffsetSize, navbarTopOffsetSize, navbarBottomOffsetSize } = this.__readCSSState();
+      this.__setDrawerOffsetSize(drawerOffsetSize);
+      this.__setNavbarTopOffsetSize(navbarTopOffsetSize);
+      this.__setNavbarBottomOffsetSize(navbarBottomOffsetSize);
+
       this.$.drawer.addEventListener('transitionstart', () => {
         this.__isDrawerAnimating = true;
       });
@@ -175,16 +187,22 @@ export const AppLayoutMixin = (superclass) =>
 
     /** @private */
     __onNavbarSlotChange() {
-      this.__scheduleResize(this.$.navbarTop);
-      this.__scheduleResize(this.$.navbarBottom);
+      const { touchOptimized } = this.__readCSSState();
+      this.__setTouchOptimized(touchOptimized);
       this.toggleAttribute('has-navbar', !!this.querySelector('[slot="navbar"]'));
+
+      const { navbarTopOffsetSize, navbarBottomOffsetSize } = this.__readCSSState();
+      this.__setNavbarTopOffsetSize(navbarTopOffsetSize);
+      this.__setNavbarBottomOffsetSize(navbarBottomOffsetSize);
     }
 
     /** @private */
     __onDrawerSlotChange() {
-      this.__scheduleResize(this.$.drawer);
       this.__updateDrawerSize();
       this.toggleAttribute('has-drawer', !!this.querySelector('[slot="drawer"]'));
+
+      const { drawerOffsetSize } = this.__readCSSState();
+      this.__setDrawerOffsetSize(drawerOffsetSize);
     }
 
     /** @private */
@@ -194,12 +212,8 @@ export const AppLayoutMixin = (superclass) =>
       const isHostResized = entries.some(({ target }) => target === this);
       const isNavbarResized = entries.some(({ target }) => [this.$.navbarTop, this.$.navbarBottom].includes(target));
 
-      const overlayMode = this._getCustomPropertyValue('--vaadin-app-layout-drawer-overlay') === 'true';
-      const touchOptimized = this._getCustomPropertyValue('--vaadin-app-layout-touch-optimized') === 'true';
-
-      const drawerRect = this.$.drawer.getBoundingClientRect();
-      const navbarTopRect = this.$.navbarTop.getBoundingClientRect();
-      const navbarBottomRect = this.$.navbarBottom.getBoundingClientRect();
+      const { overlayMode, touchOptimized, drawerOffsetSize, navbarTopOffsetSize, navbarBottomOffsetSize } =
+        this.__readCSSState();
 
       const isDrawerAnimating = this.__isDrawerAnimating;
 
@@ -214,11 +228,9 @@ export const AppLayoutMixin = (superclass) =>
         }
 
         if (!isDrawerAnimating) {
-          this.__setOffsetSize({
-            drawerRect,
-            navbarTopRect,
-            navbarBottomRect,
-          });
+          this.__setDrawerOffsetSize(drawerOffsetSize);
+          this.__setNavbarTopOffsetSize(navbarTopOffsetSize);
+          this.__setNavbarBottomOffsetSize(navbarBottomOffsetSize);
         }
       });
     }
@@ -325,10 +337,18 @@ export const AppLayoutMixin = (superclass) =>
     }
 
     /** @private */
-    __setOffsetSize({ drawerRect, navbarTopRect, navbarBottomRect }) {
-      this.style.setProperty('--_vaadin-app-layout-drawer-offset-size', `${drawerRect.width}px`);
-      this.style.setProperty('--_vaadin-app-layout-navbar-offset-size', `${navbarTopRect.height}px`);
-      this.style.setProperty('--_vaadin-app-layout-navbar-offset-size-bottom', `${navbarBottomRect.height}px`);
+    __setDrawerOffsetSize(offsetSize) {
+      this.style.setProperty('--_vaadin-app-layout-drawer-offset-size', `${offsetSize}px`);
+    }
+
+    /** @private */
+    __setNavbarTopOffsetSize(offsetSize) {
+      this.style.setProperty('--_vaadin-app-layout-navbar-offset-size', `${offsetSize}px`);
+    }
+
+    /** @private */
+    __setNavbarBottomOffsetSize(offsetSize) {
+      this.style.setProperty('--_vaadin-app-layout-navbar-offset-size-bottom', `${offsetSize}px`);
     }
 
     /** @private */
@@ -503,17 +523,11 @@ export const AppLayoutMixin = (superclass) =>
         });
       }
 
-      if (this.$.navbarTop.querySelector('[name=navbar]').assignedNodes().length === 0) {
-        this.$.navbarTop.setAttribute('hidden', '');
-      } else {
-        this.$.navbarTop.removeAttribute('hidden');
-      }
+      const hasNavbar = this.$.navbarTop.querySelector('[name=navbar]').assignedNodes().length > 0;
+      this.$.navbarTop.toggleAttribute('hidden', !hasNavbar);
 
-      if (this.$.navbarBottom.querySelector('[name=navbar-bottom]').assignedNodes().length === 0) {
-        this.$.navbarBottom.setAttribute('hidden', '');
-      } else {
-        this.$.navbarBottom.removeAttribute('hidden');
-      }
+      const hasNavbarBottom = this.$.navbarBottom.querySelector('[name=navbar-bottom]').assignedNodes().length > 0;
+      this.$.navbarBottom.toggleAttribute('hidden', !hasNavbarBottom);
     }
 
     /** @protected */
@@ -538,4 +552,15 @@ export const AppLayoutMixin = (superclass) =>
       this.__resizeObserver.unobserve(element);
       this.__resizeObserver.observe(element);
     }
+
+    /** @private */
+    __readCSSState() {
+      return {
+        overlayMode: this._getCustomPropertyValue('--vaadin-app-layout-drawer-overlay') === 'true',
+        touchOptimized: this._getCustomPropertyValue('--vaadin-app-layout-touch-optimized') === 'true',
+        drawerOffsetSize: this.$.drawer.getBoundingClientRect().width,
+        navbarTopOffsetSize: this.$.navbarTop.getBoundingClientRect().height,
+        navbarBottomOffsetSize: this.$.navbarBottom.getBoundingClientRect().height,
+      };
+    }
   };

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "25.3.0-dev.1fa5a51482",
+  "version": "25.3.0-rc1",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "25.3.0-dev.1fa5a51482",
+  "version": "25.3.0-rc1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {