@momentum-design/components 0.91.0 → 0.91.2

package/dist/components/badge/badge.styles.js

@@ -72,6 +72,11 @@ const styles = [
       .mdc-badge-text {
         outline: 0.125rem solid;
       }
+
+      .mdc-badge-dot {
+        background-color: ButtonText;
+        outline: none;
+      }
     }
   `,
 ];

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

@@ -14,11 +14,11 @@ import { KEYS } from '../../utils/keys';
 import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
 import { TabIndexMixin } from '../../utils/mixins/TabIndexMixin';
 import { ROLE } from '../../utils/roles';
-import { TAG_NAME as NAVITEMLIST_TAG_NAME } from '../navitemlist/navitemlist.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
-import { DEFAULTS, LISTITEM_ID, TOOLTIP_ID } from './listitem.constants';
+import { DEFAULTS } from './listitem.constants';
 import styles from './listitem.styles';
+import { generateListItemId, generateTooltipId } from './listitem.utils';
 /**
  * mdc-listitem component is used to display a label with different types of controls.
  * There can be three types of controls, a radio button, a checkbox on the
@@ -88,6 +88,8 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
     connectedCallback() {
         super.connectedCallback();
         this.role = this.role || ROLE.LISTITEM;
+        // Add a unique id to the listitem if it does not have one.
+        this.id = this.id || generateListItemId();
     }
     /**
      * Fires the click event when the enter or space key is pressed down.
@@ -124,41 +126,36 @@ class ListItem extends DisabledMixin(TabIndexMixin(Component)) {
      * Create the tooltip programmatically after the nearest parent element.
      */
     displayTooltipForLongText() {
-        var _a, _b, _c;
+        var _a, _b;
         if (!this.tooltipText) {
             return;
         }
-        // Add a unique id to the listitem if it does not have one to attach the tooltip.
-        this.id = this.id || LISTITEM_ID;
         // Remove any existing tooltip.
-        const existingTooltip = document.getElementById(TOOLTIP_ID);
-        if (existingTooltip)
-            existingTooltip.remove();
+        this.hideTooltipOnLeave();
         // Create tooltip for the listitem element.
         const tooltip = document.createElement(TOOLTIP_TAG_NAME);
-        tooltip.id = TOOLTIP_ID;
+        tooltip.id = generateTooltipId();
         tooltip.textContent = this.tooltipText;
         tooltip.setAttribute('triggerid', this.id);
         tooltip.setAttribute('placement', this.tooltipPlacement);
         tooltip.setAttribute('visible', '');
         tooltip.setAttribute('show-arrow', '');
-        // The navitem follows a different pattern to attach the tooltip.
-        if (((_b = (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === null || _b === void 0 ? void 0 : _b.toLowerCase()) === NAVITEMLIST_TAG_NAME) {
-            this.before(tooltip);
-        }
-        else {
-            // Add tooltip programmatically after the parent element.
-            (_c = this.parentElement) === null || _c === void 0 ? void 0 : _c.after(tooltip);
+        // Set the slot attribute if the parent element has a slot.
+        if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('slot')) {
+            tooltip.setAttribute('slot', this.parentElement.getAttribute('slot') || '');
         }
+        // Attach the tooltip programmatically after the nearest parent element.
+        (_b = this.parentElement) === null || _b === void 0 ? void 0 : _b.after(tooltip);
     }
     /**
      * Removes the dynamically created tooltip for long text label on focus or mouse leave.
      * This is triggered on focusout and mouseout events.
      */
     hideTooltipOnLeave() {
-        this.id = this.id === LISTITEM_ID ? '' : this.id;
-        const existingTooltip = document.querySelector(`#${TOOLTIP_ID}`);
-        existingTooltip === null || existingTooltip === void 0 ? void 0 : existingTooltip.remove();
+        const existingTooltip = document.querySelector(`${TOOLTIP_TAG_NAME}[triggerid="${this.id}"]`);
+        if (existingTooltip) {
+            existingTooltip.remove();
+        }
     }
     /**
      * Generates a template for a text slot with the specified content.

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

@@ -1,6 +1,4 @@
 declare const TAG_NAME: "mdc-listitem";
-declare const TOOLTIP_ID: string;
-declare const LISTITEM_ID: string;
 declare const LISTITEM_VARIANTS: {
     readonly FULL_WIDTH: "full-width";
     readonly INSET_PILL: "inset-pill";
@@ -10,4 +8,4 @@ declare const DEFAULTS: {
     readonly VARIANT: "full-width";
     readonly TOOLTIP_PLACEMENT: "top";
 };
-export { DEFAULTS, TAG_NAME, LISTITEM_VARIANTS, TOOLTIP_ID, LISTITEM_ID };
+export { DEFAULTS, TAG_NAME, LISTITEM_VARIANTS };

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

@@ -1,9 +1,6 @@
-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 = `listitem-tooltip-popover-${uuidv4()}`;
-const LISTITEM_ID = `listitem-tooltip-triggerid-${uuidv4()}`;
 const LISTITEM_VARIANTS = {
     FULL_WIDTH: 'full-width',
     INSET_PILL: 'inset-pill',
@@ -13,4 +10,4 @@ const DEFAULTS = {
     VARIANT: LISTITEM_VARIANTS.FULL_WIDTH,
     TOOLTIP_PLACEMENT: POPOVER_PLACEMENT.TOP,
 };
-export { DEFAULTS, TAG_NAME, LISTITEM_VARIANTS, TOOLTIP_ID, LISTITEM_ID };
+export { DEFAULTS, TAG_NAME, LISTITEM_VARIANTS };

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

@@ -0,0 +1,3 @@
+declare const generateTooltipId: () => string;
+declare const generateListItemId: () => string;
+export { generateTooltipId, generateListItemId };

package/dist/components/listitem/listitem.utils.js

@@ -0,0 +1,4 @@
+import { v4 as uuidv4 } from 'uuid';
+const generateTooltipId = () => `listitem-tooltip-popover-${uuidv4()}`;
+const generateListItemId = () => `listitem-tooltip-triggerid-${uuidv4()}`;
+export { generateTooltipId, generateListItemId };

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

@@ -30,6 +30,10 @@ declare class MenuBar extends Component {
      * Returns all menuitem elements, including those nested inside menusection.
      */
     get menuItems(): Array<HTMLElement>;
