@vaadin/menu-bar 25.3.0 → 25.4.0-dev.55bb86e155

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",
@@ -303,7 +303,7 @@
       "declarations": [
         {
           "kind": "class",
-          "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`](#/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>`](#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-submenu>` - has the same API as [`<vaadin-context-menu>`](#/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`](#/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-overflow`      | Set when one or more buttons are collapsed into the overflow sub-menu\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>`](#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-submenu>` - has the same API as [`<vaadin-context-menu>`](#/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.",
           "name": "MenuBar",
           "members": [
             {
@@ -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-dev.55bb86e155",
   "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-dev.55bb86e155",
+    "@vaadin/button": "25.4.0-dev.55bb86e155",
+    "@vaadin/component-base": "25.4.0-dev.55bb86e155",
+    "@vaadin/context-menu": "25.4.0-dev.55bb86e155",
+    "@vaadin/item": "25.4.0-dev.55bb86e155",
+    "@vaadin/list-box": "25.4.0-dev.55bb86e155",
+    "@vaadin/overlay": "25.4.0-dev.55bb86e155",
+    "@vaadin/vaadin-themable-mixin": "25.4.0-dev.55bb86e155",
     "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-dev.55bb86e155",
+    "@vaadin/chai-plugins": "25.4.0-dev.55bb86e155",
+    "@vaadin/icon": "25.4.0-dev.55bb86e155",
+    "@vaadin/test-runner-commands": "25.4.0-dev.55bb86e155",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "~25.3.0",
+    "@vaadin/vaadin-lumo-styles": "25.4.0-dev.55bb86e155",
     "sinon": "^22.0.0"
   },
   "customElements": "custom-elements.json",
@@ -59,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "4133747243c03bf544f6e82cc2ec9f295aaccd65"
+  "gitHead": "5db8e58fb088121b067290b0ed90d12d7d4084f2"
 }

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;
@@ -469,6 +474,20 @@ export const MenuBarMixin = (superClass) =>
       });
     }
 
+    /**
+     * Restores all buttons, the overflow button and the state attributes, so that
+     * the measurement does not use the button margins of the previous state.
+     *
+     * @param {!Array<!HTMLElement>} buttons
+     * @private
+     */
+    __restoreState(buttons) {
+      this.__restoreButtons(buttons);
+      this.__updateOverflow([]);
+      this.toggleAttribute('has-single-button', buttons.length === 1);
+      this.__updateVisibleAttributes(buttons);
+    }
+
     /** @private */
     __restoreItem(button, item) {
       button.appendChild(item);
@@ -482,51 +501,133 @@ export const MenuBarMixin = (superClass) =>
     __updateOverflow(items) {
       this._overflow.item = { children: items };
       this._hasOverflow = items.length > 0;
+      this.toggleAttribute('has-overflow', this._hasOverflow);
     }
 
-    /** @private */
-    __setOverflowItems(buttons, overflow) {
-      const container = this._container;
-
-      // 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`;
-
-      if (container.offsetWidth < container.scrollWidth) {
-        this._hasOverflow = true;
-
-        const isRTL = this.__isRTL;
-        const containerLeft = container.offsetLeft;
-        const containerWidth = container.offsetWidth;
-
-        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;
-
-          if (overflowEnd <= containerWidth) {
-            break;
-          }
+    /**
+     * 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;
+    }
+
+    /**
+     * Whether the element ends past the container, with the tolerance for fractional widths.
+     *
+     * @param {!HTMLElement} el
+     * @return {boolean}
+     * @private
+     */
+    __isPastContainerEnd(el) {
+      return this.__getInlineEnd(el) > this.__getInlineEnd(this._container) + OVERFLOW_TOLERANCE;
+    }
+
+    /**
+     * 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
+     * @property {number} containerWidth Width of the container
+     */
+
+    /**
+     * @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 btn = this.reverseCollapse ? remaining.shift() : remaining.pop();
+      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),
+        containerWidth: this._container.getBoundingClientRect().width,
+      };
+    }
 
-          // Save width for buttons with component
-          btn.style.width = getComputedStyle(btn).width;
-          btn.style.visibility = 'hidden';
-          btn.style.position = 'absolute';
+    /**
+     * 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
+     * @return {!Array<!HTMLElement>} buttons to collapse, in DOM order
+     * @private
+     */
+    __getButtonsToCollapse(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;
         }
+      }
+
+      return buttons.filter((_, i) => i < lo || i > hi);
+    }
 
-        const items = buttons.filter((b) => !remaining.includes(b)).map((b) => b.item);
-        this.__updateOverflow(items);
+    /**
+     * Hides the buttons that do not fit next to the overflow button.
+     *
+     * @param {!Array<!HTMLElement>} buttons
+     * @param {!MenuBarOverflowLayout} layout
+     * @return {!Array<!HTMLElement>} hidden buttons, in DOM order
+     * @private
+     */
+    __collapseButtons(buttons, layout) {
+      const collapsed = this.__getButtonsToCollapse(buttons, layout);
+      // 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';
+      });
+      return collapsed;
+    }
+
+    /**
+     * Shows the overflow button and collapses buttons into it when the last button
+     * does not fit in the container.
+     *
+     * @param {!Array<!HTMLElement>} buttons
+     * @param {!HTMLElement} overflow
+     * @private
+     */
+    __setOverflowItems(buttons, overflow) {
+      const lastButton = buttons.at(-1);
+      if (!lastButton || !this.__isPastContainerEnd(lastButton)) {
+        return;
       }
+      this._hasOverflow = true;
 
-      container.style.minWidth = '';
+      // Read the layout once the overflow button is in flow
+      const layout = this.__measureButtons(buttons, overflow);
+      const collapsed = this.__collapseButtons(buttons, layout);
+      this.__updateOverflow(collapsed.map((btn) => btn.item));
     }
 
     /** @private */
