@momentum-design/components 0.134.21 → 0.135.0

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

@@ -175,6 +175,11 @@ declare class DatePicker extends DatePicker_base implements AssociatedFormContro
     protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     private parseValueToInternal;
     private internalToValue;
+    private getParsedMin;
+    private getParsedMax;
+    private clampValueToRange;
+    private getFieldRange;
+    private getNextSpinbuttonValue;
     private syncFormValue;
     private commitValue;
     private notifyValueChange;

package/dist/components/datepicker/datepicker.component.js

@@ -179,8 +179,8 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
             this.syncFormValue();
         }
     }
-    parseValueToInternal() {
-        const parts = parseISODate(this.value);
+    parseValueToInternal(value = this.value) {
+        const parts = parseISODate(value);
         if (parts) {
             this.internalMonth = parts.month;
             this.internalDay = parts.day;
@@ -195,6 +195,86 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
     internalToValue() {
         return buildISODate(this.internalMonth, this.internalDay, this.internalYear);
     }
+    // AI-Assisted: keep input spinbuttons aligned with valid min/max date boundaries.
+    getParsedMin() {
+        var _a;
+        return this.min ? (_a = parseISO(this.min)) !== null && _a !== void 0 ? _a : undefined : undefined;
+    }
+    getParsedMax() {
+        var _a;
+        return this.max ? (_a = parseISO(this.max)) !== null && _a !== void 0 ? _a : undefined : undefined;
+    }
+    clampValueToRange(value) {
+        var _a, _b;
+        const dt = parseISO(value);
+        if (!dt)
+            return value;
+        const minDt = this.getParsedMin();
+        const maxDt = this.getParsedMax();
+        if (minDt && isBefore(dt, minDt))
+            return (_a = this.min) !== null && _a !== void 0 ? _a : value;
+        if (maxDt && isAfter(dt, maxDt))
+            return (_b = this.max) !== null && _b !== void 0 ? _b : value;
+        return value;
+    }
+    getFieldRange(field) {
+        const currentMonth = parseInt(this.internalMonth, 10) || undefined;
+        const currentYear = parseInt(this.internalYear, 10) || undefined;
+        const baseMin = getFieldMin(field);
+        const baseMax = getFieldMax(field, currentMonth, currentYear);
+        let min = baseMin;
+        let max = baseMax;
+        const minDt = this.getParsedMin();
+        const maxDt = this.getParsedMax();
+        if (field === 'year') {
+            if (minDt)
+                min = Math.max(min, minDt.getFullYear());
+            if (maxDt)
+                max = Math.min(max, maxDt.getFullYear());
+        }
+        else if (field === 'month' && currentYear) {
+            if (minDt && currentYear === minDt.getFullYear())
+                min = Math.max(min, minDt.getMonth() + 1);
+            if (maxDt && currentYear === maxDt.getFullYear())
+                max = Math.min(max, maxDt.getMonth() + 1);
+        }
+        else if (field === 'day' && currentMonth && currentYear) {
+            if (minDt &&
+                currentYear === minDt.getFullYear() &&
+                currentMonth === minDt.getMonth() + 1) {
+                min = Math.max(min, minDt.getDate());
+            }
+            if (maxDt &&
+                currentYear === maxDt.getFullYear() &&
+                currentMonth === maxDt.getMonth() + 1) {
+                max = Math.min(max, maxDt.getDate());
+            }
+        }
+        if (min > max) {
+            return { min: baseMin, max: baseMax, isMinConstrained: false, isMaxConstrained: false };
+        }
+        return {
+            min,
+            max,
+            isMinConstrained: min !== baseMin,
+            isMaxConstrained: max !== baseMax,
+        };
+    }
+    getNextSpinbuttonValue(currentValue, range, increment) {
+        if (increment) {
+            if (currentValue < range.min)
+                return range.min;
+            if (currentValue >= range.max)
+                return range.isMaxConstrained ? range.max : range.min;
+            return currentValue + 1;
+        }
+        if (currentValue > range.max)
+            return range.max;
+        if (currentValue <= range.min)
+            return range.isMinConstrained ? range.min : range.max;
+        return currentValue - 1;
+    }
+    // End AI-Assisted
     syncFormValue() {
         const val = this.value || this.internalToValue();
         if (this.internals) {
@@ -211,17 +291,13 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
     }
     commitValue() {
         const newVal = this.internalToValue();
-        if (newVal && newVal !== this.value) {
-            const dt = parseISO(newVal);
-            if (dt) {
-                const minDt = this.min ? parseISO(this.min) : undefined;
-                const maxDt = this.max ? parseISO(this.max) : undefined;
-                if (minDt && isBefore(dt, minDt))
-                    return;
-                if (maxDt && isAfter(dt, maxDt))
-                    return;
-            }
-            this.value = newVal;
+        if (newVal) {
+            const clampedVal = this.clampValueToRange(newVal);
+            if (clampedVal !== newVal)
+                this.parseValueToInternal(clampedVal);
+            if (clampedVal === this.value)
+                return;
+            this.value = clampedVal;
             this.syncFormValue();
             this.notifyValueChange();
         }
@@ -364,22 +440,19 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
     handleSpinbuttonKeydown(event, field) {
         if (this.readonly)
             return;
-        const currentMonth = parseInt(this.internalMonth, 10) || undefined;
-        const currentYear = parseInt(this.internalYear, 10) || undefined;
-        const minVal = getFieldMin(field);
-        const maxVal = getFieldMax(field, currentMonth, currentYear);
+        const range = this.getFieldRange(field);
         const currentVal = parseInt(this.getFieldValue(field), 10) || 0;
         switch (event.key) {
             case KEYS.ARROW_UP: {
                 event.preventDefault();
-                const newVal = currentVal >= maxVal ? minVal : currentVal + 1;
+                const newVal = this.getNextSpinbuttonValue(currentVal, range, true);
                 this.setFieldValue(field, newVal);
                 this.commitValue();
                 break;
             }
             case KEYS.ARROW_DOWN: {
                 event.preventDefault();
-                const newVal = currentVal <= minVal ? maxVal : currentVal - 1;
+                const newVal = this.getNextSpinbuttonValue(currentVal, range, false);
                 this.setFieldValue(field, newVal);
                 this.commitValue();
                 break;
@@ -399,7 +472,7 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
             default: {
                 if (/^\d$/.test(event.key)) {
                     event.preventDefault();
-                    this.handleDigitInput(event.key, field, minVal, maxVal);
+                    this.handleDigitInput(event.key, field, range.min, range.max);
                 }
                 else {
                     event.preventDefault();
@@ -549,10 +622,7 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
     // -- Render methods --
     renderSpinbutton(field) {
         const value = this.getFieldValue(field);
-        const currentMonth = parseInt(this.internalMonth, 10) || undefined;
-        const currentYear = parseInt(this.internalYear, 10) || undefined;
-        const minVal = getFieldMin(field);
-        const maxVal = getFieldMax(field, currentMonth, currentYear);
+        const range = this.getFieldRange(field);
         const labelMap = {
             month: this.localeMonthLabel,
             day: this.localeDayLabel,
@@ -569,8 +639,8 @@ class DatePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
         part="spinbutton spinbutton-${field}"
         role="spinbutton"
         aria-label="${labelMap[field]}"
-        aria-valuemin="${minVal}"
-        aria-valuemax="${maxVal}"
+        aria-valuemin="${range.min}"
+        aria-valuemax="${range.max}"
         aria-valuenow="${ifDefined(value ? parseInt(value, 10) : undefined)}"
         aria-description="${this.localeSpinbuttonDescription}"
         .value="${value}"

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

@@ -193,10 +193,14 @@ class FormfieldWrapper extends DisabledMixin(Component) {
         if (!this.helpText) {
             return nothing;
         }
-        return html `<div part="help-text-container">
-      <slot name="help-icon">${this.renderHelpTextIcon()}</slot>
+        return html `<mdc-statusmessage
+      part="help-text-container"
+      severity="${DEFAULTS.VALIDATION}"
+      exportparts="container: help-text-container, icon: helper-icon, text: help-text"
+    >
+      <slot name="help-icon" slot="icon">${this.renderHelpTextIcon()}</slot>
       <slot name="help-text">${this.renderHelpText()}</slot>
-    </div>`;
+    </mdc-statusmessage>`;
     }
 }
 FormfieldWrapper.styles = [...Component.styles, ...styles];

package/dist/components/formfieldwrapper/formfieldwrapper.constants.js

@@ -1,14 +1,9 @@
 import utils from '../../utils/tag-name';
 import { POPOVER_PLACEMENT, STRATEGY } from '../popover/popover.constants';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
+import { STATUSMESSAGE_SEVERITY } from '../statusmessage/statusmessage.constants';
 const TAG_NAME = utils.constructTagName('formfieldwrapper');
-const VALIDATION = {
-    DEFAULT: 'default',
-    ERROR: 'error',
-    PRIORITY: 'priority',
-    SUCCESS: 'success',
-    WARNING: 'warning',
-};
+const VALIDATION = STATUSMESSAGE_SEVERITY;
 const DEFAULTS = {
     VALIDATION: VALIDATION.DEFAULT,
     HELPER_TEXT_ID: 'helper-text-id',

package/dist/components/formfieldwrapper/formfieldwrapper.styles.js

@@ -59,6 +59,16 @@ const styles = css `
     color: var(--mdc-help-text-color);
   }
 
+  mdc-statusmessage[part='help-text-container'] {
+    --mdc-statusmessage-color: var(--mdc-help-text-color);
+    --mdc-statusmessage-font-size: var(--mdc-help-text-font-size);
+    --mdc-statusmessage-font-weight: var(--mdc-help-text-font-weight);
+    --mdc-statusmessage-line-height: var(--mdc-help-text-line-height);
+    --mdc-statusmessage-gap: 0.5rem;
+
+    width: 100%;
+  }
+
   :host::part(info-icon-btn) {
     align-self: flex-start;
   }

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

@@ -1,6 +1,6 @@
 import type { ValueOf } from '../../utils/types';
-import type { IconNames } from '../icon/icon.types';
+import type { StatusMessageIcon } from '../statusmessage/statusmessage.types';
 import { VALIDATION } from './formfieldwrapper.constants';
 type ValidationType = ValueOf<typeof VALIDATION>;
-type HelperIconsList = Extract<IconNames, 'error-legacy-badge-filled' | 'warning-badge-filled' | 'check-circle-badge-filled' | 'priority-badge-filled'> | '';
+type HelperIconsList = StatusMessageIcon;
 export type { HelperIconsList, ValidationType };

package/dist/components/formfieldwrapper/formfieldwrapper.utils.js

@@ -1,12 +1,3 @@
-import { VALIDATION } from './formfieldwrapper.constants';
-const getHelperIcon = (type) => {
-    const helperIconSizeMap = {
-        [VALIDATION.ERROR]: 'error-legacy-badge-filled',
-        [VALIDATION.WARNING]: 'warning-badge-filled',
-        [VALIDATION.SUCCESS]: 'check-circle-badge-filled',
-        [VALIDATION.PRIORITY]: 'priority-badge-filled',
-        [VALIDATION.DEFAULT]: '',
-    };
-    return helperIconSizeMap[type] || '';
-};
+import { STATUSMESSAGE_ICON_NAME_BY_SEVERITY } from '../statusmessage/statusmessage.constants';
+const getHelperIcon = (type) => STATUSMESSAGE_ICON_NAME_BY_SEVERITY[type] || '';
 export { getHelperIcon };

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

@@ -1,5 +1,6 @@
 import '../button';
 import '../icon';
+import '../statusmessage';
 import '../text';
 import '../toggletip';
 import FormfieldWrapper from './formfieldwrapper.component';

package/dist/components/formfieldwrapper/index.js

@@ -1,5 +1,6 @@
 import '../button';
 import '../icon';
+import '../statusmessage';
 import '../text';
 import '../toggletip';
 import FormfieldWrapper from './formfieldwrapper.component';

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

@@ -235,7 +235,8 @@ class MenuBar extends KeyDownHandledMixin(KeyToActionMixin(Component)) {
         return !!element.closest(MENUPOPOVER_TAGNAME) && element.role === ROLE.MENUITEM;
     }
     async closeAllMenuPopovers() {
-        const popovers = this.depthManager.popUntil(item => this.contains(item));
+        const allPopovers = this.getAllPopovers();
+        const popovers = this.depthManager.popUntil(item => allPopovers.includes(item));
         await Promise.all(popovers.map(popover => popover.updateComplete));
     }
     async crossMenubarNavigationOnLeft(element) {

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

@@ -102,7 +102,7 @@ declare class MenuPopover extends Popover {
     onOutsidePopoverClick: (event: MouseEvent) => void;
     /**
      * Toggles the visibility of the popover.
-     * This method checks if the trigger element has the `soft-disabled` attribute.
+     * This method checks if the trigger element has the `disabled` or `soft-disabled` attribute.
      * If it does, the popover will not be toggled.
      * If the popover is currently visible, it hides the popover; otherwise, it shows the popover.
      * @returns - This method does not return anything.

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

@@ -78,14 +78,14 @@ class MenuPopover extends Popover {
         };
         /**
          * Toggles the visibility of the popover.
-         * This method checks if the trigger element has the `soft-disabled` attribute.
+         * This method checks if the trigger element has the `disabled` or `soft-disabled` attribute.
          * If it does, the popover will not be toggled.
          * If the popover is currently visible, it hides the popover; otherwise, it shows the popover.
          * @returns - This method does not return anything.
          */
         this.togglePopoverVisible = (event) => {
-            var _a;
-            if ((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('soft-disabled'))
+            var _a, _b;
+            if (((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('disabled')) || ((_b = this.triggerElement) === null || _b === void 0 ? void 0 : _b.hasAttribute('soft-disabled')))
                 return;
             // Handle mouse click in the parent menupopover to hide open sibling submenus
             if (event.composedPath().find(el => el.tagName === this.tagName) === this) {
@@ -179,7 +179,7 @@ class MenuPopover extends Popover {
                 case ACTIONS.RIGHT: {
                     // If there is a submenu, open it.
                     const subMenu = this.getSubMenuPopoverOfTarget(target);
-                    if (subMenu) {
+                    if (subMenu && !target.hasAttribute('soft-disabled')) {
                         subMenu.show();
                         isKeyHandled = true;
                     }

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

@@ -5,7 +5,7 @@ import type { PopoverPlacement } from '../popover/popover.types';
 import type { TooltipType } from '../tooltip/tooltip.types';
 import type { BadgeType } from './navmenuitem.types';
 /**
- * `mdc-navmenuitem` is a menu item styled to work as a navigation tab inside `mdc-sidenavigation`. It renders a leading icon, an optional badge, and a dynamic label that appears when the surrounding side navigation is expanded. The item can be in an active or inactive state to indicate the current page, and a tooltip can be attached for collapsed states or for parent items whose nested child is active.
+ * `mdc-navmenuitem` is a `menuitem`-role component styled as a navigation tab, supporting a leading icon, optional badge, and dynamic text rendering. It can operate as a simple item, as a parent with a flyout submenu (`mdc-menupopover`), or as a parent with an inline dropdown submenu, and a tooltip can be attached for collapsed states or when a nested child is active.
  * 
  * **When to use**
  * 
@@ -37,6 +37,7 @@ import type { BadgeType } from './navmenuitem.types';
  * @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-notch-color - Notch color of the navmenuitem (if applicable) when active.
  * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.
  * @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.
@@ -50,7 +51,8 @@ import type { BadgeType } from './navmenuitem.types';
  * @csspart badge - The badge of the navmenuitem.
  * @csspart icon-container - The container of the icon.
  * @csspart text-container - The container of the text.
- * @csspart trailing-arrow - The trailing arrow of the navmenuitem.
+ * @csspart trailing-arrow - The trailing arrow of the navmenuitem when it has a flyout menu.
+ * @csspart trailing-arrow-dropdown - The trailing arrow of the navmenuitem when it has a dropdown menu.
  */
 declare class NavMenuItem extends MenuItem {
     /**
@@ -167,6 +169,11 @@ declare class NavMenuItem extends MenuItem {
      * @internal
      */
     hasActiveChild: boolean;
+    /**
+     * Tracks whether the dropdown submenu controlled by this navmenuitem is currently open.
+     * @internal
+     */
+    private dropdownOpen;
     /**
      * @internal
      */
@@ -184,6 +191,11 @@ declare class NavMenuItem extends MenuItem {
      * This method assumes nesting implies deeper levels of nav hierarchy.
      */
     private isNested;
+    /**
+     * Check whether the navmenuitem is inside a dropdown container (div[data-trigger]).
+     * @internal
+     */
+    private isInsideDropdownContainer;
     /**
      * Dispatch the activechange event.
      * @internal
@@ -191,6 +203,24 @@ declare class NavMenuItem extends MenuItem {
      */
     private emitNavMenuItemActiveChange;
     private handleClickEvent;
+    /**
+     * Toggles the visibility of the dropdown container associated with this navmenuitem.
+     * @internal
+     */
+    private toggleDropdown;
+    /**
+     * Opens the dropdown if it is closed.
+     */
+    openDropdown(): void;
+    /**
+     * Closes the dropdown if it is open.
+     */
+    closeDropdown(): void;
+    /**
+     * Returns the sibling div[data-trigger] element associated with this navmenuitem.
+     * @internal
+     */
+    private getDropdownContainer;
     private getFilledIconName;
     private renderBadge;
     render(): TemplateResult<1>;

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

@@ -13,12 +13,12 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { v4 } from 'uuid';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
 import { TAG_NAME as MENUPOPOVER_TAGNAME } from '../menupopover/menupopover.constants';
+import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
 import MenuItem from '../menuitem/menuitem.component';
 import providerUtils from '../../utils/provider';
 import SideNavigation from '../sidenavigation/sidenavigation.component';
-import { TAG_NAME as TOOLTIP_TAG_NAME } from '../tooltip/tooltip.constants';
 import { getIconNameWithoutStyle } from '../button/button.utils';
-import { ALLOWED_BADGE_TYPES, DEFAULTS, ICON_NAME } from './navmenuitem.constants';
+import { ALLOWED_BADGE_TYPES, DEFAULTS, ICON_NAME, TAG_NAME as NAVMENUITEM_TAGNAME } from './navmenuitem.constants';
 import styles from './navmenuitem.styles';
 /**
  * @tagname mdc-navmenuitem
@@ -41,6 +41,7 @@ import styles from './navmenuitem.styles';
  * @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-notch-color - Notch color of the navmenuitem (if applicable) when active.
  * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.
  * @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.
@@ -54,7 +55,8 @@ import styles from './navmenuitem.styles';
  * @csspart badge - The badge of the navmenuitem.
  * @csspart icon-container - The container of the icon.
  * @csspart text-container - The container of the text.
- * @csspart trailing-arrow - The trailing arrow of the navmenuitem.
+ * @csspart trailing-arrow - The trailing arrow of the navmenuitem when it has a flyout menu.
+ * @csspart trailing-arrow-dropdown - The trailing arrow of the navmenuitem when it has a dropdown menu.
  */
 class NavMenuItem extends MenuItem {
     constructor() {
@@ -96,6 +98,11 @@ class NavMenuItem extends MenuItem {
          * @internal
          */
         this.hasActiveChild = false;
+        /**
+         * Tracks whether the dropdown submenu controlled by this navmenuitem is currently open.
+         * @internal
+         */
+        this.dropdownOpen = false;
         /**
          * @internal
          */
@@ -122,6 +129,8 @@ class NavMenuItem extends MenuItem {
         }
         // Set in-menupopover attribute if nested
         this.toggleAttribute('in-menupopover', this.isNested());
+        // Set in-dropdown-container attribute if inside a dropdown div
+        this.toggleAttribute('in-dropdown-container', this.isInsideDropdownContainer());
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -139,7 +148,8 @@ class NavMenuItem extends MenuItem {
         super.updated(changedProperties);
         if (changedProperties.has('tooltipText') ||
             changedProperties.has('showLabel') ||
-            changedProperties.has('hasActiveChild')) {
+            changedProperties.has('hasActiveChild') ||
+            changedProperties.has('dropdownOpen')) {
             this.renderDynamicTooltip();
         }
         if (changedProperties.has('showLabel')) {
@@ -152,11 +162,36 @@ class NavMenuItem extends MenuItem {
         if (!context)
             return;
         // Determine expansion state
-        this.showLabel = this.isNested() ? true : context.expanded;
+        this.showLabel = this.isNested() || this.isInsideDropdownContainer() ? true : context.expanded;
+        // When sidenavigation collapses, close any open dropdown
+        if (!context.expanded && this.dropdownOpen) {
+            this.closeDropdown();
+        }
+        // When dropdown submenu type is turned off, close any open dropdown
+        if (!context.isDropdownSubmenuType && this.dropdownOpen) {
+            this.closeDropdown();
+        }
+        // In dropdown mode, manage parent active styling based on expanded state:
+        // Expanded + dropdown open: only the child should appear active, not the parent.
+        // Expanded + dropdown closed: parent should appear active when it has an active child.
+        // Collapsed (icon-only): parent should appear active when it has an active child.
+        if (context.isDropdownSubmenuType && this.hasActiveChild && context.isDropDownParent(this)) {
+            if (context.expanded && this.dropdownOpen) {
+                this.removeAttribute('active');
+                this.active = false;
+            }
+            else {
+                this.setAttribute('active', '');
+                this.active = true;
+            }
+        }
     }
     renderDynamicTooltip() {
         var _a;
         this.removeTooltip();
+        if (this.disabled || this.dropdownOpen) {
+            return;
+        }
         if (this.hasActiveChild && !this.isActiveParentTooltipText) {
             return;
         }
@@ -206,11 +241,90 @@ class NavMenuItem extends MenuItem {
         }
         return false;
     }
+    /**
+     * Check whether the navmenuitem is inside a dropdown container (div[data-trigger]).
+     * @internal
+     */
+    isInsideDropdownContainer() {
+        let parent = this.parentElement;
+        while (parent) {
+            if (parent.matches('div[data-trigger]')) {
+                return true;
+            }
+            parent = parent.parentElement;
+        }
+        return false;
+    }
     handleClickEvent() {
-        if (this.disabled || this.cannotActivate)
+        var _a;
+        if (this.disabled || this.cannotActivate || this.softDisabled)
             return;
+        const context = (_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value;
+        if ((context === null || context === void 0 ? void 0 : context.isDropdownSubmenuType) && (context === null || context === void 0 ? void 0 : context.expanded) && (context === null || context === void 0 ? void 0 : context.isDropDownParent(this))) {
+            this.toggleDropdown();
+            // move the focus to the first navmenuitem in the dropdown when opening the dropdown
+            if (this.dropdownOpen) {
+                const dropdownContainer = this.getDropdownContainer();
+                const firstNavMenuItem = dropdownContainer === null || dropdownContainer === void 0 ? void 0 : dropdownContainer.querySelector(NAVMENUITEM_TAGNAME);
+                firstNavMenuItem === null || firstNavMenuItem === void 0 ? void 0 : firstNavMenuItem.focus();
+            }
+            return;
+        }
         this.emitNavMenuItemActiveChange(this.active);
     }
+    /**
+     * Toggles the visibility of the dropdown container associated with this navmenuitem.
+     * @internal
+     */
+    toggleDropdown() {
+        const dropdownContainer = this.getDropdownContainer();
+        if (!dropdownContainer)
+            return;
+        this.dropdownOpen = !this.dropdownOpen;
+        dropdownContainer.style.display = this.dropdownOpen ? 'flex' : 'none';
+        if (this.dropdownOpen) {
+            this.setAttribute('aria-expanded', 'true');
+        }
+        else {
+            this.removeAttribute('aria-expanded');
+        }
+    }
+    /**
+     * Opens the dropdown if it is closed.
+     */
+    openDropdown() {
+        if (this.dropdownOpen)
+            return;
+        const dropdownContainer = this.getDropdownContainer();
+        if (dropdownContainer) {
+            dropdownContainer.style.display = 'flex';
+        }
+        this.dropdownOpen = true;
+        this.setAttribute('aria-expanded', 'true');
+    }
+    /**
+     * Closes the dropdown if it is open.
+     */
+    closeDropdown() {
+        if (!this.dropdownOpen)
+            return;
+        const dropdownContainer = this.getDropdownContainer();
+        if (dropdownContainer) {
+            dropdownContainer.style.display = 'none';
+        }
+        this.dropdownOpen = false;
+        this.removeAttribute('aria-expanded');
+    }
+    /**
+     * Returns the sibling div[data-trigger] element associated with this navmenuitem.
+     * @internal
+     */
+    getDropdownContainer() {
+        var _a;
+        if (!this.id)
+            return null;
+        return (_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector(`div[data-trigger="${this.id}"]`);
+    }
     getFilledIconName() {
         if (!this.iconName) {
             return undefined;
@@ -241,10 +355,20 @@ class NavMenuItem extends MenuItem {
     render() {
         var _a;
         const context = (_a = this.sideNavigationContext) === null || _a === void 0 ? void 0 : _a.value;
+        const isDropdownMode = (context === null || context === void 0 ? void 0 : context.isDropdownSubmenuType) && (context === null || context === void 0 ? void 0 : context.expanded);
+        const isDropDownParent = context === null || context === void 0 ? void 0 : context.isDropDownParent(this);
+        const hasFlyoutSibling = context === null || context === void 0 ? void 0 : context.hasSiblingWithTriggerId(this);
         return html `
       <div part="icon-container">
-        <mdc-icon name="${this.iconName}" size="1.5" length-unit="rem" part="regular-icon"></mdc-icon>
-        ${!this.cannotActivate
+        ${this.iconName
+            ? html `<mdc-icon
+              name="${this.iconName}"
+              size="1.5"
+              length-unit="rem"
+              part="regular-icon"
+            ></mdc-icon>`
+            : nothing}
+        ${!this.cannotActivate && this.iconName
             ? html `<mdc-icon
               name="${this.getFilledIconName()}"
               size="1.5"
@@ -266,7 +390,16 @@ class NavMenuItem extends MenuItem {
             ${this.renderBadge(this.showLabel)}
           `
             : nothing}
-      ${(context === null || context === void 0 ? void 0 : context.hasSiblingWithTriggerId(this))
+      ${isDropdownMode && isDropDownParent
+            ? html ` <mdc-icon
+            name=${ICON_NAME.DOWN_ARROW}
+            length-unit="rem"
+            part="trailing-arrow-dropdown"
+            class="${this.dropdownOpen ? 'arrow-rotated' : ''}"
+          >
+          </mdc-icon>`
+            : nothing}
+      ${hasFlyoutSibling
             ? html ` <mdc-icon name=${ICON_NAME.RIGHT_ARROW} length-unit="rem" part="trailing-arrow"> </mdc-icon>`
             : nothing}
     `;
@@ -341,4 +474,8 @@ __decorate([
     state(),
     __metadata("design:type", Boolean)
 ], NavMenuItem.prototype, "hasActiveChild", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], NavMenuItem.prototype, "dropdownOpen", void 0);
 export default NavMenuItem;

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

@@ -6,6 +6,7 @@ declare const ALLOWED_BADGE_TYPES: {
 };
 declare const ICON_NAME: {
     readonly RIGHT_ARROW: Extract<IconNames, "arrow-right-bold">;
+    readonly DOWN_ARROW: Extract<IconNames, "arrow-down-bold">;
 };
 declare const DEFAULTS: {
     readonly MAX_COUNTER: 99;