@vaadin/menu-bar 25.2.0-alpha10 → 25.2.0-alpha12

package/custom-elements.json

@@ -163,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"
@@ -178,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": [
@@ -207,6 +207,14 @@
           "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",

package/package.json

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

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.js

@@ -56,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() {
@@ -205,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
@@ -707,7 +702,7 @@ export const MenuBarMixin = (superClass) =>
 
       if (wasExpanded && button.item && button.item.children) {
         this.__openSubMenu(button, true, { keepFocus: true });
-      } else {
+      } else if (!this._subMenu.opened) {
         this._tooltipController.open({ trigger: 'focus' });
       }
     }
@@ -761,7 +756,7 @@ export const MenuBarMixin = (superClass) =>
           this._setTabindex(btn, btn === target);
         });
 
-        if (isKeyboardActive()) {
+        if (!this._subMenu.opened && isKeyboardActive()) {
           this._tooltipController.open({ trigger: 'focus' });
         }
       } else {

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))) {
@@ -56,13 +54,14 @@ class MenuBarSubmenu extends ContextMenuMixin(ThemePropertyMixin(PolylitMixin(Li
   }
 
   /** @protected */
-  ready() {
-    super.ready();
-
-    // The slotted `<vaadin-tooltip>` lives on the parent `<vaadin-menu-bar>`.
-    // Its tooltip controller instance is shared across sub-menus to reuse
-    // the same tooltip element for items at every nesting level.
+  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);
   }
 
   /**
@@ -96,19 +95,25 @@ class MenuBarSubmenu extends ContextMenuMixin(ThemePropertyMixin(PolylitMixin(Li
         <slot name="overlay"></slot>
         <slot name="submenu" slot="submenu"></slot>
       </vaadin-menu-bar-overlay>
-
-      <slot name="tooltip"></slot>
     `;
   }
 
   /**
-   * 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.js

@@ -69,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() {

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "25.2.0-alpha10",
+  "version": "25.2.0-alpha12",
   "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-alpha10/#/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-alpha10/#/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-alpha10/#/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-alpha10/#/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-alpha10/#/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-alpha12/#/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-alpha12/#/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-alpha12/#/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-alpha12/#/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-alpha12/#/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",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "25.2.0-alpha10",
+  "version": "25.2.0-alpha12",
   "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-alpha10/#/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-alpha10/#/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-alpha10/#/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-alpha10/#/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-alpha10/#/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-alpha12/#/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-alpha12/#/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-alpha12/#/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-alpha12/#/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-alpha12/#/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": [
             {