@vaadin/menu-bar 23.3.0-alpha2 → 24.0.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/menu-bar",
-  "version": "23.3.0-alpha2",
+  "version": "24.0.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,16 +37,16 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.3.0-alpha2",
-    "@vaadin/component-base": "23.3.0-alpha2",
-    "@vaadin/context-menu": "23.3.0-alpha2",
-    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha2",
-    "@vaadin/vaadin-material-styles": "23.3.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha2"
+    "@vaadin/button": "24.0.0-alpha1",
+    "@vaadin/component-base": "24.0.0-alpha1",
+    "@vaadin/context-menu": "24.0.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "24.0.0-alpha1",
+    "@vaadin/vaadin-material-styles": "24.0.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "24.0.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/icon": "23.3.0-alpha2",
+    "@vaadin/icon": "24.0.0-alpha1",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
@@ -54,5 +54,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "ae61027c62ffa7f7d70cfc50e43f333addfc74b6"
+  "gitHead": "427527c27c4b27822d61fd41d38d7b170134770b"
 }

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

@@ -9,6 +9,14 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-menu-bar-button',
   css`
+    :host {
+      flex-shrink: 0;
+    }
+
+    :host([slot='overflow']) {
+      margin-inline-end: 0;
+    }
+
     [part='label'] ::slotted(vaadin-context-menu-item) {
       position: relative;
       z-index: 1;

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

@@ -4,11 +4,12 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import type { ResizeMixinClass } from '@vaadin/component-base/src/resize-mixin.js';
 
 export declare function ButtonsMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<ButtonsMixinClass> & Constructor<ResizeMixinClass> & T;
+): Constructor<ButtonsMixinClass> & Constructor<ControllerMixinClass> & Constructor<ResizeMixinClass> & T;
 
 export declare class ButtonsMixinClass {
   protected readonly _buttons: HTMLElement[];

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

@@ -3,14 +3,17 @@
  * Copyright (c) 2019 - 2022 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 { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 
 /**
  * @polymerMixin
  * @mixes ResizeMixin
+ * @mixes ControllerMixin
  */
 export const ButtonsMixin = (superClass) =>
-  class extends ResizeMixin(superClass) {
+  class extends ResizeMixin(ControllerMixin(superClass)) {
     static get properties() {
       return {
         /**
@@ -21,11 +24,20 @@ export const ButtonsMixin = (superClass) =>
           type: Boolean,
           value: false,
         },
+
+        /** @protected */
+        _overflow: {
+          type: Object,
+        },
       };
     }
 
     static get observers() {
-      return ['_menuItemsChanged(items, items.splices)'];
+      return [
+        '__hasOverflowChanged(_hasOverflow, _overflow)',
+        '__i18nChanged(i18n, _overflow)',
+        '_menuItemsChanged(items, _overflow, items.splices)',
+      ];
     }
 
     /**
@@ -43,13 +55,24 @@ export const ButtonsMixin = (superClass) =>
       super.ready();
 
       this.setAttribute('role', 'menubar');
-    }
 
-    /** @protected */
-    connectedCallback() {
-      super.connectedCallback();
+      this._overflowController = new SlotController(
+        this,
+        'overflow',
+        () => document.createElement('vaadin-menu-bar-button'),
+        (_, btn) => {
+          btn.setAttribute('hidden', '');
 
-      this._initButtonAttrs(this._overflow);
+          const dots = document.createElement('div');
+          dots.setAttribute('aria-hidden', 'true');
+          dots.textContent = '···';
+          btn.appendChild(dots);
+
+          this._overflow = btn;
+          this._initButtonAttrs(btn);
+        },
+      );
+      this.addController(this._overflowController);
     }
 
     /**
@@ -57,7 +80,7 @@ export const ButtonsMixin = (superClass) =>
      * @protected
      */
     get _buttons() {
-      return Array.from(this.shadowRoot.querySelectorAll('[part$="button"]'));
+      return Array.from(this.querySelectorAll('vaadin-menu-bar-button'));
     }
 
     /**
@@ -68,22 +91,36 @@ export const ButtonsMixin = (superClass) =>
       return this.shadowRoot.querySelector('[part="container"]');
     }
 
-    /**
-     * @return {!HTMLElement}
-     * @protected
-     */
-    get _overflow() {
-      return this.shadowRoot.querySelector('[part="overflow-button"]');
+    /** @private */
+    __hasOverflowChanged(hasOverflow, overflow) {
+      if (overflow) {
+        overflow.toggleAttribute('hidden', !hasOverflow);
+      }
     }
 
     /** @private */
-    _menuItemsChanged(items) {
+    _menuItemsChanged(items, overflow) {
+      if (!overflow) {
+        return;
+      }
+
       if (items !== this._oldItems) {
         this._oldItems = items;
         this.__renderButtons(items);
       }
     }
 
+    /** @private */
+    __i18nChanged(i18n, overflow) {
+      if (overflow && i18n && i18n.moreOptions !== undefined) {
+        if (i18n.moreOptions) {
+          overflow.setAttribute('aria-label', i18n.moreOptions);
+        } else {
+          overflow.removeAttribute('aria-label');
+        }
+      }
+    }
+
     /** @private */
     __getOverflowCount(overflow) {
       // We can't use optional chaining due to webpack 4
@@ -170,17 +207,16 @@ export const ButtonsMixin = (superClass) =>
 
     /** @protected */
     _removeButtons() {
-      const container = this._container;
-
-      while (container.children.length > 1) {
-        container.removeChild(container.firstElementChild);
-      }
+      this._buttons.forEach((button) => {
+        if (button !== this._overflow) {
+          this.removeChild(button);
+        }
+      });
     }
 
     /** @protected */
     _initButton(item) {
       const button = document.createElement('vaadin-menu-bar-button');
-      button.setAttribute('part', 'menu-bar-button');
 
       const itemCopy = { ...item };
       button.item = itemCopy;
@@ -231,11 +267,6 @@ export const ButtonsMixin = (superClass) =>
       }
     }
 
-    /** @protected */
-    _appendButton(button) {
-      this._container.insertBefore(button, this._overflow);
-    }
-
     /** @private */
     __getComponent(item) {
       const itemComponent = item.component;
@@ -268,7 +299,7 @@ export const ButtonsMixin = (superClass) =>
 
       items.forEach((item) => {
         const button = this._initButton(item);
-        this._appendButton(button);
+        this.insertBefore(button, this._overflow);
         this._setButtonDisabled(button, item.disabled);
         this._initButtonAttrs(button);
         this._setButtonTheme(button, this._theme);

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

@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
-import { isKeyboardActive } from '@vaadin/component-base/src/focus-utils.js';
+import { isElementFocused, isKeyboardActive } from '@vaadin/component-base/src/focus-utils.js';
 import { KeyboardDirectionMixin } from '@vaadin/component-base/src/keyboard-direction-mixin.js';
 
 /**
@@ -47,7 +47,6 @@ export const InteractionsMixin = (superClass) =>
 
       const overlay = this._subMenu.$.overlay;
       overlay.addEventListener('keydown', this.__boundOnContextMenuKeydown);
-      overlay.addEventListener('vaadin-overlay-open', this.__alignOverlayPosition.bind(this));
 
       const container = this._container;
       container.addEventListener('click', this.__onButtonClick.bind(this));
@@ -56,15 +55,15 @@ export const InteractionsMixin = (superClass) =>
 
     /**
      * Override getter from `KeyboardDirectionMixin`
-     * to look for activeElement in shadow root, or
-     * use the expanded button as a fallback.
+     * to use expanded button for arrow navigation
+     * when the sub-menu is opened and has focus.
      *
      * @return {Element | null}
      * @protected
      * @override
      */
     get focused() {
-      return this.shadowRoot.activeElement || this._expandedButton;
+      return (this._getItems() || []).find(isElementFocused) || this._expandedButton;
     }
 
     /**
@@ -90,22 +89,17 @@ export const InteractionsMixin = (superClass) =>
       return this._buttons;
     }
 
-    /** @private */
-    get __isRTL() {
-      return this.getAttribute('dir') === 'rtl';
-    }
-
     /** @protected */
     disconnectedCallback() {
       super.disconnectedCallback();
-      this._hideTooltip();
+      this._hideTooltip(true);
     }
 
     /**
      * @param {HTMLElement} button
      * @protected
      */
-    _showTooltip(button) {
+    _showTooltip(button, isHover) {
       // Check if there is a slotted vaadin-tooltip element.
       const tooltip = this._tooltipController.node;
       if (tooltip && tooltip.isConnected) {
@@ -118,14 +112,22 @@ export const InteractionsMixin = (superClass) =>
         if (!this._subMenu.opened) {
           this._tooltipController.setTarget(button);
           this._tooltipController.setContext({ item: button.item });
-          this._tooltipController.setOpened(true);
+
+          // Trigger opening using the corresponding delay.
+          tooltip._stateController.open({
+            hover: isHover,
+            focus: !isHover,
+          });
         }
       }
     }
 
     /** @protected */
-    _hideTooltip() {
-      this._tooltipController.setOpened(false);
+    _hideTooltip(immediate) {
+      const tooltip = this._tooltipController && this._tooltipController.node;
+      if (tooltip) {
+        tooltip._stateController.close(immediate);
+      }
     }
 
     /** @protected */
@@ -185,7 +187,7 @@ export const InteractionsMixin = (superClass) =>
      */
     _setFocused(focused) {
       if (focused) {
-        const target = this.shadowRoot.querySelector('[part$="button"][tabindex="0"]');
+        const target = this.querySelector('[tabindex="0"]');
         if (target) {
           this._buttons.forEach((btn) => {
             this._setTabindex(btn, btn === target);
@@ -247,7 +249,7 @@ export const InteractionsMixin = (superClass) =>
         this._close(true);
       }
 
-      this._hideTooltip();
+      this._hideTooltip(true);
     }
 
     /**
@@ -276,30 +278,6 @@ export const InteractionsMixin = (superClass) =>
       return this.shadowRoot.querySelector('vaadin-menu-bar-submenu');
     }
 
-    /** @private */
-    __alignOverlayPosition(e) {
-      /* c8 ignore next */
-      if (!this._expandedButton) {
-        // When `openOnHover` is true, quickly moving cursor can close submenu,
-        // so by the time when event listener gets executed button is null.
-        // See https://github.com/vaadin/vaadin-menu-bar/issues/85
-        return;
-      }
-      const overlay = e.target;
-      const { width, height, left } = this._expandedButton.getBoundingClientRect();
-      if (overlay.hasAttribute('bottom-aligned')) {
-        overlay.style.bottom = `${parseInt(getComputedStyle(overlay).bottom) + height}px`;
-      }
-      const endAligned = overlay.hasAttribute('end-aligned');
-      if (endAligned) {
-        if (this.__isRTL) {
-          overlay.style.left = `${left}px`;
-        } else {
-          overlay.style.right = `${parseInt(getComputedStyle(overlay).right) - width}px`;
-        }
-      }
-    }
-
     /** @private */
     _itemsChanged() {
       const subMenu = this._subMenu;
@@ -328,7 +306,7 @@ export const InteractionsMixin = (superClass) =>
         if (button === this._overflow || (this.openOnHover && button.item.children)) {
           this._hideTooltip();
         } else {
-          this._showTooltip(button);
+          this._showTooltip(button, true);
         }
       }
     }
@@ -398,7 +376,7 @@ export const InteractionsMixin = (superClass) =>
             },
           }),
         );
-        this._hideTooltip();
+        this._hideTooltip(true);
 
         this._setExpanded(button, true);
       });

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

@@ -3,7 +3,6 @@
  * Copyright (c) 2019 - 2022 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 { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -87,8 +86,6 @@ export interface MenuBarEventMap extends HTMLElementEventMap, MenuBarCustomEvent
  * Part name         | Description
  * ------------------|----------------
  * `container`       | The container wrapping menu bar buttons.
- * `menu-bar-button` | The menu bar button.
- * `overflow-button` | The "overflow" button appearing when menu bar width is not enough to fit all the buttons.
  *
  * The following state attributes are available for styling:
  *
@@ -111,9 +108,7 @@ export interface MenuBarEventMap extends HTMLElementEventMap, MenuBarCustomEvent
  *
  * @fires {CustomEvent} item-selected - Fired when a submenu item or menu bar button without children is clicked.
  */
-declare class MenuBar extends ButtonsMixin(
-  DisabledMixin(InteractionsMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement))))),
-) {
+declare class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(ElementMixin(ThemableMixin(HTMLElement))))) {
   /**
    * Defines a hierarchical structure, where root level items represent menu bar buttons,
    * and `children` property configures a submenu with items to be opened below

package/src/vaadin-menu-bar.js

@@ -6,7 +6,6 @@
 import './vaadin-menu-bar-submenu.js';
 import './vaadin-menu-bar-button.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { DisabledMixin } from '@vaadin/component-base/src/disabled-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
@@ -38,8 +37,6 @@ import { InteractionsMixin } from './vaadin-menu-bar-interactions-mixin.js';
  * Part name         | Description
  * ------------------|----------------
  * `container`       | The container wrapping menu bar buttons.
- * `menu-bar-button` | The menu bar button.
- * `overflow-button` | The "overflow" button appearing when menu bar width is not enough to fit all the buttons.
  *
  * The following state attributes are available for styling:
  *
@@ -63,16 +60,13 @@ import { InteractionsMixin } from './vaadin-menu-bar-interactions-mixin.js';
  * @fires {CustomEvent<boolean>} item-selected - Fired when a submenu item or menu bar button without children is clicked.
  *
  * @extends HTMLElement
- * @mixes ControllerMixin
  * @mixes ButtonsMixin
  * @mixes InteractionsMixin
  * @mixes DisabledMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class MenuBar extends ButtonsMixin(
-  DisabledMixin(InteractionsMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement))))),
-) {
+class MenuBar extends ButtonsMixin(DisabledMixin(InteractionsMixin(ElementMixin(ThemableMixin(PolymerElement))))) {
   static get template() {
     return html`
       <style>
