@momentum-design/components 0.85.3 → 0.85.4

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/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 };

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

@@ -1,6 +1,5 @@
 import type { CSSResult } from 'lit';
 import MenuBar from '../menubar/menubar.component';
-declare const NavItemList_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/MenuMixin").MenuMixinInterface> & typeof MenuBar;
 /**
  * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.
  * It provides the structural foundation for organizing vertical nav items and
@@ -11,7 +10,7 @@ declare const NavItemList_base: import("../../utils/mixins/index.types").Constru
  *
  * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.
  */
-declare class NavItemList extends NavItemList_base {
+declare class NavItemList extends MenuBar {
     /**
      * Determines whether the navItemList is expanded or not.
      *

package/dist/components/navitemlist/navitemlist.component.js

@@ -9,8 +9,6 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { property } from 'lit/decorators.js';
 import MenuBar from '../menubar/menubar.component';
-import { MenuMixin } from '../../utils/mixins/MenuMixin';
-import { ORIENTATION } from '../menubar/menubar.constants';
 import providerUtils from '../../utils/provider';
 import { TAG_NAME as NAVITEM_TAGNAME } from '../navitem/navitem.constants';
 import SideNavigation from '../sidenavigation/sidenavigation.component';
@@ -25,7 +23,7 @@ import styles from './navitemlist.styles';
  *
  * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.
  */
-class NavItemList extends MenuMixin(MenuBar) {
+class NavItemList extends MenuBar {
     constructor() {
         super(...arguments);
         /**
@@ -58,7 +56,6 @@ class NavItemList extends MenuMixin(MenuBar) {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.ariaOrientation = ORIENTATION.VERTICAL;
         this.addEventListener('activechange', this.handleNestedNavItemActiveChange);
     }
     disconnectedCallback() {

package/dist/components/popover/popover.component.js

@@ -347,10 +347,16 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
          * Hides the popover.
          */
         this.hidePopover = () => {
-            setTimeout(() => {
+            if (this.closeDelay) {
+                setTimeout(() => {
+                    this.visible = false;
+                    this.isTriggerClicked = false;
+                }, this.closeDelay);
+            }
+            else {
                 this.visible = false;
                 this.isTriggerClicked = false;
-            }, this.closeDelay);
+            }
         };
         /**
          * Toggles the popover visibility.