@vaadin/menu-bar 24.4.0-alpha9 → 24.4.0-beta2

package/README.md

@@ -5,7 +5,6 @@ A web component for creating a horizontal button bar with hierarchical drop-down
 [Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/menu-bar)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/menu-bar)](https://www.npmjs.com/package/@vaadin/menu-bar)
-[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
 ```html
 <vaadin-menu-bar></vaadin-menu-bar>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/menu-bar",
-  "version": "24.4.0-alpha9",
+  "version": "24.4.0-beta2",
   "publishConfig": {
     "access": "public"
   },
@@ -24,6 +24,8 @@
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",
+    "!vaadin-lit-*.d.ts",
+    "!vaadin-lit-*.js",
     "web-types.json",
     "web-types.lit.json"
   ],
@@ -37,20 +39,21 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/a11y-base": "24.4.0-alpha9",
-    "@vaadin/button": "24.4.0-alpha9",
-    "@vaadin/component-base": "24.4.0-alpha9",
-    "@vaadin/context-menu": "24.4.0-alpha9",
-    "@vaadin/item": "24.4.0-alpha9",
-    "@vaadin/list-box": "24.4.0-alpha9",
-    "@vaadin/overlay": "24.4.0-alpha9",
-    "@vaadin/vaadin-lumo-styles": "24.4.0-alpha9",
-    "@vaadin/vaadin-material-styles": "24.4.0-alpha9",
-    "@vaadin/vaadin-themable-mixin": "24.4.0-alpha9"
+    "@vaadin/a11y-base": "24.4.0-beta2",
+    "@vaadin/button": "24.4.0-beta2",
+    "@vaadin/component-base": "24.4.0-beta2",
+    "@vaadin/context-menu": "24.4.0-beta2",
+    "@vaadin/item": "24.4.0-beta2",
+    "@vaadin/list-box": "24.4.0-beta2",
+    "@vaadin/overlay": "24.4.0-beta2",
+    "@vaadin/vaadin-lumo-styles": "24.4.0-beta2",
+    "@vaadin/vaadin-material-styles": "24.4.0-beta2",
+    "@vaadin/vaadin-themable-mixin": "24.4.0-beta2",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/icon": "24.4.0-alpha9",
+    "@vaadin/icon": "24.4.0-beta2",
     "@vaadin/testing-helpers": "^0.6.0",
     "sinon": "^13.0.2"
   },
@@ -58,5 +61,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "effb81abe3c6283a6ec620cc0cee56069af58226"
+  "gitHead": "886ab2e7ccb8353ac3b7a42ebb96dfe2d1211556"
 }

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

@@ -0,0 +1,58 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { Button } from '@vaadin/button/src/vaadin-lit-button.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { css } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends Button
+ * @private
+ */
+class MenuBarButton extends Button {
+  static get is() {
+    return 'vaadin-menu-bar-button';
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          flex-shrink: 0;
+        }
+
+        :host([slot='overflow']) {
+          margin-inline-end: 0;
+        }
+
+        [part='label'] ::slotted(vaadin-menu-bar-item) {
+          position: relative;
+          z-index: 1;
+        }
+      `,
+    ];
+  }
+
+  /**
+   * Override method inherited from `ButtonMixin` to set a flag based on whether the key
+   * is Enter and Space. Unlike mouse click, these keys should also focus the first item.
+   * This flag is used in menu bar to identify the action that triggered the click.
+   *
+   * @param {KeyboardEvent} event
+   * @protected
+   * @override
+   */
+  _onKeyDown(event) {
+    this.__triggeredWithActiveKeys = this._activeKeys.includes(event.key);
+    super._onKeyDown(event);
+    this.__triggeredWithActiveKeys = null;
+  }
+}
+
+defineCustomElement(MenuBarButton);

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

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-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.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes DirMixin
+ * @mixes ItemMixin
+ * @mixes ThemableMixin
+ * @protected
+ */
+class MenuBarItem extends ItemMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-menu-bar-item';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: inline-block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <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');
+  }
+}
+
+defineCustomElement(MenuBarItem);
+
+export { MenuBarItem };

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

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, html, LitElement } from 'lit';
+import { ListMixin } from '@vaadin/a11y-base/src/list-mixin.js';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-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.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes DirMixin
+ * @mixes ListMixin
+ * @mixes ThemableMixin
+ * @protected
+ */
+class MenuBarListBox extends ListMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-menu-bar-list-box';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      [part='items'] {
+        height: 100%;
+        width: 100%;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+      }
+    `;
+  }
+
+  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: {
+        type: String,
+        readOnly: true,
+      },
+    };
+  }
+
+  /**
+   * @return {!HTMLElement}
+   * @protected
+   * @override
+   */
+  get _scrollerElement() {
+    return this.shadowRoot.querySelector('[part="items"]');
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div part="items">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this.setAttribute('role', 'menu');
+  }
+}
+
+defineCustomElement(MenuBarListBox);
+
+export { MenuBarListBox };

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

@@ -0,0 +1,65 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+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 { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.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.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes DirMixin
+ * @mixes MenuOverlayMixin
+ * @mixes OverlayMixin
+ * @mixes ThemableMixin
+ * @protected
+ */
+export class MenuBarOverlay extends MenuOverlayMixin(OverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement))))) {
+  static get is() {
+    return 'vaadin-menu-bar-overlay';
+  }
+
+  static get properties() {
+    return {
+      /**
+       * When true, the overlay is visible and attached to body.
+       * This property config is overridden to set `sync: true`.
+       */
+      opened: {
+        type: Boolean,
+        notify: true,
+        observer: '_openedChanged',
+        reflectToAttribute: true,
+        sync: true,
+      },
+    };
+  }
+
+  static get styles() {
+    return [overlayStyles, styles];
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="backdrop" part="backdrop" ?hidden="${!this.withBackdrop}"></div>
+      <div part="overlay" id="overlay" tabindex="0">
+        <div part="content" id="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(MenuBarOverlay);

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

@@ -0,0 +1,93 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-menu-bar-item.js';
+import './vaadin-lit-menu-bar-list-box.js';
+import './vaadin-lit-menu-bar-overlay.js';
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { OverlayClassMixin } from '@vaadin/component-base/src/overlay-class-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { ContextMenuMixin } from '@vaadin/context-menu/src/vaadin-context-menu-mixin.js';
+import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+
+/**
+ * An element used internally by `<vaadin-menu-bar>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ContextMenuMixin
+ * @mixes OverlayClassMixin
+ * @mixes ThemePropertyMixin
+ * @protected
+ */
+class MenuBarSubmenu extends ContextMenuMixin(OverlayClassMixin(ThemePropertyMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-menu-bar-submenu';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  constructor() {
+    super();
+
+    this.openOn = 'opensubmenu';
+  }
+
+  /**
+   * Tag name prefix used by overlay, list-box and items.
+   * @protected
+   * @return {string}
+   */
+  get _tagNamePrefix() {
+    return 'vaadin-menu-bar';
+  }
+
+  /** @protected */
+  render() {
+    return html`<slot id="slot"></slot>`;
+  }
+
+  /**
+   * @protected
+   * @override
+   */
+  createRenderRoot() {
+    const root = super.createRenderRoot();
+    root.appendChild(this._overlayElement);
+    return root;
+  }
+
+  /**
+   * Overriding the observer to not add global "contextmenu" listener.
+   */
+  _openedChanged(opened) {
+    this._overlayElement.opened = opened;
+  }
+
+  /**
+   * Overriding the public method to reset expanded button state.
+   */
+  close() {
+    super.close();
+
+    // Only handle 1st level submenu
+    if (this.hasAttribute('is-root')) {
+      this.getRootNode().host._close();
+    }
+  }
+}
+
+defineCustomElement(MenuBarSubmenu);

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

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright (c) 2019 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-menu-bar-submenu.js';
+import './vaadin-lit-menu-bar-button.js';
+import { css, 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 { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MenuBarMixin } from './vaadin-menu-bar-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-menu-bar>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ */
+class MenuBar extends MenuBarMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-menu-bar';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      [part='container'] {
+        position: relative;
+        display: flex;
+        width: 100%;
+        flex-wrap: nowrap;
+        overflow: hidden;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div part="container">
+        <slot></slot>
+        <slot name="overflow"></slot>
+      </div>
+      <vaadin-menu-bar-submenu is-root .overlayClass="${this.overlayClass}"></vaadin-menu-bar-submenu>
+
+      <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);
+
+export { MenuBar };

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

