@momentum-design/components 0.123.5 → 0.124.0

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

@@ -327,7 +327,7 @@ class MenuBar extends Component {
         }
     }
     render() {
-        return html `<slot role="${ROLE.GROUP}"></slot>`;
+        return html `<slot></slot>`;
     }
 }
 MenuBar.styles = [...Component.styles, ...styles];

package/dist/components/menuitem/menuitem.styles.js

@@ -6,7 +6,7 @@ const styles = css `
   }
   :host::part(trailing-arrow),
   :host::part(leading-arrow) {
-    --mdc-icon-size: 1.25rem;
+    --mdc-icon-size: 1rem;
   }
 `;
 export default [styles];

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

@@ -21,6 +21,11 @@ import type { IconNames } from '../icon/icon.types';
  * @csspart align-header - The header of the menusection when it is aligned to the start.
  * @csspart container - The container of the menusection.
  * @csspart divider - The divider of the menusection.
+ *
+ * @cssproperty --mdc-menusection-divider-margin-block - Sets the margin block of the divider.
+ * @cssproperty --mdc-menusection-gap - Sets the gap between items in the menusection.
+ * @cssproperty --mdc-menusection-divider-width - Sets the width of the divider.
+ * @cssproperty --mdc-menusection-header-padding - Sets the padding of the header, if present.
  */
 declare class MenuSection extends Component {
     /**

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

@@ -36,6 +36,11 @@ import { DEFAULTS } from './menusection.constants';
  * @csspart align-header - The header of the menusection when it is aligned to the start.
  * @csspart container - The container of the menusection.
  * @csspart divider - The divider of the menusection.
+ *
+ * @cssproperty --mdc-menusection-divider-margin-block - Sets the margin block of the divider.
+ * @cssproperty --mdc-menusection-gap - Sets the gap between items in the menusection.
+ * @cssproperty --mdc-menusection-divider-width - Sets the width of the divider.
+ * @cssproperty --mdc-menusection-header-padding - Sets the padding of the header, if present.
  */
 class MenuSection extends Component {
     constructor() {

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

@@ -1,21 +1,24 @@
 import { css } from 'lit';
 const styles = css `
   :host {
+    --mdc-menusection-divider-margin-block: 0.25rem;
+    --mdc-menusection-gap: 0rem;
+    --mdc-menusection-divider-width: 100%;
+    --mdc-menusection-header-padding: 0.5rem 1.75rem;
+
     display: flex;
     flex-direction: column;
     height: 100%;
+    gap: var(--mdc-menusection-gap);
   }
 
   :host::part(divider) {
-    margin-block: 0.25rem;
-  }
-
-  :host(:dir(ltr))::part(align-header) {
-    padding-left: 1.75rem;
+    width: var(--mdc-menusection-divider-width);
+    margin-block: var(--mdc-menusection-divider-margin-block);
   }
 
-  :host(:dir(rtl))::part(align-header) {
-    padding-right: 1.75rem;
+  :host::part(align-header) {
+    --mdc-listheader-padding: var(--mdc-menusection-header-padding);
   }
 `;
 export default [styles];

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

@@ -1,11 +1,14 @@
-import type { CSSResult, PropertyValues } from 'lit';
+import type { CSSResult, TemplateResult } from 'lit';
 import MenuItem from '../menuitem/menuitem.component';
+import type { IconNames } from '../icon/icon.types';
+import type { PopoverPlacement } from '../popover/popover.types';
 import type { BadgeType } from './navmenuitem.types';
-declare const NavMenuItem_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/IconNameMixin").IconNameMixinInterface> & typeof MenuItem;
 /**
  * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.
  * It supports a leading icon, optional badge and dynamic text rendering.
  *
+ * The navmenuitem can be in an active or inactive state, indicating whether it is currently selected.
+ *
  * 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.
@@ -25,17 +28,21 @@ declare const NavMenuItem_base: import("../../utils/mixins/index.types").Constru
  * @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-navmenuitem-in-sidenav-expanded-width - Width of the navmenuitem when expanded.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-left - Left margin of the navmenuitem, when expanded.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-right - Right margin of the navmenuitem, when expanded.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-width - Width of the navmenuitem when collapsed.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-left - Left margin of the navmenuitem, when collapsed.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-right - Right margin of the navmenuitem, when collapsed.
  * @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-rest-active-background-color - Background color of the active nav item in its rest state.
  * @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.
  *
  * @csspart arrow - The arrow of the navmenuitem.
  * @csspart badge - The badge of the navmenuitem.
@@ -43,14 +50,30 @@ declare const NavMenuItem_base: import("../../utils/mixins/index.types").Constru
  * @csspart text-container - The container of the text.
  * @csspart trailing-arrow - The trailing arrow of the navmenuitem.
  */
-declare class NavMenuItem extends NavMenuItem_base {
+declare class NavMenuItem extends MenuItem {
     /**
      * 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.
+     * If cannotActivate is set to true, the surrounding SideNavigation will
+     * not set this property when the navmenuitem is clicked.
+     *
      * @default undefined
      */
     active?: boolean;
+    /**
+     * When set to true, prevents the navmenuitem from being activated.
+     * This is useful for cases where the navmenuitem is used as a button
+     * or link, where not the content on the current page is changing.
+     * By default this is set to false, making the navmenuitem activatable (= aria-current gets set when active).
+     *
+     * @default false
+     */
+    cannotActivate?: boolean;
+    /**
+     * Name of the leading icon (= filename).
+     *
+     * If no `icon-name` is provided, no icon will be rendered.
+     */
+    iconName?: IconNames;
     /**
      * Type of the badge
      * Can be `dot` (notification) or `counter`.
@@ -74,9 +97,10 @@ declare class NavMenuItem extends NavMenuItem_base {
      */
     navId?: string;
     /**
-     * Determines whether the navMenuItem is expanded or not.
+     * Determines whether the nav item is expanded or not.
      *
-     * @internal
+     * If used in SideNavigation, this property is automatically managed by the SideNavigation component.
+     * @default undefined
      */
     showLabel?: boolean;
     /**
@@ -88,16 +112,50 @@ declare class NavMenuItem extends NavMenuItem_base {
      * 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.
+     *
+     * If you also want to prevent activation, use the `cannot-activate` property instead.
+     *
+     * @default undefined
      */
     disableAriaCurrent?: boolean;
     /**
-     * The tooltip text is displayed on hover of the list item.
+     * The tooltip text is displayed on hover of the nav item.
+     * Will only be shown when the `show-label` property is false
+     * (i.e., when the nav item is collapsed).
      */
     tooltipText?: string;
     /**
+     * The placement of the tooltip relative to the nav item.
+     * @default 'right'
+     */
+    tooltipPlacement: PopoverPlacement;
+    /**
+     * The appearance behavior of the tooltip.
+     * Options are 'when-collapsed' (default) or 'always'.
+     *
+     * @default 'when-collapsed'
+     */
+    tooltipAppearance: 'when-collapsed' | 'always';
+    /**
+     * The boundary padding for the tooltip.
+     * This defines the minimum distance in pixels between the tooltip and the edges of the viewport.
+     * @default 0
+     */
+    tooltipBoundaryPadding?: number;
+    /**
+     * Tooltip text shown when this parent NavItem has a active child navitem.
+     * This is useful for nested navmenuitems within a sidenavigation.
+     *
+     * Make sure to include what was normally used as the `tooltip-text` in this property.
+     * i.e. `Messaging, contains active navmenuitem`
+     */
+    isActiveParentTooltipText?: string;
+    /**
+     * Indicates whether this navmenuitem has an active child navmenuitem.
+     * This is used to manage tooltip display for parent navmenuitems in nested navigation structures.
      * @internal
      */
-    private prevIconName?;
+    hasActiveChild: boolean;
     /**
      * @internal
      */
@@ -105,24 +163,15 @@ declare class NavMenuItem extends NavMenuItem_base {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected updated(): void;
-    private removeTooltip;
+    protected updated(changedProperties: Map<string, any>): void;
     private renderDynamicTooltip;
+    private removeTooltip;
     /**
      * 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 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.
-     */
-    private modifyIconName;
     /**
      * Dispatch the activechange event.
      * @internal
@@ -130,11 +179,9 @@ declare class NavMenuItem extends NavMenuItem_base {
      */
     private emitNavMenuItemActiveChange;
     private handleClickEvent;
-    update(changedProperties: PropertyValues): void;
-    private renderTextLabel;
-    private renderArrowIcon;
+    private getFilledIconName;
     private renderBadge;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
 export default NavMenuItem;

package/dist/components/navmenuitem/navmenuitem.component.js

@@ -8,23 +8,24 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { v4 } from 'uuid';
-import providerUtils from '../../utils/provider';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
-import { IconNameMixin } from '../../utils/mixins/IconNameMixin';
 import MenuItem from '../menuitem/menuitem.component';
-import { getIconNameWithoutStyle } from '../button/button.utils';
+import providerUtils from '../../utils/provider';
 import SideNavigation from '../sidenavigation/sidenavigation.component';
 import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
-import { DEFAULTS, ALLOWED_BADGE_TYPES, ICON_NAME } from './navmenuitem.constants';
+import { getIconNameWithoutStyle } from '../button/button.utils';
+import { ALLOWED_BADGE_TYPES, DEFAULTS, ICON_NAME } from './navmenuitem.constants';
 import styles from './navmenuitem.styles';
 /**
  * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.
  * It supports a leading icon, optional badge and dynamic text rendering.
  *
+ * The navmenuitem can be in an active or inactive state, indicating whether it is currently selected.
+ *
  * 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.
@@ -44,17 +45,21 @@ import styles from './navmenuitem.styles';
  * @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-navmenuitem-in-sidenav-expanded-width - Width of the navmenuitem when expanded.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-left - Left margin of the navmenuitem, when expanded.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-right - Right margin of the navmenuitem, when expanded.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-width - Width of the navmenuitem when collapsed.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-left - Left margin of the navmenuitem, when collapsed.
+ * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-right - Right margin of the navmenuitem, when collapsed.
  * @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-rest-active-background-color - Background color of the active nav item in its rest state.
  * @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.
  *
  * @csspart arrow - The arrow of the navmenuitem.
  * @csspart badge - The badge of the navmenuitem.
@@ -62,9 +67,18 @@ import styles from './navmenuitem.styles';
  * @csspart text-container - The container of the text.
  * @csspart trailing-arrow - The trailing arrow of the navmenuitem.
  */
-class NavMenuItem extends IconNameMixin(MenuItem) {
+class NavMenuItem extends MenuItem {
     constructor() {
         super();
+        /**
+         * When set to true, prevents the navmenuitem from being activated.
+         * This is useful for cases where the navmenuitem is used as a button
+         * or link, where not the content on the current page is changing.
+         * By default this is set to false, making the navmenuitem activatable (= aria-current gets set when active).
+         *
+         * @default false
+         */
+        this.cannotActivate = DEFAULTS.CANNOT_ACTIVATE;
         /**
          * 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`.
@@ -75,6 +89,24 @@ class NavMenuItem extends IconNameMixin(MenuItem) {
          * Aria-label attribute to be set for accessibility
          */
         this.ariaLabel = null;
+        /**
+         * The placement of the tooltip relative to the nav item.
+         * @default 'right'
+         */
+        this.tooltipPlacement = 'right';
+        /**
+         * The appearance behavior of the tooltip.
+         * Options are 'when-collapsed' (default) or 'always'.
+         *
+         * @default 'when-collapsed'
+         */
+        this.tooltipAppearance = 'when-collapsed';
+        /**
+         * Indicates whether this navmenuitem has an active child navmenuitem.
+         * This is used to manage tooltip display for parent navmenuitems in nested navigation structures.
+         * @internal
+         */
+        this.hasActiveChild = false;
         /**
          * @internal
          */
@@ -92,10 +124,6 @@ class NavMenuItem extends IconNameMixin(MenuItem) {
             this.dispatchEvent(event);
         };
         this.addEventListener('click', this.handleClickEvent.bind(this));
-        this.addEventListener('focusin', this.renderDynamicTooltip.bind(this));
-        this.addEventListener('mouseenter', this.renderDynamicTooltip.bind(this));
-        this.addEventListener('focusout', this.removeTooltip.bind(this));
-        this.addEventListener('mouseout', this.removeTooltip.bind(this));
     }
     connectedCallback() {
         super.connectedCallback();
@@ -110,45 +138,46 @@ class NavMenuItem extends IconNameMixin(MenuItem) {
         super.disconnectedCallback();
         this.removeTooltip();
     }
-    updated() {
-        var _a, _b;
+    updated(changedProperties) {
+        var _a;
+        super.updated(changedProperties);
+        if (changedProperties.has('tooltipText') ||
+            changedProperties.has('showLabel') ||
+            changedProperties.has('hasActiveChild')) {
+            this.renderDynamicTooltip();
+        }
+        if (changedProperties.has('showLabel')) {
+            // If collapsed and aria-label is not set, use visible label
+            if (!this.showLabel && !this.getAttribute('aria-label') && this.label) {
+                this.setAttribute('aria-label', this.label);
+            }
+        }
         const context = (_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value;
         if (!context)
             return;
         // Determine expansion state
         this.showLabel = this.isNested() ? true : context.expanded;
-        // Manage aria-label for accessibility
-        if (this.showLabel) {
-            this.removeAttribute('aria-label');
-        }
-        else {
-            const label = (_b = this.label) !== null && _b !== void 0 ? _b : '';
-            this.ariaLabel = this.ariaLabel || label;
-            this.setAttribute('aria-label', label);
-        }
-    }
-    removeTooltip() {
-        // Remove any existing tooltip.
-        const existingTooltip = document.querySelector(`${TOOLTIP_TAG_NAME}[triggerid="${this.id}"]`);
-        if (existingTooltip) {
-            existingTooltip.remove();
-        }
     }
     renderDynamicTooltip() {
-        if (!this.tooltipText) {
+        var _a;
+        this.removeTooltip();
+        if (this.hasActiveChild && !this.isActiveParentTooltipText) {
+            return;
+        }
+        if (!this.hasActiveChild &&
+            (!this.tooltipText || (this.tooltipAppearance === 'when-collapsed' && this.showLabel))) {
             return;
         }
         if (!this.id) {
             this.id = `mdc-navmenuitem-${v4()}`;
         }
-        this.removeTooltip();
-        // Create tooltip for the listitem element.
         const tooltip = document.createElement(TOOLTIP_TAG_NAME);
         tooltip.id = `mdc-navmenuitem-tooltip-${v4()}`;
-        tooltip.textContent = this.tooltipText;
+        tooltip.textContent = this.hasActiveChild ? this.isActiveParentTooltipText : this.tooltipText;
         tooltip.setAttribute('triggerid', this.id);
-        tooltip.setAttribute('visible', '');
         tooltip.setAttribute('show-arrow', '');
+        tooltip.setAttribute('placement', this.tooltipPlacement);
+        tooltip.setAttribute('boundary-padding', ((_a = this.tooltipBoundaryPadding) === null || _a === void 0 ? void 0 : _a.toString()) || '0');
         // Set the slot attribute if the parent element has a slot.
         if (this.hasAttribute('slot')) {
             tooltip.setAttribute('slot', this.getAttribute('slot') || '');
@@ -156,6 +185,13 @@ class NavMenuItem extends IconNameMixin(MenuItem) {
         // Attach the tooltip programmatically after the nearest parent element.
         this.after(tooltip);
     }
+    removeTooltip() {
+        // Remove any existing tooltip.
+        const existingTooltip = document.querySelector(`${TOOLTIP_TAG_NAME}[triggerid="${this.id}"]`);
+        if (existingTooltip) {
+            existingTooltip.remove();
+        }
+    }
     /**
      * Check whether the navmenuitem is inside a nested nav structure.
      * Returns `true` if there is a parent `mdc-menupopover`
@@ -171,59 +207,21 @@ class NavMenuItem extends IconNameMixin(MenuItem) {
         }
         return false;
     }
-    /**
-     * Modifies the icon name based on the active state.
-     * 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.
-     */
-    modifyIconName(active) {
-        if (!this.iconName)
-            return;
-        const isFilled = this.iconName.endsWith('-filled');
-        const baseIcon = getIconNameWithoutStyle(this.iconName);
-        if (active) {
-            if (!isFilled) {
-                this.prevIconName = this.iconName;
-                this.iconName = `${baseIcon}-filled`;
-            }
-        }
-        else if (this.prevIconName) {
-            this.iconName = this.prevIconName;
-        }
-    }
     handleClickEvent() {
-        if (this.disabled)
+        if (this.disabled || this.cannotActivate)
             return;
         this.emitNavMenuItemActiveChange(this.active);
     }
-    update(changedProperties) {
-        super.update(changedProperties);
-        if (changedProperties.has('active')) {
-            this.modifyIconName(this.active);
+    getFilledIconName() {
+        if (!this.iconName) {
+            return undefined;
         }
-    }
-    renderTextLabel(label) {
-        return html `
-      <mdc-text
-        type=${this.active ? TYPE.BODY_MIDSIZE_BOLD : TYPE.BODY_MIDSIZE_MEDIUM}
-        tagname=${VALID_TEXT_TAGS.SPAN}
-        part="text-container"
-      >
-        ${label}
-      </mdc-text>
-    `;
-    }
-    renderArrowIcon(showLabel) {
-        return html `
-      <mdc-icon
-        name=${ICON_NAME.RIGHT_ARROW}
-        length-unit="rem"
-        part="trailing-arrow ${showLabel ? '' : 'arrow'}"
-      ></mdc-icon>
-    `;
+        const isFilled = this.iconName.endsWith('-filled');
+        if (isFilled) {
+            return undefined;
+        }
+        const baseIcon = getIconNameWithoutStyle(this.iconName);
+        return `${baseIcon}-filled`;
     }
     renderBadge(showLabel) {
         const isValidBadgeType = Object.values(ALLOWED_BADGE_TYPES).includes(this.badgeType);
@@ -236,6 +234,7 @@ class NavMenuItem extends IconNameMixin(MenuItem) {
         type="${ifDefined(this.badgeType)}"
         counter="${ifDefined(this.counter)}"
         max-counter="${this.maxCounter}"
+        aria-hidden="true"
       >
       </mdc-badge>
     `;
@@ -245,11 +244,32 @@ class NavMenuItem extends IconNameMixin(MenuItem) {
         const context = (_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value;
         return html `
       <div part="icon-container">
-        <mdc-icon name="${this.iconName}" size="1.5" length-unit="rem" part="icon"></mdc-icon>
+        <mdc-icon name="${this.iconName}" size="1.5" length-unit="rem" part="regular-icon"></mdc-icon>
+        ${!this.cannotActivate
+            ? html `<mdc-icon
+              name="${this.getFilledIconName()}"
+              size="1.5"
+              length-unit="rem"
+              part="filled-icon"
+            ></mdc-icon>`
+            : nothing}
         ${!this.showLabel ? this.renderBadge(this.showLabel) : nothing}
       </div>
-      ${this.showLabel ? html `${this.renderTextLabel(this.label)}${this.renderBadge(this.showLabel)}` : nothing}
-      ${(context === null || context === void 0 ? void 0 : context.hasSiblingWithTriggerId(this)) ? this.renderArrowIcon(this.showLabel) : nothing}
+      ${this.showLabel
+            ? html `
+            <mdc-text
+              type=${this.active ? TYPE.BODY_MIDSIZE_BOLD : TYPE.BODY_MIDSIZE_MEDIUM}
+              tagname=${VALID_TEXT_TAGS.SPAN}
+              part="text-container"
+            >
+              ${this.label}
+            </mdc-text>
+            ${this.renderBadge(this.showLabel)}
+          `
+            : nothing}
+      ${(context === null || context === void 0 ? void 0 : context.hasSiblingWithTriggerId(this))
+            ? html ` <mdc-icon name=${ICON_NAME.RIGHT_ARROW} length-unit="rem" part="trailing-arrow"> </mdc-icon>`
+            : nothing}
     `;
     }
 }
@@ -258,6 +278,14 @@ __decorate([
     property({ type: Boolean, reflect: true }),
     __metadata("design:type", Boolean)
 ], NavMenuItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'cannot-activate' }),
+    __metadata("design:type", Boolean)
+], NavMenuItem.prototype, "cannotActivate", void 0);
+__decorate([
+    property({ type: String, attribute: 'icon-name', reflect: true }),
+    __metadata("design:type", String)
+], NavMenuItem.prototype, "iconName", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'badge-type' }),
     __metadata("design:type", String)
@@ -290,4 +318,24 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'tooltip-text' }),
     __metadata("design:type", String)
 ], NavMenuItem.prototype, "tooltipText", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'tooltip-placement' }),
+    __metadata("design:type", String)
+], NavMenuItem.prototype, "tooltipPlacement", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'tooltip-appearance' }),
+    __metadata("design:type", String)
+], NavMenuItem.prototype, "tooltipAppearance", void 0);
+__decorate([
+    property({ type: Number, reflect: true, attribute: 'tooltip-boundary-padding' }),
+    __metadata("design:type", Number)
+], NavMenuItem.prototype, "tooltipBoundaryPadding", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'is-active-parent-tooltip-text' }),
+    __metadata("design:type", String)
+], NavMenuItem.prototype, "isActiveParentTooltipText", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], NavMenuItem.prototype, "hasActiveChild", void 0);
 export default NavMenuItem;

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

@@ -13,5 +13,6 @@ declare const DEFAULTS: {
     readonly TAG_NAME: "span";
     readonly SIZE: 24;
     readonly VARIANT: string;
+    readonly CANNOT_ACTIVATE: false;
 };
 export { DEFAULTS, TAG_NAME, ALLOWED_BADGE_TYPES, ICON_NAME };

package/dist/components/navmenuitem/navmenuitem.constants.js

@@ -17,5 +17,6 @@ const DEFAULTS = {
     TAG_NAME: VALID_TEXT_TAGS.SPAN,
     SIZE: BUTTON_SIZES[24],
     VARIANT: VARIANTS.FLEXIBLE,
+    CANNOT_ACTIVATE: false,
 };
 export { DEFAULTS, TAG_NAME, ALLOWED_BADGE_TYPES, ICON_NAME };