@vaadin/app-layout 25.0.0-beta4 → 25.0.0-beta5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "25.0.0-beta4",
+  "version": "25.0.0-beta5",
   "publishConfig": {
     "access": "public"
   },
@@ -34,22 +34,22 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-beta4",
-    "@vaadin/button": "25.0.0-beta4",
-    "@vaadin/component-base": "25.0.0-beta4",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-beta4",
+    "@vaadin/a11y-base": "25.0.0-beta5",
+    "@vaadin/button": "25.0.0-beta5",
+    "@vaadin/component-base": "25.0.0-beta5",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta5",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-beta4",
-    "@vaadin/test-runner-commands": "25.0.0-beta4",
+    "@vaadin/chai-plugins": "25.0.0-beta5",
+    "@vaadin/test-runner-commands": "25.0.0-beta5",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-beta4",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta5",
     "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "707c30af7ed0afacc13c0afb27d047b043160d1f"
+  "gitHead": "ba59e1404cc4bef2dd685476247f758eb28c9922"
 }

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

@@ -17,8 +17,18 @@ export const appLayoutStyles = css`
     --vaadin-app-layout-touch-optimized: false;
     --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);
-    padding-block: var(--vaadin-app-layout-navbar-offset-top) var(--vaadin-app-layout-navbar-offset-bottom);
-    padding-inline-start: var(--vaadin-app-layout-navbar-offset-left);
+    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)) [content] {
+    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)) [content] {
+    padding-left: var(--safe-area-inset-left);
+    padding-right: max(var(--vaadin-app-layout-drawer-offset-left), var(--safe-area-inset-right));
   }
 
   :host([hidden]),
@@ -37,8 +47,7 @@ export const appLayoutStyles = css`
   }
 
   :host([overlay]) {
-    --vaadin-app-layout-drawer-offset-left: 0;
-    --vaadin-app-layout-navbar-offset-left: 0;
+    --vaadin-app-layout-drawer-offset-left: 0px;
   }
 
   :host(:not([no-scroll])) [content] {
@@ -47,6 +56,7 @@ export const appLayoutStyles = css`
 
   [content] {
     height: 100%;
+    transition: inherit;
   }
 
   @media (pointer: coarse) and (max-width: 800px) and (min-height: 500px) {
@@ -110,7 +120,7 @@ export const appLayoutStyles = css`
     max-width: 90%;
     width: var(--_vaadin-app-layout-drawer-width);
     box-sizing: border-box;
-    padding: var(--safe-area-inset-top) 0 var(--safe-area-inset-bottom) var(--safe-area-inset-left);
+    padding-block: var(--safe-area-inset-top) var(--safe-area-inset-bottom);
     outline: none;
     /* The drawer should be inaccessible by the tabbing navigation when it is closed. */
     visibility: hidden;
@@ -119,6 +129,29 @@ 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]) [content] {
+    --safe-area-inset-top: 0px;
+  }
+
+  :host([has-drawer]:not([overlay])[drawer-opened]) [content] {
+    &:dir(ltr) {
+      --safe-area-inset-left: 0px;
+    }
+
+    &:dir(rtl) {
+      --safe-area-inset-right: 0px;
+    }
+  }
+
   :host([drawer-opened]) [part='drawer'] {
     /* The drawer should be accessible by the tabbing navigation when it is opened. */
     visibility: visible;
@@ -168,10 +201,6 @@ export const appLayoutStyles = css`
     transform: translateX(0%);
   }
 
-  :host([drawer-opened]:not([overlay])) {
-    padding-inline-start: var(--vaadin-app-layout-drawer-offset-left);
-  }
-
   @media (max-width: 800px), (max-height: 600px) {
     :host {
       --vaadin-app-layout-drawer-overlay: true;

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

@@ -393,22 +393,11 @@ export const AppLayoutMixin = (superclass) =>
     /**
      * Returns a promise that resolves when the drawer opening/closing CSS transition ends.
      *
-     * The method relies on the `--vaadin-app-layout-transition-duration` CSS variable to detect whether
-     * the drawer has a CSS transition that needs to be awaited. If the CSS variable equals `0s`,
-     * the promise resolves immediately.
-     *
      * @return {Promise}
      * @private
      */
     __drawerTransitionComplete() {
-      return new Promise((resolve) => {
-        if (this._getCustomPropertyValue('--vaadin-app-layout-transition-duration') === '0s') {
-          resolve();
-          return;
-        }
-
-        this.$.drawer.addEventListener('transitionend', resolve, { once: true });
-      });
+      return Promise.all(this.$.drawer.getAnimations().map((animation) => animation.finished));
     }
 
     /** @private */

package/src/vaadin-app-layout.js

@@ -4,7 +4,6 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './detect-ios-navbar.js';
-import './safe-area-inset.js';
 import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';

package/web-types.json

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

package/src/safe-area-inset.js

@@ -1,21 +0,0 @@
-/**
- * @license
- * Copyright (c) 2000 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-
-const template = document.createElement('template');
-
-template.innerHTML = `
-  <style>
-    /* Use units so that the values can be used in calc() */
-    html {
-      --safe-area-inset-top: env(safe-area-inset-top, 0px);
-      --safe-area-inset-right: env(safe-area-inset-right, 0px);
-      --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
-      --safe-area-inset-left: env(safe-area-inset-left, 0px);
-    }
-  </style>
-`;
-
-document.head.appendChild(template.content);