@@ -91,27 +85,11 @@ class MenuBar extends ButtonsMixin(
           flex-wrap: nowrap;
           overflow: hidden;
         }
-
-        [part$='button'] {
-          flex-shrink: 0;
-        }
-
-        [part='overflow-button'] {
-          margin-right: 0;
-        }
-
-        .dots::before {
-          display: block;
-          content: '\\00B7\\00B7\\00B7';
-          font-size: inherit;
-          line-height: inherit;
-        }
       </style>
 
       <div part="container">
-        <vaadin-menu-bar-button part="overflow-button" hidden$="[[!_hasOverflow]]" aria-label$="[[i18n.moreOptions]]">
-          <div class="dots"></div>
-        </vaadin-menu-bar-button>
+        <slot></slot>
+        <slot name="overflow"></slot>
       </div>
       <vaadin-menu-bar-submenu is-root=""></vaadin-menu-bar-submenu>
 
@@ -219,7 +197,7 @@ class MenuBar extends ButtonsMixin(
   }
 
   static get observers() {
-    return ['_themeChanged(_theme)'];
+    return ['_themeChanged(_theme, _overflow)'];
   }
 
   /** @protected */
@@ -255,8 +233,8 @@ class MenuBar extends ButtonsMixin(
    * @param {string | null} theme
    * @protected
    */
-  _themeChanged(theme) {
-    if (this.shadowRoot) {
+  _themeChanged(theme, overflow) {
+    if (overflow) {
       this._buttons.forEach((btn) => this._setButtonTheme(btn, theme));
       this.__detectOverflow();
     }

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

@@ -54,7 +54,7 @@ const menuBarButton = css`
   }
 
   :host(:nth-last-of-type(2)),
-  :host([part='overflow-button']) {
+  :host([slot='overflow']) {
     border-radius: 0 var(--lumo-border-radius-m) var(--lumo-border-radius-m) 0;
   }
 
@@ -63,18 +63,18 @@ const menuBarButton = css`
     border-radius: var(--lumo-border-radius-m);
   }
 
-  :host([part='overflow-button']) {
+  :host([slot='overflow']) {
     min-width: var(--lumo-button-size);
     padding-left: calc(var(--lumo-button-size) / 4);
     padding-right: calc(var(--lumo-button-size) / 4);
   }
 
-  :host([part='overflow-button']) ::slotted(*) {
+  :host([slot='overflow']) ::slotted(*) {
     font-size: var(--lumo-font-size-xl);
   }
 
-  :host([part='overflow-button']) [part='prefix'],
-  :host([part='overflow-button']) [part='suffix'] {
+  :host([slot='overflow']) [part='prefix'],
+  :host([slot='overflow']) [part='suffix'] {
     margin-left: 0;
     margin-right: 0;
   }
@@ -92,7 +92,7 @@ const menuBarButton = css`
   }
 
   :host([dir='rtl']:nth-last-of-type(2)),
-  :host([dir='rtl'][part='overflow-button']) {
+  :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

@@ -4,12 +4,12 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themab
 registerStyles(
   'vaadin-menu-bar',
   css`
-    :host([has-single-button]) [part$='button'] {
+    :host([has-single-button]) ::slotted(vaadin-menu-bar-button) {
       border-radius: var(--lumo-border-radius-m);
     }
 
-    :host([theme~='end-aligned']) [part$='button']:first-child,
-    :host([theme~='end-aligned'][has-single-button]) [part$='button'] {
+    :host([theme~='end-aligned']) ::slotted(vaadin-menu-bar-button:first-of-type),
+    :host([theme~='end-aligned'][has-single-button]) ::slotted(vaadin-menu-bar-button) {
       margin-inline-start: auto;
     }
   `,

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

@@ -54,17 +54,17 @@ const menuBarButton = css`
   }
 
   :host(:nth-last-of-type(2)),
-  :host([part~='overflow-button']) {
+  :host([slot='overflow']) {
     border-radius: 0 4px 4px 0;
   }
 
-  :host([part='overflow-button']) {
+  :host([slot='overflow']) {
     padding-right: 8px;
     padding-left: 8px;
     min-width: 36px;
   }
 
-  :host([part='overflow-button']) ::slotted(*) {
+  :host([slot='overflow']) ::slotted(*) {
     font-size: 24px;
   }
 
@@ -73,7 +73,7 @@ const menuBarButton = css`
   }
 
   :host([theme~='outlined']:not([dir='rtl']):nth-last-of-type(2)),
-  :host([theme~='outlined']:not([dir='rtl'])[part~='overflow-button']) {
+  :host([theme~='outlined']:not([dir='rtl'])[slot='overflow']) {
     margin-right: 0;
   }
 
@@ -88,7 +88,7 @@ const menuBarButton = css`
   }
 
   :host([dir='rtl']:nth-last-of-type(2)),
-  :host([dir='rtl'][part='overflow-button']) {
+  :host([dir='rtl'][slot='overflow']) {
     border-radius: 4px 0 0 4px;
   }
 
@@ -101,7 +101,7 @@ const menuBarButton = css`
   }
 
   :host([theme~='outlined'][dir='rtl']:nth-last-of-type(2)),
-  :host([theme~='outlined'][dir='rtl'][part~='overflow-button']) {
+  :host([theme~='outlined'][dir='rtl'][slot='overflow']) {
     margin-left: 0;
   }
 `;

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

@@ -8,12 +8,12 @@ registerStyles(
       padding-bottom: 5px;
     }
 
-    :host([has-single-button]) [part$='button'] {
+    :host([has-single-button]) ::slotted(vaadin-menu-bar-button) {
       border-radius: 4px;
     }
 
-    :host([theme~='end-aligned']) [part$='button']:first-child,
-    :host([theme~='end-aligned'][has-single-button]) [part$='button'] {
+    :host([theme~='end-aligned']) ::slotted(vaadin-menu-bar-button:first-of-type),
+    :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": "23.3.0-alpha2",
+  "version": "24.0.0-alpha1",
   "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/23.3.0-alpha2/#/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`menu-bar-button` | The menu bar button.\n`overflow-button` | The \"overflow\" button appearing when menu bar width is not enough to fit all the 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/23.3.0-alpha2/#/elements/vaadin-button).\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-list-box).\n- `<vaadin-context-menu-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/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-alpha1/#/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-alpha1/#/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-alpha1/#/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-alpha1/#/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-alpha1/#/elements/vaadin-overlay).",
           "attributes": [
             {
               "name": "open-on-hover",

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/menu-bar",
-  "version": "23.3.0-alpha2",
+  "version": "24.0.0-alpha1",
   "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/23.3.0-alpha2/#/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`menu-bar-button` | The menu bar button.\n`overflow-button` | The \"overflow\" button appearing when menu bar width is not enough to fit all the 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/23.3.0-alpha2/#/elements/vaadin-button).\n- `<vaadin-context-menu-item>` - has the same API as [`<vaadin-item>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-item).\n- `<vaadin-context-menu-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/elements/vaadin-list-box).\n- `<vaadin-context-menu-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha2/#/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-alpha1/#/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-alpha1/#/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-alpha1/#/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-alpha1/#/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-alpha1/#/elements/vaadin-overlay).",
           "extension": true,
           "attributes": [
             {