@vaadin/app-layout 24.0.0-alpha5 → 24.0.0-alpha7

package/package.json

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

package/src/vaadin-app-layout.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/theme/lumo/vaadin-app-layout-styles.js

@@ -6,34 +6,33 @@ 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='drawer'] {
+      border-inline-end: 1px solid var(--lumo-contrast-10pct);
     }
 
-    :host([overlay]) [part='drawer']::before {
-      background: var(--lumo-base-color);
+    :host([overlay]) [part='drawer'] {
+      border-inline-end: none;
+      box-shadow: var(--lumo-box-shadow-s);
     }
 
-    [part='navbar']::before,
-    :host([overlay]) [part='drawer']::before {
-      position: absolute;
-      content: '';
-      width: 100%;
-      height: 100%;
-      z-index: -1;
+    :host([primary-section='navbar']) [part='navbar'] {
+      border-bottom: none;
+      background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
     }
 
-    :host([overlay]) [part='drawer']::before {
-      background: var(--lumo-base-color);
-      height: var(--_vaadin-app-layout-drawer-scroll-size, 100%);
+    :host([primary-section='drawer']:not([overlay])) [part='drawer'] {
+      background-image: linear-gradient(var(--lumo-shade-5pct), var(--lumo-shade-5pct));
     }
 
     [part='backdrop'] {
@@ -47,26 +46,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-alpha5",
+  "version": "24.0.0-alpha7",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -51,6 +51,44 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "rootPath",
+                "description": "",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "importPath",
+                "description": "",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "root",
+                "description": "",
+                "value": {
+                  "type": [
+                    "StampedTemplate",
+                    "HTMLElement",
+                    "ShadowRoot"
+                  ]
+                }
+              },
+              {
+                "name": "$",
+                "description": "",
+                "value": {
+                  "type": [
+                    "Object.<string, Element>"
+                  ]
+                }
+              },
               {
                 "name": "i18n",
                 "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object as follows:\n```js\nappLayout.i18n = {\n  ...appLayout.i18n,\n  drawer: 'Drawer'\n}\n```\n\nThe object has the following structure and default values:\n```\n{\n  drawer: 'Drawer'\n}\n```",
@@ -159,6 +197,44 @@
                   ]
                 }
               },
+              {
+                "name": "rootPath",
+                "description": "",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "importPath",
+                "description": "",
+                "value": {
+                  "type": [
+                    "string"
+                  ]
+                }
+              },
+              {
+                "name": "root",
+                "description": "",
+                "value": {
+                  "type": [
+                    "StampedTemplate",
+                    "HTMLElement",
+                    "ShadowRoot"
+                  ]
+                }
+              },
+              {
+                "name": "$",
+                "description": "",
+                "value": {
+                  "type": [
+                    "Object.<string, Element>"
+                  ]
+                }
+              },
               {
                 "name": "ariaLabel",
                 "description": "",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "24.0.0-alpha5",
+  "version": "24.0.0-alpha7",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -26,6 +26,34 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".rootPath",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".importPath",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".root",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".$",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".i18n",
               "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object as follows:\n```js\nappLayout.i18n = {\n  ...appLayout.i18n,\n  drawer: 'Drawer'\n}\n```\n\nThe object has the following structure and default values:\n```\n{\n  drawer: 'Drawer'\n}\n```",
@@ -89,6 +117,34 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": ".rootPath",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".importPath",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".root",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".$",
+              "description": "",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".ariaLabel",
               "description": "",