@momentum-design/components 0.85.3 → 0.85.5

package/dist/components/alertchip/alertchip.component.d.ts

@@ -19,6 +19,8 @@ import type { VariantType } from './alertchip.types';
  * @cssproperty --mdc-chip-border-color - The border color of the alertchip
  * @cssproperty --mdc-chip-background-color - The background color of the alertchip
  *
+ * @csspart icon - The alert icon
+ * @csspart label - The text label of the alertchip
  */
 declare class AlertChip extends Buttonsimple {
     /**

package/dist/components/alertchip/alertchip.component.js

@@ -32,6 +32,8 @@ import { getAlertIcon } from './alertchip.utils';
  * @cssproperty --mdc-chip-border-color - The border color of the alertchip
  * @cssproperty --mdc-chip-background-color - The background color of the alertchip
  *
+ * @csspart icon - The alert icon
+ * @csspart label - The text label of the alertchip
  */
 class AlertChip extends Buttonsimple {
     constructor() {

package/dist/components/avatar/avatar.component.d.ts

@@ -36,6 +36,12 @@ declare const Avatar_base: import("../../utils/mixins/index.types").Constructor<
  *  Allows customization of the loading indicator foreground color.
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
  *  Allows customization of the loading overlay background color.
+ *
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo of the avatar.
+ * @csspart presence - The presence indicator of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator.
+ * @csspart loader - The loading indicator of the avatar.
  */
 declare class Avatar extends Avatar_base {
     /**

package/dist/components/avatar/avatar.component.js

@@ -50,6 +50,12 @@ import { getAvatarIconSize, getAvatarTextFontSize, getPresenceSize } from './ava
  *  Allows customization of the loading indicator foreground color.
  * @cssproperty --mdc-avatar-loading-overlay-background-color -
  *  Allows customization of the loading overlay background color.
+ *
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo of the avatar.
+ * @csspart presence - The presence indicator of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator.
+ * @csspart loader - The loading indicator of the avatar.
  */
 class Avatar extends AvatarComponentMixin(IconNameMixin(Component)) {
     constructor() {

package/dist/components/avatarbutton/avatarbutton.component.d.ts

@@ -8,6 +8,8 @@ declare const AvatarButton_base: import("../../utils/mixins/index.types").Constr
  * This component is made by extending `buttonsimple` class.
  * The button component acts as a wrapper for the avatar component.
  *
+ * To override styles of the avatar inside, use the specified css parts.
+ *
  * @dependency mdc-avatar
  *
  * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
@@ -20,6 +22,13 @@ declare const AvatarButton_base: import("../../utils/mixins/index.types").Constr
  * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state
  * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state
  * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state
+ *
+ * @csspart overlay - The overlay part of the avatar button.
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo part of the avatar.
+ * @csspart presence - The presence indicator part of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.
+ * @csspart loader - The loading indicator part of the avatar.
  */
 declare class AvatarButton extends AvatarButton_base {
     /**

package/dist/components/avatarbutton/avatarbutton.component.js

@@ -23,6 +23,8 @@ import styles from './avatarbutton.styles';
  * This component is made by extending `buttonsimple` class.
  * The button component acts as a wrapper for the avatar component.
  *
+ * To override styles of the avatar inside, use the specified css parts.
+ *
  * @dependency mdc-avatar
  *
  * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.
@@ -35,6 +37,13 @@ import styles from './avatarbutton.styles';
  * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state
  * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state
  * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state
+ *
+ * @csspart overlay - The overlay part of the avatar button.
+ * @csspart content - The main content of the avatar.
+ * @csspart photo - The photo part of the avatar.
+ * @csspart presence - The presence indicator part of the avatar.
+ * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.
+ * @csspart loader - The loading indicator part of the avatar.
  */
 class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
     constructor() {
@@ -65,6 +74,7 @@ class AvatarButton extends AvatarComponentMixin(IconNameMixin(Buttonsimple)) {
         return html `
       <div part="overlay" aria-hidden="true"></div>
       <mdc-avatar
+        exportparts="content, photo, presence, loading-wrapper, loader"
         ?is-typing="${this.isTyping}"
         counter="${ifDefined(this.counter)}"
         icon-name="${ifDefined(this.iconName)}"

package/dist/components/formfieldwrapper/formfieldwrapper.component.d.ts

@@ -30,7 +30,7 @@ declare class FormfieldWrapper extends FormfieldWrapper_base {
     required: boolean;
     /**
      * The unique id of the input field. It is used to link the input field with the label.
-     * @default `mdc-input-${uuidv4()}`
+     * @default ''
      */
     id: string;
     /**

package/dist/components/formfieldwrapper/formfieldwrapper.component.js

@@ -41,7 +41,7 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         this.required = false;
         /**
          * The unique id of the input field. It is used to link the input field with the label.
-         * @default `mdc-input-${uuidv4()}`
+         * @default ''
          */
         this.id = '';
         /**

package/dist/components/icon/icon.component.d.ts

@@ -46,6 +46,8 @@ import type { IconNames } from './icon.types';
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
  * @cssproperty --mdc-icon-size - Allows customization of the icon size.
  * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
+ *
+ * @csspart icon - The svg inside the icon element.
  */
 declare class Icon extends Component {
     private iconData?;

package/dist/components/icon/icon.component.js

@@ -60,6 +60,8 @@ import { DEFAULTS } from './icon.constants';
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
  * @cssproperty --mdc-icon-size - Allows customization of the icon size.
  * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
+ *
+ * @csspart icon - The svg inside the icon element.
  */
 class Icon extends Component {
     constructor() {

package/dist/components/listitem/listitem.component.d.ts

@@ -85,6 +85,17 @@ declare class ListItem extends ListItem_base {
      * This appears on the trailing side of the list item.
      */
     sublineText?: string;
+    /**
+     * Indicates whether the element is soft disabled.
+     * When set to `true`, the element appears visually disabled but still allows
+     * focus, click, and keyboard actions to be passed through.
+     *
+     * **Important:** When using soft disabled, consumers must ensure that
+     * the element behaves like a disabled element, allowing only focus and
+     * preventing any interactions (clicks or keyboard actions) from triggering unintended actions.
+     * @default undefined
+     */
+    softDisabled?: boolean;
     /**
      * The tooltip text is displayed on hover of the list item.
      */

package/dist/components/listitem/listitem.component.js

@@ -80,7 +80,7 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
         this.tooltipPlacement = DEFAULTS.TOOLTIP_PLACEMENT;
         this.addEventListener('keydown', this.handleKeyDown);
         this.addEventListener('focusin', this.displayTooltipForLongText);
-        this.addEventListener('mouseover', this.displayTooltipForLongText);
+        this.addEventListener('mouseenter', this.displayTooltipForLongText);
         this.addEventListener('focusout', this.hideTooltipOnLeave);
         this.addEventListener('mouseout', this.hideTooltipOnLeave);
         this.addEventListener('click', this.handleClick);
@@ -183,7 +183,7 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
      * This is useful when the list item is disabled, to prevent the user from interacting with the controls.
      * @param disabled - Whether to disable or enable the controls.
      */
-    disableSlottedChildren(disabled) {
+    disableSlottedChildren(disabled = false) {
         [...this.leadingControlsSlot, ...this.trailingControlsSlot].forEach(element => {
             if (disabled) {
                 element.setAttribute('disabled', '');
@@ -192,13 +192,17 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
                 element.removeAttribute('disabled');
             }
         });
+        // Set the aria-disabled attribute to indicate that the list item is disabled.
+        this.setAttribute('aria-disabled', `${disabled}`);
     }
     update(changedProperties) {
         super.update(changedProperties);
         if (changedProperties.has('disabled')) {
             this.tabIndex = this.disabled ? -1 : 0;
             this.disableSlottedChildren(this.disabled);
-            this.setAttribute('aria-disabled', `${this.disabled}`);
+        }
+        if (changedProperties.has('softDisabled')) {
+            this.disableSlottedChildren(this.softDisabled);
         }
     }
     /**
@@ -291,6 +295,10 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'subline-text' }),
     __metadata("design:type", String)
 ], ListItem.prototype, "sublineText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'soft-disabled' }),
+    __metadata("design:type", Boolean)
+], ListItem.prototype, "softDisabled", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'tooltip-text' }),
     __metadata("design:type", String)

package/dist/components/listitem/listitem.constants.d.ts

@@ -1,6 +1,6 @@
 declare const TAG_NAME: "mdc-listitem";
-declare const TOOLTIP_ID = "dynamic-listitem-tooltip-popover";
-declare const LISTITEM_ID = "dynamic-listitem-tooltip-triggerid";
+declare const TOOLTIP_ID: string;
+declare const LISTITEM_ID: string;
 declare const LISTITEM_VARIANTS: {
     readonly FULL_WIDTH: "full-width";
     readonly INSET_PILL: "inset-pill";

package/dist/components/listitem/listitem.constants.js

@@ -1,8 +1,9 @@
+import { v4 as uuidv4 } from 'uuid';
 import utils from '../../utils/tag-name';
 import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 const TAG_NAME = utils.constructTagName('listitem');
-const TOOLTIP_ID = 'dynamic-listitem-tooltip-popover';
-const LISTITEM_ID = 'dynamic-listitem-tooltip-triggerid';
+const TOOLTIP_ID = `listitem-tooltip-popover-${uuidv4()}`;
+const LISTITEM_ID = `listitem-tooltip-triggerid-${uuidv4()}`;
 const LISTITEM_VARIANTS = {
     FULL_WIDTH: 'full-width',
     INSET_PILL: 'inset-pill',

package/dist/components/listitem/listitem.styles.js

@@ -47,7 +47,15 @@ const styles = css `
   :host([disabled])::part(leading-text-tertiary-label),
   :host([disabled])::part(leading-text-primary-label),
   :host([disabled])::part(trailing-text-side-header),
-  :host([disabled])::part(trailing-text-subline) {
+  :host([disabled])::part(trailing-text-subline),
+  :host([soft-disabled]),
+  :host([soft-disabled]:hover),
+  :host([soft-disabled]:active),
+  :host([soft-disabled])::part(leading-text-secondary-label),
+  :host([soft-disabled])::part(leading-text-tertiary-label),
+  :host([soft-disabled])::part(leading-text-primary-label),
+  :host([soft-disabled])::part(trailing-text-side-header),
+  :host([soft-disabled])::part(trailing-text-subline) {
     background-color: unset;
     color: var(--mdc-listitem-disabled-color);
     cursor: default;

package/dist/components/menubar/menubar.component.d.ts

@@ -1,15 +1,13 @@
 import type { CSSResult, PropertyValues } from 'lit';
 import { Component } from '../../models';
-declare const MenuBar_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/MenuMixin").MenuMixinInterface> & typeof Component;
 /**
- * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,
+ * Menubar is a navigational menu component that provides a vertical fixed list of menu items,
  * with support for nested submenus and keyboard navigation. It serves as a container
  * for menu items and manages their interaction patterns, including:
- * - Keyboard navigation (arrow keys, Home, End)
+ * - Keyboard navigation (Arrow keys, Home, End)
  * - Menu item activation (Enter/Space)
  * - Submenu toggling (Right/Left arrow keys)
  * - Focus management
- * - Support for both horizontal and vertical orientations
  * - Integration with MenuPopover for nested menus
  *
  * A menubar will contain a set of menu items and their associated popovers.
@@ -18,13 +16,41 @@ declare const MenuBar_base: import("../../utils/mixins/index.types").Constructor
  * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.
  * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.
  *
+ * **Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.
+ *
+ * `mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.
+ *
  * @tagname mdc-menubar
  * @slot default - Contains the menu items and their associated popovers
  */
-declare class MenuBar extends MenuBar_base {
+declare class MenuBar extends Component {
     constructor();
     connectedCallback(): void;
+    menuItems: Array<HTMLElement>;
     update(changedProperties: PropertyValues): void;
+    firstUpdated(changedProperties: PropertyValues): void;
+    /**
+     * Resets all list items tabindex to -1 and sets the tabindex of the
+     * element at the given index to 0, effectively setting the active
+     * element. This is used when navigating the list via keyboard.
+     *
+     * @param newIndex - The index of the new active element in the list.
+     */
+    private resetTabIndexAndSetActiveTabIndex;
+    private getCurrentIndex;
+    private updatePopoverPlacement;
+    private updateTabIndexAndFocus;
+    private navigateToMenuItem;
+    private showSubmenu;
+    private getKeyWithDirectionFix;
+    private isTopLevelMenuItem;
+    private isNestedMenuItem;
+    private closeAllMenuPopovers;
+    private crossMenubarNavigationOnLeft;
+    private crossMenubarNavigationOnRight;
+    private hasSubmenu;
+    private getParentMenuItemIndex;
+    private handleKeyDown;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/menubar/menubar.component.js

@@ -1,17 +1,31 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
 import { html } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
 import { Component } from '../../models';
-import { MenuMixin } from '../../utils/mixins/MenuMixin';
 import { ROLE } from '../../utils/roles';
+import { POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
+import { TAG_NAME as MENUITEM_TAGNAME } from '../menuitem/menuitem.constants';
+import { KEYS } from '../../utils/keys';
+import { popoverStack } from '../popover/popover.stack';
+import { DEFAULTS, TAG_NAME as MENUBAR_TAGNAME } from './menubar.constants';
 import styles from './menubar.styles';
 /**
- * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,
+ * Menubar is a navigational menu component that provides a vertical fixed list of menu items,
  * with support for nested submenus and keyboard navigation. It serves as a container
  * for menu items and manages their interaction patterns, including:
- * - Keyboard navigation (arrow keys, Home, End)
+ * - Keyboard navigation (Arrow keys, Home, End)
  * - Menu item activation (Enter/Space)
  * - Submenu toggling (Right/Left arrow keys)
  * - Focus management
- * - Support for both horizontal and vertical orientations
  * - Integration with MenuPopover for nested menus
  *
  * A menubar will contain a set of menu items and their associated popovers.
@@ -20,28 +34,203 @@ import styles from './menubar.styles';
  * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.
  * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.
  *
+ * **Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.
+ *
+ * `mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.
+ *
  * @tagname mdc-menubar
  * @slot default - Contains the menu items and their associated popovers
  */
-class MenuBar extends MenuMixin(Component) {
+class MenuBar extends Component {
     constructor() {
         super();
         this.addEventListener('keydown', this.handleKeyDown);
-        this.addEventListener('click', this.handleMouseClick);
     }
     connectedCallback() {
         super.connectedCallback();
         this.role = ROLE.MENUBAR;
+        this.ariaOrientation = DEFAULTS.ORIENTATION;
     }
     update(changedProperties) {
         super.update(changedProperties);
-        if (changedProperties.has('ariaOrientation')) {
-            this.updatePopoverPlacementBasedOnOrientation();
+        this.updatePopoverPlacement();
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.resetTabIndexAndSetActiveTabIndex(this.menuItems);
+    }
+    /**
+     * Resets all list items tabindex to -1 and sets the tabindex of the
+     * element at the given index to 0, effectively setting the active
+     * element. This is used when navigating the list via keyboard.
+     *
+     * @param newIndex - The index of the new active element in the list.
+     */
+    resetTabIndexAndSetActiveTabIndex(menuItems) {
+        menuItems.forEach((node, index) => {
+            const newTabindex = index === 0 ? '0' : '-1';
+            node === null || node === void 0 ? void 0 : node.setAttribute('tabindex', newTabindex);
+        });
+    }
+    getCurrentIndex(target) {
+        return this.menuItems.findIndex(item => item === target || item === target.parentElement);
+    }
+    updatePopoverPlacement() {
+        const allPopovers = this.querySelectorAll(`${MENUPOPOVER_TAGNAME}:not([disabled])`);
+        const placement = POPOVER_PLACEMENT.RIGHT_START;
+        allPopovers.forEach(popover => popover.setAttribute('placement', placement));
+    }
+    updateTabIndexAndFocus(menuItems, currentIndex, newIndex) {
+        var _a, _b, _c;
+        if (newIndex < 0 || currentIndex < 0)
+            return;
+        if (currentIndex !== newIndex) {
+            (_a = menuItems[currentIndex]) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', '-1');
+            (_b = menuItems[newIndex]) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+        }
+        (_c = menuItems[newIndex]) === null || _c === void 0 ? void 0 : _c.focus();
+    }
+    navigateToMenuItem(currentIndex, direction, shouldOpenSubmenu = false) {
+        var _a;
+        const { length } = this.menuItems;
+        if (length === 0)
+            return;
+        let newIndex = currentIndex;
+        if (direction === 'prev') {
+            newIndex = (currentIndex - 1 + length) % length;
+        }
+        else {
+            newIndex = (currentIndex + 1) % length;
+        }
+        this.updateTabIndexAndFocus(this.menuItems, currentIndex, newIndex);
+        if (shouldOpenSubmenu) {
+            const triggerId = (_a = this.menuItems[newIndex]) === null || _a === void 0 ? void 0 : _a.getAttribute('id');
+            if (this.hasSubmenu(triggerId) && !this.menuItems[newIndex].hasAttribute('soft-disabled')) {
+                this.showSubmenu(triggerId);
+            }
+        }
+    }
+    showSubmenu(triggerId) {
+        const submenu = this.querySelector(`${MENUPOPOVER_TAGNAME}[triggerid="${triggerId}"]`);
+        submenu === null || submenu === void 0 ? void 0 : submenu.showPopover();
+    }
+    getKeyWithDirectionFix(originalKey) {
+        const isRtl = window.getComputedStyle(this).direction === 'rtl';
+        if (!isRtl)
+            return originalKey;
+        if (originalKey === KEYS.ARROW_LEFT)
+            return KEYS.ARROW_RIGHT;
+        if (originalKey === KEYS.ARROW_RIGHT)
+            return KEYS.ARROW_LEFT;
+        return originalKey;
+    }
+    isTopLevelMenuItem(element) {
+        var _a;
+        return (((_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === MENUBAR_TAGNAME &&
+            element.tagName.toLowerCase() === MENUITEM_TAGNAME);
+    }
+    isNestedMenuItem(element) {
+        return !!element.closest(MENUPOPOVER_TAGNAME) && element.tagName.toLowerCase() === MENUITEM_TAGNAME;
+    }
+    async closeAllMenuPopovers() {
+        const popovers = [];
+        while (popoverStack.peek()) {
+            const popover = popoverStack.pop();
+            if (popover) {
+                popover.hidePopover();
+                popovers.push(popover);
+            }
+        }
+        await Promise.all(popovers.map(popover => popover.updateComplete));
+    }
+    async crossMenubarNavigationOnLeft(element) {
+        const isMenuItem = element.tagName.toLowerCase() === MENUITEM_TAGNAME;
+        if (isMenuItem) {
+            const parentPopover = element.closest(MENUPOPOVER_TAGNAME);
+            const triggerId = parentPopover === null || parentPopover === void 0 ? void 0 : parentPopover.getAttribute('triggerid');
+            const triggerMenuItem = this.menuItems.find(item => item.getAttribute('id') === triggerId);
+            if (triggerMenuItem) {
+                if (this.isTopLevelMenuItem(triggerMenuItem)) {
+                    parentPopover === null || parentPopover === void 0 ? void 0 : parentPopover.hidePopover();
+                }
+                await (parentPopover === null || parentPopover === void 0 ? void 0 : parentPopover.updateComplete);
+                const parentMenuItemIndex = this.getCurrentIndex(triggerMenuItem);
+                this.navigateToMenuItem(parentMenuItemIndex, 'prev', true);
+            }
+        }
+    }
+    async crossMenubarNavigationOnRight(element) {
+        if (this.isTopLevelMenuItem(element) && this.hasSubmenu(element.id) && !element.hasAttribute('soft-disabled')) {
+            this.showSubmenu(element.id);
+        }
+        else if (this.isNestedMenuItem(element) && !this.hasSubmenu(element.id)) {
+            await this.closeAllMenuPopovers();
+            const parentIndex = this.getParentMenuItemIndex(element);
+            if (parentIndex >= 0)
+                this.navigateToMenuItem(parentIndex, 'next', true);
+        }
+    }
+    hasSubmenu(triggerId) {
+        return !!this.querySelector(`${MENUPOPOVER_TAGNAME}[triggerid="${triggerId}"]`);
+    }
+    getParentMenuItemIndex(element) {
+        let parent = element.parentElement;
+        while (parent) {
+            if (parent.tagName.toLowerCase() === MENUPOPOVER_TAGNAME) {
+                const triggerId = parent.getAttribute('triggerid');
+                const triggerElement = this.menuItems.find(item => item.getAttribute('id') === triggerId);
+                if (triggerElement) {
+                    if (this.isTopLevelMenuItem(triggerElement)) {
+                        return this.menuItems.findIndex(item => item === triggerElement);
+                    }
+                    return this.getParentMenuItemIndex(triggerElement);
+                }
+            }
+            parent = parent.parentElement;
+        }
+        return -1;
+    }
+    async handleKeyDown(event) {
+        const currentIndex = this.getCurrentIndex(event.target);
+        const key = this.getKeyWithDirectionFix(event.key);
+        switch (key) {
+            case KEYS.HOME:
+                this.updateTabIndexAndFocus(this.menuItems, currentIndex, 0);
+                break;
+            case KEYS.END:
+                this.updateTabIndexAndFocus(this.menuItems, currentIndex, this.menuItems.length - 1);
+                break;
+            case KEYS.ARROW_LEFT: {
+                const element = currentIndex >= 0 ? this.menuItems[currentIndex] : event.target;
+                await this.crossMenubarNavigationOnLeft(element);
+                break;
+            }
+            case KEYS.ARROW_RIGHT: {
+                const element = currentIndex >= 0 ? this.menuItems[currentIndex] : event.target;
+                await this.crossMenubarNavigationOnRight(element);
+                break;
+            }
+            case KEYS.ARROW_UP: {
+                this.navigateToMenuItem(currentIndex, 'prev');
+                event.preventDefault();
+                break;
+            }
+            case KEYS.ARROW_DOWN: {
+                this.navigateToMenuItem(currentIndex, 'next');
+                event.preventDefault();
+                break;
+            }
+            default:
+                break;
         }
     }
     render() {
-        return html `<slot></slot>`;
+        return html `<slot role="${ROLE.GROUP}"></slot>`;
     }
 }
 MenuBar.styles = [...Component.styles, ...styles];
+__decorate([
+    queryAssignedElements({ selector: `${MENUITEM_TAGNAME}:not([disabled])` }),
+    __metadata("design:type", Array)
+], MenuBar.prototype, "menuItems", void 0);
 export default MenuBar;

package/dist/components/menubar/menubar.constants.d.ts

@@ -1,6 +1,5 @@
 declare const TAG_NAME: "mdc-menubar";
-declare const ORIENTATION: {
-    readonly HORIZONTAL: "horizontal";
-    readonly VERTICAL: "vertical";
+declare const DEFAULTS: {
+    ORIENTATION: string;
 };
-export { TAG_NAME, ORIENTATION };
+export { TAG_NAME, DEFAULTS };

package/dist/components/menubar/menubar.constants.js

@@ -1,7 +1,6 @@
 import utils from '../../utils/tag-name';
 const TAG_NAME = utils.constructTagName('menubar');
-const ORIENTATION = {
-    HORIZONTAL: 'horizontal',
-    VERTICAL: 'vertical',
+const DEFAULTS = {
+    ORIENTATION: 'vertical',
 };
-export { TAG_NAME, ORIENTATION };
+export { TAG_NAME, DEFAULTS };

package/dist/components/menupopover/menupopover.component.d.ts

@@ -83,6 +83,7 @@ declare class MenuPopover extends Popover {
      * @returns - A boolean indicating whether a submenu with the specified trigger ID exists.
      */
     private hasSubmenuWithTriggerId;
+    togglePopoverVisible: () => void;
     /**
      * Handles mouse click events on the menu items.
      * This method checks if the clicked element is a valid menu item and not a submenu trigger.

package/dist/components/menupopover/menupopover.component.js

@@ -11,7 +11,6 @@ import { property } from 'lit/decorators.js';
 import { KEYS } from '../../utils/keys';
 import { ROLE } from '../../utils/roles';
 import { TAG_NAME as MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
-import { ORIENTATION } from '../menubar/menubar.constants';
 import Popover from '../popover/popover.component';
 import { COLOR } from '../popover/popover.constants';
 import { popoverStack } from '../popover/popover.stack';
@@ -82,6 +81,18 @@ class MenuPopover extends Popover {
                 this.closeAllMenuPopovers();
             }
         };
+        this.togglePopoverVisible = () => {
+            var _a;
+            if ((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('soft-disabled'))
+                return;
+            if (this.isTriggerClicked) {
+                this.hidePopover();
+            }
+            else {
+                this.showPopover();
+                this.isTriggerClicked = true;
+            }
+        };
         this.addEventListener('keydown', this.handleKeyDown);
         this.addEventListener('click', this.handleMouseClick);
     }
@@ -103,7 +114,7 @@ class MenuPopover extends Popover {
     connectedCallback() {
         super.connectedCallback();
         this.role = ROLE.MENU;
-        this.ariaOrientation = ORIENTATION.VERTICAL;
+        this.ariaOrientation = DEFAULTS.ORIENTATION;
         this.backdrop = false;
         this.color = COLOR.TONAL;
         this.disableAriaExpanded = false;

package/dist/components/menupopover/menupopover.constants.d.ts

@@ -1,5 +1,6 @@
 declare const TAG_NAME: "mdc-menupopover";
 declare const DEFAULTS: {
     PLACEMENT: "bottom-start";
+    ORIENTATION: string;
 };
 export { TAG_NAME, DEFAULTS };

package/dist/components/menupopover/menupopover.constants.js

@@ -3,5 +3,6 @@ import { POPOVER_PLACEMENT } from '../popover/popover.constants';
 const TAG_NAME = utils.constructTagName('menupopover');
 const DEFAULTS = {
     PLACEMENT: POPOVER_PLACEMENT.BOTTOM_START,
+    ORIENTATION: 'vertical',
 };
 export { TAG_NAME, DEFAULTS };