@@ -37,6 +37,19 @@ class MenuBarButton extends Button {
   static get is() {
     return 'vaadin-menu-bar-button';
   }
+
+  /**
+   * Override method inherited from `ButtonMixin`. Sets a flag based on whether the key is an active key. Unlike a mouse click, Enter and Space should also focus the first item. This flag is used in menu bar to identify the action that triggered the click.
+   *
+   * @param {KeyboardEvent} event
+   * @protected
+   * @override
+   */
+  _onKeyDown(event) {
+    this.__triggeredWithActiveKeys = this._activeKeys.includes(event.key);
+    super._onKeyDown(event);
+    this.__triggeredWithActiveKeys = null;
+  }
 }
 
 defineCustomElement(MenuBarButton);

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

@@ -138,6 +138,13 @@ export declare class MenuBarMixinClass {
    */
   openOnHover: boolean | null | undefined;
 
+  /**
+   * If true, the buttons will be collapsed into the overflow menu
+   * starting from the "start" end of the bar instead of the "end".
+   * @attr {boolean} reverse-collapse
+   */
+  reverseCollapse: boolean | null | undefined;
+
   /**
    * Closes the current submenu.
    */

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

@@ -135,6 +135,15 @@ export const MenuBarMixin = (superClass) =>
           type: Boolean,
         },
 
