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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -21,9 +21,6 @@
   "type": "module",
   "files": [
     "src",
-    "!src/styles/*-base-styles.d.ts",
-    "!src/styles/*-base-styles.js",
-    "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
     "web-types.json",
@@ -37,22 +34,22 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha9",
-    "@vaadin/button": "25.0.0-alpha9",
-    "@vaadin/component-base": "25.0.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha9",
+    "@vaadin/a11y-base": "25.0.0-beta1",
+    "@vaadin/button": "25.0.0-beta1",
+    "@vaadin/component-base": "25.0.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha9",
-    "@vaadin/test-runner-commands": "25.0.0-alpha9",
+    "@vaadin/chai-plugins": "25.0.0-beta1",
+    "@vaadin/test-runner-commands": "25.0.0-beta1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "sinon": "^18.0.0"
+    "@vaadin/vaadin-lumo-styles": "25.0.0-beta1",
+    "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "bbe4720721e0955ffc87a79b412bee38b1f0eb1e"
+  "gitHead": "1d20cf54e582d1f2e209126d4586f8b4c01c50e0"
 }

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

@@ -3,7 +3,7 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const appLayoutStyles = css`
@@ -55,30 +55,30 @@ export const appLayoutStyles = css`
     }
   }
 
-  [part='navbar'] {
+  [part~='navbar'] {
     position: fixed;
     display: flex;
     align-items: center;
     top: 0;
     inset-inline: 0;
     transition: inset-inline-start var(--vaadin-app-layout-transition-duration);
-    padding-top: max(var(--vaadin-app-layout-navbar-padding-top, var(--vaadin-padding)), var(--safe-area-inset-top));
-    padding-bottom: var(--vaadin-app-layout-navbar-padding-bottom, var(--vaadin-padding));
+    padding-top: max(var(--vaadin-app-layout-navbar-padding-top, var(--vaadin-padding-s)), var(--safe-area-inset-top));
+    padding-bottom: var(--vaadin-app-layout-navbar-padding-bottom, var(--vaadin-padding-s));
     padding-inline-start: max(
-      var(--vaadin-app-layout-navbar-padding-inline-start, var(--vaadin-padding)),
+      var(--vaadin-app-layout-navbar-padding-inline-start, var(--vaadin-padding-s)),
       var(--safe-area-inset-left)
     );
     /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
     padding-inline-end: max(
-      var(--vaadin-app-layout-navbar-padding-inline-end, var(--vaadin-padding)),
+      var(--vaadin-app-layout-navbar-padding-inline-end, var(--vaadin-padding-s)),
       var(--safe-area-inset-right)
     );
     z-index: 1;
-    gap: var(--vaadin-app-layout-navbar-gap, var(--vaadin-gap-container-inline));
+    gap: var(--vaadin-app-layout-navbar-gap, var(--vaadin-gap-s));
     background: var(--vaadin-app-layout-navbar-background, var(--vaadin-background-container));
   }
 
-  :host([primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
+  :host([primary-section='drawer'][drawer-opened]:not([overlay])) [part~='navbar'] {
     inset-inline-start: var(--vaadin-app-layout-drawer-offset-left, 0);
   }
 
@@ -86,12 +86,12 @@ export const appLayoutStyles = css`
     top: 0;
   }
 
-  [part='navbar'][bottom] {
+  [part~='navbar-bottom'] {
     top: auto;
     bottom: 0;
-    padding-top: var(--vaadin-app-layout-navbar-padding-top, var(--vaadin-padding));
+    padding-top: var(--vaadin-app-layout-navbar-padding-top, var(--vaadin-padding-s));
     padding-bottom: max(
-      var(--vaadin-app-layout-navbar-padding-bottom, var(--vaadin-padding)),
+      var(--vaadin-app-layout-navbar-padding-bottom, var(--vaadin-padding-s)),
       var(--safe-area-inset-bottom)
     );
   }
@@ -116,7 +116,7 @@ export const appLayoutStyles = css`
     visibility: hidden;
     display: flex;
     flex-direction: column;
-    background: var(--vaadin-app-layout-drawer-background, var(--vaadin-background-color));
+    background: var(--vaadin-app-layout-drawer-background, transparent);
   }
 
   :host([drawer-opened]) [part='drawer'] {
@@ -127,7 +127,8 @@ export const appLayoutStyles = css`
   }
 
   [part='backdrop'] {
-    background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.5));
+    background: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.2));
+    forced-color-adjust: none;
   }
 
   :host(:not([drawer-opened])) [part='backdrop'] {
@@ -145,7 +146,8 @@ export const appLayoutStyles = css`
   :host([overlay]) [part='drawer'] {
     top: 0;
     bottom: 0;
-    box-shadow: var(--vaadin-overlay-box-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
+    box-shadow: var(--vaadin-overlay-shadow, 0 8px 24px -4px rgba(0, 0, 0, 0.3));
+    background: var(--vaadin-app-layout-drawer-background, var(--vaadin-background-color));
   }
 
   :host([overlay]) [part='drawer'],

package/src/styles/vaadin-drawer-toggle-base-styles.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2018 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/component-base/src/style-props.js';
+import '@vaadin/component-base/src/styles/style-props.js';
 import { css } from 'lit';
 
 export const drawerToggle = css`
@@ -11,7 +11,7 @@ export const drawerToggle = css`
     background: currentColor;
     display: block;
     height: var(--vaadin-icon-size, 1lh);
-    mask-image: var(--_vaadin-icon-menu);
+    mask: var(--_vaadin-icon-menu) 50% / var(--vaadin-icon-visual-size, 100%) no-repeat;
     width: var(--vaadin-icon-size, 1lh);
   }
 

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

@@ -21,7 +21,7 @@ export declare class AppLayoutMixinClass {
    * just the individual properties you want to change.
    *
    * The object has the following structure and default values:
-   * ```
+   * ```js
    * {
    *   drawer: 'Drawer'
    * }

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

@@ -105,7 +105,7 @@ export const AppLayoutMixin = (superclass) =>
      * just the individual properties you want to change.
      *
      * The object has the following structure and default values:
-     * ```
+     * ```js
      * {
      *   drawer: 'Drawer'
      * }
@@ -208,6 +208,18 @@ export const AppLayoutMixin = (superclass) =>
       window.removeEventListener('keydown', this.__onDrawerKeyDown);
     }
 
+    /** @private */
+    __onNavbarSlotChange() {
+      this._updateTouchOptimizedMode();
+      this.toggleAttribute('has-navbar', !!this.querySelector('[slot="navbar"]'));
+    }
+
+    /** @private */
+    __onDrawerSlotChange() {
+      this._updateDrawerSize();
+      this.toggleAttribute('has-drawer', !!this.querySelector('[slot="drawer"]'));
+    }
+
     /**
      * A callback for the `primarySection` property observer.
      *
@@ -432,7 +444,6 @@ export const AppLayoutMixin = (superclass) =>
       const toggle = this.querySelector('vaadin-drawer-toggle');
       if (toggle) {
         toggle.focus();
-        toggle.setAttribute('focus-ring', 'focus');
       }
     }
 

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

@@ -55,27 +55,36 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;
  * For best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).
  *
  * The page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:
- * ```
+ * ```html
  * <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  * ```
+ *
  * This causes the viewport to be scaled to fill the device display.
- * To ensure that important content is displayed, use the provided css variables.
- * ```
- * --safe-area-inset-top
- * --safe-area-inset-right
- * --safe-area-inset-bottom
- * --safe-area-inset-left
- * ```
+ * To ensure that important content is displayed, use the provided css variables:
+ *
+ * - `--safe-area-inset-top`
+ * - `--safe-area-inset-right`
+ * - `--safe-area-inset-bottom`
+ * - `--safe-area-inset-left`
  *
  * ### Styling
  *
- * The following Shadow DOM parts of the `<vaadin-app-layout>` are available for styling:
+ * The following shadow DOM parts are available for styling:
+ *
+ * Part name        | Description
+ * -----------------|---------------------------------------------------------|
+ * `backdrop`       | Backdrop covering the layout when drawer is open as an overlay
+ * `navbar`         | Container for the navigation bar
+ * `navbar-top`     | Container for the top navigation bar
+ * `navbar-bottom`  | Container for the bottom navigation bar
+ * `drawer`         | Container for the drawer area
+ *
+ * The following state attributes are available for styling:
  *
- * Part name     | Description
- * --------------|---------------------------------------------------------|
- * `backdrop`    | Backdrop covering the layout when drawer is open as an overlay
- * `navbar`      | Container for the navigation bar
- * `drawer`      | Container for the drawer area
+ * Attribute      | Description
+ * ---------------|-------------
+ * `has-drawer`   | Set when the element has light DOM content in the drawer slot.
+ * `has-navbar`   | Set when the element has light DOM content in the navbar slot.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *

package/src/vaadin-app-layout.js

@@ -11,7 +11,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { appLayoutStyles } from './styles/vaadin-app-layout-core-styles.js';
+import { appLayoutStyles } from './styles/vaadin-app-layout-base-styles.js';
 import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
 
 /**
@@ -35,30 +35,39 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
  * For best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).
  *
  * The page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:
- * ```
+ * ```html
  * <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  * ```
+ *
  * This causes the viewport to be scaled to fill the device display.
- * To ensure that important content is displayed, use the provided css variables.
- * ```
- * --safe-area-inset-top
- * --safe-area-inset-right
- * --safe-area-inset-bottom
- * --safe-area-inset-left
- * ```
+ * To ensure that important content is displayed, use the provided css variables:
+ *
+ * - `--safe-area-inset-top`
+ * - `--safe-area-inset-right`
+ * - `--safe-area-inset-bottom`
+ * - `--safe-area-inset-left`
  *
  * ### Styling
  *
- * The following Shadow DOM parts of the `<vaadin-app-layout>` are available for styling:
+ * The following shadow DOM parts are available for styling:
  *
- * Part name     | Description
- * --------------|---------------------------------------------------------|
- * `backdrop`    | Backdrop covering the layout when drawer is open as an overlay
- * `navbar`      | Container for the navigation bar
- * `drawer`      | Container for the drawer area
+ * Part name        | Description
+ * -----------------|---------------------------------------------------------|
+ * `backdrop`       | Backdrop covering the layout when drawer is open as an overlay
+ * `navbar`         | Container for the navigation bar
+ * `navbar-top`     | Container for the top navigation bar
+ * `navbar-bottom`  | Container for the bottom navigation bar
+ * `drawer`         | Container for the drawer area
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * The following state attributes are available for styling:
+ *
+ * Attribute      | Description
+ * ---------------|-------------
+ * `has-drawer`   | Set when the element has light DOM content in the drawer slot.
+ * `has-navbar`   | Set when the element has light DOM content in the navbar slot.
+ *
  * ### Component's slots
  *
  * The following slots are available to be set
@@ -120,21 +129,21 @@ class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(L
   /** @protected */
   render() {
     return html`
-      <div part="navbar" id="navbarTop">
-        <slot name="navbar" @slotchange="${this._updateTouchOptimizedMode}"></slot>
+      <div part="navbar navbar-top" id="navbarTop">
+        <slot name="navbar" @slotchange="${this.__onNavbarSlotChange}"></slot>
       </div>
       <div part="backdrop" @click="${this._onBackdropClick}" @touchend="${this._onBackdropTouchend}"></div>
       <div part="drawer" id="drawer">
-        <slot name="drawer" id="drawerSlot" @slotchange="${this._updateDrawerSize}"></slot>
+        <slot name="drawer" id="drawerSlot" @slotchange="${this.__onDrawerSlotChange}"></slot>
       </div>
       <div content>
         <slot></slot>
       </div>
-      <div part="navbar" id="navbarBottom" bottom hidden>
+      <div part="navbar navbar-bottom" id="navbarBottom" hidden>
         <slot name="navbar-bottom"></slot>
       </div>
       <div hidden>
-        <slot id="touchSlot" name="navbar touch-optimized" @slotchange="${this._updateTouchOptimizedMode}"></slot>
+        <slot id="touchSlot" name="navbar touch-optimized" @slotchange="${this.__onNavbarSlotChange}"></slot>
       </div>
     `;
   }

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, LitElement } from 'lit';
-import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-core-styles.js';
+import { buttonStyles } from '@vaadin/button/src/styles/vaadin-button-base-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';
@@ -12,7 +12,7 @@ import { isEmptyTextNode } from '@vaadin/component-base/src/dom-utils.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { drawerToggle } from './styles/vaadin-drawer-toggle-core-styles.js';
+import { drawerToggle } from './styles/vaadin-drawer-toggle-base-styles.js';
 
 /**
  * The Drawer Toggle component controls the drawer in App Layout component.

package/vaadin-app-layout.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-app-layout.js';
+import './src/vaadin-app-layout.js';
 export * from './src/vaadin-app-layout.js';

package/vaadin-drawer-toggle.js

@@ -1,2 +1,2 @@
-import './theme/lumo/vaadin-drawer-toggle.js';
+import './src/vaadin-drawer-toggle.js';
 export * from './src/vaadin-drawer-toggle.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-app-layout",
-          "description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```html\n<vaadin-app-layout primary-section=\"navbar|drawer\">\n <vaadin-drawer-toggle slot=\"navbar [touch-optimized]\"></vaadin-drawer-toggle>\n <h3 slot=\"navbar [touch-optimized]\">Company Name</h3>\n <vaadin-tabs orientation=\"vertical\" slot=\"drawer\">\n   <vaadin-tab>Menu item 1</vaadin-tab>\n </vaadin-tabs>\n <!-- Everything else will be the page content -->\n <div>\n   <h3>Page title</h3>\n   <p>Page content</p>\n </div>\n</vaadin-app-layout>\n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n```\nThis causes the viewport to be scaled to fill the device display.\nTo ensure that important content is displayed, use the provided css variables.\n```\n--safe-area-inset-top\n--safe-area-inset-right\n--safe-area-inset-bottom\n--safe-area-inset-left\n```\n\n### Styling\n\nThe following Shadow DOM parts of the `<vaadin-app-layout>` are available for styling:\n\nPart name     | Description\n--------------|---------------------------------------------------------|\n`backdrop`    | Backdrop covering the layout when drawer is open as an overlay\n`navbar`      | Container for the navigation bar\n`drawer`      | Container for the drawer area\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Component's slots\n\nThe following slots are available to be set\n\nSlot name          | Description\n-------------------|---------------------------------------------------|\nno name            | Default container for the page content\n`navbar `          | Container for the top navbar area\n`drawer`           | Container for an application menu\n`touch-optimized`  | Container for the bottom navbar area (only visible for mobile devices)\n\n#### Touch optimized\n\nApp Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of\nelements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a\ntouchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move\nthem to the bottom of the page.\n\n### Navigation\n\nAs the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.\nIf you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.\n\nIn order to do so, there are two options:\n- If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`\n- If not, a custom event `close-overlay-drawer` can be dispatched either by calling\n `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling\n `AppLayout.dispatchCloseOverlayDrawerEvent()`\n\n### Scrolling areas\n\nBy default, the component will act with the \"body scrolling\", so on mobile (iOS Safari and Android Chrome),\nthe toolbars will collapse when a scroll happens.\n\nTo use the \"content scrolling\", in case of the content of the page relies on a pre-defined height (for instance,\nit has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.\nThat will make the `[content]` element of app layout scrollable.\nOn this case, the toolbars on mobile device won't collapse.",
+          "description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```html\n<vaadin-app-layout primary-section=\"navbar|drawer\">\n <vaadin-drawer-toggle slot=\"navbar [touch-optimized]\"></vaadin-drawer-toggle>\n <h3 slot=\"navbar [touch-optimized]\">Company Name</h3>\n <vaadin-tabs orientation=\"vertical\" slot=\"drawer\">\n   <vaadin-tab>Menu item 1</vaadin-tab>\n </vaadin-tabs>\n <!-- Everything else will be the page content -->\n <div>\n   <h3>Page title</h3>\n   <p>Page content</p>\n </div>\n</vaadin-app-layout>\n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```html\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n```\n\nThis causes the viewport to be scaled to fill the device display.\nTo ensure that important content is displayed, use the provided css variables:\n\n- `--safe-area-inset-top`\n- `--safe-area-inset-right`\n- `--safe-area-inset-bottom`\n- `--safe-area-inset-left`\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|---------------------------------------------------------|\n`backdrop`       | Backdrop covering the layout when drawer is open as an overlay\n`navbar`         | Container for the navigation bar\n`navbar-top`     | Container for the top navigation bar\n`navbar-bottom`  | Container for the bottom navigation bar\n`drawer`         | Container for the drawer area\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`has-drawer`   | Set when the element has light DOM content in the drawer slot.\n`has-navbar`   | Set when the element has light DOM content in the navbar slot.\n\n### Component's slots\n\nThe following slots are available to be set\n\nSlot name          | Description\n-------------------|---------------------------------------------------|\nno name            | Default container for the page content\n`navbar `          | Container for the top navbar area\n`drawer`           | Container for an application menu\n`touch-optimized`  | Container for the bottom navbar area (only visible for mobile devices)\n\n#### Touch optimized\n\nApp Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of\nelements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a\ntouchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move\nthem to the bottom of the page.\n\n### Navigation\n\nAs the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.\nIf you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.\n\nIn order to do so, there are two options:\n- If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`\n- If not, a custom event `close-overlay-drawer` can be dispatched either by calling\n `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling\n `AppLayout.dispatchCloseOverlayDrawerEvent()`\n\n### Scrolling areas\n\nBy default, the component will act with the \"body scrolling\", so on mobile (iOS Safari and Android Chrome),\nthe toolbars will collapse when a scroll happens.\n\nTo use the \"content scrolling\", in case of the content of the page relies on a pre-defined height (for instance,\nit has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.\nThat will make the `[content]` element of app layout scrollable.\nOn this case, the toolbars on mobile device won't collapse.",
           "attributes": [
             {
               "name": "i18n",
@@ -62,7 +62,7 @@
             "properties": [
               {
                 "name": "i18n",
-                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```\n{\n  drawer: 'Drawer'\n}\n```",
+                "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```js\n{\n  drawer: 'Drawer'\n}\n```",
                 "value": {
                   "type": [
                     "AppLayoutI18n"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "25.0.0-alpha9",
+  "version": "25.0.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-app-layout",
-          "description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```html\n<vaadin-app-layout primary-section=\"navbar|drawer\">\n <vaadin-drawer-toggle slot=\"navbar [touch-optimized]\"></vaadin-drawer-toggle>\n <h3 slot=\"navbar [touch-optimized]\">Company Name</h3>\n <vaadin-tabs orientation=\"vertical\" slot=\"drawer\">\n   <vaadin-tab>Menu item 1</vaadin-tab>\n </vaadin-tabs>\n <!-- Everything else will be the page content -->\n <div>\n   <h3>Page title</h3>\n   <p>Page content</p>\n </div>\n</vaadin-app-layout>\n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n```\nThis causes the viewport to be scaled to fill the device display.\nTo ensure that important content is displayed, use the provided css variables.\n```\n--safe-area-inset-top\n--safe-area-inset-right\n--safe-area-inset-bottom\n--safe-area-inset-left\n```\n\n### Styling\n\nThe following Shadow DOM parts of the `<vaadin-app-layout>` are available for styling:\n\nPart name     | Description\n--------------|---------------------------------------------------------|\n`backdrop`    | Backdrop covering the layout when drawer is open as an overlay\n`navbar`      | Container for the navigation bar\n`drawer`      | Container for the drawer area\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Component's slots\n\nThe following slots are available to be set\n\nSlot name          | Description\n-------------------|---------------------------------------------------|\nno name            | Default container for the page content\n`navbar `          | Container for the top navbar area\n`drawer`           | Container for an application menu\n`touch-optimized`  | Container for the bottom navbar area (only visible for mobile devices)\n\n#### Touch optimized\n\nApp Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of\nelements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a\ntouchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move\nthem to the bottom of the page.\n\n### Navigation\n\nAs the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.\nIf you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.\n\nIn order to do so, there are two options:\n- If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`\n- If not, a custom event `close-overlay-drawer` can be dispatched either by calling\n `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling\n `AppLayout.dispatchCloseOverlayDrawerEvent()`\n\n### Scrolling areas\n\nBy default, the component will act with the \"body scrolling\", so on mobile (iOS Safari and Android Chrome),\nthe toolbars will collapse when a scroll happens.\n\nTo use the \"content scrolling\", in case of the content of the page relies on a pre-defined height (for instance,\nit has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.\nThat will make the `[content]` element of app layout scrollable.\nOn this case, the toolbars on mobile device won't collapse.",
+          "description": "`<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.\n\n```html\n<vaadin-app-layout primary-section=\"navbar|drawer\">\n <vaadin-drawer-toggle slot=\"navbar [touch-optimized]\"></vaadin-drawer-toggle>\n <h3 slot=\"navbar [touch-optimized]\">Company Name</h3>\n <vaadin-tabs orientation=\"vertical\" slot=\"drawer\">\n   <vaadin-tab>Menu item 1</vaadin-tab>\n </vaadin-tabs>\n <!-- Everything else will be the page content -->\n <div>\n   <h3>Page title</h3>\n   <p>Page content</p>\n </div>\n</vaadin-app-layout>\n```\n\nFor best results, the component should be added to the root level of your application (i.e., as a direct child of `<body>`).\n\nThe page should include a viewport meta tag which contains `viewport-fit=cover`, like the following:\n```html\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n```\n\nThis causes the viewport to be scaled to fill the device display.\nTo ensure that important content is displayed, use the provided css variables:\n\n- `--safe-area-inset-top`\n- `--safe-area-inset-right`\n- `--safe-area-inset-bottom`\n- `--safe-area-inset-left`\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name        | Description\n-----------------|---------------------------------------------------------|\n`backdrop`       | Backdrop covering the layout when drawer is open as an overlay\n`navbar`         | Container for the navigation bar\n`navbar-top`     | Container for the top navigation bar\n`navbar-bottom`  | Container for the bottom navigation bar\n`drawer`         | Container for the drawer area\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\nThe following state attributes are available for styling:\n\nAttribute      | Description\n---------------|-------------\n`has-drawer`   | Set when the element has light DOM content in the drawer slot.\n`has-navbar`   | Set when the element has light DOM content in the navbar slot.\n\n### Component's slots\n\nThe following slots are available to be set\n\nSlot name          | Description\n-------------------|---------------------------------------------------|\nno name            | Default container for the page content\n`navbar `          | Container for the top navbar area\n`drawer`           | Container for an application menu\n`touch-optimized`  | Container for the bottom navbar area (only visible for mobile devices)\n\n#### Touch optimized\n\nApp Layout has a pseudo-slot `touch-optimized` in order to give more control of the presentation of\nelements with `slot[navbar]`. Internally, when the user is interacting with App Layout from a\ntouchscreen device, the component will search for elements with `slot[navbar touch-optimized]` and move\nthem to the bottom of the page.\n\n### Navigation\n\nAs the drawer opens as an overlay in small devices, it makes sense to close it once a navigation happens.\nIf you are using Vaadin Router, this will happen automatically unless you change the `closeDrawerOn` event name.\n\nIn order to do so, there are two options:\n- If the `vaadin-app-layout` instance is available, then `drawerOpened` can be set to `false`\n- If not, a custom event `close-overlay-drawer` can be dispatched either by calling\n `window.dispatchEvent(new CustomEvent('close-overlay-drawer'))` or by calling\n `AppLayout.dispatchCloseOverlayDrawerEvent()`\n\n### Scrolling areas\n\nBy default, the component will act with the \"body scrolling\", so on mobile (iOS Safari and Android Chrome),\nthe toolbars will collapse when a scroll happens.\n\nTo use the \"content scrolling\", in case of the content of the page relies on a pre-defined height (for instance,\nit has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.\nThat will make the `[content]` element of app layout scrollable.\nOn this case, the toolbars on mobile device won't collapse.",
           "extension": true,
           "attributes": [
             {
@@ -28,7 +28,7 @@
             },
             {
               "name": ".i18n",
-              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```\n{\n  drawer: 'Drawer'\n}\n```",
+              "description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following structure and default values:\n```js\n{\n  drawer: 'Drawer'\n}\n```",
               "value": {
                 "kind": "expression"
               }

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

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { CSSResult } from 'lit';
-
-export const appLayoutStyles: CSSResult;

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

@@ -1,166 +0,0 @@
-/**
- * @license
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from 'lit';
-
-export const appLayoutStyles = css`
-  :host {
-    display: block;
-    box-sizing: border-box;
-    height: 100%;
-    --vaadin-app-layout-transition-duration: 200ms;
-    transition: padding var(--vaadin-app-layout-transition-duration);
-    --_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, 16em);
-    --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);
-  }
-
-  :host([hidden]),
-  [hidden] {
-    display: none !important;
-  }
-
-  :host([no-anim]) {
-    --vaadin-app-layout-transition-duration: 0s !important;
-  }
-
-  :host([drawer-opened]) {
-    --vaadin-app-layout-drawer-offset-left: var(--_vaadin-app-layout-drawer-offset-size);
-  }
-
-  :host([overlay]) {
-    --vaadin-app-layout-drawer-offset-left: 0;
-    --vaadin-app-layout-navbar-offset-left: 0;
-  }
-
-  :host(:not([no-scroll])) [content] {
-    overflow: auto;
-  }
-
-  [content] {
-    height: 100%;
-  }
-
-  @media (pointer: coarse) and (max-width: 800px) and (min-height: 500px) {
-    :host {
-      --vaadin-app-layout-touch-optimized: true;
-    }
-  }
-
-  [part='navbar'] {
-    position: fixed;
-    display: flex;
-    align-items: center;
-    top: 0;
-    inset-inline: 0;
-    transition: inset-inline-start var(--vaadin-app-layout-transition-duration);
-    padding-top: var(--safe-area-inset-top);
-    padding-left: var(--safe-area-inset-left);
-    padding-right: var(--safe-area-inset-right);
-    z-index: 1;
-  }
-
-  :host([primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
-    inset-inline-start: var(--vaadin-app-layout-drawer-offset-left, 0);
-  }
-
-  :host([primary-section='drawer']) [part='drawer'] {
-    top: 0;
-  }
-
-  [part='navbar'][bottom] {
-    top: auto;
-    bottom: 0;
-    padding-bottom: var(--safe-area-inset-bottom);
-  }
-
-  [part='drawer'] {
-    overflow: auto;
-    position: fixed;
-    top: var(--vaadin-app-layout-navbar-offset-top, 0);
-    bottom: var(--vaadin-app-layout-navbar-offset-bottom, var(--vaadin-viewport-offset-bottom, 0));
-    inset-inline: var(--vaadin-app-layout-navbar-offset-left, 0) auto;
-    transition:
-      transform var(--vaadin-app-layout-transition-duration),
-      visibility var(--vaadin-app-layout-transition-duration);
-    transform: translateX(-100%);
-    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);
-    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'] {
-    /* The drawer should be accessible by the tabbing navigation when it is opened. */
-    visibility: visible;
-    transform: translateX(0%);
-    touch-action: manipulation;
-  }
-
-  [part='backdrop'] {
-    background-color: #000;
-    opacity: 0.3;
-  }
-
-  :host(:not([drawer-opened])) [part='backdrop'] {
-    opacity: 0;
-  }
-
-  :host([overlay]) [part='backdrop'] {
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    transition: opacity var(--vaadin-app-layout-transition-duration);
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  :host([overlay]) [part='drawer'] {
-    top: 0;
-    bottom: 0;
-  }
-
-  :host([overlay]) [part='drawer'],
-  :host([overlay]) [part='backdrop'] {
-    z-index: 2;
-  }
-
-  :host([drawer-opened][overlay]) [part='backdrop'] {
-    pointer-events: auto;
-    touch-action: manipulation;
-  }
-
-  :host([dir='rtl']) [part='drawer'] {
-    transform: translateX(100%);
-  }
-
-  :host([dir='rtl'][drawer-opened]) [part='drawer'] {
-    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;
-      --_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-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;
-  }
-`;

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

@@ -1,8 +0,0 @@
-/**
- * @license
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import type { CSSResult } from 'lit';
-
-export const drawerToggle: CSSResult;

package/src/styles/vaadin-drawer-toggle-core-styles.js

@@ -1,43 +0,0 @@
-/**
- * @license
- * Copyright (c) 2018 - 2025 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
-import { css } from 'lit';
-
-export const drawerToggle = css`
-  :host {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: default;
-    position: relative;
-    outline: none;
-    height: 24px;
-    width: 24px;
-    padding: 4px;
-  }
-
-  [part='icon'],
-  [part='icon']::after,
-  [part='icon']::before {
-    position: absolute;
-    top: 8px;
-    height: 3px;
-    width: 24px;
-    background-color: #000;
-  }
-
-  [part='icon']::after,
-  [part='icon']::before {
-    content: '';
-  }
-
-  [part='icon']::after {
-    top: 6px;
-  }
-
-  [part='icon']::before {
-    top: 12px;
-  }
-`;

package/theme/lumo/vaadin-app-layout-styles.d.ts

@@ -1,3 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';

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

@@ -1,56 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/color.js';
-import '@vaadin/vaadin-lumo-styles/spacing.js';
-import '@vaadin/vaadin-lumo-styles/typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-registerStyles(
-  'vaadin-app-layout',
-  css`
-    [part='navbar'],
-    [part='drawer'] {
-      background-color: var(--lumo-base-color);
-      background-clip: padding-box;
-    }
-
-    [part='navbar'] {
-      min-height: var(--lumo-size-xl);
-      border-bottom: 1px solid var(--lumo-contrast-10pct);
-    }
-
-    [part='navbar'][bottom] {
-      border-bottom: none;
-      border-top: 1px solid var(--lumo-contrast-10pct);
-    }
-
-    [part='drawer'] {
-      border-inline-end: 1px solid var(--lumo-contrast-10pct);
-    }
-
-    :host([overlay]) [part='drawer'] {
-      border-inline-end: none;
-      box-shadow: var(--lumo-box-shadow-s);
-    }
-
-    :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'] {
-      background-color: var(--lumo-shade-20pct);
-      opacity: 1;
-    }
-
-    [part] ::slotted(h2),
-    [part] ::slotted(h3),
-    [part] ::slotted(h4) {
-      margin-top: var(--lumo-space-xs) !important;
-      margin-bottom: var(--lumo-space-xs) !important;
-    }
-  `,
-  { moduleId: 'lumo-app-layout' },
-);

package/theme/lumo/vaadin-app-layout.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-app-layout-styles.js';
-import '../../src/vaadin-app-layout.js';

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

@@ -1,2 +0,0 @@
-import './vaadin-app-layout-styles.js';
-import '../../src/vaadin-app-layout.js';

package/theme/lumo/vaadin-drawer-toggle-styles.d.ts

@@ -1 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/font-icons.js';

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

@@ -1,36 +0,0 @@
-import '@vaadin/vaadin-lumo-styles/font-icons.js';
-import { button } from '@vaadin/button/theme/lumo/vaadin-button-styles.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-
-const drawerToggle = css`
-  :host {
-    width: var(--lumo-size-l);
-    height: var(--lumo-size-l);
-    min-width: auto;
-    margin: 0 var(--lumo-space-s);
-    padding: 0;
-    background: transparent;
-  }
-
-  [part='icon'],
-  [part='icon']::after,
-  [part='icon']::before {
-    position: inherit;
-    height: auto;
-    width: auto;
-    background: transparent;
-    top: auto;
-  }
-
-  [part='icon']::before {
-    font-family: lumo-icons;
-    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/theme/lumo/vaadin-drawer-toggle.d.ts

@@ -1,2 +0,0 @@
-import './vaadin-drawer-toggle-styles.js';
-import '../../src/vaadin-drawer-toggle.js';

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

@@ -1,2 +0,0 @@
-import './vaadin-drawer-toggle-styles.js';
-import '../../src/vaadin-drawer-toggle.js';