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

package/custom-elements.json

@@ -407,6 +407,20 @@
                 "text": "string"
               },
               "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "attribute": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "package": "@vaadin/a11y-base/src/disabled-mixin.js"
+              }
             }
           ],
           "attributes": [
@@ -416,6 +430,18 @@
                 "text": "string"
               },
               "fieldName": "ariaLabel"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If true, the user cannot interact with this element.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "package": "@vaadin/a11y-base/src/disabled-mixin.js"
+              }
             }
           ],
           "mixins": [

package/package.json

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

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
      */
@@ -524,15 +524,4 @@ export const AppLayoutMixin = (superclass) =>
       this.__resizeObserver.unobserve(element);
       this.__resizeObserver.observe(element);
     }
-
-    /**
-     * App Layout listens to `close-overlay-drawer` on the window level.
-     * A custom event can be dispatched and the App Layout will close the drawer in overlay.
-     *
-     * That can be used, for instance, when a navigation occurs when user clicks in a menu item inside the drawer.
-     *
-     * See `dispatchCloseOverlayDrawerEvent()` helper method.
-     *
-     * @event close-overlay-drawer
-     */
   };

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-alpha9",
+  "version": "25.2.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -15,9 +15,7 @@
               "description": "A global event that causes the drawer to close (be hidden) when it is in overlay mode.\n- The default is `vaadin-router-location-changed` dispatched by Vaadin Router",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },
@@ -26,20 +24,7 @@
               "description": "Controls whether the drawer is opened (visible) or not.\nIts default value depends on the viewport:\n- `true`, for desktop size views\n- `false`, for mobile size views",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
-                ]
-              }
-            },
-            {
-              "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\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
-              "value": {
-                "type": [
-                  "Object",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -48,9 +33,7 @@
               "description": "Defines whether navbar or drawer will come first visually.\n- By default (`primary-section=\"navbar\"`), the navbar takes the full available width and moves the drawer down.\n- If `primary-section=\"drawer\"` is set, then the drawer will move the navbar, taking the full available height.",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },
@@ -73,9 +56,7 @@
                 "description": "A global event that causes the drawer to close (be hidden) when it is in overlay mode.\n- The default is `vaadin-router-location-changed` dispatched by Vaadin Router",
                 "value": {
                   "type": [
-                    "string",
-                    "null",
-                    "undefined"
+                    "string"
                   ]
                 }
               },
@@ -84,9 +65,7 @@
                 "description": "Controls whether the drawer is opened (visible) or not.\nIts default value depends on the viewport:\n- `true`, for desktop size views\n- `false`, for mobile size views",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -95,7 +74,7 @@
                 "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": [
-                    "?"
+                    "Object"
                   ]
                 }
               },
@@ -104,18 +83,12 @@
                 "description": "Defines whether navbar or drawer will come first visually.\n- By default (`primary-section=\"navbar\"`), the navbar takes the full available width and moves the drawer down.\n- If `primary-section=\"drawer\"` is set, then the drawer will move the navbar, taking the full available height.",
                 "value": {
                   "type": [
-                    "string",
-                    "null",
-                    "undefined"
+                    "string"
                   ]
                 }
               }
             ],
             "events": [
-              {
-                "name": "close-overlay-drawer",
-                "description": "App Layout listens to `close-overlay-drawer` on the window level.\nA custom event can be dispatched and the App Layout will close the drawer in overlay.\n\nThat can be used, for instance, when a navigation occurs when user clicks in a menu item inside the drawer.\n\nSee `dispatchCloseOverlayDrawerEvent()` helper method."
-              },
               {
                 "name": "drawer-opened-changed",
                 "description": "Fired when the `drawerOpened` property changes."
@@ -140,9 +113,7 @@
               "description": "",
               "value": {
                 "type": [
-                  "string",
-                  "null",
-                  "undefined"
+                  "string"
                 ]
               }
             },
@@ -151,9 +122,7 @@
               "description": "If true, the user cannot interact with this element.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -176,9 +145,7 @@
                 "description": "",
                 "value": {
                   "type": [
-                    "string",
-                    "null",
-                    "undefined"
+                    "string"
                   ]
                 }
               },
@@ -187,9 +154,7 @@
                 "description": "If true, the user cannot interact with this element.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               }

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "25.2.0-alpha9",
+  "version": "25.2.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -20,15 +20,15 @@
           "extension": true,
           "attributes": [
             {
-              "name": "?drawerOpened",
-              "description": "Controls whether the drawer is opened (visible) or not.\nIts default value depends on the viewport:\n- `true`, for desktop size views\n- `false`, for mobile size views",
+              "name": ".closeDrawerOn",
+              "description": "A global event that causes the drawer to close (be hidden) when it is in overlay mode.\n- The default is `vaadin-router-location-changed` dispatched by Vaadin Router",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".closeDrawerOn",
-              "description": "A global event that causes the drawer to close (be hidden) when it is in overlay mode.\n- The default is `vaadin-router-location-changed` dispatched by Vaadin Router",
+              "name": "?drawerOpened",
+              "description": "Controls whether the drawer is opened (visible) or not.\nIts default value depends on the viewport:\n- `true`, for desktop size views\n- `false`, for mobile size views",
               "value": {
                 "kind": "expression"
               }
@@ -47,13 +47,6 @@
                 "kind": "expression"
               }
             },
-            {
-              "name": "@close-overlay-drawer",
-              "description": "App Layout listens to `close-overlay-drawer` on the window level.\nA custom event can be dispatched and the App Layout will close the drawer in overlay.\n\nThat can be used, for instance, when a navigation occurs when user clicks in a menu item inside the drawer.\n\nSee `dispatchCloseOverlayDrawerEvent()` helper method.",
-              "value": {
-                "kind": "expression"
-              }
-            },
             {
               "name": "@drawer-opened-changed",
               "description": "Fired when the `drawerOpened` property changes.",
@@ -83,15 +76,15 @@
           "extension": true,
           "attributes": [
             {
-              "name": "?disabled",
-              "description": "If true, the user cannot interact with this element.",
+              "name": ".ariaLabel",
+              "description": "",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".ariaLabel",
-              "description": "",
+              "name": "?disabled",
+              "description": "If true, the user cannot interact with this element.",
               "value": {
                 "kind": "expression"
               }