+        /**
+         * If true, the buttons will be collapsed into the overflow menu
+         * starting from the "start" end of the bar instead of the "end".
+         * @attr {boolean} reverse-collapse
+         */
+        reverseCollapse: {
+          type: Boolean,
+        },
+
         /**
          * @type {boolean}
          * @protected
@@ -142,6 +151,7 @@ export const MenuBarMixin = (superClass) =>
         _hasOverflow: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /** @protected */
@@ -162,12 +172,14 @@ export const MenuBarMixin = (superClass) =>
         '__hasOverflowChanged(_hasOverflow, _overflow)',
         '__i18nChanged(i18n, _overflow)',
         '_menuItemsChanged(items, _overflow, _container)',
+        '_reverseCollapseChanged(reverseCollapse, _overflow, _container)',
       ];
     }
 
     constructor() {
       super();
       this.__boundOnContextMenuKeydown = this.__onContextMenuKeydown.bind(this);
+      this.__boundOnTooltipMouseLeave = this.__onTooltipOverlayMouseLeave.bind(this);
     }
 
     /**
@@ -251,7 +263,12 @@ export const MenuBarMixin = (superClass) =>
       container.addEventListener('click', this.__onButtonClick.bind(this));
       container.addEventListener('mouseover', (e) => this._onMouseOver(e));
 
-      this._container = container;
+      // Delay setting container to avoid rendering buttons immediately,
+      // which would also trigger detecting overflow and force re-layout
+      // See https://github.com/vaadin/web-components/issues/7271
+      queueMicrotask(() => {
+        this._container = container;
+      });
     }
 
     /**
@@ -320,6 +337,18 @@ export const MenuBarMixin = (superClass) =>
       }
     }
 
+    /**
+     * A callback for the 'reverseCollapse' property observer.
+     *
+     * @param {boolean | null} _reverseCollapse
+     * @private
+     */
+    _reverseCollapseChanged(_reverseCollapse, overflow, container) {
+      if (overflow && container) {
+        this.__detectOverflow();
+      }
+    }
+
     /** @private */
     __hasOverflowChanged(hasOverflow, overflow) {
       if (overflow) {
@@ -408,42 +437,47 @@ export const MenuBarMixin = (superClass) =>
         this._hasOverflow = true;
 
         const isRTL = this.__isRTL;
-        const containerLeft = container.getBoundingClientRect().left;
+        const containerLeft = container.offsetLeft;
 
-        let i;
-        for (i = buttons.length; i > 0; i--) {
-          const btn = buttons[i - 1];
-          const btnStyle = getComputedStyle(btn);
-          const btnLeft = btn.getBoundingClientRect().left - containerLeft;
+        const remaining = [...buttons];
+        while (remaining.length) {
+          const lastButton = remaining[remaining.length - 1];
+          const btnLeft = lastButton.offsetLeft - containerLeft;
 
           // If this button isn't overflowing, then the rest aren't either
           if (
-            (!isRTL && btnLeft + btn.offsetWidth < container.offsetWidth - overflow.offsetWidth) ||
+            (!isRTL && btnLeft + lastButton.offsetWidth < container.offsetWidth - overflow.offsetWidth) ||
             (isRTL && btnLeft >= overflow.offsetWidth)
           ) {
             break;
           }
 
+          const btn = this.reverseCollapse ? remaining.shift() : remaining.pop();
+
+          // Save width for buttons with component
+          btn.style.width = getComputedStyle(btn).width;
           btn.disabled = true;
           btn.style.visibility = 'hidden';
           btn.style.position = 'absolute';
-          // Save width for buttons with component
-          btn.style.width = btnStyle.width;
         }
-        const items = buttons.filter((_, idx) => idx >= i).map((b) => b.item);
+
+        const items = buttons.filter((b) => !remaining.includes(b)).map((b) => b.item);
         this.__updateOverflow(items);
 
-        const remaining = buttons.slice(0, i);
         // Ensure there is at least one button with tabindex set to 0
         // so that menu-bar is not skipped when navigating with Tab
-        if (i > 0 && !remaining.some((btn) => btn.getAttribute('tabindex') === '0')) {
-          this._setTabindex(remaining[i - 1], true);
+        if (remaining.length && !remaining.some((btn) => btn.getAttribute('tabindex') === '0')) {
+          this._setTabindex(remaining[remaining.length - 1], true);
         }
       }
     }
 
     /** @private */
     __detectOverflow() {
+      if (!this._container) {
+        return;
+      }
+
       const overflow = this._overflow;
       const buttons = this._buttons.filter((btn) => btn !== overflow);
       const oldOverflowCount = this.__getOverflowCount(overflow);
@@ -461,6 +495,14 @@ export const MenuBarMixin = (superClass) =>
 
       const isSingleButton = newOverflowCount === buttons.length || (newOverflowCount === 0 && buttons.length === 1);
       this.toggleAttribute('has-single-button', isSingleButton);
+
+      // Apply first/last visible attributes to the visible buttons
+      buttons
+        .filter((btn) => btn.style.visibility !== 'hidden')
+        .forEach((btn, index, visibleButtons) => {
+          btn.toggleAttribute('first-visible', index === 0);
+          btn.toggleAttribute('last-visible', !this._hasOverflow && index === visibleButtons.length - 1);
+        });
     }
 
     /** @protected */
@@ -583,6 +625,11 @@ export const MenuBarMixin = (superClass) =>
           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 });
