@vaadin/menu-bar 25.3.0 → 25.4.0-alpha1

package/custom-elements.json

@@ -50,9 +50,9 @@
               "name": "i18n",
               "privacy": "public",
               "type": {
-                "text": "Object"
+                "text": "Object | undefined"
               },
-              "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 JSON structure and default values:\n```js\n{\n  moreOptions: 'More options'\n}\n```",
+              "description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  moreOptions: 'More options'\n}\n```",
               "attribute": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
@@ -124,9 +124,9 @@
             {
               "name": "i18n",
               "type": {
-                "text": "Object"
+                "text": "Object | undefined"
               },
-              "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.",
+              "description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
               "fieldName": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
@@ -334,9 +334,9 @@
               "name": "i18n",
               "privacy": "public",
               "type": {
-                "text": "Object"
+                "text": "Object | undefined"
               },
-              "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 JSON structure and default values:\n```js\n{\n  moreOptions: 'More options'\n}\n```",
+              "description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  moreOptions: 'More options'\n}\n```",
               "attribute": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",
@@ -429,9 +429,9 @@
             {
               "name": "i18n",
               "type": {
-                "text": "Object"
+                "text": "Object | undefined"
               },
-              "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.",
+              "description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
               "fieldName": "i18n",
               "inheritedFrom": {
                 "name": "I18nMixin",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/menu-bar",
-  "version": "25.3.0",
+  "version": "25.4.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,23 +35,23 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "~25.3.0",
-    "@vaadin/button": "~25.3.0",
-    "@vaadin/component-base": "~25.3.0",
-    "@vaadin/context-menu": "~25.3.0",
-    "@vaadin/item": "~25.3.0",
-    "@vaadin/list-box": "~25.3.0",
-    "@vaadin/overlay": "~25.3.0",
-    "@vaadin/vaadin-themable-mixin": "~25.3.0",
+    "@vaadin/a11y-base": "25.4.0-alpha1",
+    "@vaadin/button": "25.4.0-alpha1",
+    "@vaadin/component-base": "25.4.0-alpha1",
+    "@vaadin/context-menu": "25.4.0-alpha1",
+    "@vaadin/item": "25.4.0-alpha1",
+    "@vaadin/list-box": "25.4.0-alpha1",
+    "@vaadin/overlay": "25.4.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "25.4.0-alpha1",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/aura": "~25.3.0",
-    "@vaadin/chai-plugins": "~25.3.0",
-    "@vaadin/icon": "~25.3.0",
-    "@vaadin/test-runner-commands": "~25.3.0",
+    "@vaadin/aura": "25.4.0-alpha1",
+    "@vaadin/chai-plugins": "25.4.0-alpha1",
+    "@vaadin/icon": "25.4.0-alpha1",
+    "@vaadin/test-runner-commands": "25.4.0-alpha1",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "~25.3.0",
+    "@vaadin/vaadin-lumo-styles": "25.4.0-alpha1",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -59,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4133747243c03bf544f6e82cc2ec9f295aaccd65"
+  "gitHead": "be38ec1866e96508f3f4591f95c949ef55903a34"
 }

package/src/vaadin-menu-bar-mixin.d.ts

@@ -158,9 +158,11 @@ export declare class MenuBarMixinClass<TItem extends MenuBarItem = MenuBarItem>
 
   /**
    * The object used to localize this component. To change the default
-   * localization, replace this with an object that provides all properties, or
+   * localization, set this to an object that provides all properties, or
    * just the individual properties you want to change.
    *
+   * When not set, defaults to `undefined`.
+   *
    * The object has the following JSON structure and default values:
    * ```js
    * {
@@ -168,7 +170,7 @@ export declare class MenuBarMixinClass<TItem extends MenuBarItem = MenuBarItem>
    * }
    * ```
    */
-  i18n: MenuBarI18n;
+  i18n: MenuBarI18n | undefined;
 
   /**
    * If true, the submenu will open on hover (mouseover) instead of click.

package/src/vaadin-menu-bar-mixin.js

@@ -57,6 +57,9 @@ const DEFAULT_I18N = {
   moreOptions: 'More options',
 };
 
+// Two client rects of the same edge can differ by float noise, a few 1e-5 px under browser zoom
+const OVERFLOW_TOLERANCE = 0.1;
+
 export const MenuBarMixin = (superClass) =>
   class MenuBarMixinClass extends I18nMixin(
     KeyboardDirectionMixin(ResizeMixin(FocusMixin(DisabledMixin(superClass)))),
@@ -203,16 +206,18 @@ export const MenuBarMixin = (superClass) =>
 
     /**
      * The object used to localize this component. To change the default
-     * localization, replace this with an object that provides all properties, or
+     * localization, set this to an object that provides all properties, or
      * just the individual properties you want to change.
      *
+     * When not set, defaults to `undefined`.
+     *
      * The object has the following JSON structure and default values:
      * ```js
      * {
      *   moreOptions: 'More options'
      * }
      * ```
-     * @type {!MenuBarI18n}
+     * @type {MenuBarI18n | undefined}
      */
     get i18n() {
       return super.i18n;
@@ -484,49 +489,110 @@ export const MenuBarMixin = (superClass) =>
       this._hasOverflow = items.length > 0;
     }
 
-    /** @private */
-    __setOverflowItems(buttons, overflow) {
-      const container = this._container;
+    /**
+     * Inline end edge of the element, mirrored in RTL. Unlike `offsetWidth` and `scrollWidth`,
+     * the rect keeps the fraction that browser zoom leaves on the width.
+     *
+     * @param {!HTMLElement} el
+     * @return {number}
+     * @private
+     */
+    __getInlineEnd(el) {
+      const { left, right } = el.getBoundingClientRect();
+      return this.__isRTL ? -left : right;
+    }
 
-      // Prevent the container from shrinking while buttons are being hidden.
-      // The host has min-width: 0 so it can shrink inside flex/grid layouts.
-      // Without this lock, hiding a button reduces the host width, which
-      // shrinks the container (width: 100%), shifting all button positions
-      // and causing a cascading collapse where every button appears to overflow.
-      container.style.minWidth = `${container.offsetWidth}px`;
+    /**
+     * Positions of the buttons, read in one batch before any of them is hidden.
+     * Mirrored in RTL so that a larger value is always further along the inline axis.
+     *
+     * @typedef {object} MenuBarOverflowLayout
+     * @property {number[]} starts Inline start of each button
+     * @property {number[]} ends Inline end of each button
+     * @property {number[]} margins Inline start margin of each button
+     * @property {number} overflowExtent Space the overflow button adds after the last button
+     */
 
-      if (container.offsetWidth < container.scrollWidth) {
-        this._hasOverflow = true;
+    /**
+     * @param {!Array<!HTMLElement>} buttons
+     * @param {!HTMLElement} overflow
+     * @return {!MenuBarOverflowLayout}
+     * @private
+     */
+    __measureButtons(buttons, overflow) {
+      const isRTL = this.__isRTL;
+      const rects = buttons.map((btn) => btn.getBoundingClientRect());
+      const ends = rects.map(({ left, right }) => (isRTL ? -left : right));
 
-        const isRTL = this.__isRTL;
-        const containerLeft = container.offsetLeft;
-        const containerWidth = container.offsetWidth;
+      return {
+        starts: rects.map(({ left, right }) => (isRTL ? -right : left)),
+        ends,
+        // `auto` resolves to 0 while the content overflows.
+        margins: buttons.map((btn) => parseFloat(getComputedStyle(btn).marginInlineStart) || 0),
+        overflowExtent: this.__getInlineEnd(overflow) - ends.at(-1),
+      };
+    }
 
-        const remaining = [...buttons];
-        while (remaining.length) {
-          // The overflow button follows the last remaining one, so its far edge is what has
-          // to fit. Auto margins move the whole row but cannot push that edge past the end.
-          const overflowEnd = isRTL
-            ? containerWidth - (overflow.offsetLeft - containerLeft)
-            : overflow.offsetLeft + overflow.offsetWidth - containerLeft;
+    /**
+     * Picks the buttons to collapse so that the rest plus the overflow button end inside
+     * the container. Hiding a button only shifts the buttons after it, so the end of any
+     * kept range follows from one measurement.
+     *
+     * @param {!Array<!HTMLElement>} buttons
+     * @param {!MenuBarOverflowLayout} layout
+     * @param {number} containerWidth
+     * @return {!Array<!HTMLElement>} buttons to collapse, in DOM order
+     * @private
+     */
+    __getCollapsedButtons(buttons, { starts, ends, margins, overflowExtent }, containerWidth) {
+      let lo = 0;
+      let hi = buttons.length - 1;
+
+      // The first kept button keeps its own start margin in front of the range.
+      while (lo <= hi && margins[lo] + ends[hi] - starts[lo] + overflowExtent > containerWidth + OVERFLOW_TOLERANCE) {
+        if (this.reverseCollapse) {
+          lo += 1;
+        } else {
+          hi -= 1;
+        }
+      }
 
-          if (overflowEnd <= containerWidth) {
-            break;
-          }
+      return buttons.filter((_, i) => i < lo || i > hi);
+    }
 
-          const btn = this.reverseCollapse ? remaining.shift() : remaining.pop();
+    /** @private */
+    __setOverflowItems(buttons, overflow) {
+      const container = this._container;
+      // Read before any write, so a menu bar that fits forces no layout
+      const width = container.offsetWidth;
+      const lastButton = buttons.at(-1);
+
+      if (lastButton && this.__getInlineEnd(lastButton) > this.__getInlineEnd(container) + OVERFLOW_TOLERANCE) {
+        // Prevent the container from shrinking while buttons are being hidden.
+        // The host has min-width: 0 so it can shrink inside flex/grid layouts.
+        // Without this lock, hiding a button reduces the host width, which
+        // shrinks the container (width: 100%), shifting all button positions
+        // and causing a cascading collapse where every button appears to overflow.
+        container.style.minWidth = `${width}px`;
+        this._hasOverflow = true;
 
-          // Save width for buttons with component
-          btn.style.width = getComputedStyle(btn).width;
+        // Read the layout once the overflow button is in flow
+        const layout = this.__measureButtons(buttons, overflow);
+        const containerWidth = container.getBoundingClientRect().width;
+        const collapsed = this.__getCollapsedButtons(buttons, layout, containerWidth);
+        // Read button widths once outside of the loop to avoid repetitive layout
+        const widths = collapsed.map((btn) => getComputedStyle(btn).width);
+
+        // Write the DOM state
+        collapsed.forEach((btn, i) => {
+          btn.style.width = widths[i];
           btn.style.visibility = 'hidden';
           btn.style.position = 'absolute';
-        }
+        });
+        this.__updateOverflow(collapsed.map((btn) => btn.item));
 
-        const items = buttons.filter((b) => !remaining.includes(b)).map((b) => b.item);
-        this.__updateOverflow(items);
+        container.style.minWidth = '';
       }
-
-      container.style.minWidth = '';
     }
 
     /** @private */

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "25.3.0",
+  "version": "25.4.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-menu-bar",
-          "description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```html\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```js\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property         |\n:---------------------------|\n| `--vaadin-menu-bar-gap`   |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-submenu>` - has the same API as [`<vaadin-context-menu>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0/#/elements/vaadin-context-menu).\n\nThe `<vaadin-menu-bar-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute  | Description\n---------- |-------------\n`expanded` | Expanded parent item.",
+          "description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```html\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```js\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property         |\n:---------------------------|\n| `--vaadin-menu-bar-gap`   |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-submenu>` - has the same API as [`<vaadin-context-menu>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-context-menu).\n\nThe `<vaadin-menu-bar-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute  | Description\n---------- |-------------\n`expanded` | Expanded parent item.",
           "attributes": [
             {
               "name": "disabled",
@@ -69,10 +69,11 @@
               },
               {
                 "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\nThe object has the following JSON structure and default values:\n```js\n{\n  moreOptions: 'More options'\n}\n```",
+                "description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  moreOptions: 'More options'\n}\n```",
                 "value": {
                   "type": [
-                    "Object"
+                    "Object",
+                    "undefined"
                   ]
                 }
               },

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "25.3.0",
+  "version": "25.4.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-menu-bar",
-          "description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```html\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.3.0/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```js\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property         |\n:---------------------------|\n| `--vaadin-menu-bar-gap`   |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-submenu>` - has the same API as [`<vaadin-context-menu>`](https://cdn.vaadin.com/vaadin-web-components/25.3.0/#/elements/vaadin-context-menu).\n\nThe `<vaadin-menu-bar-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute  | Description\n---------- |-------------\n`expanded` | Expanded parent item.",
+          "description": "`<vaadin-menu-bar>` is a Web Component providing a set of horizontally stacked buttons offering\nthe user quick access to a consistent set of commands. Each button can toggle a submenu with\nsupport for additional levels of nested menus.\n\nTo create the menu bar, first add the component to the page:\n\n```html\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```js\ndocument.querySelector('vaadin-menu-bar').items = [{text: 'File'}, {text: 'Edit'}];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name         | Description\n------------------|----------------\n`container`       | The container wrapping menu bar buttons.\n\nThe following state attributes are available for styling:\n\nAttribute           | Description\n--------------------|----------------------------------\n`disabled`          | Set when the menu bar is disabled\n`has-single-button` | Set when there is only one button visible\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property         |\n:---------------------------|\n| `--vaadin-menu-bar-gap`   |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-menu-bar>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-submenu>` - has the same API as [`<vaadin-context-menu>`](https://cdn.vaadin.com/vaadin-web-components/25.4.0-alpha1/#/elements/vaadin-context-menu).\n\nThe `<vaadin-menu-bar-item>` sub-menu elements have the following additional state attributes\non top of the built-in `<vaadin-item>` state attributes:\n\nAttribute  | Description\n---------- |-------------\n`expanded` | Expanded parent item.",
           "extension": true,
           "attributes": [
             {
@@ -28,7 +28,7 @@
             },
             {
               "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\nThe object has the following JSON structure and default values:\n```js\n{\n  moreOptions: 'More options'\n}\n```",
+              "description": "The object used to localize this component. To change the default\nlocalization, set this to an object that provides all properties, or\njust the individual properties you want to change.\n\nWhen not set, defaults to `undefined`.\n\nThe object has the following JSON structure and default values:\n```js\n{\n  moreOptions: 'More options'\n}\n```",
               "value": {
                 "kind": "expression"
               }