@momentum-design/components 0.91.1 → 0.91.2

package/dist/components/{navitem/navitem.component.js → navmenuitem/navmenuitem.component.js}

@@ -17,44 +17,44 @@ import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import MenuItem from '../menuitem/menuitem.component';
 import { getIconNameWithoutStyle } from '../button/button.utils';
 import SideNavigation from '../sidenavigation/sidenavigation.component';
-import { DEFAULTS, ALLOWED_BADGE_TYPES, ICON_NAME } from './navitem.constants';
-import styles from './navitem.styles';
+import { DEFAULTS, ALLOWED_BADGE_TYPES, ICON_NAME } from './navmenuitem.constants';
+import styles from './navmenuitem.styles';
 /**
- * `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.
  */
-class NavItem extends IconNameMixin(MenuItem) {
+class NavMenuItem extends IconNameMixin(MenuItem) {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * The maximum number can be set up to 999, anything above that will be rendered as _999+_.
          * The max counter can be `9`, `99` or `999`.
@@ -72,28 +72,26 @@ class NavItem extends IconNameMixin(MenuItem) {
         /**
          * Dispatch the activechange event.
          * @internal
-         * @param active - The active state of the navItem.
+         * @param active - The active state of the navMenuItem.
          */
-        this.emitNavItemActiveChange = (active) => {
+        this.emitNavMenuItemActiveChange = (active) => {
             const event = new CustomEvent('activechange', {
                 detail: { navId: this.navId, active },
                 bubbles: true,
             });
             this.dispatchEvent(event);
         };
+        this.addEventListener('click', this.handleClickEvent);
     }
     connectedCallback() {
         super.connectedCallback();
         this.variant = undefined;
         this.tooltipPlacement = undefined;
-        this.addEventListener('click', this.handleClickEvent);
         if (!this.navId && this.onerror) {
-            this.onerror('[mdc-navitem] navId is required and was not provided.');
+            this.onerror('[mdc-navmenuitem] navId is required and was not provided.');
         }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener('click', this.handleClickEvent);
+        // Set in-menupopover attribute if nested
+        this.toggleAttribute('in-menupopover', this.isNested());
     }
     updated() {
         var _a, _b;
@@ -113,7 +111,7 @@ class NavItem extends IconNameMixin(MenuItem) {
         }
     }
     /**
-     * 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.
      */
@@ -129,8 +127,8 @@ class NavItem extends IconNameMixin(MenuItem) {
     }
     /**
      * 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.
@@ -153,7 +151,7 @@ class NavItem extends IconNameMixin(MenuItem) {
     handleClickEvent() {
         if (this.disabled)
             return;
-        this.emitNavItemActiveChange(this.active);
+        this.emitNavMenuItemActiveChange(this.active);
     }
     update(changedProperties) {
         super.update(changedProperties);
@@ -207,37 +205,37 @@ class NavItem extends IconNameMixin(MenuItem) {
     `;
     }
 }
-NavItem.styles = [...MenuItem.styles, ...styles];
+NavMenuItem.styles = [...MenuItem.styles, ...styles];
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)
-], NavItem.prototype, "active", void 0);
+], NavMenuItem.prototype, "active", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'badge-type' }),
     __metadata("design:type", String)
-], NavItem.prototype, "badgeType", void 0);
+], NavMenuItem.prototype, "badgeType", void 0);
 __decorate([
     property({ type: Number, reflect: true }),
     __metadata("design:type", Number)
-], NavItem.prototype, "counter", void 0);
+], NavMenuItem.prototype, "counter", void 0);
 __decorate([
     property({ type: Number, attribute: 'max-counter', reflect: true }),
     __metadata("design:type", Number)
-], NavItem.prototype, "maxCounter", void 0);
+], NavMenuItem.prototype, "maxCounter", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'nav-id' }),
     __metadata("design:type", String)
-], NavItem.prototype, "navId", void 0);
+], NavMenuItem.prototype, "navId", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'show-label' }),
     __metadata("design:type", Boolean)
-], NavItem.prototype, "showLabel", void 0);
+], NavMenuItem.prototype, "showLabel", void 0);
 __decorate([
     property({ type: String, attribute: 'aria-label' }),
     __metadata("design:type", Object)
-], NavItem.prototype, "ariaLabel", void 0);
+], NavMenuItem.prototype, "ariaLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'disable-aria-current' }),
     __metadata("design:type", Boolean)
-], NavItem.prototype, "disableAriaCurrent", void 0);
-export default NavItem;
+], NavMenuItem.prototype, "disableAriaCurrent", void 0);
+export default NavMenuItem;

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

@@ -1,4 +1,4 @@
-declare const TAG_NAME: "mdc-navitem";
+declare const TAG_NAME: "mdc-navmenuitem";
 declare const ALLOWED_BADGE_TYPES: {
     readonly DOT: "dot";
     readonly COUNTER: "counter";

package/dist/components/{navitem/navitem.constants.js → navmenuitem/navmenuitem.constants.js}

@@ -3,7 +3,7 @@ import { BUTTON_SIZES } from '../buttonsimple/buttonsimple.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { TYPE as BADGE_TYPE } from '../badge/badge.constants';
 import { VARIANTS } from '../sidenavigation/sidenavigation.constants';
-const TAG_NAME = utils.constructTagName('navitem');
+const TAG_NAME = utils.constructTagName('navmenuitem');
 const ALLOWED_BADGE_TYPES = {
     DOT: BADGE_TYPE.DOT,
     COUNTER: BADGE_TYPE.COUNTER,

package/dist/components/{navitem/navitem.styles.js → navmenuitem/navmenuitem.styles.js}

@@ -4,79 +4,83 @@ const styles = [
     hostFitContentStyles,
     css `
     :host {
-      --mdc-navitem-color: var(--mds-color-theme-text-primary-normal);
-      --mdc-navitem-disabled-color: var(--mds-color-theme-text-primary-disabled);
-      --mdc-navitem-border-color: var(--mds-color-theme-outline-button-normal);
-      --mdc-navitem-expanded-width: 12.75rem;
+      --mdc-navmenuitem-color: var(--mds-color-theme-text-primary-normal);
+      --mdc-navmenuitem-disabled-color: var(--mds-color-theme-text-primary-disabled);
+      --mdc-navmenuitem-border-color: var(--mds-color-theme-outline-button-normal);
+      --mdc-navmenuitem-expanded-width: 12.75rem;
 
       /* Background color when in default (normal) or active state */
-      --mdc-navitem-rest-active-background-color: var(--mds-color-theme-button-secondary-active-normal);
-      --mdc-navitem-hover-background-color: var(--mds-color-theme-button-secondary-hover);
-      --mdc-navitem-hover-active-background-color: var(--mds-color-theme-button-secondary-active-hover);
-      --mdc-navitem-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
-      --mdc-navitem-pressed-active-background-color: var(--mds-color-theme-button-secondary-active-pressed);
-      --mdc-navitem-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
-      --mdc-navitem-disabled-active-background-color: var(--mds-color-theme-button-secondary-active-disabled);
+      --mdc-navmenuitem-rest-active-background-color: var(--mds-color-theme-button-secondary-active-normal);
+      --mdc-navmenuitem-hover-background-color: var(--mds-color-theme-button-secondary-hover);
+      --mdc-navmenuitem-hover-active-background-color: var(--mds-color-theme-button-secondary-active-hover);
+      --mdc-navmenuitem-pressed-background-color: var(--mds-color-theme-button-secondary-pressed);
+      --mdc-navmenuitem-pressed-active-background-color: var(--mds-color-theme-button-secondary-active-pressed);
+      --mdc-navmenuitem-disabled-background-color: var(--mds-color-theme-button-secondary-disabled);
+      --mdc-navmenuitem-disabled-active-background-color: var(--mds-color-theme-button-secondary-active-disabled);
 
       position: relative;
       display: flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem;
-      color: var(--mdc-navitem-color);
-      border-color: var(--mdc-navitem-border-color);
-      border-radius: 1.25rem;
+      color: var(--mdc-navmenuitem-color);
+      border-color: var(--mdc-navmenuitem-border-color);
+      border-radius: 0.5rem;
       cursor: pointer;
     }
 
-    :host(:dir(ltr)) {
+    :host(:not([in-menupopover])) {
+      border-radius: 1.25rem;
+    }
+
+    :host(:not([in-menupopover]):dir(ltr)) {
       margin-left: 1rem;
     }
 
-    :host(:dir(rtl)) {
+    :host(:not([in-menupopover]):dir(rtl)) {
       margin-right: 1rem;
     }
 
     :host([show-label]) {
-      width: var(--mdc-navitem-expanded-width);
+      width: var(--mdc-navmenuitem-expanded-width);
     }
 
     :host([active]) {
-      background-color: var(--mdc-navitem-rest-active-background-color);
+      background-color: var(--mdc-navmenuitem-rest-active-background-color);
     }
 
     :host([disabled]) {
-      color: var(--mdc-navitem-disabled-color);
-      background-color: var(--mdc-navitem-disabled-background-color);
+      color: var(--mdc-navmenuitem-disabled-color);
+      background-color: var(--mdc-navmenuitem-disabled-background-color);
       pointer-events: none;
     }
 
     :host([active][disabled]) {
-      background-color: var(--mdc-navitem-disabled-active-background-color);
-      color: var(--mdc-navitem-disabled-color);
+      background-color: var(--mdc-navmenuitem-disabled-active-background-color);
+      color: var(--mdc-navmenuitem-disabled-color);
     }
 
     :host(:hover) {
-      background-color: var(--mdc-navitem-hover-background-color);
+      background-color: var(--mdc-navmenuitem-hover-background-color);
     }
 
     :host(:hover[active]) {
-      background-color: var(--mdc-navitem-hover-active-background-color);
+      background-color: var(--mdc-navmenuitem-hover-active-background-color);
     }
 
     :host(:active) {
-      background-color: var(--mdc-navitem-pressed-background-color);
+      background-color: var(--mdc-navmenuitem-pressed-background-color);
     }
 
     :host(:active[active]) {
-      background-color: var(--mdc-navitem-pressed-active-background-color);
+      background-color: var(--mdc-navmenuitem-pressed-active-background-color);
     }
 
-    :host::before {
+    :host(:not([in-menupopover]))::before {
       content: '';
       display: block;
       position: absolute;
-      background-color: var(--mdc-navitem-color);
+      background-color: var(--mdc-navmenuitem-color);
       width: 0.25rem;
       height: 1rem;
       pointer-events: none;
@@ -98,7 +102,7 @@ const styles = [
     }
 
     :host([disabled])::before {
-      background-color: var(--mdc-navitem-disabled-color);
+      background-color: var(--mdc-navmenuitem-disabled-color);
     }
 
     :host::part(text-container) {

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

@@ -1,5 +1,5 @@
 import { ValueOf } from '../../utils/types';
-import { ALLOWED_BADGE_TYPES } from './navitem.constants';
+import { ALLOWED_BADGE_TYPES } from './navmenuitem.constants';
 type BadgeType = ValueOf<typeof ALLOWED_BADGE_TYPES>;
 interface Events {
     onClickEvent: MouseEvent;

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

@@ -594,7 +594,7 @@ class Popover extends PreventScrollMixin(FocusTrapMixin(Component)) {
                 this.removeEventListener('keydown', this.onEscapeKeydown);
                 (_e = this.triggerElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('keydown', this.onEscapeKeydown);
             }
-            if (!this.disableAriaExpanded) {
+            if (this.disableAriaExpanded) {
                 this.triggerElement.removeAttribute('aria-expanded');
             }
             // Remove aria-haspopup if the popover is not interactive

package/dist/components/sidenavigation/index.d.ts

@@ -2,6 +2,7 @@ import SideNavigation from './sidenavigation.component';
 import '../text';
 import '../button';
 import '../divider';
+import '../menubar';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-sidenavigation']: SideNavigation;

package/dist/components/sidenavigation/index.js

@@ -3,5 +3,6 @@ import { TAG_NAME } from './sidenavigation.constants';
 import '../text';
 import '../button';
 import '../divider';
+import '../menubar';
 SideNavigation.register(TAG_NAME);
 export default SideNavigation;

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

@@ -10,20 +10,20 @@ import SideNavigationContext from './sidenavigation.context';
  * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`
  * - Toggleable expand/collapse behavior
  * - Displays brand logo and customer name
- * - Serves as a context provider for descendant components - `mdc-navitemlist` and `mdc-navitem`
+ * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`
  *
  * ### Usage:
- * In a sidenavigation, navitems can be used in the following ways:
+ * In a sidenavigation, navmenuitems can be used in the following ways:
  *
- * 1. **Simple navitem** – No submenu or interaction beyond selection.
+ * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.
  *
- * 2. **Navitem with submenu**:
- *    - Provide an `id` on the `mdc-navitem`
- *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem's `id`
+ * 2. **NavMenuItem with submenu**:
+ *    - Provide an `id` on the `mdc-navmenuitem`
+ *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`
  *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item
  *      inside the nested menupopover is active, conveying which submenu item is currently selected
  *
- * 3. **Actionable navitem (no submenu)**:
+ * 3. **Actionable navmenuitem (no submenu)**:
  *    - Performs an action such as navigation or alert trigger
  *    - Set `disable-aria-current="true"` to maintain visual active state without navigation behavior
  *
@@ -33,15 +33,16 @@ import SideNavigationContext from './sidenavigation.context';
  * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`
  *
  * #### Accessibility Notes:
- * - Always provide meaningful `aria-label` attributes for both `mdc-navitem` and `mdc-navitemlist`
+ * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`
  * to ensure screen reader support
  * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button
  *
  * @dependency mdc-text
  * @dependency mdc-button
  * @dependency mdc-divider
+ * @dependency mdc-menubar
  *
- * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
  *
  * @tagname mdc-sidenavigation
  *
@@ -68,10 +69,10 @@ declare class SideNavigation extends Provider<SideNavigationContext> {
      */
     variant: SideNavigationVariant;
     /**
-     * Name of the customer. This is displayed in the bottom section of the side-navigation component.
+     * Displays footer text in the bottom section of the sidenavigation.
      * @default ''
      */
-    customerName: string;
+    footerText: string;
     /**
      * Determines whether the sideNavigation is expanded or not.
      *
@@ -115,6 +116,23 @@ declare class SideNavigation extends Provider<SideNavigationContext> {
      * Is called on every re-render, see Provider class
      */
     protected updateContext(): void;
+    /**
+     * Handle the navMenuItem active change event fired from the nested navMenuItem.
+     * @internal
+     * @param event - Custom Event fired from the nested navMenuItem.
+     */
+    private handleNestedNavMenuItemActiveChange;
+    /**
+     * Matches new navMenuItem with navId.
+     * @param NavMenuItem - The new active navMenuItem.
+     *
+     * @internal
+     */
+    private findNav;
+    /**
+     * Returns all nested, non-disabled mdc-navmenuitem elements inside this component.
+     */
+    private get navMenuItems();
     /**
      * Syncs `expanded` and `aria-expanded` based on `variant` and `flexibleExpanded`.
      *
@@ -138,6 +156,7 @@ declare class SideNavigation extends Provider<SideNavigationContext> {
      * @internal
      */
     private toggleSideNavigation;
+    private preventScrollOnSpace;
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }

package/dist/components/sidenavigation/sidenavigation.component.js

@@ -11,8 +11,10 @@ import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { Component, Provider } from '../../models';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { TAG_NAME as NAVMENUITEM_TAGNAME } from '../navmenuitem/navmenuitem.constants';
 import { DIRECTIONS, DIVIDER_VARIANT, DIVIDER_ORIENTATION } from '../divider/divider.constants';
 import { ROLE } from '../../utils/roles';
+import { KEYS } from '../../utils/keys';
 import { DEFAULTS, VARIANTS } from './sidenavigation.constants';
 import SideNavigationContext from './sidenavigation.context';
 import styles from './sidenavigation.styles';
@@ -24,20 +26,20 @@ import styles from './sidenavigation.styles';
  * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`
  * - Toggleable expand/collapse behavior
  * - Displays brand logo and customer name
- * - Serves as a context provider for descendant components - `mdc-navitemlist` and `mdc-navitem`
+ * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`
  *
  * ### Usage:
- * In a sidenavigation, navitems can be used in the following ways:
+ * In a sidenavigation, navmenuitems can be used in the following ways:
  *
- * 1. **Simple navitem** – No submenu or interaction beyond selection.
+ * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.
  *
- * 2. **Navitem with submenu**:
- *    - Provide an `id` on the `mdc-navitem`
- *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem's `id`
+ * 2. **NavMenuItem with submenu**:
+ *    - Provide an `id` on the `mdc-navmenuitem`
+ *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`
  *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item
  *      inside the nested menupopover is active, conveying which submenu item is currently selected
  *
- * 3. **Actionable navitem (no submenu)**:
+ * 3. **Actionable navmenuitem (no submenu)**:
  *    - Performs an action such as navigation or alert trigger
  *    - Set `disable-aria-current="true"` to maintain visual active state without navigation behavior
  *
@@ -47,15 +49,16 @@ import styles from './sidenavigation.styles';
  * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`
  *
  * #### Accessibility Notes:
- * - Always provide meaningful `aria-label` attributes for both `mdc-navitem` and `mdc-navitemlist`
+ * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`
  * to ensure screen reader support
  * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button
  *
  * @dependency mdc-text
  * @dependency mdc-button
  * @dependency mdc-divider
+ * @dependency mdc-menubar
  *
- * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.
+ * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.
  *
  * @tagname mdc-sidenavigation
  *
@@ -82,10 +85,10 @@ class SideNavigation extends Provider {
          */
         this.variant = DEFAULTS.VARIANT;
         /**
-         * Name of the customer. This is displayed in the bottom section of the side-navigation component.
+         * Displays footer text in the bottom section of the sidenavigation.
          * @default ''
          */
-        this.customerName = '';
+        this.footerText = '';
         /**
          * Toggles between true and false when it's variant is flexible.
          * @default true
@@ -104,6 +107,25 @@ class SideNavigation extends Provider {
          * @internal
          */
         this.arrowDirection = this.flexibleExpanded ? DIRECTIONS.NEGATIVE : DIRECTIONS.POSITIVE;
+        /**
+         * Handle the navMenuItem active change event fired from the nested navMenuItem.
+         * @internal
+         * @param event - Custom Event fired from the nested navMenuItem.
+         */
+        this.handleNestedNavMenuItemActiveChange = (event) => {
+            var _a;
+            if ((_a = this.context) === null || _a === void 0 ? void 0 : _a.value) {
+                const newNavMenuItem = this.findNav(this.navMenuItems, event.detail.navId);
+                this.context.value.setCurrentActiveNavMenuItem(newNavMenuItem);
+            }
+        };
+        /**
+         * Matches new navMenuItem with navId.
+         * @param NavMenuItem - The new active navMenuItem.
+         *
+         * @internal
+         */
+        this.findNav = (navs, navId) => navs.find(nav => nav.navId === navId);
         /**
          * Syncs `expanded` and `aria-expanded` based on `variant` and `flexibleExpanded`.
          *
@@ -123,6 +145,7 @@ class SideNavigation extends Provider {
                 default:
             }
         };
+        this.addEventListener('activechange', this.handleNestedNavMenuItemActiveChange);
     }
     connectedCallback() {
         super.connectedCallback();
@@ -157,6 +180,12 @@ class SideNavigation extends Provider {
             this.context.updateObservers();
         }
     }
+    /**
+     * Returns all nested, non-disabled mdc-navmenuitem elements inside this component.
+     */
+    get navMenuItems() {
+        return Array.from(this.querySelectorAll(`${NAVMENUITEM_TAGNAME}:not([disabled])`));
+    }
     /**
      * Sets the variant attribute for the sideNavigation component.
      * If the provided variant is not included in the variant,
@@ -180,6 +209,12 @@ class SideNavigation extends Provider {
         this.arrowDirection = this.arrowDirection === DIRECTIONS.NEGATIVE ? DIRECTIONS.POSITIVE : DIRECTIONS.NEGATIVE;
         this.updateExpansionState();
     }
+    preventScrollOnSpace(event) {
+        // Prevent default space key behavior to avoid scrolling the page
+        if (event.key === KEYS.SPACE) {
+            event.preventDefault();
+        }
+    }
     render() {
         var _a;
         if (this.variant === VARIANTS.HIDDEN) {
@@ -187,17 +222,25 @@ class SideNavigation extends Provider {
         }
         return html `
       <div part="side-navigation-container" id="side-nav-container">
-        <div part="scrollable-section">
-          <slot name="scrollable-section"></slot>
+        <div part="scrollable-section" tabindex="-1" @keydown=${this.preventScrollOnSpace}>
+          <slot name="scrollable-section">
+            <mdc-menubar>
+              <slot name="scrollable-menubar"></slot>
+            </mdc-menubar>
+          </slot>
         </div>
         <mdc-divider variant="gradient" part="separator"></mdc-divider>
         <div part="fixed-section">
-          <slot name="fixed-section"></slot>
+          <slot name="fixed-section">
+            <mdc-menubar>
+              <slot name="fixed-menubar"></slot>
+            </mdc-menubar>
+          </slot>
           <div part="brand-logo-container">
             <slot name="brand-logo"></slot>
             ${this.expanded
             ? html `<mdc-text type=${TYPE.BODY_MIDSIZE_MEDIUM} tagname=${VALID_TEXT_TAGS.SPAN} part="label"
-                  >${this.customerName}</mdc-text
+                  >${this.footerText}</mdc-text
                 >`
             : nothing}
           </div>
@@ -228,9 +271,9 @@ __decorate([
     __metadata("design:type", String)
 ], SideNavigation.prototype, "variant", void 0);
 __decorate([
-    property({ type: String, reflect: true, attribute: 'customer-name' }),
+    property({ type: String, reflect: true, attribute: 'footer-text' }),
     __metadata("design:type", String)
-], SideNavigation.prototype, "customerName", void 0);
+], SideNavigation.prototype, "footerText", void 0);
 __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)

package/dist/components/sidenavigation/sidenavigation.context.d.ts

@@ -1,15 +1,15 @@
-import type NavItem from '../navitem/navitem.component';
+import type NavMenuItem from '../navmenuitem/navmenuitem.component';
 declare class SideNavigationContext {
     variant?: string;
     expanded?: boolean;
-    private currentActiveNavItem?;
+    private currentActiveNavMenuItem?;
     parentNavTooltipText?: string;
     static context: {
         __context__: SideNavigationContext;
     };
     constructor(defaultVariant?: string, defaultExpanded?: boolean, defaultParentNavTooltipText?: string);
-    hasSiblingWithTriggerId(navItem: NavItem | undefined): boolean;
-    private getParentNavItems;
-    setCurrentActiveNavItem(navItem: NavItem | undefined): void;
+    hasSiblingWithTriggerId(navMenuItem: NavMenuItem | undefined): boolean;
+    private getParentNavMenuItems;
+    setCurrentActiveNavMenuItem(navMenuItem: NavMenuItem | undefined): void;
 }
 export default SideNavigationContext;