@@ -604,6 +651,13 @@ export const MenuBarMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    __onTooltipOverlayMouseLeave(event) {
+      if (event.relatedTarget !== this._tooltipController.target) {
+        this._hideTooltip();
+      }
+    }
+
     /** @protected */
     _setExpanded(button, expanded) {
       button.toggleAttribute('expanded', expanded);
@@ -799,7 +853,7 @@ export const MenuBarMixin = (superClass) =>
       e.stopPropagation();
       const button = this._getButtonFromEvent(e);
       if (button) {
-        this.__openSubMenu(button, false);
+        this.__openSubMenu(button, button.__triggeredWithActiveKeys);
       }
     }
 
@@ -824,7 +878,9 @@ export const MenuBarMixin = (superClass) =>
       subMenu.items = items;
       subMenu.listenOn = button;
       const overlay = subMenu._overlayElement;
-      overlay.positionTarget = button;
+      // Unset old positioning to prevent flashing.
+      overlay.removeAttribute('style');
+      overlay.positionTarget = undefined;
       overlay.noVerticalOverlap = true;
 
       this._expandedButton = button;
@@ -860,6 +916,9 @@ export const MenuBarMixin = (superClass) =>
             overlay.$.overlay.focus();
           }
 
+          // Delay setting position target until overlay is rendered
+          // to correctly measure item content in Lit based version.
+          overlay.positionTarget = button;
           overlay._updatePosition();
         },
         { once: true },

package/theme/lumo/vaadin-lit-menu-bar.d.ts

@@ -0,0 +1,6 @@
+import './vaadin-menu-bar-button-styles.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 '../../src/vaadin-lit-menu-bar.js';

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

@@ -0,0 +1,6 @@
+import './vaadin-menu-bar-button-styles.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 '../../src/vaadin-lit-menu-bar.js';

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

@@ -46,14 +46,14 @@ const menuBarButton = css`
     padding: 0;
   }
 
-  :host(:first-of-type) {
+  :host([first-visible]) {
     border-radius: var(--lumo-border-radius-m) 0 0 var(--lumo-border-radius-m);
 
     /* Needed to retain the focus-ring with border-radius */
     margin-left: calc(var(--lumo-space-xs) / 2);
   }
 
-  :host(:nth-last-of-type(2)),
+  :host([last-visible]),
   :host([slot='overflow']) {
     border-radius: 0 var(--lumo-border-radius-m) var(--lumo-border-radius-m) 0;
   }
@@ -86,12 +86,12 @@ const menuBarButton = css`
     border-radius: 0;
   }
 