+    /**
+     * Returns all menupopovers, including direct and slotted ones .
+     */
+    private getAllPopovers;
     update(changedProperties: PropertyValues): void;
     firstUpdated(changedProperties: PropertyValues): void;
     /**
@@ -41,10 +45,11 @@ declare class MenuBar extends Component {
      */
     private resetTabIndexAndSetActiveTabIndex;
     private getCurrentIndex;
+    private getSubmenu;
+    private showSubmenu;
     private updatePopoverPlacement;
     private updateTabIndexAndFocus;
     private navigateToMenuItem;
-    private showSubmenu;
     private getKeyWithDirectionFix;
     /**
      * Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)
@@ -54,7 +59,6 @@ declare class MenuBar extends Component {
     private closeAllMenuPopovers;
     private crossMenubarNavigationOnLeft;
     private crossMenubarNavigationOnRight;
-    private hasSubmenu;
     private getParentMenuItemIndex;
     private handleKeyDown;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -4,6 +4,7 @@ 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 MENUSECTION_TAGNAME } from '../menusection/menusection.constants';
+import { TAG_NAME as SIDENAV_TAGNAME } from '../sidenavigation/sidenavigation.constants';
 import { KEYS } from '../../utils/keys';
 import { popoverStack } from '../popover/popover.stack';
 import { DEFAULTS, TAG_NAME as MENUBAR_TAGNAME } from './menubar.constants';
@@ -60,13 +61,38 @@ class MenuBar extends Component {
         assigned.forEach(collect);
         return items;
     }
+    /**
+     * Returns all menupopovers, including direct and slotted ones .
+     */
+    getAllPopovers() {
+        var _a, _b;
+        if (!this.menuItems.length)
+            return [];
+        const root = (_b = (_a = this.menuItems[0]) === null || _a === void 0 ? void 0 : _a.closest(SIDENAV_TAGNAME)) !== null && _b !== void 0 ? _b : this;
+        if (!root)
+            return [];
+        const popovers = [];
+        const searchPopovers = (node) => {
+            // Check direct popovers
+            node.querySelectorAll(`${MENUPOPOVER_TAGNAME}`).forEach(el => {
+                popovers.push(el);
+            });
+            // Handle slots
+            node.querySelectorAll('slot').forEach(slot => {
+                const assigned = slot.assignedElements({ flatten: true });
+                assigned.forEach(searchPopovers);
+            });
+        };
+        searchPopovers(root);
+        return popovers;
+    }
     update(changedProperties) {
         super.update(changedProperties);
-        this.updatePopoverPlacement();
     }
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.resetTabIndexAndSetActiveTabIndex(this.menuItems);
+        this.updatePopoverPlacement();
     }
     /**
      * Resets all list items tabindex to -1 and sets the tabindex of the
@@ -84,10 +110,26 @@ class MenuBar extends Component {
     getCurrentIndex(target) {
         return this.menuItems.findIndex(item => item === target || item === target.parentElement);
     }
+    getSubmenu(triggerId) {
+        if (!triggerId)
+            return undefined;
+        return this.getAllPopovers().find(popover => popover.getAttribute('triggerid') === triggerId);
+    }
+    showSubmenu(triggerId) {
+        if (!triggerId)
+            return;
+        const triggerElement = this.menuItems.find(item => item.getAttribute('id') === triggerId);
+        if (!triggerElement)
+            return;
+        const submenu = this.getSubmenu(triggerId);
+        if (submenu)
+            submenu.showPopover();
+    }
     updatePopoverPlacement() {
-        const allPopovers = this.querySelectorAll(`${MENUPOPOVER_TAGNAME}:not([disabled])`);
         const placement = POPOVER_PLACEMENT.RIGHT_START;
-        allPopovers.forEach(popover => popover.setAttribute('placement', placement));
+        this.getAllPopovers().forEach(popover => {
+            popover.setAttribute('placement', placement);
+        });
     }
     updateTabIndexAndFocus(menuItems, currentIndex, newIndex) {
         var _a, _b, _c;
@@ -105,24 +147,15 @@ class MenuBar extends Component {
         if (length === 0)
             return;
         let newIndex = currentIndex;
-        if (direction === 'prev') {
-            newIndex = (currentIndex - 1 + length) % length;
-        }
-        else {
-            newIndex = (currentIndex + 1) % length;
-        }
+        newIndex = direction === 'prev' ? (currentIndex - 1 + length) % length : (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')) {
+            if (this.getSubmenu(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)
@@ -142,11 +175,10 @@ class MenuBar extends Component {
         if (!parent || element.role !== ROLE.MENUITEM)
             return false;
         const parentTag = parent.tagName.toLowerCase();
-        if (parentTag === MENUBAR_TAGNAME) {
+        const grandParentTag = (_a = parent.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase();
+        if (parentTag === MENUBAR_TAGNAME || parentTag === SIDENAV_TAGNAME)
             return true;
-        }
-        if (parentTag === MENUSECTION_TAGNAME &&
-            ((_a = parent.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === MENUBAR_TAGNAME) {
+        if (parentTag === MENUSECTION_TAGNAME && (grandParentTag === MENUBAR_TAGNAME || grandParentTag === SIDENAV_TAGNAME)) {
             return true;
         }
         return false;
@@ -182,19 +214,16 @@ class MenuBar extends Component {
         }
     }
     async crossMenubarNavigationOnRight(element) {
-        if (this.isTopLevelMenuItem(element) && this.hasSubmenu(element.id) && !element.hasAttribute('soft-disabled')) {
+        if (this.isTopLevelMenuItem(element) && this.getSubmenu(element.id) && !element.hasAttribute('soft-disabled')) {
             this.showSubmenu(element.id);
         }
-        else if (this.isNestedMenuItem(element) && !this.hasSubmenu(element.id)) {
+        else if (this.isNestedMenuItem(element) && !this.getSubmenu(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) {

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

@@ -1,4 +1,3 @@
-import type MenuItem from '../menuitem';
 import type MenuPopover from './menupopover.component';
 /**
  * Checks if the given menu item is a valid menu item.
@@ -7,5 +6,5 @@ import type MenuPopover from './menupopover.component';
  */
 declare const isValidMenuItem: (menuItem: Element | null) => boolean;
 declare const isValidPopover: (el: Element | null) => el is MenuPopover;
