@vaadin/menu-bar 25.2.0-alpha9 → 25.2.0-beta1

package/custom-elements.json

@@ -31,6 +31,20 @@
               "name": "close",
               "description": "Closes the current submenu."
             },
+            {
+              "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"
+              }
+            },
             {
               "kind": "field",
               "name": "i18n",
@@ -52,7 +66,7 @@
               "type": {
                 "text": "!Array<!MenuBarItem>"
               },
-              "description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n  {\n    text: 'File',\n    className: 'file',\n    children: [\n      {text: 'Open', className: 'file open'}\n      {text: 'Auto Save', checked: true},\n    ]\n  },\n  {component: 'hr'},\n  {\n    text: 'Edit',\n    children: [\n      {text: 'Undo', disabled: true},\n      {text: 'Redo'}\n    ]\n  },\n  {text: 'Help'}\n];\n```\n\n#### Disabled items\n\nWhen disabled, menu bar items are rendered as \"dimmed\".\n\nBy default, disabled items are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can be\naddressed by enabling several feature flags, which makes disabled items\nfocusable and hoverable, while still preventing them from being activated:\n\n```js\n// Allow focus and hover interactions with disabled menu bar root items (buttons)\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true;\n\n// Allow focus and hover interactions with disabled menu bar sub-menu items\nwindow.Vaadin.featureFlags.accessibleDisabledMenuItems = true;\n```\n\nBoth flags must be set before any menu bar is attached to the DOM.",
+              "description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n  {\n    text: 'File',\n    className: 'file',\n    children: [\n      {text: 'Open', className: 'file open'}\n      {text: 'Auto Save', checked: true},\n    ]\n  },\n  {component: 'hr'},\n  {\n    text: 'Edit',\n    children: [\n      {text: 'Undo', disabled: true},\n      {text: 'Redo'}\n    ]\n  },\n  {text: 'Help'}\n];\n```\n\n#### Disabled items\n\nWhen disabled, menu bar items are rendered as \"dimmed\".\n\nBy default, disabled items are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can be\naddressed by enabling several feature flags, which makes disabled items\nfocusable and hoverable, while still preventing them from being activated:\n\n```js\n// Allow focus and hover interactions with disabled menu bar root items (buttons)\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true;\n\n// Allow focus and hover interactions with disabled menu bar sub-menu items\nwindow.Vaadin.featureFlags.accessibleDisabledMenuItems = true;\n```\n\nBoth flags must be set before any menu bar is attached to the DOM.\n\n#### Item tooltips\n\nButtons and sub-menu items can have tooltips that are shown on\nhover and keyboard focus. To enable them, add a slotted\n`<vaadin-tooltip>` element and set the `tooltip` property on\neach item that should have one:\n\n```html\n<vaadin-menu-bar>\n  <vaadin-tooltip slot=\"tooltip\"></vaadin-tooltip>\n</vaadin-menu-bar>\n```",
               "attribute": "items"
             },
             {
@@ -95,6 +109,18 @@
             }
           ],
           "attributes": [
+            {
+              "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"
+              }
+            },
             {
               "name": "i18n",
               "type": {
@@ -137,14 +163,6 @@
               "name": "I18nMixin",
               "package": "@vaadin/component-base/src/i18n-mixin.js"
             },
-            {
-              "name": "DisabledMixin",
-              "package": "@vaadin/a11y-base/src/disabled-mixin.js"
-            },
-            {
-              "name": "FocusMixin",
-              "package": "@vaadin/a11y-base/src/focus-mixin.js"
-            },
             {
               "name": "KeyboardDirectionMixin",
               "package": "@vaadin/a11y-base/src/keyboard-direction-mixin.js"
@@ -152,6 +170,14 @@
             {
               "name": "ResizeMixin",
               "package": "@vaadin/component-base/src/resize-mixin.js"
+            },
+            {
+              "name": "FocusMixin",
+              "package": "@vaadin/a11y-base/src/focus-mixin.js"
+            },
+            {
+              "name": "DisabledMixin",
+              "package": "@vaadin/a11y-base/src/disabled-mixin.js"
             }
           ],
           "parameters": [
@@ -172,6 +198,105 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/vaadin-menu-bar-tooltip-controller.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Controller for the tooltip slotted into `<vaadin-menu-bar>`. Extends\n`ContextMenuTooltipController` to also support menu-bar buttons as\ntargets, in addition to sub-menu items.",
+          "name": "MenuBarTooltipController",
+          "members": [
+            {
+              "kind": "method",
+              "name": "bringToFront",
+              "inheritedFrom": {
+                "name": "ContextMenuTooltipController",
+                "package": "@vaadin/context-menu/src/vaadin-context-menu-tooltip-controller.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "parameters": [
+                {
+                  "name": "immediate",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "ContextMenuTooltipController",
+                "package": "@vaadin/context-menu/src/vaadin-context-menu-tooltip-controller.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "initCustomNode",
+              "parameters": [
+                {
+                  "name": "tooltipNode"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "ContextMenuTooltipController",
+                "package": "@vaadin/context-menu/src/vaadin-context-menu-tooltip-controller.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "open",
+              "parameters": [
+                {
+                  "name": "{ trigger }"
+                },
+                {
+                  "name": "options",
+                  "type": {
+                    "text": "{ trigger: 'hover' | 'focus' }"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "ContextMenuTooltipController",
+                "package": "@vaadin/context-menu/src/vaadin-context-menu-tooltip-controller.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setTarget",
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  }
+                }
+              ],
+              "inheritedFrom": {
+                "name": "ContextMenuTooltipController",
+                "package": "@vaadin/context-menu/src/vaadin-context-menu-tooltip-controller.js"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "ContextMenuTooltipController",
+            "package": "@vaadin/context-menu/src/vaadin-context-menu-tooltip-controller.js"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MenuBarTooltipController",
+          "declaration": {
+            "name": "MenuBarTooltipController",
+            "module": "src/vaadin-menu-bar-tooltip-controller.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/vaadin-menu-bar.js",
@@ -190,6 +315,20 @@
                 "module": "src/vaadin-menu-bar-mixin.js"
               }
             },
+            {
+              "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"
+              }
+            },
             {
               "kind": "field",
               "name": "i18n",
@@ -211,7 +350,7 @@
               "type": {
                 "text": "!Array<!MenuBarItem>"
               },
-              "description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n  {\n    text: 'File',\n    className: 'file',\n    children: [\n      {text: 'Open', className: 'file open'}\n      {text: 'Auto Save', checked: true},\n    ]\n  },\n  {component: 'hr'},\n  {\n    text: 'Edit',\n    children: [\n      {text: 'Undo', disabled: true},\n      {text: 'Redo'}\n    ]\n  },\n  {text: 'Help'}\n];\n```\n\n#### Disabled items\n\nWhen disabled, menu bar items are rendered as \"dimmed\".\n\nBy default, disabled items are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can be\naddressed by enabling several feature flags, which makes disabled items\nfocusable and hoverable, while still preventing them from being activated:\n\n```js\n// Allow focus and hover interactions with disabled menu bar root items (buttons)\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true;\n\n// Allow focus and hover interactions with disabled menu bar sub-menu items\nwindow.Vaadin.featureFlags.accessibleDisabledMenuItems = true;\n```\n\nBoth flags must be set before any menu bar is attached to the DOM.",
+              "description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n  {\n    text: 'File',\n    className: 'file',\n    children: [\n      {text: 'Open', className: 'file open'}\n      {text: 'Auto Save', checked: true},\n    ]\n  },\n  {component: 'hr'},\n  {\n    text: 'Edit',\n    children: [\n      {text: 'Undo', disabled: true},\n      {text: 'Redo'}\n    ]\n  },\n  {text: 'Help'}\n];\n```\n\n#### Disabled items\n\nWhen disabled, menu bar items are rendered as \"dimmed\".\n\nBy default, disabled items are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can be\naddressed by enabling several feature flags, which makes disabled items\nfocusable and hoverable, while still preventing them from being activated:\n\n```js\n// Allow focus and hover interactions with disabled menu bar root items (buttons)\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true;\n\n// Allow focus and hover interactions with disabled menu bar sub-menu items\nwindow.Vaadin.featureFlags.accessibleDisabledMenuItems = true;\n```\n\nBoth flags must be set before any menu bar is attached to the DOM.\n\n#### Item tooltips\n\nButtons and sub-menu items can have tooltips that are shown on\nhover and keyboard focus. To enable them, add a slotted\n`<vaadin-tooltip>` element and set the `tooltip` property on\neach item that should have one:\n\n```html\n<vaadin-menu-bar>\n  <vaadin-tooltip slot=\"tooltip\"></vaadin-tooltip>\n</vaadin-menu-bar>\n```",
               "attribute": "items",
               "inheritedFrom": {
                 "name": "MenuBarMixin",
@@ -303,6 +442,18 @@
           "tagName": "vaadin-menu-bar",
           "customElement": true,
           "attributes": [
+            {
+              "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"
+              }
+            },
             {
               "name": "i18n",
               "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/menu-bar",
-  "version": "25.2.0-alpha9",
+  "version": "25.2.0-beta1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,23 +35,23 @@
   ],
   "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/context-menu": "25.2.0-alpha9",
-    "@vaadin/item": "25.2.0-alpha9",
-    "@vaadin/list-box": "25.2.0-alpha9",
-    "@vaadin/overlay": "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/context-menu": "25.2.0-beta1",
+    "@vaadin/item": "25.2.0-beta1",
+    "@vaadin/list-box": "25.2.0-beta1",
+    "@vaadin/overlay": "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/icon": "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/icon": "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",
@@ -59,5 +59,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "a38a03e8a8be45821f39c14054c63634dafe08d0"
+  "gitHead": "471a23f60d1eb725f98a33f62cb9664d9c0a4163"
 }

package/src/styles/vaadin-menu-bar-overlay-base-styles.js

@@ -1,6 +1,6 @@
 /**
  * @license
- * Copyright (c) 2016 - 2026 Vaadin Ltd.
+ * Copyright (c) 2019 - 2026 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { menuOverlayStyles } from '@vaadin/context-menu/src/styles/vaadin-menu-overlay-base-styles.js';

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

@@ -17,9 +17,6 @@ import { menuBarItemStyles } from './styles/vaadin-menu-bar-item-base-styles.js'
  *
  * @customElement vaadin-menu-bar-item
  * @extends HTMLElement
- * @mixes DirMixin
- * @mixes ItemMixin
- * @mixes ThemableMixin
  * @protected
  */
 class MenuBarItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {

package/src/vaadin-menu-bar-list-box.js

@@ -17,9 +17,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * @customElement vaadin-menu-bar-list-box
  * @extends HTMLElement
- * @mixes DirMixin
- * @mixes ListMixin
- * @mixes ThemableMixin
  * @protected
  */
 class MenuBarListBox extends ListMixin(ThemableMixin(DirMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {

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

@@ -22,6 +22,13 @@ export type MenuBarItem<TItemData extends object = object> = {
    * Requires a `<vaadin-tooltip slot="tooltip">` element to be added inside the `<vaadin-menu-bar>`.
    */
   tooltip?: string;
+  /**
+   * Position of the button's tooltip relative to the button
+   * (e.g. `bottom`, `top-start`). Defaults to `bottom`. If the slotted
+   * `<vaadin-tooltip>` has its `position` property set, that value is
+   * used instead.
+   */
+  tooltipPosition?: string;
   /**
    * The component to represent the button content.
    * Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
@@ -48,6 +55,19 @@ export type MenuBarItem<TItemData extends object = object> = {
 
 export type SubMenuItem<TItemData extends object = object> = {
   text?: string;
+  /**
+   * Text to be set as the menu item's tooltip.
+   * Requires a `<vaadin-tooltip slot="tooltip">` element to be added inside the `<vaadin-menu-bar>`.
+   */
+  tooltip?: string;
+  /**
+   * Position of the item's tooltip relative to the item
+   * (e.g. `end`, `top`, `bottom-start`). Items with a sub-menu default to `start` to
+   * avoid overlap with the opening sub-menu; all other items, including disabled ones
+   * (whose sub-menus cannot be opened), default to `end`. If the slotted
+   * `<vaadin-tooltip>` has its `position` property set, that value is used instead.
+   */
+  tooltipPosition?: string;
   component?: HTMLElement | string;
   disabled?: boolean;
   theme?: string[] | string;
@@ -120,6 +140,19 @@ export declare class MenuBarMixinClass<TItem extends MenuBarItem = MenuBarItem>
    * ```
    *
    * Both flags must be set before any menu bar is attached to the DOM.
+   *
+   * #### Item tooltips
+   *
+   * Buttons and sub-menu items can have tooltips that are shown on
+   * hover and keyboard focus. To enable them, add a slotted
+   * `<vaadin-tooltip>` element and set the `tooltip` property on
+   * each item that should have one:
+   *
+   * ```html
+   * <vaadin-menu-bar>
+   *   <vaadin-tooltip slot="tooltip"></vaadin-tooltip>
+   * </vaadin-menu-bar>
+   * ```
    */
   items: TItem[];
 

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

@@ -15,6 +15,7 @@ import { Debouncer } from '@vaadin/component-base/src/debounce.js';
 import { I18nMixin } from '@vaadin/component-base/src/i18n-mixin.js';
 import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+import { MenuBarTooltipController } from './vaadin-menu-bar-tooltip-controller.js';
 
 /**
  * Custom Lit directive for rendering item components
@@ -55,17 +56,8 @@ const DEFAULT_I18N = {
   moreOptions: 'More options',
 };
 
-/**
- * @polymerMixin
- * @mixes DisabledMixin
- * @mixes FocusMixin
- * @mixes I18nMixin
- * @mixes KeyboardDirectionMixin
- * @mixes ResizeMixin
- */
 export const MenuBarMixin = (superClass) =>
   class MenuBarMixinClass extends I18nMixin(
-    DEFAULT_I18N,
     KeyboardDirectionMixin(ResizeMixin(FocusMixin(DisabledMixin(superClass)))),
   ) {
     static get properties() {
@@ -76,6 +68,9 @@ export const MenuBarMixin = (superClass) =>
          * @property {string} text - Text to be set as the menu button component's textContent.
          * @property {string} tooltip - Text to be set as the menu button's tooltip.
          * Requires a `<vaadin-tooltip slot="tooltip">` element to be added inside the `<vaadin-menu-bar>`.
+         * @property {string} tooltipPosition - Position of the button's tooltip relative to
+         * the button (e.g. `bottom`, `top-start`). Defaults to `bottom`. If the slotted
+         * `<vaadin-tooltip>` has its `position` property set, that value is used instead.
          * @property {string | HTMLElement} component - The component to represent the button content.
          * Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
          * @property {boolean} disabled - If true, the button is disabled and cannot be activated.
@@ -87,6 +82,13 @@ export const MenuBarMixin = (superClass) =>
          * @typedef SubMenuItem
          * @type {object}
          * @property {string} text - Text to be set as the menu item component's textContent.
+         * @property {string} tooltip - Text to be set as the menu item's tooltip.
+         * Requires a `<vaadin-tooltip slot="tooltip">` element to be added inside the `<vaadin-menu-bar>`.
+         * @property {string} tooltipPosition - Position of the item's tooltip relative to the
+         * item (e.g. `end`, `top`, `bottom-start`). Items with a sub-menu default to `start`
+         * to avoid overlap with the opening sub-menu; all other items, including disabled
+         * ones (whose sub-menus cannot be opened), default to `end`. If the slotted
+         * `<vaadin-tooltip>` has its `position` property set, that value is used instead.
          * @property {string | HTMLElement} component - The component to represent the item.
          * Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
          * @property {boolean} disabled - If true, the item is disabled and cannot be selected.
@@ -143,6 +145,19 @@ export const MenuBarMixin = (superClass) =>
          *
          * Both flags must be set before any menu bar is attached to the DOM.
          *
+         * #### Item tooltips
+         *
+         * Buttons and sub-menu items can have tooltips that are shown on
+         * hover and keyboard focus. To enable them, add a slotted
+         * `<vaadin-tooltip>` element and set the `tooltip` property on
+         * each item that should have one:
+         *
+         * ```html
+         * <vaadin-menu-bar>
+         *   <vaadin-tooltip slot="tooltip"></vaadin-tooltip>
+         * </vaadin-menu-bar>
+         * ```
+         *
          * @type {!Array<!MenuBarItem>}
          */
         items: {
@@ -181,6 +196,10 @@ export const MenuBarMixin = (superClass) =>
       };
     }
 
+    static get defaultI18n() {
+      return DEFAULT_I18N;
+    }
+
     /**
      * The object used to localize this component. To change the default
      * localization, replace this with an object that provides all properties, or
@@ -205,7 +224,6 @@ export const MenuBarMixin = (superClass) =>
     constructor() {
       super();
       this.__boundOnContextMenuKeydown = this.__onContextMenuKeydown.bind(this);
-      this.__boundOnTooltipMouseLeave = this.__onTooltipOverlayMouseLeave.bind(this);
     }
 
     /**
@@ -310,12 +328,15 @@ export const MenuBarMixin = (superClass) =>
         },
       });
 
+      this._tooltipController = new MenuBarTooltipController(this);
+
+      this.addEventListener('mousedown', () => this._tooltipController.close(true));
+      this.addEventListener('mouseleave', () => this._tooltipController.close());
+
+      this.addController(this._tooltipController);
       this.addController(this._subMenuController);
       this.addController(this._overflowController);
 
-      this.addEventListener('mousedown', () => this._hideTooltip(true));
-      this.addEventListener('mouseleave', () => this._hideTooltip());
-
       this._container = this.shadowRoot.querySelector('[part="container"]');
     }
 
@@ -367,7 +388,7 @@ export const MenuBarMixin = (superClass) =>
     /** @protected */
     disconnectedCallback() {
       super.disconnectedCallback();
-      this._hideTooltip(true);
+      this._tooltipController.setTarget(null);
     }
 
     /**
@@ -410,7 +431,7 @@ export const MenuBarMixin = (superClass) =>
     /** @private */
     __updateSubMenu() {
       const subMenu = this._subMenu;
-      if (subMenu && subMenu.opened) {
+      if (subMenu?.opened) {
         const button = subMenu._positionTarget;
 
         // Close sub-menu if the corresponding button is no longer in the DOM,
@@ -423,7 +444,7 @@ export const MenuBarMixin = (superClass) =>
 
     /** @private */
     __i18nChanged(effectiveI18n) {
-      if (effectiveI18n && effectiveI18n.moreOptions !== undefined) {
+      if (effectiveI18n?.moreOptions !== undefined) {
         if (effectiveI18n.moreOptions) {
           this._overflow.setAttribute('aria-label', effectiveI18n.moreOptions);
         } else {
@@ -565,7 +586,7 @@ export const MenuBarMixin = (superClass) =>
       let theme = hostTheme;
 
       // Item theme takes precedence over host theme even if it's empty, as long as it's not undefined or null
-      const itemTheme = item && item.theme;
+      const itemTheme = item?.theme;
       if (itemTheme != null) {
         theme = Array.isArray(itemTheme) ? itemTheme.join(' ') : itemTheme;
       }
@@ -599,7 +620,7 @@ export const MenuBarMixin = (superClass) =>
         html`
           ${items.map((item) => {
             const itemCopy = { ...item };
-            const hasChildren = Boolean(item && item.children);
+            const hasChildren = Boolean(item?.children);
 
             if (itemCopy.component) {
               const component = this.__getComponent(itemCopy);
@@ -638,54 +659,6 @@ export const MenuBarMixin = (superClass) =>
       }
     }
 
-    /**
-     * @param {HTMLElement} button
-     * @protected
-     */
-    _showTooltip(button, isHover) {
-      // Check if there is a slotted vaadin-tooltip element.
-      const tooltip = this._tooltipController.node;
-      if (tooltip && tooltip.isConnected) {
-        // If the tooltip element doesn't have a generator assigned, use a default one
-        // that reads the `tooltip` property of an item.
-        if (tooltip.generator === undefined) {
-          tooltip.generator = ({ item }) => item && item.tooltip;
-        }
-
-        if (!tooltip._mouseLeaveListenerAdded) {
-          tooltip._overlayElement.addEventListener('mouseleave', this.__boundOnTooltipMouseLeave);
-          tooltip._mouseLeaveListenerAdded = true;
-        }
-
-        if (!this._subMenu.opened) {
-          this._tooltipController.setTarget(button);
-          this._tooltipController.setContext({ item: button.item });
-
-          // Trigger opening using the corresponding delay.
-          tooltip._stateController.open({
-            hover: isHover,
-            focus: !isHover,
-          });
-        }
-      }
-    }
-
-    /** @protected */
-    _hideTooltip(immediate) {
-      const tooltip = this._tooltipController && this._tooltipController.node;
-      if (tooltip) {
-        this._tooltipController.setContext({ item: null });
-        tooltip._stateController.close(immediate);
-      }
-    }
-
-    /** @private */
-    __onTooltipOverlayMouseLeave(event) {
-      if (event.relatedTarget !== this._tooltipController.target) {
-        this._hideTooltip();
-      }
-    }
-
     /** @protected */
     _setExpanded(button, expanded) {
       button.toggleAttribute('expanded', expanded);
@@ -713,24 +686,24 @@ export const MenuBarMixin = (superClass) =>
      * @protected
      * @override
      */
-    _focusItem(item, options, navigating) {
+    _focusItem(button, options, navigating) {
       const wasExpanded = navigating && this.focused === this._expandedButton;
       if (wasExpanded) {
         this._close();
       }
 
-      super._focusItem(item, options, navigating);
+      super._focusItem(button, options, navigating);
 
       this._buttons.forEach((btn) => {
-        this._setTabindex(btn, btn === item);
+        this._setTabindex(btn, btn === button);
       });
 
-      if (wasExpanded && item.item && item.item.children) {
-        this.__openSubMenu(item, true, { keepFocus: true });
-      } else if (item === this._overflow) {
-        this._hideTooltip();
-      } else {
-        this._showTooltip(item);
+      this._tooltipController.setTarget(button);
+
+      if (wasExpanded && button.item && button.item.children) {
+        this.__openSubMenu(button, true, { keepFocus: true });
+      } else if (!this._subMenu.opened) {
+        this._tooltipController.open({ trigger: 'focus' });
       }
     }
 
@@ -775,18 +748,19 @@ export const MenuBarMixin = (superClass) =>
      * @protected
      */
     _setFocused(focused) {
-      if (focused) {
-        const target = this.__getFocusTarget();
-        if (target) {
-          this._buttons.forEach((btn) => {
-            this._setTabindex(btn, btn === target);
-            if (btn === target && btn !== this._overflow && isKeyboardActive()) {
-              this._showTooltip(btn);
-            }
-          });
+      const target = focused ? this.__getFocusTarget() : null;
+      if (target) {
+        this._tooltipController.setTarget(target);
+
+        this._buttons.forEach((btn) => {
+          this._setTabindex(btn, btn === target);
+        });
+
+        if (!this._subMenu.opened && isKeyboardActive()) {
+          this._tooltipController.open({ trigger: 'focus' });
         }
       } else {
-        this._hideTooltip();
+        this._tooltipController.close(true);
       }
     }
 
@@ -856,7 +830,7 @@ export const MenuBarMixin = (superClass) =>
         this._close(true);
       }
 
-      this._hideTooltip(true);
+      this._tooltipController.close(true);
     }
 
     /**
@@ -901,22 +875,19 @@ export const MenuBarMixin = (superClass) =>
       }
 
       const button = this._getButtonFromEvent(event);
-      if (!button) {
-        // Hide tooltip on mouseover to disabled button
-        this._hideTooltip();
-      } else if (button !== this._expandedButton) {
+      this._tooltipController.setTarget(button);
+
+      if (button && button !== this._expandedButton) {
         // Switch sub-menu when moving cursor over another button
         // with children, regardless of whether openOnHover is set.
         // If the button has no children, keep the sub-menu opened.
         if (button.item.children && (this.openOnHover || this._subMenu.opened)) {
           this.__openSubMenu(button, false);
         }
+      }
 
-        if (button === this._overflow || (this.openOnHover && button.item.children)) {
-          this._hideTooltip();
-        } else {
-          this._showTooltip(button, true);
-        }
+      if (!this._subMenu.opened) {
+        this._tooltipController.open({ trigger: 'hover' });
       }
     }
 
@@ -970,7 +941,7 @@ export const MenuBarMixin = (superClass) =>
         }
       }
 
-      const items = item && item.children;
+      const items = item?.children;
       if (!items || items.length === 0) {
         this.__fireItemSelected(item);
         return;
@@ -982,7 +953,7 @@ export const MenuBarMixin = (superClass) =>
       const overlay = subMenu._overlayElement;
       overlay.noVerticalOverlap = true;
 
-      this._hideTooltip(true);
+      this._tooltipController.close(true);
 
       this._expandedButton = button;
       this._setExpanded(button, true);
@@ -1047,11 +1018,13 @@ export const MenuBarMixin = (superClass) =>
     /** @private */
     __deactivateButton(restoreFocus) {
       const button = this._expandedButton;
-      if (button && button.hasAttribute('expanded')) {
+      if (button?.hasAttribute('expanded')) {
         this._setExpanded(button, false);
         if (restoreFocus) {
           const focusOptions = { focusVisible: isKeyboardActive() };
           this._focusItem(button, focusOptions, false);
+        } else {
+          this._tooltipController.close(true);
         }
         this._expandedButton = null;
       }

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

@@ -18,10 +18,6 @@ import { menuBarOverlayStyles } from './styles/vaadin-menu-bar-overlay-base-styl
  *
  * @customElement vaadin-menu-bar-overlay
  * @extends HTMLElement
- * @mixes DirMixin
- * @mixes MenuOverlayMixin
- * @mixes OverlayMixin
- * @mixes ThemableMixin
  * @protected
  */
 export class MenuBarOverlay extends MenuOverlayMixin(

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

@@ -18,8 +18,6 @@ import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-p
  *
  * @customElement vaadin-menu-bar-submenu
  * @extends HTMLElement
- * @mixes ContextMenuMixin
- * @mixes ThemePropertyMixin
  * @protected
  */
 class MenuBarSubmenu extends ContextMenuMixin(ThemePropertyMixin(PolylitMixin(LitElement))) {
@@ -55,6 +53,17 @@ class MenuBarSubmenu extends ContextMenuMixin(ThemePropertyMixin(PolylitMixin(Li
     this.openOn = 'opensubmenu';
   }
 
+  /** @protected */
+  firstUpdated(props) {
+    // Tooltip lives on the parent `<vaadin-menu-bar>`. Reuse its controller
+    // so the same tooltip element serves items at every nesting level.
+    // Assigned before `super.firstUpdated()` so `ContextMenuMixin` skips
+    // creating its own controller (we don't render a tooltip slot).
+    this._tooltipController = this.parentElement._tooltipController;
+
+    super.firstUpdated(props);
+  }
+
   /**
    * Tag name prefix used by overlay, list-box and items.
    * @protected
@@ -90,13 +99,21 @@ class MenuBarSubmenu extends ContextMenuMixin(ThemePropertyMixin(PolylitMixin(Li
   }
 
   /**
-   * Overriding the observer to not add global "contextmenu" listener.
+   * Overriding the observer to not toggle user-select on the host.
    * @override
    */
   _openedChanged() {
     // Do nothing
   }
 
+  /**
+   * Overriding the handler to not react to global "contextmenu" events.
+   * @override
+   */
+  __onGlobalContextMenu() {
+    // Do nothing
+  }
+
   /**
    * Overriding the public method to reset expanded button state.
    */

package/src/vaadin-menu-bar-tooltip-controller.js

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2026 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ContextMenuTooltipController } from '@vaadin/context-menu/src/vaadin-context-menu-tooltip-controller.js';
+
+/**
+ * Controller for the tooltip slotted into `<vaadin-menu-bar>`. Extends
+ * `ContextMenuTooltipController` to also support menu-bar buttons as
+ * targets, in addition to sub-menu items.
+ */
+export class MenuBarTooltipController extends ContextMenuTooltipController {
+  /** @override */
+  _getItem(target) {
+    if (target.localName === 'vaadin-menu-bar-button') {
+      return target.item;
+    }
+
+    return super._getItem(target);
+  }
+
+  /** @override */
+  _getDefaultPosition(target) {
+    if (target.localName === 'vaadin-menu-bar-button') {
+      return 'bottom';
+    }
+
+    return super._getDefaultPosition(target);
+  }
+}

package/src/vaadin-menu-bar.js

@@ -9,7 +9,6 @@ import { html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { menuBarStyles } from './styles/vaadin-menu-bar-base-styles.js';
@@ -70,9 +69,6 @@ import { MenuBarMixin } from './vaadin-menu-bar-mixin.js';
  *
  * @customElement vaadin-menu-bar
  * @extends HTMLElement
- * @mixes ElementMixin
- * @mixes MenuBarMixin
- * @mixes ThemableMixin
  */
 class MenuBar extends MenuBarMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))) {
   static get is() {
@@ -96,23 +92,6 @@ class MenuBar extends MenuBarMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoI
       <slot name="tooltip"></slot>
     `;
   }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._tooltipController = new TooltipController(this);
-    this._tooltipController.setManual(true);
-    this.addController(this._tooltipController);
-  }
-
-  /**
-   * Fired when either a submenu item or menu bar button without nested children is clicked.
-   *
-   * @event item-selected
-   * @param {Object} detail
-   * @param {Object} detail.value the selected menu bar item
-   */
 }
 
 defineCustomElement(MenuBar);

package/web-types.json

@@ -1,34 +1,21 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "25.2.0-alpha9",
+  "version": "25.2.0-beta1",
   "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.2.0-alpha9/#/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\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.2.0-alpha9/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha9/#/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.2.0-alpha9/#/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.2.0-alpha9/#/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.2.0-beta1/#/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\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.2.0-beta1/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-beta1/#/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.2.0-beta1/#/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.2.0-beta1/#/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",
               "description": "If true, the user cannot interact with this element.",
               "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"
                 ]
               }
             },
@@ -37,9 +24,7 @@
               "description": "If true, the submenu will open on hover (mouseover) instead of click.",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -48,9 +33,7 @@
               "description": "If true, the buttons will be collapsed into the overflow menu\nstarting from the \"start\" end of the bar instead of the \"end\".",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -59,9 +42,7 @@
               "description": "If true, the top-level menu items is traversable by tab\ninstead of arrow keys (i.e. disabling roving tabindex)",
               "value": {
                 "type": [
-                  "boolean",
-                  "null",
-                  "undefined"
+                  "boolean"
                 ]
               }
             },
@@ -84,9 +65,7 @@
                 "description": "If true, the user cannot interact with this element.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -95,16 +74,16 @@
                 "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```",
                 "value": {
                   "type": [
-                    "?"
+                    "Object"
                   ]
                 }
               },
               {
                 "name": "items",
-                "description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n  {\n    text: 'File',\n    className: 'file',\n    children: [\n      {text: 'Open', className: 'file open'}\n      {text: 'Auto Save', checked: true},\n    ]\n  },\n  {component: 'hr'},\n  {\n    text: 'Edit',\n    children: [\n      {text: 'Undo', disabled: true},\n      {text: 'Redo'}\n    ]\n  },\n  {text: 'Help'}\n];\n```\n\n#### Disabled items\n\nWhen disabled, menu bar items are rendered as \"dimmed\".\n\nBy default, disabled items are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can be\naddressed by enabling several feature flags, which makes disabled items\nfocusable and hoverable, while still preventing them from being activated:\n\n```js\n// Allow focus and hover interactions with disabled menu bar root items (buttons)\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true;\n\n// Allow focus and hover interactions with disabled menu bar sub-menu items\nwindow.Vaadin.featureFlags.accessibleDisabledMenuItems = true;\n```\n\nBoth flags must be set before any menu bar is attached to the DOM.",
+                "description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n  {\n    text: 'File',\n    className: 'file',\n    children: [\n      {text: 'Open', className: 'file open'}\n      {text: 'Auto Save', checked: true},\n    ]\n  },\n  {component: 'hr'},\n  {\n    text: 'Edit',\n    children: [\n      {text: 'Undo', disabled: true},\n      {text: 'Redo'}\n    ]\n  },\n  {text: 'Help'}\n];\n```\n\n#### Disabled items\n\nWhen disabled, menu bar items are rendered as \"dimmed\".\n\nBy default, disabled items are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can be\naddressed by enabling several feature flags, which makes disabled items\nfocusable and hoverable, while still preventing them from being activated:\n\n```js\n// Allow focus and hover interactions with disabled menu bar root items (buttons)\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true;\n\n// Allow focus and hover interactions with disabled menu bar sub-menu items\nwindow.Vaadin.featureFlags.accessibleDisabledMenuItems = true;\n```\n\nBoth flags must be set before any menu bar is attached to the DOM.\n\n#### Item tooltips\n\nButtons and sub-menu items can have tooltips that are shown on\nhover and keyboard focus. To enable them, add a slotted\n`<vaadin-tooltip>` element and set the `tooltip` property on\neach item that should have one:\n\n```html\n<vaadin-menu-bar>\n  <vaadin-tooltip slot=\"tooltip\"></vaadin-tooltip>\n</vaadin-menu-bar>\n```",
                 "value": {
                   "type": [
-                    "Array.<MenuBarItem>"
+                    "Array<MenuBarItem>"
                   ]
                 }
               },
@@ -113,9 +92,7 @@
                 "description": "If true, the submenu will open on hover (mouseover) instead of click.",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -124,9 +101,7 @@
                 "description": "If true, the buttons will be collapsed into the overflow menu\nstarting from the \"start\" end of the bar instead of the \"end\".",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               },
@@ -135,9 +110,7 @@
                 "description": "If true, the top-level menu items is traversable by tab\ninstead of arrow keys (i.e. disabling roving tabindex)",
                 "value": {
                   "type": [
-                    "boolean",
-                    "null",
-                    "undefined"
+                    "boolean"
                   ]
                 }
               }
@@ -145,7 +118,7 @@
             "events": [
               {
                 "name": "item-selected",
-                "description": "Fired when either a submenu item or menu bar button without nested children is clicked."
+                "description": "Fired when a submenu item or menu bar button without children is clicked."
               }
             ]
           }

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "25.2.0-alpha9",
+  "version": "25.2.0-beta1",
   "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.2.0-alpha9/#/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\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.2.0-alpha9/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-alpha9/#/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.2.0-alpha9/#/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.2.0-alpha9/#/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.2.0-beta1/#/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\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.2.0-beta1/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/25.2.0-beta1/#/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.2.0-beta1/#/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.2.0-beta1/#/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": [
             {
@@ -27,43 +27,43 @@
               }
             },
             {
-              "name": "?openOnHover",
-              "description": "If true, the submenu will open on hover (mouseover) instead of click.",
+              "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```",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "?reverseCollapse",
-              "description": "If true, the buttons will be collapsed into the overflow menu\nstarting from the \"start\" end of the bar instead of the \"end\".",
+              "name": ".items",
+              "description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n  {\n    text: 'File',\n    className: 'file',\n    children: [\n      {text: 'Open', className: 'file open'}\n      {text: 'Auto Save', checked: true},\n    ]\n  },\n  {component: 'hr'},\n  {\n    text: 'Edit',\n    children: [\n      {text: 'Undo', disabled: true},\n      {text: 'Redo'}\n    ]\n  },\n  {text: 'Help'}\n];\n```\n\n#### Disabled items\n\nWhen disabled, menu bar items are rendered as \"dimmed\".\n\nBy default, disabled items are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can be\naddressed by enabling several feature flags, which makes disabled items\nfocusable and hoverable, while still preventing them from being activated:\n\n```js\n// Allow focus and hover interactions with disabled menu bar root items (buttons)\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true;\n\n// Allow focus and hover interactions with disabled menu bar sub-menu items\nwindow.Vaadin.featureFlags.accessibleDisabledMenuItems = true;\n```\n\nBoth flags must be set before any menu bar is attached to the DOM.\n\n#### Item tooltips\n\nButtons and sub-menu items can have tooltips that are shown on\nhover and keyboard focus. To enable them, add a slotted\n`<vaadin-tooltip>` element and set the `tooltip` property on\neach item that should have one:\n\n```html\n<vaadin-menu-bar>\n  <vaadin-tooltip slot=\"tooltip\"></vaadin-tooltip>\n</vaadin-menu-bar>\n```",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": "?tabNavigation",
-              "description": "If true, the top-level menu items is traversable by tab\ninstead of arrow keys (i.e. disabling roving tabindex)",
+              "name": "?openOnHover",
+              "description": "If true, the submenu will open on hover (mouseover) instead of click.",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "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```",
+              "name": "?reverseCollapse",
+              "description": "If true, the buttons will be collapsed into the overflow menu\nstarting from the \"start\" end of the bar instead of the \"end\".",
               "value": {
                 "kind": "expression"
               }
             },
             {
-              "name": ".items",
-              "description": "Defines a hierarchical structure, where root level items represent menu bar buttons,\nand `children` property configures a submenu with items to be opened below\nthe button on click, Enter, Space, Up and Down arrow keys.\n\n#### Example\n\n```js\nmenubar.items = [\n  {\n    text: 'File',\n    className: 'file',\n    children: [\n      {text: 'Open', className: 'file open'}\n      {text: 'Auto Save', checked: true},\n    ]\n  },\n  {component: 'hr'},\n  {\n    text: 'Edit',\n    children: [\n      {text: 'Undo', disabled: true},\n      {text: 'Redo'}\n    ]\n  },\n  {text: 'Help'}\n];\n```\n\n#### Disabled items\n\nWhen disabled, menu bar items are rendered as \"dimmed\".\n\nBy default, disabled items are not focusable and don't react to hover.\nAs a result, they are hidden from assistive technologies, and it's not\npossible to show a tooltip to explain why they are disabled. This can be\naddressed by enabling several feature flags, which makes disabled items\nfocusable and hoverable, while still preventing them from being activated:\n\n```js\n// Allow focus and hover interactions with disabled menu bar root items (buttons)\nwindow.Vaadin.featureFlags.accessibleDisabledButtons = true;\n\n// Allow focus and hover interactions with disabled menu bar sub-menu items\nwindow.Vaadin.featureFlags.accessibleDisabledMenuItems = true;\n```\n\nBoth flags must be set before any menu bar is attached to the DOM.",
+              "name": "?tabNavigation",
+              "description": "If true, the top-level menu items is traversable by tab\ninstead of arrow keys (i.e. disabling roving tabindex)",
               "value": {
                 "kind": "expression"
               }
             },
             {
               "name": "@item-selected",
-              "description": "Fired when either a submenu item or menu bar button without nested children is clicked.",
+              "description": "Fired when a submenu item or menu bar button without children is clicked.",
               "value": {
                 "kind": "expression"
               }