@vaadin/app-layout 24.0.0-alpha1 → 24.0.0-alpha10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "24.0.0-alpha1",
+  "version": "24.0.0-alpha10",
   "publishConfig": {
     "access": "public"
   },
@@ -36,15 +36,15 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.0.0-alpha1",
-    "@vaadin/component-base": "24.0.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
+    "@vaadin/button": "24.0.0-alpha10",
+    "@vaadin/component-base": "24.0.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha10"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/tabs": "24.0.0-alpha1",
+    "@vaadin/tabs": "24.0.0-alpha10",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
@@ -52,5 +52,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
+  "gitHead": "2e04534d8b47bcd216f89b5f849bafef1a73b174"
 }

package/src/detect-ios-navbar.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { isIOS } from '@vaadin/component-base/src/browser-utils.js';

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';

package/src/vaadin-app-layout.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import './safe-area-inset.js';
@@ -164,8 +164,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
           }
         }
 
-        [part='navbar'],
-        [part='navbar']::before {
+        [part='navbar'] {
           position: fixed;
           display: flex;
           align-items: center;
@@ -213,6 +212,8 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
           outline: none;
           /* The drawer should be inaccessible by the tabbing navigation when it is closed. */
           visibility: hidden;
+          display: flex;
+          flex-direction: column;
         }
 
         :host([drawer-opened]) [part='drawer'] {
@@ -263,8 +264,7 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
           transform: translateX(100%);
         }
 
-        :host([dir='rtl']) [part='navbar'],
-        :host([dir='rtl']) [part='navbar']::before {
+        :host([dir='rtl']) [part='navbar'] {
           transition: right var(--vaadin-app-layout-transition);
         }
 
@@ -289,6 +289,12 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
             width: 20em;
           }
         }
+
+        /* If a vaadin-scroller is used in the drawer, allow it to take all remaining space and contain scrolling */
+        [part='drawer'] ::slotted(vaadin-scroller) {
+          flex: 1;
+          overscroll-behavior: contain;
+        }
       </style>
       <div part="navbar" id="navbarTop">
         <slot name="navbar"></slot>
@@ -518,7 +524,6 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
   __drawerOpenedChanged(drawerOpened, oldDrawerOpened) {
     if (this.overlay) {
       if (drawerOpened) {
-        this._updateDrawerHeight();
         this.__trapFocusInDrawer();
       } else if (oldDrawerOpened) {
         this.__releaseFocusFromDrawer();
@@ -604,13 +609,6 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
     this.style.setProperty('--_vaadin-app-layout-drawer-offset-size', `${drawerRect.width}px`);
   }
 
-  /** @protected */
-  _updateDrawerHeight() {
-    const { scrollHeight, offsetHeight } = this.$.drawer;
-    const height = scrollHeight > offsetHeight ? `${scrollHeight}px` : '100%';
-    this.style.setProperty('--_vaadin-app-layout-drawer-scroll-size', height);
-  }
-
   /** @protected */
   _updateOverlayMode() {
     const overlay = this._getCustomPropertyValue('--vaadin-app-layout-drawer-overlay') === 'true';
@@ -628,7 +626,6 @@ class AppLayout extends ElementMixin(ThemableMixin(ControllerMixin(PolymerElemen
       this._drawerStateSaved = null;
     }
 
-    this._updateDrawerHeight();
     this.__updateDrawerAriaAttributes();
   }
 

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

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Button } from '@vaadin/button/src/vaadin-button.js';

package/src/vaadin-drawer-toggle.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2018 - 2022 Vaadin Ltd.
+ * Copyright (c) 2018 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';

package/theme/lumo/vaadin-app-layout-styles.js

@@ -6,34 +6,38 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-app-layout',
   css`
-    [part='navbar']::before {
-      background: var(--lumo-base-color) linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+    [part='navbar'],
+    [part='drawer'] {
+      background-color: var(--lumo-base-color);
+      background-clip: padding-box;
     }
 
-    :host(:not([dir='rtl']):not([overlay])) [part='drawer'] {
-      border-right: 1px solid var(--lumo-contrast-10pct);
+    [part='navbar'] {
+      min-height: var(--lumo-size-xl);
+      border-bottom: 1px solid var(--lumo-contrast-10pct);
     }
 
-    :host([dir='rtl']:not([overlay])) [part='drawer'] {
-      border-left: 1px solid var(--lumo-contrast-10pct);
+    [part='navbar'][bottom] {
+      border-bottom: none;
+      border-top: 1px solid var(--lumo-contrast-10pct);
     }
 
-    :host([overlay]) [part='drawer']::before {
-      background: var(--lumo-base-color);
+    [part='drawer'] {
+      border-inline-end: 1px solid var(--lumo-contrast-10pct);
     }
 
-    [part='navbar']::before,
-    :host([overlay]) [part='drawer']::before {
-      position: absolute;
-      content: '';
-      width: 100%;
-      height: 100%;
-      z-index: -1;
+    :host([overlay]) [part='drawer'] {
+      border-inline-end: none;
+      box-shadow: var(--lumo-box-shadow-s);
     }
 
-    :host([overlay]) [part='drawer']::before {
-      background: var(--lumo-base-color);
-      height: var(--_vaadin-app-layout-drawer-scroll-size, 100%);
+    :host([primary-section='navbar']) [part='navbar'] {
+      border: none;
+      background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
+    }
+
+    :host([primary-section='drawer']:not([overlay])) [part='drawer'] {
+      background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
     }
 
     [part='backdrop'] {
@@ -47,26 +51,6 @@ registerStyles(
       margin-top: var(--lumo-space-xs) !important;
       margin-bottom: var(--lumo-space-xs) !important;
     }
-
-    @supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {
-      [part='navbar']::before {
-        opacity: 0.8;
-      }
-
-      [part='navbar'] {
-        -webkit-backdrop-filter: blur(24px);
-        backdrop-filter: blur(24px);
-      }
-
-      :host([overlay]) [part='drawer']::before {
-        opacity: 0.9;
-      }
-
-      :host([overlay]) [part='drawer'] {
-        -webkit-backdrop-filter: blur(24px);
-        backdrop-filter: blur(24px);
-      }
-    }
   `,
   { moduleId: 'lumo-app-layout' },
 );

package/theme/lumo/vaadin-drawer-toggle-styles.js

@@ -27,6 +27,10 @@ const drawerToggle = css`
     font-size: var(--lumo-icon-size-m);
     content: var(--lumo-icons-menu);
   }
+
+  :host([slot~='navbar']) {
+    color: var(--lumo-secondary-text-color);
+  }
 `;
 
 registerStyles('vaadin-drawer-toggle', [button, drawerToggle], { moduleId: 'lumo-drawer-toggle' });

package/web-types.json

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