@vaadin/app-layout 25.0.0-alpha2 → 25.0.0-alpha4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "25.0.0-alpha2",
+  "version": "25.0.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -21,6 +21,8 @@
   "type": "module",
   "files": [
     "src",
+    "!src/styles/*-base-styles.d.ts",
+    "!src/styles/*-base-styles.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
@@ -35,16 +37,16 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha2",
-    "@vaadin/button": "25.0.0-alpha2",
-    "@vaadin/component-base": "25.0.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha2",
+    "@vaadin/a11y-base": "25.0.0-alpha4",
+    "@vaadin/button": "25.0.0-alpha4",
+    "@vaadin/component-base": "25.0.0-alpha4",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha4",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha2",
-    "@vaadin/test-runner-commands": "25.0.0-alpha2",
+    "@vaadin/chai-plugins": "25.0.0-alpha4",
+    "@vaadin/test-runner-commands": "25.0.0-alpha4",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
@@ -52,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "67ffcd5355cf21ce1b5039c598525109fc4c164b"
+  "gitHead": "ce4421f0daf26027b863b91787a474e4cc264344"
 }

package/src/safe-area-inset.js

@@ -1,3 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
 const template = document.createElement('template');
 
 template.innerHTML = `

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

@@ -0,0 +1,193 @@
+/**
+ * @license
+ * 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 { css } from 'lit';
+
+export const appLayoutStyles = css`
+  @layer base {
+    :host {
+      display: block;
+      box-sizing: border-box;
+      height: 100%;
+      --vaadin-app-layout-transition-duration: 0s;
+      transition: padding var(--vaadin-app-layout-transition-duration);
+      --_vaadin-app-layout-drawer-width: var(--vaadin-app-layout-drawer-width, auto);
+      --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;
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      :host(:not([no-anim])) {
+        --vaadin-app-layout-transition-duration: 200ms;
+      }
+    }
+
+    :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: 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-inline-start: max(
+        var(--vaadin-app-layout-navbar-padding-inline-start, var(--_vaadin-padding)),
+        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(--safe-area-inset-right)
+      );
+      z-index: 1;
+      gap: var(--vaadin-app-layout-navbar-gap, var(--_vaadin-gap-container-inline));
+      background: var(--vaadin-app-layout-navbar-background, var(--_vaadin-background-container));
+    }
+
+    :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-top: var(--vaadin-app-layout-navbar-padding-top, var(--_vaadin-padding));
+      padding-bottom: max(
+        var(--vaadin-app-layout-navbar-padding-bottom, var(--_vaadin-padding)),
+        var(--safe-area-inset-bottom)
+      );
+    }
+
+    [part='drawer'] {
+      overflow: auto;
+      overscroll-behavior: contain;
+      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;
+      background: var(--vaadin-app-layout-drawer-background, var(--_vaadin-background));
+    }
+
+    :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: var(--vaadin-overlay-backdrop-background, rgba(0, 0, 0, 0.5));
+    }
+
+    :host(:not([drawer-opened])) [part='backdrop'] {
+      opacity: 0 !important;
+    }
+
+    :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;
+      box-shadow: var(--vaadin-overlay-box-shadow, 0 8px 24px -4px hsl(0 0 0 / 0.3));
+    }
+
+    :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;
+    }
+
+    @media (forced-colors: active) {
+      :host([overlay]) [part='drawer'] {
+        border: 3px solid;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,8 @@
+/**
+ * @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/{vaadin-app-layout-styles.js → styles/vaadin-app-layout-core-styles.js}

@@ -3,15 +3,15 @@
  * 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 '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from 'lit';
 
 export const appLayoutStyles = css`
   :host {
     display: block;
     box-sizing: border-box;
     height: 100%;
-    --vaadin-app-layout-transition: 200ms;
-    transition: padding var(--vaadin-app-layout-transition);
+    --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);
@@ -26,7 +26,7 @@ export const appLayoutStyles = css`
   }
 
   :host([no-anim]) {
-    --vaadin-app-layout-transition: none !important;
+    --vaadin-app-layout-transition-duration: 0s !important;
   }
 
   :host([drawer-opened]) {
@@ -58,7 +58,7 @@ export const appLayoutStyles = css`
     align-items: center;
     top: 0;
     inset-inline: 0;
-    transition: inset-inline-start var(--vaadin-app-layout-transition);
+    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);
@@ -86,8 +86,8 @@ export const appLayoutStyles = css`
     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),
-      visibility var(--vaadin-app-layout-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);
@@ -120,7 +120,7 @@ export const appLayoutStyles = css`
     position: fixed;
     inset: 0;
     pointer-events: none;
-    transition: opacity var(--vaadin-app-layout-transition);
+    transition: opacity var(--vaadin-app-layout-transition-duration);
     -webkit-tap-highlight-color: transparent;
   }
 

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

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * 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 { css } from 'lit';
+
+export const drawerToggle = css`
+  @layer base {
+    [part='icon'] {
+      background: currentColor;
+      display: block;
+      height: var(--vaadin-icon-size, 1lh);
+      mask-image: var(--_vaadin-icon-menu);
+      width: var(--vaadin-icon-size, 1lh);
+    }
+
+    [hidden] {
+      display: none !important;
+    }
+
+    @media (forced-colors: active) {
+      [part='icon'] {
+        background: CanvasText;
+      }
+    }
+  }
+`;

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

@@ -0,0 +1,8 @@
+/**
+ * @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/{vaadin-drawer-toggle-styles.js → styles/vaadin-drawer-toggle-core-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 { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { css } from 'lit';
 
 export const drawerToggle = css`
   :host {

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

@@ -363,8 +363,8 @@ export const AppLayoutMixin = (superclass) =>
     /**
      * Returns a promise that resolves when the drawer opening/closing CSS transition ends.
      *
-     * The method relies on the `--vaadin-app-layout-transition` CSS variable to detect whether
-     * the drawer has a CSS transition that needs to be awaited. If the CSS variable equals `none`,
+     * The method relies on the `--vaadin-app-layout-transition-duration` CSS variable to detect whether
+     * the drawer has a CSS transition that needs to be awaited. If the CSS variable equals `0s`,
      * the promise resolves immediately.
      *
      * @return {Promise}
@@ -372,7 +372,7 @@ export const AppLayoutMixin = (superclass) =>
      */
     __drawerTransitionComplete() {
       return new Promise((resolve) => {
-        if (this._getCustomPropertyValue('--vaadin-app-layout-transition') === 'none') {
+        if (this._getCustomPropertyValue('--vaadin-app-layout-transition-duration') === '0s') {
           resolve();
           return;
         }

package/src/vaadin-app-layout.js

@@ -10,8 +10,8 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { appLayoutStyles } from './styles/vaadin-app-layout-core-styles.js';
 import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
-import { appLayoutStyles } from './vaadin-app-layout-styles.js';
 
 /**
  * `<vaadin-app-layout>` is a Web Component providing a quick and easy way to get a common application layout structure done.

package/src/vaadin-drawer-toggle.js

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

package/web-types.json

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