@vaadin/menu-bar 24.0.0-alpha12 → 24.0.0-alpha13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/menu-bar",
-  "version": "24.0.0-alpha12",
+  "version": "24.0.0-alpha13",
   "publishConfig": {
     "access": "public"
   },
@@ -37,22 +37,22 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "24.0.0-alpha12",
-    "@vaadin/component-base": "24.0.0-alpha12",
-    "@vaadin/context-menu": "24.0.0-alpha12",
-    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha12",
-    "@vaadin/vaadin-material-styles": "24.0.0-alpha12",
-    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha12"
+    "@vaadin/button": "24.0.0-alpha13",
+    "@vaadin/component-base": "24.0.0-alpha13",
+    "@vaadin/context-menu": "24.0.0-alpha13",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha13",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha13",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha13"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/icon": "24.0.0-alpha12",
-    "@vaadin/testing-helpers": "^0.3.2",
+    "@vaadin/icon": "24.0.0-alpha13",
+    "@vaadin/testing-helpers": "^0.4.0",
     "sinon": "^13.0.2"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "7e29eee4d522fb7b03ac8e7e385e9057d71c79ce"
+  "gitHead": "a423ad309c12b4e4f847737ee9f491f83ea60ff0"
 }

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

@@ -17,7 +17,7 @@ registerStyles(
       margin-inline-end: 0;
     }
 
-    [part='label'] ::slotted(vaadin-context-menu-item) {
+    [part='label'] ::slotted(vaadin-menu-bar-item) {
       position: relative;
       z-index: 1;
     }

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

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ */
+declare class MenuBarItem extends ItemMixin(DirMixin(ThemableMixin(HTMLElement))) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-menu-bar-item': MenuBarItem;
+  }
+}
+
+export { MenuBarItem };

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

@@ -0,0 +1,55 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ItemMixin } from '@vaadin/item/src/vaadin-item-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes DirMixin
+ * @mixes ItemMixin
+ * @mixes ThemableMixin
+ * @protected
+ */
+class MenuBarItem extends ItemMixin(ThemableMixin(DirMixin(PolymerElement))) {
+  static get is() {
+    return 'vaadin-menu-bar-item';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: inline-block;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+      </style>
+      <span part="checkmark" aria-hidden="true"></span>
+      <div part="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Set role in `connectedCallback()` instead of `ready()`
+    // because the role is removed when teleporting to button.
+    this.setAttribute('role', 'menuitem');
+  }
+}
+
+customElements.define(MenuBarItem.is, MenuBarItem);
+
+export { MenuBarItem };

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

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ListMixin } from '@vaadin/component-base/src/list-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ */
+declare class MenuBarListBox extends ListMixin(DirMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-menu-bar-list-box': MenuBarListBox;
+  }
+}
+
+export { MenuBarListBox };

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

@@ -0,0 +1,81 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { ListMixin } from '@vaadin/component-base/src/list-mixin.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ *
+ * @extends HTMLElement
+ * @mixes ControllerMixin
+ * @mixes DirMixin
+ * @mixes ListMixin
+ * @mixes ThemableMixin
+ * @protected
+ */
+class MenuBarListBox extends ListMixin(ThemableMixin(DirMixin(ControllerMixin(PolymerElement)))) {
+  static get is() {
+    return 'vaadin-menu-bar-list-box';
+  }
+
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: flex;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+
+        [part='items'] {
+          height: 100%;
+          width: 100%;
+          overflow-y: auto;
+          -webkit-overflow-scrolling: touch;
+        }
+      </style>
+      <div part="items">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      // We don't need to define this property since super default is vertical,
+      // but we don't want it to be modified, or be shown in the API docs.
+      /** @private */
+      orientation: {
+        readOnly: true,
+      },
+    };
+  }
+
+  /**
+   * @return {!HTMLElement}
+   * @protected
+   * @override
+   */
+  get _scrollerElement() {
+    return this.shadowRoot.querySelector('[part="items"]');
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.setAttribute('role', 'menu');
+  }
+}
+
+customElements.define(MenuBarListBox.is, MenuBarListBox);
+
+export { MenuBarListBox };

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

