@vaadin/app-layout 25.3.0-alpha1 → 25.3.0-alpha11

package/custom-elements.json

@@ -287,34 +287,6 @@
               "name": "primary-section-changed"
             }
           ],
-          "mixins": [
-            {
-              "name": "AppLayoutMixin",
-              "module": "src/vaadin-app-layout-mixin.js"
-            },
-            {
-              "name": "ElementMixin",
-              "package": "@vaadin/component-base/src/element-mixin.js"
-            },
-            {
-              "name": "ThemableMixin",
-              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
-            },
-            {
-              "name": "PolylitMixin",
-              "package": "@vaadin/component-base/src/polylit-mixin.js"
-            },
-            {
-              "name": "LumoInjectionMixin",
-              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "vaadin-app-layout",
-          "customElement": true,
           "attributes": [
             {
               "name": "close-drawer-on",
@@ -375,8 +347,43 @@
                 "name": "AppLayoutMixin",
                 "module": "src/vaadin-app-layout-mixin.js"
               }
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "AppLayoutMixin",
+              "module": "src/vaadin-app-layout-mixin.js"
+            },
+            {
+              "name": "ElementMixin",
+              "package": "@vaadin/component-base/src/element-mixin.js"
+            },
+            {
+              "name": "ThemableMixin",
+              "package": "@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js"
+            },
+            {
+              "name": "PolylitMixin",
+              "package": "@vaadin/component-base/src/polylit-mixin.js"
+            },
+            {
+              "name": "LumoInjectionMixin",
+              "package": "@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "vaadin-app-layout",
+          "customElement": true
         }
       ],
       "exports": [
@@ -442,6 +449,13 @@
                 "name": "DisabledMixin",
                 "package": "@vaadin/a11y-base/src/disabled-mixin.js"
               }
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The theme variants to apply to the component.",
+              "name": "theme"
             }
           ],
           "mixins": [

package/package.json

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

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

@@ -154,6 +154,8 @@ export const AppLayoutMixin = (superclass) =>
       this.addController(this.__focusTrapController);
       this.__setAriaExpanded();
 
+      this.__updateDrawerSize();
+
       this.$.drawer.addEventListener('transitionstart', () => {
         this.__isDrawerAnimating = true;
       });
@@ -169,7 +171,7 @@ export const AppLayoutMixin = (superclass) =>
       super.disconnectedCallback();
       this.__resizeObserver.disconnect();
       this.removeEventListener('drawer-toggle-click', this.__drawerToggleClickListener);
-      window.removeEventListener('close-overlay-drawer', this.__drawerToggleClickListener);
+      window.removeEventListener('close-overlay-drawer', this.__closeOverlayDrawerListener);
       window.removeEventListener('keydown', this.__onDrawerKeyDown);
     }
 
@@ -448,7 +450,9 @@ export const AppLayoutMixin = (superclass) =>
     }
 
     /** @private */
-    _onBackdropClick() {
+    _onBackdropClick(event) {
+      // End the ghost click window on the first click (see `_onBackdropTouchend`).
+      event.currentTarget.style.removeProperty('pointer-events');
       this._close();
     }
 
@@ -458,6 +462,18 @@ export const AppLayoutMixin = (superclass) =>
       // on clickable element behind the backdrop
       event.preventDefault();
 
+      // On iOS home screen (standalone) apps, `preventDefault()` on `touchend`
+      // does not reliably suppress the synthesized "ghost" click, which occurs
+      // on medium-length taps only. Keep the invisible backdrop hit-testable for
+      // a short while after closing, so that if a ghost click occurs it lands on
+      // the backdrop instead of the element behind it.
+      if (navigator.standalone) {
+        const backdrop = event.currentTarget;
+        backdrop.style.pointerEvents = 'auto';
+        // The ghost click arrives shortly after `touchend`.
+        setTimeout(() => backdrop.style.removeProperty('pointer-events'), 400);
+      }
+
       this._close();
     }
 
@@ -489,17 +505,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 */

package/src/vaadin-app-layout.js

@@ -127,6 +127,7 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
  * @fires {CustomEvent} overlay-changed - Fired when the `overlay` property changes.
  * @fires {CustomEvent} primary-section-changed - Fired when the `primarySection` property changes.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-app-layout
  * @extends HTMLElement
  */

package/src/vaadin-drawer-toggle.js

@@ -55,6 +55,7 @@ import { drawerToggle } from './styles/vaadin-drawer-toggle-base-styles.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @attr {string} theme - The theme variants to apply to the component.
  * @customElement vaadin-drawer-toggle
  * @extends HTMLElement
  */

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "25.3.0-alpha1",
+  "version": "25.3.0-alpha11",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -42,9 +42,7 @@
               "description": "The theme variants to apply to the component.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             }
@@ -131,9 +129,7 @@
               "description": "The theme variants to apply to the component.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             }

package/web-types.lit.json

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