@vaadin/app-layout 25.0.0-alpha10 → 25.0.0-alpha12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "25.0.0-alpha10",
+  "version": "25.0.0-alpha12",
   "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-alpha10",
-    "@vaadin/button": "25.0.0-alpha10",
-    "@vaadin/component-base": "25.0.0-alpha10",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha10",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha10",
+    "@vaadin/a11y-base": "25.0.0-alpha12",
+    "@vaadin/button": "25.0.0-alpha12",
+    "@vaadin/component-base": "25.0.0-alpha12",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha12",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha10",
-    "@vaadin/test-runner-commands": "25.0.0-alpha10",
+    "@vaadin/chai-plugins": "25.0.0-alpha12",
+    "@vaadin/test-runner-commands": "25.0.0-alpha12",
     "@vaadin/testing-helpers": "^2.0.0",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha12",
     "sinon": "^18.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "6cc6c94079e805fa5b2f0af4dbf3b2a7485e57d0"
+  "gitHead": "e75527348f9ba7c363d068c868b9f030c15b84a1"
 }

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`
@@ -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'] {
@@ -146,6 +146,7 @@ export const appLayoutStyles = css`
     top: 0;
     bottom: 0;
     box-shadow: var(--vaadin-overlay-box-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`

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';
 
 /**

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

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';