@@ -542,9 +643,7 @@ export const MenuBarMixin = (superClass) =>
       const buttons = this._buttons.filter((btn) => btn !== overflow);
       const oldOverflowCount = this.__getOverflowCount(overflow);
 
-      // Reset all buttons in the menu bar and the overflow button
-      this.__restoreButtons(buttons);
-      this.__updateOverflow([]);
+      this.__restoreState(buttons);
 
       // Hide any overflowing buttons and put them in the 'overflow' button
       this.__setOverflowItems(buttons, overflow);
@@ -573,6 +672,11 @@ export const MenuBarMixin = (superClass) =>
         this._setTabindex(visibleButtons[visibleButtons.length - 1], true);
       }
 
+      this.__updateVisibleAttributes(visibleButtons);
+    }
+
+    /** @private */
+    __updateVisibleAttributes(visibleButtons) {
       visibleButtons.forEach((btn, index) => {
         btn.toggleAttribute('first-visible', index === 0);
         btn.toggleAttribute('last-visible', !this._hasOverflow && index === visibleButtons.length - 1);

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

@@ -52,6 +52,7 @@ export interface MenuBarEventMap<TItem extends MenuBarItem = MenuBarItem>
  * Attribute           | Description
  * --------------------|----------------------------------
  * `disabled`          | Set when the menu bar is disabled
+ * `has-overflow`      | Set when one or more buttons are collapsed into the overflow sub-menu
  * `has-single-button` | Set when there is only one button visible
  *
  * The following custom CSS properties are available for styling:

package/src/vaadin-menu-bar.js

@@ -44,6 +44,7 @@ import { MenuBarMixin } from './vaadin-menu-bar-mixin.js';
  * Attribute           | Description
  * --------------------|----------------------------------
  * `disabled`          | Set when the menu bar is disabled
+ * `has-overflow`      | Set when one or more buttons are collapsed into the overflow sub-menu
  * `has-single-button` | Set when there is only one button visible
  *
  * The following custom CSS properties are available for styling:

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-dev.55bb86e155",
   "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-dev.55bb86e155/#/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-overflow`      | Set when one or more buttons are collapsed into the overflow sub-menu\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-dev.55bb86e155/#/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-dev.55bb86e155/#/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-dev.55bb86e155/#/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-dev.55bb86e155/#/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-dev.55bb86e155",
   "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-dev.55bb86e155/#/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-overflow`      | Set when one or more buttons are collapsed into the overflow sub-menu\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-dev.55bb86e155/#/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-dev.55bb86e155/#/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-dev.55bb86e155/#/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-dev.55bb86e155/#/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"
               }