Update menu-bar to use vaadin-menu-bar-item component for sub-menus

[web-padawan]

Motivation

Right now we have a weird case where vaadin-menu-bar uses vaadin-context-menu-item:

web-components/packages/menu-bar/src/vaadin-menu-bar-buttons-mixin.js

Lines 268 to 273 in b4a9cea

	if (isElement && itemComponent.localName === 'vaadin-context-menu-item') {
	component = itemComponent;
	} else {
	component = document.createElement('vaadin-context-menu-item');
	component.appendChild(isElement ? itemComponent : document.createElement(itemComponent));
	}

This caused some confusion among the team members, not to mention the actual users.

Proposed solution

1. Add vaadin-menu-bar-item component that would extend vaadin-context-menu-item.
2. Update themes to not use hardcoded item tag name - or maybe allow both tag names 🙈

web-components/packages/menu-bar/theme/lumo/vaadin-menu-bar-button-styles.js

Lines 16 to 36 in b4a9cea

	[part='label'] ::slotted(vaadin-context-menu-item) {
	justify-content: center;
	background-color: transparent;
	height: var(--lumo-button-size);
	margin: 0 calc((var(--lumo-size-m) / 3 + var(--lumo-border-radius-m) / 2) * -1);
	padding-left: calc(var(--lumo-size-m) / 3 + var(--lumo-border-radius-m) / 2);
	padding-right: calc(var(--lumo-size-m) / 3 + var(--lumo-border-radius-m) / 2);
	}
	:host([theme~='small']) [part='label'] ::slotted(vaadin-context-menu-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) {
	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);
	}

Note

Similar fix was done in Vaadin 22 for vaadin-time-picker-item extending vaadin-combo-box-item.