@vaadin/app-layout 25.2.0-alpha7 → 25.2.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "25.2.0-alpha7",
+  "version": "25.2.0-alpha8",
   "publishConfig": {
     "access": "public"
   },
@@ -35,18 +35,18 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.2.0-alpha7",
-    "@vaadin/button": "25.2.0-alpha7",
-    "@vaadin/component-base": "25.2.0-alpha7",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha7",
+    "@vaadin/a11y-base": "25.2.0-alpha8",
+    "@vaadin/button": "25.2.0-alpha8",
+    "@vaadin/component-base": "25.2.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha8",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha7",
-    "@vaadin/chai-plugins": "25.2.0-alpha7",
-    "@vaadin/test-runner-commands": "25.2.0-alpha7",
+    "@vaadin/aura": "25.2.0-alpha8",
+    "@vaadin/chai-plugins": "25.2.0-alpha8",
+    "@vaadin/test-runner-commands": "25.2.0-alpha8",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha7",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha8",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "3f0862906d60205d107836d8eca84c6fde4a9129"
+  "gitHead": "2b82e20cdfc605b1187e9a24ae42869e1500ab68"
 }

package/src/styles/vaadin-app-layout-base-styles.js

@@ -18,18 +18,9 @@ export const appLayoutStyles = css`
     --vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
     --vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
     --vaadin-app-layout-drawer-offset-left: 0px;
-    padding-top: max(var(--vaadin-app-layout-navbar-offset-top), var(--safe-area-inset-top));
-    padding-bottom: max(var(--vaadin-app-layout-navbar-offset-bottom), var(--safe-area-inset-bottom));
-  }
-
-  :host(:dir(ltr)) {
-    padding-left: max(var(--vaadin-app-layout-drawer-offset-left), var(--safe-area-inset-left));
-    padding-right: var(--safe-area-inset-right);
-  }
-
-  :host(:dir(rtl)) {
-    padding-left: var(--safe-area-inset-left);
-    padding-right: max(var(--vaadin-app-layout-drawer-offset-left), var(--safe-area-inset-right));
+    padding-top: var(--vaadin-app-layout-navbar-offset-top);
+    padding-bottom: var(--vaadin-app-layout-navbar-offset-bottom);
+    padding-inline-start: var(--vaadin-app-layout-drawer-offset-left);
   }
 
   :host([hidden]),
@@ -58,6 +49,14 @@ export const appLayoutStyles = css`
   [part~='content'] {
     height: 100%;
     transition: inherit;
+    box-sizing: border-box;
+    padding-top: max(0px, var(--safe-area-inset-top) - var(--vaadin-app-layout-navbar-offset-top));
+    padding-bottom: max(0px, var(--safe-area-inset-bottom) - var(--vaadin-app-layout-navbar-offset-bottom));
+    padding-inline: var(--safe-area-inset-inline-start) var(--safe-area-inset-inline-end);
+  }
+
+  :host([drawer-opened]:not([overlay])) [part~='content'] {
+    padding-inline-start: 0;
   }
 
   @media (pointer: coarse) and (max-width: 800px) and (min-height: 500px) {
@@ -122,6 +121,7 @@ export const appLayoutStyles = css`
     width: var(--_vaadin-app-layout-drawer-width);
     box-sizing: border-box;
     padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
+    padding-inline-start: var(--safe-area-inset-inline-start);
     outline: none;
     /* The drawer should be inaccessible by the tabbing navigation when it is closed. */
     visibility: hidden;
@@ -130,15 +130,8 @@ export const appLayoutStyles = css`
     background: var(--vaadin-app-layout-drawer-background, transparent);
   }
 