@@ -360,17 +360,16 @@ export const MenuBarMixin = (superClass) =>
 
       const isElement = itemComponent instanceof HTMLElement;
       // Use existing item component, if any
-      if (isElement && itemComponent.localName === 'vaadin-context-menu-item') {
+      if (isElement && itemComponent.localName === 'vaadin-menu-bar-item') {
         component = itemComponent;
       } else {
-        component = document.createElement('vaadin-context-menu-item');
+        component = document.createElement('vaadin-menu-bar-item');
         component.appendChild(isElement ? itemComponent : document.createElement(itemComponent));
       }
       if (item.text) {
         const node = component.firstChild || component;
         node.textContent = item.text;
       }
-      component.setAttribute('theme', 'menu-bar-item');
       return component;
     }
 

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { MenuOverlayMixin } from '@vaadin/context-menu/src/vaadin-menu-overlay-mixin.js';
+import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ */
+declare class MenuBarOverlay extends MenuOverlayMixin(Overlay) {}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'vaadin-menu-bar-overlay': MenuBarOverlay;
+  }
+}
+
+export { MenuBarOverlay };

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

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { MenuOverlayMixin } from '@vaadin/context-menu/src/vaadin-menu-overlay-mixin.js';
+import { styles } from '@vaadin/context-menu/src/vaadin-menu-overlay-styles.js';
+import { Overlay } from '@vaadin/overlay/src/vaadin-overlay.js';
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles('vaadin-menu-bar-overlay', styles, { moduleId: 'vaadin-menu-bar-overlay-styles' });
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ *
+ * @extends Overlay
+ * @mixes MenuOverlayMixin
+ * @private
+ */
+class MenuBarOverlay extends MenuOverlayMixin(Overlay) {
+  static get is() {
+    return 'vaadin-menu-bar-overlay';
+  }
+}
+
+customElements.define(MenuBarOverlay.is, MenuBarOverlay);

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

@@ -3,6 +3,10 @@
  * Copyright (c) 2019 - 2023 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import './vaadin-menu-bar-item.js';
+import './vaadin-menu-bar-list-box.js';
+import './vaadin-menu-bar-overlay.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { ContextMenu } from '@vaadin/context-menu/src/vaadin-context-menu.js';
 
 /**
@@ -16,12 +20,47 @@ class MenuBarSubmenu extends ContextMenu {
     return 'vaadin-menu-bar-submenu';
   }
 
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: block;
+        }
+
+        :host([hidden]) {
+          display: none !important;
+        }
+      </style>
+
+      <slot id="slot"></slot>
+
+      <vaadin-menu-bar-overlay
+        id="overlay"
+        on-opened-changed="_onOverlayOpened"
+        on-vaadin-overlay-open="_onVaadinOverlayOpen"
+        with-backdrop="[[_phone]]"
+        phone$="[[_phone]]"
+        model="[[_context]]"
+        theme$="[[_theme]]"
+      ></vaadin-menu-bar-overlay>
+    `;
+  }
+
   constructor() {
     super();
 
     this.openOn = 'opensubmenu';
   }
 
+  /**
+   * Tag name prefix used by overlay, list-box and items.
+   * @protected
+   * @return {string}
+   */
+  get _tagNamePrefix() {
+    return 'vaadin-menu-bar';
+  }
+
   /**
    * Overriding the observer to not add global "contextmenu" listener.
    */

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