-declare const isActiveMenuItem: (menuItem: Element | null) => menuItem is MenuItem;
+declare const isActiveMenuItem: (menuItem: Element | null) => boolean;
 export { isValidMenuItem, isValidPopover, isActiveMenuItem };

package/dist/components/menupopover/menupopover.utils.js

@@ -1,6 +1,4 @@
-import { TAG_NAME as MENUITEM_TAGNAME } from '../menuitem/menuitem.constants';
-import { TAG_NAME as MENUITEMCHECKBOX_TAGNAME } from '../menuitemcheckbox/menuitemcheckbox.constants';
-import { TAG_NAME as MENUITEMRADIO_TAGNAME } from '../menuitemradio/menuitemradio.constants';
+import { ROLE } from '../../utils/roles';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from './menupopover.constants';
 /**
  * Checks if the given menu item is a valid menu item.
@@ -8,11 +6,16 @@ import { TAG_NAME as MENUPOPOVER_TAGNAME } from './menupopover.constants';
  * @returns True if the menu item is a valid menu item, false otherwise.
  */
 const isValidMenuItem = (menuItem) => {
+    var _a;
     if (!menuItem)
         return false;
-    const tagName = menuItem.tagName.toLowerCase();
-    return [MENUITEM_TAGNAME, MENUITEMCHECKBOX_TAGNAME, MENUITEMRADIO_TAGNAME].includes(tagName);
+    const role = (_a = menuItem.getAttribute('role')) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    return role === ROLE.MENUITEM || role === ROLE.MENUITEMCHECKBOX || role === ROLE.MENUITEMRADIO;
 };
 const isValidPopover = (el) => { var _a; return ((_a = el === null || el === void 0 ? void 0 : el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === MENUPOPOVER_TAGNAME; };
-const isActiveMenuItem = (menuItem) => { var _a, _b; return ((_b = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase) === null || _b === void 0 ? void 0 : _b.call(_a)) === MENUITEM_TAGNAME && !menuItem.hasAttribute('disabled'); };
+const isActiveMenuItem = (menuItem) => {
+    var _a;
+    const role = (_a = menuItem === null || menuItem === void 0 ? void 0 : menuItem.getAttribute('role')) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    return !!menuItem && role === ROLE.MENUITEM && !menuItem.hasAttribute('disabled');
+};
 export { isValidMenuItem, isValidPopover, isActiveMenuItem };

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

@@ -34,6 +34,21 @@ declare class MenuSection extends Component {
      * If not provided, no icon will be rendered and text will be aligned to the start.
      */
     prefixIcon?: IconNames;
+    /**
+     * Whether to show a divider below the section header.
+     * This is useful for visually separating sections in the menu.
+     */
+    showDivider: boolean;
+    /**
+     * Shows or hides the section headers based on the expanded state of the side navigation.
+     *
+     * @internal
+     */
+    hideHeaderText: boolean;
+    /**
+     * @internal
+     */
+    private readonly sideNavigationContext;
     connectedCallback(): void;
     update(changedProperties: PropertyValues): void;
     private renderHeader;

package/dist/components/menusection/menusection.component.js

@@ -11,7 +11,9 @@ import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { Component } from '../../models';
+import providerUtils from '../../utils/provider';
 import { ROLE } from '../../utils/roles';
+import SideNavigation from '../sidenavigation/sidenavigation.component';
 import styles from './menusection.styles';
 /**
  * `mdc-menusection` is a container element used to group a set of menu items.
@@ -42,12 +44,28 @@ class MenuSection extends Component {
          * This appears on the leading side of the list item.
          */
         this.headerText = null;
+        /**
+         * Whether to show a divider below the section header.
+         * This is useful for visually separating sections in the menu.
+         */
+        this.showDivider = false;
+        /**
+         * Shows or hides the section headers based on the expanded state of the side navigation.
+         *
+         * @internal
+         */
+        this.hideHeaderText = false;
+        /**
+         * @internal
+         */
+        this.sideNavigationContext = providerUtils.consume({ host: this, context: SideNavigation.Context });
     }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('role', ROLE.GROUP);
     }
     update(changedProperties) {
+        var _a;
         super.update(changedProperties);
         if ((changedProperties.has('ariaLabel') || changedProperties.has('headerText')) &&
             (!this.ariaLabel || this.ariaLabel === changedProperties.get('headerText'))) {
@@ -57,11 +75,17 @@ class MenuSection extends Component {
             // more details: https://nolanlawson.com/2022/11/28/shadow-dom-and-accessibility-the-trouble-with-aria/
             this.ariaLabel = this.headerText || '';
         }
+        const context = (_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value;
+        if (!context)
+            return;
+        const { expanded } = context;
+        this.hideHeaderText = !expanded;
     }
     renderHeader() {
+        var _a, _b;
         if (this.headerText) {
             return html ` <mdc-listheader
-        part="header"
+        part="header ${((_b = (_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value) === null || _b === void 0 ? void 0 : _b.expanded) ? 'align-header' : ''}"
         header-text="${this.headerText}"
         prefix-icon="${ifDefined(this.prefixIcon)}"
       >
@@ -70,7 +94,11 @@ class MenuSection extends Component {
         return null;
     }
     render() {
-        return html `${this.renderHeader()}<slot></slot>`;
+        return html `
+      ${!this.hideHeaderText ? this.renderHeader() : null}
+      <slot></slot>
+      ${this.showDivider ? html `<mdc-divider variant="gradient" part="divider"></mdc-divider>` : null}
+    `;
     }
 }
 MenuSection.styles = [...Component.styles, ...styles];
@@ -86,4 +114,12 @@ __decorate([
     property({ type: String, attribute: 'prefix-icon' }),
     __metadata("design:type", String)
 ], MenuSection.prototype, "prefixIcon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'show-divider' }),
+    __metadata("design:type", Object)
+], MenuSection.prototype, "showDivider", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-header-text' }),
+    __metadata("design:type", Object)
+], MenuSection.prototype, "hideHeaderText", void 0);
 export default MenuSection;

package/dist/components/menusection/menusection.styles.js

@@ -6,8 +6,16 @@ const styles = css `
     height: 100%;
   }
 
-  ::slotted(mdc-divider) {
+  :host::part(divider) {
     margin-block: 0.25rem;
   }
+
+  :host(:dir(ltr))::part(align-header) {
+    padding-left: 1.75rem;
+  }
+
+  :host(:dir(rtl))::part(align-header) {
+    padding-right: 1.75rem;
+  }
 `;
 export default [styles];

package/dist/components/{navitem → navmenuitem}/index.d.ts

@@ -1,11 +1,11 @@
-import NavItem from './navitem.component';
+import NavMenuItem from './navmenuitem.component';
 import '../text';
 import '../badge';
 import '../icon';
 import '../tooltip';
 declare global {
     interface HTMLElementTagNameMap {
-        ['mdc-navitem']: NavItem;
+        ['mdc-navmenuitem']: NavMenuItem;
     }
 }
-export default NavItem;
+export default NavMenuItem;

package/dist/components/navmenuitem/index.js

@@ -0,0 +1,8 @@
+import NavMenuItem from './navmenuitem.component';
+import { TAG_NAME } from './navmenuitem.constants';
+import '../text';
+import '../badge';
+import '../icon';
+import '../tooltip';
+NavMenuItem.register(TAG_NAME);
+export default NavMenuItem;

package/dist/components/{navitem/navitem.component.d.ts → navmenuitem/navmenuitem.component.d.ts}

@@ -1,45 +1,45 @@
 import type { CSSResult, PropertyValues } from 'lit';
 import MenuItem from '../menuitem/menuitem.component';
-import type { BadgeType } from './navitem.types';
-declare const NavItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof MenuItem;
+import type { BadgeType } from './navmenuitem.types';
+declare const NavMenuItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof MenuItem;
 /**
- * `mdc-navitem` is a menuitem styled to work as a navigation tab.
+ * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.
  * It supports a leading icon, optional badge and dynamic text rendering.
  *
- * Note: `mdc-navitem` is intended to be used inside `mdc-navitemlist` as part of the sideNavigation
+ * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation
  * component. Its structure, spacing, and interactions are designed to align with
  * the visual and functional requirements of side navigation layouts.
  *
- * @tagname mdc-navitem
+ * @tagname mdc-navmenuitem
  *
  * @dependency mdc-icon
  * @dependency mdc-text
  * @dependency mdc-badge
  * @dependency mdc-tooltip
  *
- * @event click - (React: onClick) This event is dispatched when the navitem is clicked.
- * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navitem.
- * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navitem.
- * @event focus - (React: onFocus) This event is dispatched when the navitem receives focus.
- * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
+ * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.
+ * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.
+ * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.
+ * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
  *
- * @cssproperty --mdc-navitem-color - Text color of the navitem in its normal state.
- * @cssproperty --mdc-navitem-border-color - Border color of the navitem in its normal state.
- * @cssproperty --mdc-navitem-disabled-color - Text color of the navitem when disabled.
- * @cssproperty --mdc-navitem-expanded-width - Width of the navItem when expanded.
- * @cssproperty --mdc-navitem-hover-background-color - Background color of the navitem when hovered.
- * @cssproperty --mdc-navitem-hover-active-background-color - Background color of the active navitem when hovered.
- * @cssproperty --mdc-navitem-pressed-background-color - Background color of the navitem when pressed.
- * @cssproperty --mdc-navitem-pressed-active-background-color - Background color of the active navitem when pressed.
- * @cssproperty --mdc-navitem-disabled-background-color - Background color of the navitem when disabled.
- * @cssproperty --mdc-navitem-disabled-active-background-color - Background color of the active navitem when disabled.
- * @cssproperty --mdc-navitem-rest-active-background-color - Background color of the active nav item in its rest state.
+ * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.
+ * @cssproperty --mdc-navmenuitem-border-color - Border color of the navmenuitem in its normal state.
+ * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.
+ * @cssproperty --mdc-navmenuitem-expanded-width - Width of the navmenuitem when expanded.
+ * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.
+ * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.
+ * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.
+ * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.
+ * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.
+ * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.
+ * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.
  */
-declare class NavItem extends NavItem_base {
+declare class NavMenuItem extends NavMenuItem_base {
     /**
-     * The navitem's active state indicates whether it is currently toggled on (active) or off (inactive).
-     * When the active state is true, the navitem is considered to be in an active state, meaning it is toggled on.
-     * Conversely, when the active state is false, the navitem is in an inactive state, indicating it is toggled off.
+     * The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).
+     * When the active state is true, the navmenuitem is considered to be in an active state, meaning it is toggled on.
+     * Conversely, when the active state is false, the navmenuitem is in an inactive state, indicating it is toggled off.
      * @default undefined
      */
     active?: boolean;
@@ -59,14 +59,14 @@ declare class NavItem extends NavItem_base {
      */
     maxCounter: number;
     /**
-     * Id of the navItem (used as a identificator when used in the navItemList)
+     * Id of the navMenuItem (used as a identificator when used in the menubar)
      * Note: It has to be unique.
      *
      * @default undefined
      */
     navId?: string;
     /**
-     * Determines whether the navItem is expanded or not.
+     * Determines whether the navMenuItem is expanded or not.
      *
      * @internal
      */
@@ -76,7 +76,7 @@ declare class NavItem extends NavItem_base {
      */
     ariaLabel: string | null;
     /**
-     * When set to true, prevents the automatic setting of the `aria-current` attribute on the navitem
+     * When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem
      * when it becomes active. This is useful for cases where you want to maintain the visual active styling
      * but need to handle aria-current attribute differently or not at all.
      * The active button styling will still be applied regardless of this setting.
@@ -90,19 +90,19 @@ declare class NavItem extends NavItem_base {
      * @internal
      */
     private readonly sideNavigationContext;
+    constructor();
     connectedCallback(): void;
-    disconnectedCallback(): void;
     protected updated(): void;
     /**
-     * Check whether the navitem is inside a nested nav structure.
+     * Check whether the navmenuitem is inside a nested nav structure.
      * Returns `true` if there is a parent `mdc-menupopover`
      * This method assumes nesting implies deeper levels of nav hierarchy.
      */
     private isNested;
     /**
      * Modifies the icon name based on the active state.
-     * If the navItem is active, the icon name is suffixed with '-filled'.
-     * If the navItem is inactive, the icon name is restored to its original value.
+     * If the navMenuItem is active, the icon name is suffixed with '-filled'.
+     * If the navMenuItem is inactive, the icon name is restored to its original value.
      * If '-filled' icon is not available, the icon name remains unchanged.
      * @internal
      * @param active - The active state.
@@ -111,9 +111,9 @@ declare class NavItem extends NavItem_base {
     /**
      * Dispatch the activechange event.
      * @internal
-     * @param active - The active state of the navItem.
+     * @param active - The active state of the navMenuItem.
      */
-    private emitNavItemActiveChange;
+    private emitNavMenuItemActiveChange;
     private handleClickEvent;
     update(changedProperties: PropertyValues): void;
     private renderTextLabel;
@@ -122,4 +122,4 @@ declare class NavItem extends NavItem_base {
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
-export default NavItem;
+export default NavMenuItem;