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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "25.2.0-alpha10",
+  "version": "25.2.0-alpha12",
   "publishConfig": {
     "access": "public"
   },
@@ -35,18 +35,18 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.2.0-alpha10",
-    "@vaadin/button": "25.2.0-alpha10",
-    "@vaadin/component-base": "25.2.0-alpha10",
-    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha10",
+    "@vaadin/a11y-base": "25.2.0-alpha12",
+    "@vaadin/button": "25.2.0-alpha12",
+    "@vaadin/component-base": "25.2.0-alpha12",
+    "@vaadin/vaadin-themable-mixin": "25.2.0-alpha12",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "25.2.0-alpha10",
-    "@vaadin/chai-plugins": "25.2.0-alpha10",
-    "@vaadin/test-runner-commands": "25.2.0-alpha10",
+    "@vaadin/aura": "25.2.0-alpha12",
+    "@vaadin/chai-plugins": "25.2.0-alpha12",
+    "@vaadin/test-runner-commands": "25.2.0-alpha12",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha10",
+    "@vaadin/vaadin-lumo-styles": "25.2.0-alpha12",
     "sinon": "^21.0.2"
   },
   "customElements": "custom-elements.json",
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "1303b6a3eeecb44a9d26f2b53cb56d9e906febdf"
+  "gitHead": "ae1e4373aec3653d63a45b6be18eee36f4b245a1"
 }

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

@@ -12,7 +12,7 @@ export const appLayoutStyles = css`
     box-sizing: border-box;
     height: 100%;
     --vaadin-app-layout-transition-duration: 0s;
-    transition: padding var(--vaadin-app-layout-transition-duration);
+    transition: padding var(--vaadin-app-layout-transition-duration) cubic-bezier(0.78, 0, 0.22, 1);
     --_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);
@@ -30,7 +30,7 @@ export const appLayoutStyles = css`
 
   @media (prefers-reduced-motion: no-preference) {
     :host(:not([no-anim])) {
-      --vaadin-app-layout-transition-duration: 200ms;
+      --vaadin-app-layout-transition-duration: 300ms;
     }
   }
 
@@ -71,7 +71,8 @@ export const appLayoutStyles = css`
     align-items: center;
     top: 0;
     inset-inline: 0;
-    transition: inset-inline-start var(--vaadin-app-layout-transition-duration);
+    transition: inherit;
+    transition-property: inset-inline-start;
     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(
@@ -113,10 +114,9 @@ export const appLayoutStyles = css`
     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%);
+    transition: inherit;
+    transition-property: transform, visibility;
+    transform: translateX(calc(-100% - 20px));
     max-width: 90%;
     width: var(--_vaadin-app-layout-drawer-width);
     box-sizing: border-box;
@@ -155,7 +155,7 @@ export const appLayoutStyles = css`
     position: fixed;
     inset: 0;
     pointer-events: none;
-    transition: opacity var(--vaadin-app-layout-transition-duration);
+    transition: opacity var(--vaadin-app-layout-transition-duration) linear;
     -webkit-tap-highlight-color: transparent;
   }
 
@@ -177,7 +177,7 @@ export const appLayoutStyles = css`
   }
 
   :host([dir='rtl']) [part='drawer'] {
-    transform: translateX(100%);
+    transform: translateX(calc(100% + 20px));
   }
 
   :host([dir='rtl'][drawer-opened]) [part='drawer'] {

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

@@ -18,12 +18,8 @@ const DEFAULT_I18N = {
   drawer: 'Drawer',
 };
 
-/**
- * @polymerMixin
- * @mixes I18nMixin
- */
 export const AppLayoutMixin = (superclass) =>
-  class AppLayoutMixinClass extends I18nMixin(DEFAULT_I18N, superclass) {
+  class AppLayoutMixinClass extends I18nMixin(superclass) {
     static get properties() {
       return {
         /**
@@ -89,6 +85,10 @@ export const AppLayoutMixin = (superclass) =>
       return ['__i18nChanged(__effectiveI18n)'];
     }
 
+    static get defaultI18n() {
+      return DEFAULT_I18N;
+    }
+
     /**
      * Helper static method that dispatches a `close-overlay-drawer` event
      */

package/src/vaadin-app-layout.js

@@ -129,9 +129,6 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
  *
  * @customElement vaadin-app-layout
  * @extends HTMLElement
- * @mixes AppLayoutMixin
- * @mixes ElementMixin
- * @mixes ThemableMixin
  */
 class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {

package/src/vaadin-drawer-toggle.js

@@ -57,9 +57,6 @@ import { drawerToggle } from './styles/vaadin-drawer-toggle-base-styles.js';
  *
  * @customElement vaadin-drawer-toggle
  * @extends HTMLElement
- * @mixes ButtonMixin
- * @mixes DirMixin
- * @mixes ThemableMixin
  */
 class DrawerToggle extends ButtonMixin(DirMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {

package/web-types.json

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