@vaadin/app-layout 24.7.0-alpha8 → 24.7.0-beta1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/app-layout",
-  "version": "24.7.0-alpha8",
+  "version": "24.7.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,17 +37,17 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.7.0-alpha8",
-    "@vaadin/button": "24.7.0-alpha8",
-    "@vaadin/component-base": "24.7.0-alpha8",
-    "@vaadin/vaadin-lumo-styles": "24.7.0-alpha8",
-    "@vaadin/vaadin-material-styles": "24.7.0-alpha8",
-    "@vaadin/vaadin-themable-mixin": "24.7.0-alpha8",
+    "@vaadin/a11y-base": "24.7.0-beta1",
+    "@vaadin/button": "24.7.0-beta1",
+    "@vaadin/component-base": "24.7.0-beta1",
+    "@vaadin/vaadin-lumo-styles": "24.7.0-beta1",
+    "@vaadin/vaadin-material-styles": "24.7.0-beta1",
+    "@vaadin/vaadin-themable-mixin": "24.7.0-beta1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.7.0-alpha8",
-    "@vaadin/test-runner-commands": "24.7.0-alpha8",
+    "@vaadin/chai-plugins": "24.7.0-beta1",
+    "@vaadin/test-runner-commands": "24.7.0-beta1",
     "@vaadin/testing-helpers": "^1.1.0",
     "sinon": "^18.0.0"
   },
@@ -55,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "d015035192480fcc8cc9df5d00a950f177b83c32"
+  "gitHead": "4043c518ef9b915cde612d2907ddc9bd10e5af17"
 }

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

@@ -4,28 +4,21 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { I18nMixinClass, PartialI18n } from '@vaadin/component-base/src/i18n-mixin.js';
 
-export interface AppLayoutI18n {
+export type AppLayoutI18n = PartialI18n<{
   drawer: string;
-}
+}>;
 
 export declare function AppLayoutMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<AppLayoutMixinClass> & T;
+): Constructor<AppLayoutMixinClass> & Constructor<I18nMixinClass<AppLayoutI18n>> & T;
 
 export declare class AppLayoutMixinClass {
   /**
-   * The object used to localize this component.
-   * To change the default localization, replace the entire
-   * `i18n` object with a custom one.
-   *
-   * To update individual properties, extend the existing i18n object as follows:
-   * ```js
-   * appLayout.i18n = {
-   *   ...appLayout.i18n,
-   *   drawer: 'Drawer'
-   * }
-   * ```
+   * The object used to localize this component. To change the default
+   * localization, replace this with an object that provides all properties, or
+   * just the individual properties you want to change.
    *
    * The object has the following structure and default values:
    * ```

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

@@ -6,52 +6,24 @@
 import { afterNextRender, beforeNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { AriaModalController } from '@vaadin/a11y-base/src/aria-modal-controller.js';
 import { FocusTrapController } from '@vaadin/a11y-base/src/focus-trap-controller.js';
+import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 
 /**
  * @typedef {import('./vaadin-app-layout.js').AppLayoutI18n} AppLayoutI18n
  */
 
+const DEFAULT_I18N = {
+  drawer: 'Drawer',
+};
+
 /**
  * @polymerMixin
+ * @mixes I18nMixin
  */
 export const AppLayoutMixin = (superclass) =>
-  class AppLayoutMixinClass extends superclass {
+  class AppLayoutMixinClass extends I18nMixin(DEFAULT_I18N, superclass) {
     static get properties() {
       return {
-        /**
-         * The object used to localize this component.
-         * To change the default localization, replace the entire
-         * `i18n` object with a custom one.
-         *
-         * To update individual properties, extend the existing i18n object as follows:
-         * ```js
-         * appLayout.i18n = {
-         *   ...appLayout.i18n,
-         *   drawer: 'Drawer'
-         * }
-         * ```
-         *
-         * The object has the following structure and default values:
-         * ```
-         * {
-         *   drawer: 'Drawer'
-         * }
-         * ```
-         *
-         * @type {AppLayoutI18n}
-         * @default {English/US}
-         */
-        i18n: {
-          type: Object,
-          observer: '__i18nChanged',
-          sync: true,
-          value: () => {
-            return {
-              drawer: 'Drawer',
-            };
-          },
-        },
-
         /**
          * Defines whether navbar or drawer will come first visually.
          * - By default (`primary-section="navbar"`), the navbar takes the full available width and moves the drawer down.
@@ -114,6 +86,10 @@ export const AppLayoutMixin = (superclass) =>
       };
     }
 
+    static get observers() {
+      return ['__i18nChanged(__effectiveI18n)'];
+    }
+
     /**
      * Helper static method that dispatches a `close-overlay-drawer` event
      */
@@ -121,6 +97,27 @@ export const AppLayoutMixin = (superclass) =>
       window.dispatchEvent(new CustomEvent('close-overlay-drawer'));
     }
 
+    /**
+     * The object used to localize this component. To change the default
+     * localization, replace this with an object that provides all properties, or
+     * just the individual properties you want to change.
+     *
+     * The object has the following structure and default values:
+     * ```
+     * {
+     *   drawer: 'Drawer'
+     * }
+     * ```
+     * @return {!AppLayoutI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
+
     constructor() {
       super();
       // TODO(jouni): might want to debounce
@@ -357,7 +354,7 @@ export const AppLayoutMixin = (superclass) =>
       if (this.overlay) {
         drawer.setAttribute('role', 'dialog');
         drawer.setAttribute('aria-modal', 'true');
-        drawer.setAttribute('aria-label', this.i18n.drawer);
+        drawer.setAttribute('aria-label', this.__effectiveI18n.drawer);
       } else {
         drawer.removeAttribute('role');
         drawer.removeAttribute('aria-modal');

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/app-layout",
-  "version": "24.7.0-alpha8",
+  "version": "24.7.0-beta1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -53,7 +53,7 @@
             "properties": [
               {
                 "name": "i18n",
-                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object as follows:\n```js\nappLayout.i18n = {\n  ...appLayout.i18n,\n  drawer: 'Drawer'\n}\n```\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```\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": "24.7.0-alpha8",
+  "version": "24.7.0-beta1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -28,7 +28,7 @@
             },
             {
               "name": ".i18n",
-              "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nTo update individual properties, extend the existing i18n object as follows:\n```js\nappLayout.i18n = {\n  ...appLayout.i18n,\n  drawer: 'Drawer'\n}\n```\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```\n{\n  drawer: 'Drawer'\n}\n```",
               "value": {
                 "kind": "expression"
               }