@vaadin/side-nav 24.8.0-alpha1 → 24.8.0-alpha11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/side-nav",
-  "version": "24.8.0-alpha1",
+  "version": "24.8.0-alpha11",
   "publishConfig": {
     "access": "public"
   },
@@ -35,16 +35,16 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "24.8.0-alpha1",
-    "@vaadin/component-base": "24.8.0-alpha1",
-    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha1",
-    "@vaadin/vaadin-material-styles": "24.8.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha1",
+    "@vaadin/a11y-base": "24.8.0-alpha11",
+    "@vaadin/component-base": "24.8.0-alpha11",
+    "@vaadin/vaadin-lumo-styles": "24.8.0-alpha11",
+    "@vaadin/vaadin-material-styles": "24.8.0-alpha11",
+    "@vaadin/vaadin-themable-mixin": "24.8.0-alpha11",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "24.8.0-alpha1",
-    "@vaadin/test-runner-commands": "24.8.0-alpha1",
+    "@vaadin/chai-plugins": "24.8.0-alpha11",
+    "@vaadin/test-runner-commands": "24.8.0-alpha11",
     "@vaadin/testing-helpers": "^1.1.0",
     "lit": "^3.0.0",
     "sinon": "^18.0.0"
@@ -53,5 +53,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "dfec8767c5d1c343ae689c93429c3364f4182f76"
+  "gitHead": "be9c2d59f4b63ae58e85ccb3dfb78d5af2d2ac8a"
 }

package/src/vaadin-side-nav-children-mixin.d.ts

@@ -4,21 +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 } from '@vaadin/component-base/src/i18n-mixin.js';
 
 export interface SideNavI18n {
-  toggle: string;
+  toggle?: string;
 }
 
 export declare function SideNavChildrenMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<SideNavChildrenMixinClass> & T;
+): Constructor<SideNavChildrenMixinClass> & Constructor<I18nMixinClass<SideNavI18n>> & T;
 
 export declare class SideNavChildrenMixinClass {
   /**
-   * The object used to localize this component.
-   *
-   * To change the default localization, replace the entire
-   * `i18n` object with a custom one.
+   * 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-side-nav-children-mixin.js

@@ -3,8 +3,13 @@
  * Copyright (c) 2023 - 2025 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
+const DEFAULT_I18N = {
+  toggle: 'Toggle child items',
+};
+
 /**
  * A controller that manages the item content children slot.
  */
@@ -34,34 +39,9 @@ class ChildrenController extends SlotController {
  * @polymerMixin
  */
 export const SideNavChildrenMixin = (superClass) =>
-  class SideNavChildrenMixin extends superClass {
+  class SideNavChildrenMixin 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.
-         *
-         * The object has the following structure and default values:
-         * ```
-         * {
-         *   toggle: 'Toggle child items'
-         * }
-         * ```
-         *
-         * @type {SideNavI18n}
-         * @default {English/US}
-         */
-        i18n: {
-          type: Object,
-          value: () => {
-            return {
-              toggle: 'Toggle child items',
-            };
-          },
-        },
-
         /**
          * Count of child items.
          * @protected
@@ -79,6 +59,27 @@ export const SideNavChildrenMixin = (superClass) =>
       this._childrenController = new ChildrenController(this, this._itemsSlotName);
     }
 
+    /**
+     * 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:
+     * ```
+     * {
+     *   toggle: 'Toggle child items'
+     * }
+     * ```
+     * @return {!SideNavI18n}
+     */
+    get i18n() {
+      return super.i18n;
+    }
+
+    set i18n(value) {
+      super.i18n = value;
+    }
+
     /**
      * List of child items of this component.
      * @protected
@@ -125,9 +126,9 @@ export const SideNavChildrenMixin = (superClass) =>
       }
 
       // Propagate i18n object to all the child items
-      if (props.has('_itemsCount') || props.has('i18n')) {
+      if (props.has('_itemsCount') || props.has('__effectiveI18n')) {
         this._items.forEach((item) => {
-          item.i18n = this.i18n;
+          item.i18n = this.__effectiveI18n;
         });
       }
     }

package/src/vaadin-side-nav-item.js

@@ -270,7 +270,7 @@ class SideNavItem extends SideNavChildrenMixin(DisabledMixin(ElementMixin(Themab
       <ul part="children" role="list" ?hidden="${!this.expanded}" aria-hidden="${this.expanded ? 'false' : 'true'}">
         <slot name="children"></slot>
       </ul>
-      <div hidden id="i18n">${this.i18n.toggle}</div>
+      <div hidden id="i18n">${this.__effectiveI18n.toggle}</div>
     `;
   }
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.8.0-alpha1",
+  "version": "24.8.0-alpha11",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -97,7 +97,7 @@
               },
               {
                 "name": "i18n",
-                "description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n  toggle: 'Toggle child items'\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  toggle: 'Toggle child items'\n}\n```",
                 "value": {
                   "type": [
                     "SideNavI18n"
@@ -228,7 +228,7 @@
             "properties": [
               {
                 "name": "i18n",
-                "description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n  toggle: 'Toggle child items'\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  toggle: 'Toggle child items'\n}\n```",
                 "value": {
                   "type": [
                     "SideNavI18n"

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/side-nav",
-  "version": "24.8.0-alpha1",
+  "version": "24.8.0-alpha11",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -49,7 +49,7 @@
             },
             {
               "name": ".i18n",
-              "description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n  toggle: 'Toggle child items'\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  toggle: 'Toggle child items'\n}\n```",
               "value": {
                 "kind": "expression"
               }
@@ -112,7 +112,7 @@
             },
             {
               "name": ".i18n",
-              "description": "The object used to localize this component.\n\nTo change the default localization, replace the entire\n`i18n` object with a custom one.\n\nThe object has the following structure and default values:\n```\n{\n  toggle: 'Toggle child items'\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  toggle: 'Toggle child items'\n}\n```",
               "value": {
                 "kind": "expression"
               }