-  [part='drawer']:dir(ltr) {
-    padding-left: var(--safe-area-inset-left);
-  }
-
-  [part='drawer']:dir(rtl) {
-    padding-right: var(--safe-area-inset-right);
-  }
-
-  :host([has-navbar]:not([overlay])) [part='drawer'] {
+  :host([has-navbar]:not([overlay])) [part='drawer'],
+  :host([has-navbar]) [part='content'] {
     --safe-area-inset-top: 0px;
   }
 

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

@@ -120,7 +120,6 @@ export const AppLayoutMixin = (superclass) =>
     constructor() {
       super();
       // TODO(jouni): might want to debounce
-      this.__boundResizeListener = this._resize.bind(this);
       this.__drawerToggleClickListener = this._drawerToggleClick.bind(this);
       this.__onDrawerKeyDown = this.__onDrawerKeyDown.bind(this);
       this.__closeOverlayDrawerListener = this.__closeOverlayDrawer.bind(this);
@@ -138,34 +137,13 @@ export const AppLayoutMixin = (superclass) =>
     connectedCallback() {
       super.connectedCallback();
 
-      this._blockAnimationUntilAfterNextRender();
+      this.__resizeObserver = new ResizeObserver((entries) => this.__onResize(entries));
+      this.__resizeObserver.observe(this);
+      this.__resizeObserver.observe(this.$.drawer);
+      this.__resizeObserver.observe(this.$.navbarTop);
+      this.__resizeObserver.observe(this.$.navbarBottom);
 
-      window.addEventListener('resize', this.__boundResizeListener);
       this.addEventListener('drawer-toggle-click', this.__drawerToggleClickListener);
-
-      requestAnimationFrame(() => {
-        this._updateOffsetSize();
-      });
-
-      this._updateTouchOptimizedMode();
-      this._updateDrawerSize();
-      this._updateOverlayMode();
-
-      this._navbarSizeObserver = new ResizeObserver(() => {
-        requestAnimationFrame(() => {
-          // Prevent updating offset size multiple times
-          // during the drawer open / close transition.
-          if (this.__isDrawerAnimating) {
-            this.__updateOffsetSizePending = true;
-          } else {
-            this._updateOffsetSize();
-          }
-        });
-      });
-      this._navbarSizeObserver.observe(this.$.navbarTop);
-      this._navbarSizeObserver.observe(this.$.navbarBottom);
-      this._navbarSizeObserver.observe(this.$.drawer);
-
       window.addEventListener('close-overlay-drawer', this.__closeOverlayDrawerListener);
       window.addEventListener('keydown', this.__onDrawerKeyDown);
     }
@@ -181,25 +159,15 @@ export const AppLayoutMixin = (superclass) =>
       });
 
       this.$.drawer.addEventListener('transitionend', () => {
-        // Update offset size after drawer animation.
-        if (this.__updateOffsetSizePending) {
-          this.__updateOffsetSizePending = false;
-          this._updateOffsetSize();
-        }
-
-        // Delay resetting the flag until animation frame
-        // to avoid updating offset size again on resize.
-        requestAnimationFrame(() => {
-          this.__isDrawerAnimating = false;
-        });
+        this.__isDrawerAnimating = false;
+        this.__scheduleResize(this.$.drawer);
       });
     }
 
     /** @protected */
     disconnectedCallback() {
       super.disconnectedCallback();
-
-      window.removeEventListener('resize', this.__boundResizeListener);
+      this.__resizeObserver.disconnect();
       this.removeEventListener('drawer-toggle-click', this.__drawerToggleClickListener);
       window.removeEventListener('close-overlay-drawer', this.__drawerToggleClickListener);
       window.removeEventListener('keydown', this.__onDrawerKeyDown);
@@ -207,16 +175,54 @@ export const AppLayoutMixin = (superclass) =>
 
     /** @private */
     __onNavbarSlotChange() {
-      this._updateTouchOptimizedMode();
+      this.__scheduleResize(this.$.navbarTop);
+      this.__scheduleResize(this.$.navbarBottom);
       this.toggleAttribute('has-navbar', !!this.querySelector('[slot="navbar"]'));
     }
 
     /** @private */
     __onDrawerSlotChange() {
-      this._updateDrawerSize();
+      this.__scheduleResize(this.$.drawer);
+      this.__updateDrawerSize();
       this.toggleAttribute('has-drawer', !!this.querySelector('[slot="drawer"]'));
     }
 
+    /** @private */
+    __onResize(entries) {
+      cancelAnimationFrame(this.__resizeRaf);
+
+      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 isDrawerAnimating = this.__isDrawerAnimating;
+
+      this.__resizeRaf = requestAnimationFrame(() => {
+        if (isHostResized) {
+          this._blockAnimationUntilAfterNextRender();
+          this.__setOverlayMode(overlayMode);
+        }
+
+        if (isHostResized || isNavbarResized) {
+          this.__setTouchOptimized(touchOptimized);
+        }
+
+        if (!isDrawerAnimating) {
+          this.__setOffsetSize({
+            drawerRect,
+            navbarTopRect,
+            navbarBottomRect,
+          });
+        }
+      });
+    }
+
     /**
      * A callback for the `primarySection` property observer.
      *
@@ -306,48 +312,27 @@ export const AppLayoutMixin = (superclass) =>
       }
     }
 
-    /** @protected */
-    _updateDrawerSize() {
+    /** @private */
+    __updateDrawerSize() {
       const childCount = this.querySelectorAll('[slot=drawer]').length;
-      const drawer = this.$.drawer;
-
       if (childCount === 0) {
-        drawer.setAttribute('hidden', '');
+        this.$.drawer.setAttribute('hidden', '');
         this.style.setProperty('--_vaadin-app-layout-drawer-width', 0);
       } else {
-        drawer.removeAttribute('hidden');
+        this.$.drawer.removeAttribute('hidden');
         this.style.removeProperty('--_vaadin-app-layout-drawer-width');
       }
-      this._updateOffsetSize();
     }
 
     /** @private */
-    _resize() {
-      this._blockAnimationUntilAfterNextRender();
-      this._updateTouchOptimizedMode();
-      this._updateOverlayMode();
-    }
-
-    /** @protected */
-    _updateOffsetSize() {
-      const navbar = this.$.navbarTop;
-      const navbarRect = navbar.getBoundingClientRect();
-
-      const navbarBottom = this.$.navbarBottom;
-      const navbarBottomRect = navbarBottom.getBoundingClientRect();
-
-      const drawer = this.$.drawer;
-      const drawerRect = drawer.getBoundingClientRect();
-
-      this.style.setProperty('--_vaadin-app-layout-navbar-offset-size', `${navbarRect.height}px`);
-      this.style.setProperty('--_vaadin-app-layout-navbar-offset-size-bottom', `${navbarBottomRect.height}px`);
+    __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`);
     }
 
-    /** @protected */
-    _updateOverlayMode() {
-      const overlay = this._getCustomPropertyValue('--vaadin-app-layout-drawer-overlay') === 'true';
-
+    /** @private */
+    __setOverlayMode(overlay) {
       if (!this.overlay && overlay) {
         // Changed from not overlay to overlay
         this._drawerStateSaved = this.drawerOpened;
@@ -487,12 +472,9 @@ export const AppLayoutMixin = (superclass) =>
       return (customPropertyValue || '').trim().toLowerCase();
     }
 
-    /** @protected */
-    _updateTouchOptimizedMode() {
-      const touchOptimized = this._getCustomPropertyValue('--vaadin-app-layout-touch-optimized') === 'true';
-
+    /** @private */
+    __setTouchOptimized(touchOptimized) {
       const navbarItems = this.querySelectorAll('[slot*="navbar"]');
-
       if (navbarItems.length > 0) {
         Array.from(navbarItems).forEach((navbar) => {
           if (navbar.getAttribute('slot').indexOf('touch-optimized') > -1) {
@@ -518,8 +500,6 @@ export const AppLayoutMixin = (superclass) =>
       } else {
         this.$.navbarBottom.removeAttribute('hidden');
       }
-
-      this._updateOffsetSize();
     }
 
     /** @protected */
@@ -533,6 +513,18 @@ export const AppLayoutMixin = (superclass) =>
       });
     }
 
+    /**
+     * Forces the ResizeObserver to re-report the size of the given element,
+     * scheduling a new {@link __onResize} callback even if the size hasn't changed.
+     *
+     * @param {Element} element
+     * @private
+     */
+    __scheduleResize(element) {
+      this.__resizeObserver.unobserve(element);
+      this.__resizeObserver.observe(element);
+    }
+
     /**
      * App Layout listens to `close-overlay-drawer` on the window level.
      * A custom event can be dispatched and the App Layout will close the drawer in overlay.

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "25.2.0-alpha7",
+  "version": "25.2.0-alpha8",
   "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.2.0-alpha7",
+  "version": "25.2.0-alpha8",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {