@vaadin/app-layout 24.8.0-alpha9 → 24.8.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "24.8.0-alpha9",
+  "version": "24.8.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,17 +37,17 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.8.0-alpha9",
-    "@vaadin/button": "24.8.0-alpha9",
-    "@vaadin/component-base": "24.8.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha9",
+    "@vaadin/a11y-base": "24.8.0-beta1",
+    "@vaadin/button": "24.8.0-beta1",
+    "@vaadin/component-base": "24.8.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.8.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha9",
-    "@vaadin/test-runner-commands": "24.8.0-alpha9",
+    "@vaadin/chai-plugins": "24.8.0-beta1",
+    "@vaadin/test-runner-commands": "24.8.0-beta1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -55,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4de3809275ddfd733b0d13fd02af8faf73eb6770"
+  "gitHead": "57ce3a90de99e49049312b0ba4041d3e7542e9d8"
 }

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

@@ -3,9 +3,10 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { afterNextRender, beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { AriaModalController } from '@vaadin/a11y-base/src/aria-modal-controller.js';
 import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
+import { animationFrame } from '@vaadin/component-base/src/async.js';
+import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 
 /**
@@ -144,7 +145,9 @@ export const AppLayoutMixin = (superclass) =>
       window.addEventListener('resize', this.__boundResizeListener);
       this.addEventListener('drawer-toggle-click', this.__drawerToggleClickListener);
 
-      beforeNextRender(this, this._afterFirstRender);
+      requestAnimationFrame(() => {
+        this._updateOffsetSize();
+      });
 
       this._updateTouchOptimizedMode();
       this._updateDrawerSize();
@@ -163,6 +166,7 @@ export const AppLayoutMixin = (superclass) =>
       });
       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);
@@ -255,12 +259,6 @@ export const AppLayoutMixin = (superclass) =>
       this.__updateDrawerAriaAttributes();
     }
 
-    /** @protected */
-    _afterFirstRender() {
-      this._blockAnimationUntilAfterNextRender();
-      this._updateOffsetSize();
-    }
-
     /** @private */
     _drawerToggleClick(e) {
       e.stopPropagation();
@@ -508,8 +506,11 @@ export const AppLayoutMixin = (superclass) =>
     /** @protected */
     _blockAnimationUntilAfterNextRender() {
       this.setAttribute('no-anim', '');
-      afterNextRender(this, () => {
-        this.removeAttribute('no-anim');
+
+      this.__debounceAnimation = Debouncer.debounce(this.__debounceAnimation, animationFrame, () => {
+        setTimeout(() => {
+          this.removeAttribute('no-anim');
+        });
       });
     }
 

package/src/vaadin-drawer-toggle.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { buttonStyles } from '@vaadin/button/src/vaadin-button-base.js';
+import { buttonStyles } from '@vaadin/button/src/vaadin-button-core-styles.js';
 import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';

package/src/vaadin-lit-drawer-toggle.js

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { html, LitElement } from 'lit';
-import { buttonStyles } from '@vaadin/button/src/vaadin-button-base.js';
+import { buttonStyles } from '@vaadin/button/src/vaadin-button-core-styles.js';
 import { ButtonMixin } from '@vaadin/button/src/vaadin-button-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';

package/web-types.json

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

package/src/vaadin-lit-app-layout.d.ts

@@ -1 +0,0 @@
-export * from './vaadin-app-layout.js';

package/src/vaadin-lit-drawer-toggle.d.ts

@@ -1 +0,0 @@
-export * from './vaadin-drawer-toggle.js';