@@ -20,7 +20,7 @@ export interface MenuBarItem {
   tooltip?: string;
   /**
    * The component to represent the button content.
-   * Either a tagName or an element instance. Defaults to "vaadin-context-menu-item".
+   * Either a tagName or an element instance. Defaults to "vaadin-menu-bar-item".
    */
   component?: HTMLElement | string;
   /**
@@ -101,9 +101,9 @@ export interface MenuBarEventMap extends HTMLElementEventMap, MenuBarCustomEvent
  * components are themable:
  *
  * - `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](#/elements/vaadin-button).
- * - `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
- * - `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
- * - `<vaadin-context-menu-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
+ * - `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
+ * - `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
+ * - `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  *
  * @fires {CustomEvent} item-selected - Fired when a submenu item or menu bar button without children is clicked.
  */

package/src/vaadin-menu-bar.js

@@ -52,9 +52,9 @@ import { MenuBarMixin } from './vaadin-menu-bar-mixin.js';
  * components are themable:
  *
  * - `<vaadin-menu-bar-button>` - has the same API as [`<vaadin-button>`](#/elements/vaadin-button).
- * - `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
- * - `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
- * - `<vaadin-context-menu-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
+ * - `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](#/elements/vaadin-item).
+ * - `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](#/elements/vaadin-list-box).
+ * - `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](#/elements/vaadin-overlay).
  *
  * @fires {CustomEvent<boolean>} item-selected - Fired when a submenu item or menu bar button without children is clicked.
  *
@@ -108,7 +108,7 @@ class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMixin(Poly
        * @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 {union: string | object} component - The component to represent the button content.
-       * Either a tagName or an element instance. Defaults to "vaadin-context-menu-item".
+       * 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.
        * @property {union: string | string[]} theme - Theme(s) to be set as the theme attribute of the button, overriding any theme set on the menu bar.
        * @property {SubMenuItem[]} children - Array of submenu items.
@@ -119,7 +119,7 @@ class MenuBar extends MenuBarMixin(DisabledMixin(ElementMixin(ThemableMixin(Poly
        * @type {object}
        * @property {string} text - Text to be set as the menu item component's textContent.
        * @property {union: string | object} component - The component to represent the item.
-       * Either a tagName or an element instance. Defaults to "vaadin-context-menu-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.
        * @property {boolean} checked - If true, the item shows a checkmark next to it.
        * @property {SubMenuItem[]} children - Array of child submenu items.

package/theme/lumo/vaadin-menu-bar-button-styles.js

@@ -13,7 +13,7 @@ const menuBarButton = css`
   }
 
   /* NOTE(web-padawan): avoid using shorthand padding property for IE11 */
-  [part='label'] ::slotted(vaadin-context-menu-item) {
+  [part='label'] ::slotted(vaadin-menu-bar-item) {
     justify-content: center;
     background-color: transparent;
     height: var(--lumo-button-size);
@@ -22,14 +22,14 @@ const menuBarButton = css`
     padding-right: calc(var(--lumo-size-m) / 3 + var(--lumo-border-radius-m) / 2);
   }
 
-  :host([theme~='small']) [part='label'] ::slotted(vaadin-context-menu-item) {
+  :host([theme~='small']) [part='label'] ::slotted(vaadin-menu-bar-item) {
     min-height: var(--lumo-size-s);
     margin: 0 calc((var(--lumo-size-s) / 3 + var(--lumo-border-radius-m) / 2) * -1);
     padding-left: calc(var(--lumo-size-s) / 3 + var(--lumo-border-radius-m) / 2);
     padding-right: calc(var(--lumo-size-s) / 3 + var(--lumo-border-radius-m) / 2);
   }
 
-  :host([theme~='tertiary']) [part='label'] ::slotted(vaadin-context-menu-item) {
+  :host([theme~='tertiary']) [part='label'] ::slotted(vaadin-menu-bar-item) {
     margin: 0 calc((var(--lumo-button-size) / 6) * -1);
     padding-left: calc(var(--lumo-button-size) / 6);
     padding-right: calc(var(--lumo-button-size) / 6);
@@ -41,7 +41,7 @@ const menuBarButton = css`
     margin-right: calc(var(--lumo-space-xs) / 2);
   }
 
-  :host([theme~='tertiary-inline']) [part='label'] ::slotted(vaadin-context-menu-item) {
+  :host([theme~='tertiary-inline']) [part='label'] ::slotted(vaadin-menu-bar-item) {
     margin: 0;
     padding: 0;
   }

package/theme/lumo/vaadin-menu-bar-item-styles.js

@@ -1,27 +1,27 @@
 import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
+import { contextMenuItem } from '@vaadin/context-menu/theme/lumo/vaadin-context-menu-item-styles.js';
+import { item } from '@vaadin/item/theme/lumo/vaadin-item-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-registerStyles(
-  'vaadin-context-menu-item',
-  css`
-    :host([theme='menu-bar-item']) [part='content'] {
-      display: flex;
-      /* tweak to inherit centering from menu bar button */
-      align-items: inherit;
-      justify-content: inherit;
-    }
+const menuBarItem = css`
+  [part='content'] {
+    display: flex;
+    /* tweak to inherit centering from menu bar button */
+    align-items: inherit;
+    justify-content: inherit;
+  }
 
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon) {
-      display: inline-block;
-      width: var(--lumo-icon-size-m);
-      height: var(--lumo-icon-size-m);
-    }
+  [part='content'] ::slotted(vaadin-icon) {
+    display: inline-block;
+    width: var(--lumo-icon-size-m);
+    height: var(--lumo-icon-size-m);
+  }
 
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon[icon^='vaadin:']) {
-      padding: var(--lumo-space-xs);
-      box-sizing: border-box !important;
-    }
-  `,
-  { moduleId: 'lumo-menu-bar-item' },
-);
+  [part='content'] ::slotted(vaadin-icon[icon^='vaadin:']) {
+    padding: var(--lumo-space-xs);
+    box-sizing: border-box !important;
+  }
+`;
+
+registerStyles('vaadin-menu-bar-item', [item, contextMenuItem, menuBarItem], { moduleId: 'lumo-menu-bar-item' });

package/theme/lumo/vaadin-menu-bar-list-box-styles.js

@@ -0,0 +1,5 @@
+import { contextMenuListBox } from '@vaadin/context-menu/theme/lumo/vaadin-context-menu-list-box-styles.js';
+import { listBox } from '@vaadin/list-box/theme/lumo/vaadin-list-box-styles.js';
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles('vaadin-menu-bar-list-box', [listBox, contextMenuListBox], { moduleId: 'lumo-menu-bar-list-box' });

package/theme/lumo/vaadin-menu-bar-overlay-styles.js

@@ -1,11 +1,13 @@
+import { contextMenuOverlay } from '@vaadin/context-menu/theme/lumo/vaadin-context-menu-overlay-styles.js';
+import { menuOverlay } from '@vaadin/vaadin-lumo-styles/mixins/menu-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-registerStyles(
-  'vaadin-context-menu-overlay',
-  css`
-    :host(:first-of-type) {
-      padding-top: var(--lumo-space-xs);
-    }
-  `,
-  { moduleId: 'lumo-menu-bar-overlay' },
-);
+const menuBarOverlay = css`
+  :host(:first-of-type) {
+    padding-top: var(--lumo-space-xs);
+  }
+`;
+
+registerStyles('vaadin-menu-bar-overlay', [menuOverlay, contextMenuOverlay, menuBarOverlay], {
+  moduleId: 'lumo-menu-bar-overlay',
+});

package/theme/lumo/vaadin-menu-bar.js

@@ -1,6 +1,7 @@
 import './vaadin-menu-bar-button.js';
 import './vaadin-menu-bar-item-styles.js';
+import './vaadin-menu-bar-list-box-styles.js';
 import './vaadin-menu-bar-overlay-styles.js';
 import './vaadin-menu-bar-styles.js';
-import '@vaadin/context-menu/theme/lumo/vaadin-context-menu.js';
+import '@vaadin/overlay/theme/lumo/vaadin-overlay.js';
 import '../../src/vaadin-menu-bar.js';

package/theme/material/vaadin-menu-bar-button-styles.js

@@ -6,7 +6,7 @@ const menuBarButton = css`
     width: 100%;
   }
 
-  [part='label'] ::slotted(vaadin-context-menu-item) {
+  [part='label'] ::slotted(vaadin-menu-bar-item) {
     line-height: 20px;
     background-color: transparent;
     margin: -8px;
@@ -19,8 +19,8 @@ const menuBarButton = css`
     border-radius: 0;
   }
 
-  :host([theme~='contained']) ::slotted(vaadin-context-menu-item),
-  :host([theme~='outlined']) ::slotted(vaadin-context-menu-item) {
+  :host([theme~='contained']) ::slotted(vaadin-menu-bar-item),
+  :host([theme~='outlined']) ::slotted(vaadin-menu-bar-item) {
     margin: -8px -16px;
     padding: 8px 16px;
   }

package/theme/material/vaadin-menu-bar-item-styles.js

@@ -1,23 +1,23 @@
 import '@vaadin/vaadin-material-styles/typography.js';
+import { contextMenuItem } from '@vaadin/context-menu/theme/material/vaadin-context-menu-item-styles.js';
+import { item } from '@vaadin/item/theme/material/vaadin-item-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-registerStyles(
-  'vaadin-context-menu-item',
-  css`
-    :host([theme='menu-bar-item']) [part='content'] {
-      display: flex;
-      /* tweak to inherit centering from menu bar button */
-      align-items: inherit;
-      justify-content: inherit;
-      font-size: var(--material-button-font-size);
-    }
+const menuBarItem = css`
+  [part='content'] {
+    display: flex;
+    /* tweak to inherit centering from menu bar button */
+    align-items: inherit;
+    justify-content: inherit;
+    font-size: var(--material-button-font-size);
+  }
 
-    :host([theme='menu-bar-item']) [part='content'] ::slotted(vaadin-icon[icon^='vaadin:']) {
-      display: inline-block;
-      width: 18px;
-      height: 18px;
-      box-sizing: border-box !important;
-    }
-  `,
-  { moduleId: 'material-menu-bar-item' },
-);
+  [part='content'] ::slotted(vaadin-icon[icon^='vaadin:']) {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    box-sizing: border-box !important;
+  }
+`;
+
+registerStyles('vaadin-menu-bar-item', [item, contextMenuItem, menuBarItem], { moduleId: 'material-menu-bar-item' });

package/theme/material/vaadin-menu-bar-list-box-styles.js

@@ -0,0 +1,5 @@
+import { contextMenuListBox } from '@vaadin/context-menu/theme/material/vaadin-context-menu-list-box-styles.js';
+import { listBox } from '@vaadin/list-box/theme/material/vaadin-list-box-styles.js';
+import { registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles('vaadin-menu-bar-list-box', [listBox, contextMenuListBox], { moduleId: 'material-menu-bar-list-box' });

package/theme/material/vaadin-menu-bar-overlay-styles.js

@@ -1,11 +1,13 @@
+import { contextMenuOverlay } from '@vaadin/context-menu/theme/material/vaadin-context-menu-overlay-styles.js';
+import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-registerStyles(
-  'vaadin-context-menu-overlay',
-  css`
-    :host(:first-of-type) {
-      padding-top: 5px;
-    }
-  `,
-  { moduleId: 'material-menu-bar-overlay' },
-);
+const menuBarOverlay = css`
+  :host(:first-of-type) {
+    padding-top: 5px;
+  }
+`;
+
+registerStyles('vaadin-menu-bar-overlay', [menuOverlay, contextMenuOverlay, menuBarOverlay], {
+  moduleId: 'material-menu-bar-overlay',
+});

package/theme/material/vaadin-menu-bar.js

@@ -1,6 +1,7 @@
 import './vaadin-menu-bar-button.js';
 import './vaadin-menu-bar-item-styles.js';
+import './vaadin-menu-bar-list-box-styles.js';
 import './vaadin-menu-bar-styles.js';
 import './vaadin-menu-bar-overlay-styles.js';
-import '@vaadin/context-menu/theme/material/vaadin-context-menu.js';
+import '@vaadin/overlay/theme/material/vaadin-overlay.js';
 import '../../src/vaadin-menu-bar.js';

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "24.0.0-alpha12",
+  "version": "24.0.0-alpha13",
   "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```\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\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/custom-theme/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/24.0.0-alpha12/#/elements/vaadin-button).\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-list-box).\n- `<vaadin-context-menu-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-overlay).",
+          "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```\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\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/custom-theme/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/24.0.0-alpha13/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-overlay).",
           "attributes": [
             {
               "name": "disabled",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "24.0.0-alpha12",
+  "version": "24.0.0-alpha13",
   "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```\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\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/custom-theme/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/24.0.0-alpha12/#/elements/vaadin-button).\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-list-box).\n- `<vaadin-context-menu-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha12/#/elements/vaadin-overlay).",
+          "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```\n<vaadin-menu-bar></vaadin-menu-bar>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-menu-bar#property-items) property to initialize the structure:\n\n```\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/custom-theme/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/24.0.0-alpha13/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-item).\n- `<vaadin-menu-bar-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.0.0-alpha13/#/elements/vaadin-overlay).",
           "extension": true,
           "attributes": [
             {