-  :host([dir='rtl']:first-of-type) {
+  :host([dir='rtl'][first-visible]) {
     border-radius: 0 var(--lumo-border-radius-m) var(--lumo-border-radius-m) 0;
     margin-right: calc(var(--lumo-space-xs) / 2);
   }
 
-  :host([dir='rtl']:nth-last-of-type(2)),
+  :host([dir='rtl'][last-visible]),
   :host([dir='rtl'][slot='overflow']) {
     border-radius: var(--lumo-border-radius-m) 0 0 var(--lumo-border-radius-m);
   }

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

@@ -8,7 +8,7 @@ registerStyles(
       border-radius: var(--lumo-border-radius-m);
     }
 
-    :host([theme~='end-aligned']) ::slotted(vaadin-menu-bar-button:first-of-type),
+    :host([theme~='end-aligned']) ::slotted(vaadin-menu-bar-button[first-visible]),
     :host([theme~='end-aligned'][has-single-button]) ::slotted(vaadin-menu-bar-button) {
       margin-inline-start: auto;
     }

package/theme/material/vaadin-lit-menu-bar.d.ts

@@ -0,0 +1,6 @@
+import './vaadin-menu-bar-button-styles.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 '../../src/vaadin-lit-menu-bar.js';

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

@@ -0,0 +1,6 @@
+import './vaadin-menu-bar-button-styles.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 '../../src/vaadin-lit-menu-bar.js';

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

@@ -49,11 +49,11 @@ const menuBarButton = css`
     margin-right: 1px;
   }
 
-  :host(:first-of-type) {
+  :host([first-visible]) {
     border-radius: 4px 0 0 4px;
   }
 
-  :host(:nth-last-of-type(2)),
+  :host([last-visible]),
   :host([slot='overflow']) {
     border-radius: 0 4px 4px 0;
   }
@@ -72,7 +72,7 @@ const menuBarButton = css`
     margin-right: -1px;
   }
 
-  :host([theme~='outlined']:not([dir='rtl']):nth-last-of-type(2)),
+  :host([theme~='outlined']:not([dir='rtl'])[last-visible]),
   :host([theme~='outlined']:not([dir='rtl'])[slot='overflow']) {
     margin-right: 0;
   }
@@ -83,11 +83,11 @@ const menuBarButton = css`
   }
 
   /* RTL styles */
-  :host([dir='rtl']:first-of-type) {
+  :host([dir='rtl'][first-visible]) {
     border-radius: 0 4px 4px 0;
   }
 
-  :host([dir='rtl']:nth-last-of-type(2)),
+  :host([dir='rtl'][last-visible]),
   :host([dir='rtl'][slot='overflow']) {
     border-radius: 4px 0 0 4px;
   }
@@ -100,7 +100,7 @@ const menuBarButton = css`
     margin-left: -1px;
   }
 
-  :host([theme~='outlined'][dir='rtl']:nth-last-of-type(2)),
+  :host([theme~='outlined'][dir='rtl'][last-visible]),
   :host([theme~='outlined'][dir='rtl'][slot='overflow']) {
     margin-left: 0;
   }

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

@@ -12,7 +12,7 @@ registerStyles(
       border-radius: 4px;
     }
 
-    :host([theme~='end-aligned']) ::slotted(vaadin-menu-bar-button:first-of-type),
+    :host([theme~='end-aligned']) ::slotted(vaadin-menu-bar-button[first-visible]),
     :host([theme~='end-aligned'][has-single-button]) ::slotted(vaadin-menu-bar-button) {
       margin-inline-start: auto;
     }

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "24.4.0-alpha9",
+  "version": "24.4.0-beta2",
   "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.4.0-alpha9/#/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/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.4.0-alpha9/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.4.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/24.4.0-alpha9/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/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.4.0-beta2/#/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/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.4.0-beta2/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta2/#/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.4.0-beta2/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta2/#/elements/vaadin-overlay).",
           "attributes": [
             {
               "name": "disabled",
@@ -43,6 +43,17 @@
                 ]
               }
             },
+            {
+              "name": "reverse-collapse",
+              "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"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -107,6 +118,17 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "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": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "24.4.0-alpha9",
+  "version": "24.4.0-beta2",
   "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.4.0-alpha9/#/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/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.4.0-alpha9/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.4.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/24.4.0-alpha9/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-alpha9/#/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.4.0-beta2/#/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/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.4.0-beta2/#/elements/vaadin-button).\n- `<vaadin-menu-bar-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta2/#/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.4.0-beta2/#/elements/vaadin-list-box).\n- `<vaadin-menu-bar-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/24.4.0-beta2/#/elements/vaadin-overlay).",
           "extension": true,
           "attributes": [
             {
@@ -33,6 +33,13 @@
                 "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\".",
+              "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```",