@momentum-design/components 0.134.21 → 0.134.22

package/dist/custom-elements.json

@@ -173,8 +173,8 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "components/accordionbutton/accordionbutton.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
@@ -493,8 +493,8 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
@@ -15177,6 +15177,24 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "clampValueToRange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "commitValue",
@@ -15305,6 +15323,19 @@
                 }
               }
             },
+            {
+              "kind": "method",
+              "name": "getFieldRange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "field",
+                  "type": {
+                    "text": "'month' | 'day' | 'year'"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "getFieldValue",
@@ -15323,6 +15354,56 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "getNextSpinbuttonValue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "currentValue",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "range",
+                  "type": {
+                    "text": "ReturnType<DatePicker['getFieldRange']>"
+                  }
+                },
+                {
+                  "name": "increment",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getParsedMax",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Date | undefined"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getParsedMin",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Date | undefined"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "getSpinbuttonInput",
@@ -15722,7 +15803,13 @@
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "value",
+                  "default": "this.value"
+                }
+              ]
             },
             {
               "kind": "field",
@@ -28937,7 +29024,7 @@
               "kind": "field",
               "name": "togglePopoverVisible",
               "privacy": "public",
-              "description": "Toggles the visibility of the popover.\nThis method checks if the trigger element has the `soft-disabled` attribute.\nIf it does, the popover will not be toggled.\nIf the popover is currently visible, it hides the popover; otherwise, it shows the popover.",
+              "description": "Toggles the visibility of the popover.\nThis method checks if the trigger element has the `disabled` or `soft-disabled` attribute.\nIf it does, the popover will not be toggled.\nIf the popover is currently visible, it hides the popover; otherwise, it shows the popover.",
               "return": {
                 "type": {
                   "text": ""
@@ -29920,6 +30007,10 @@
               "description": "Text color of the navmenuitem in its normal state.",
               "name": "--mdc-navmenuitem-color"
             },
+            {
+              "description": "Notch color of the navmenuitem (if applicable) when active.",
+              "name": "--mdc-navmenuitem-notch-color"
+            },
             {
               "description": "Text color of the navmenuitem when disabled.",
               "name": "--mdc-navmenuitem-disabled-color"
@@ -30067,13 +30158,17 @@
               "name": "text-container"
             },
             {
-              "description": "The trailing arrow of the navmenuitem.",
+              "description": "The trailing arrow of the navmenuitem when it has a flyout menu.",
               "name": "trailing-arrow",
               "inheritedFrom": {
                 "name": "MenuItem",
                 "module": "src/components/menuitem/menuitem.component.ts"
               }
             },
+            {
+              "description": "The trailing arrow of the navmenuitem when it has a dropdown menu.",
+              "name": "trailing-arrow-dropdown"
+            },
             {
               "description": "Allows customization of the leading part.",
               "name": "leading",
@@ -30198,6 +30293,17 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "closeDropdown",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Closes the dropdown if it is open."
+            },
             {
               "kind": "field",
               "name": "counter",
@@ -30501,6 +30607,17 @@
               "attribute": "nav-id",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "openDropdown",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Opens the dropdown if it is closed."
+            },
             {
               "kind": "method",
               "name": "removeTooltip",
@@ -31208,7 +31325,7 @@
             "module": "/src/components/menuitem/menuitem.component"
           },
           "tagName": "mdc-navmenuitem",
-          "jsDoc": "/**\n * @tagname mdc-navmenuitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-badge\n * @dependency mdc-tooltip\n *\n * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.\n * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-width - Width of the navmenuitem when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-left - Left margin of the navmenuitem, when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-right - Right margin of the navmenuitem, when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-width - Width of the navmenuitem when collapsed.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-left - Left margin of the navmenuitem, when collapsed.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-right - Right margin of the navmenuitem, when collapsed.\n * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.\n *\n * @csspart arrow - The arrow of the navmenuitem.\n * @csspart badge - The badge of the navmenuitem.\n * @csspart icon-container - The container of the icon.\n * @csspart text-container - The container of the text.\n * @csspart trailing-arrow - The trailing arrow of the navmenuitem.\n */",
+          "jsDoc": "/**\n * @tagname mdc-navmenuitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-badge\n * @dependency mdc-tooltip\n *\n * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.\n * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-width - Width of the navmenuitem when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-left - Left margin of the navmenuitem, when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-expanded-margin-right - Right margin of the navmenuitem, when expanded.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-width - Width of the navmenuitem when collapsed.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-left - Left margin of the navmenuitem, when collapsed.\n * @cssproperty --mdc-navmenuitem-in-sidenav-collapsed-margin-right - Right margin of the navmenuitem, when collapsed.\n * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-notch-color - Notch color of the navmenuitem (if applicable) when active.\n * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.\n *\n * @csspart arrow - The arrow of the navmenuitem.\n * @csspart badge - The badge of the navmenuitem.\n * @csspart icon-container - The container of the icon.\n * @csspart text-container - The container of the text.\n * @csspart trailing-arrow - The trailing arrow of the navmenuitem when it has a flyout menu.\n * @csspart trailing-arrow-dropdown - The trailing arrow of the navmenuitem when it has a dropdown menu.\n */",
           "customElement": true,
           "slots": [
             {
@@ -43908,6 +44025,17 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "submenuType",
+              "type": {
+                "text": "SideNavigationSubmenuType"
+              },
+              "description": "Determines how sibling submenus are displayed. There are 2 types of submenus supported:\n\n- `flyout`: Submenus are shown with `mdc-menupopover`.\n- `dropdown`: A parent `mdc-navmenuitem` can render its submenu inside a sibling\n  `div[data-trigger=\"<navmenuitem-id>\"]` while the sidenavigation is expanded. In collapsed mode,\n  dropdown submenus are converted to flyout menus.",
+              "default": "flyout",
+              "attribute": "submenu-type",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "updateContext",
@@ -43991,11 +44119,26 @@
               "default": "false",
               "description": "Hides the divider between the scrollable and fixed sections when set to true.",
               "fieldName": "hideFixedSectionDivider"
+            },
+            {
+              "name": "submenu-type",
+              "type": {
+                "text": "SideNavigationSubmenuType"
+              },
+              "description": "Determines how sibling submenus are displayed. There are 2 types of submenus supported:\n\n- `flyout`: Submenus are shown with `mdc-menupopover`.\n- `dropdown`: A parent `mdc-navmenuitem` can render its submenu inside a sibling\n  `div[data-trigger=\"<navmenuitem-id>\"]` while the sidenavigation is expanded. In collapsed mode,\n  dropdown submenus are converted to flyout menus.",
+              "default": "flyout",
+              "fieldName": "submenuType"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "KeyToActionMixin",
+              "module": "/src/utils/mixins/KeyToActionMixin"
             }
           ],
           "superclass": {
-            "name": "Provider",
-            "module": "/src/models"
+            "name": "SideNavigationBase",
+            "module": "/src/components/sidenavigation/sidenavigationbase"
           },
           "tagName": "mdc-sidenavigation",
           "jsDoc": "/**\n * @tagname mdc-sidenavigation\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot scrollable-menubar - Slot for the menubar inside the scrollable section.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot fixed-menubar - Slot for the menubar inside the fixed section.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @csspart side-navigation-container - The main container wrapping the entire side navigation.\n * @csspart scrollable-section - The scrollable section of the side navigation.\n * @csspart scrollable-menubar - The menubar inside the scrollable section.\n * @csspart separator - The divider between the scrollable and fixed sections.\n * @csspart fixed-section - The fixed section of the side navigation.\n * @csspart fixed-menubar - The menubar inside the fixed section.\n * @csspart brand-logo-container - The container wrapping the brand logo and footer text.\n * @csspart footer-text - The footer text label in the fixed section.\n * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.\n * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.\n *\n * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-expanded-left-padding - padding for the left side of navmenuitems, when expanded\n * @cssproperty --mdc-sidenavigation-expanded-right-padding - padding for the right side of navmenuitems, when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed\n * @cssproperty --mdc-sidenavigation-collapsed-left-padding - padding for the left side of navmenuitems, when collapsed\n * @cssproperty --mdc-sidenavigation-collapsed-right-padding - padding for the right side of navmenuitems, when collapsed\n * @cssproperty --mdc-sidenavigation-top-padding - padding for the top of the scrollable section - note: if setting to 0 focus ring might be cut off\n * @cssproperty --mdc-sidenavigation-bottom-padding - padding for the bottom of the scrollable section\n * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button\n */",

package/dist/models/provider/provider.component.d.ts

@@ -13,7 +13,7 @@ type ConstructorOptions<C> = {
  *
  * @public
  */
-declare abstract class Provider<C> extends Component {
+declare class Provider<C> extends Component {
     /**
      * Constructor of the Provider.
      *
@@ -54,7 +54,7 @@ declare abstract class Provider<C> extends Component {
      * re-render. If the `render()` method is overwritten, this call must be made
      * manually.
      */
-    protected abstract updateContext(): void;
+    protected updateContext(): void;
     /**
      * Render this Provider.
      *

package/dist/models/provider/provider.component.js

@@ -31,6 +31,19 @@ class Provider extends Component {
             initialValue,
         });
     }
+    /**
+     * Update the context of this Provider and trigger its consumers to update.
+     *
+     * @remarks
+     * This method is called every time this Provider is re-rendered and should
+     * be used to update the local Context based on any deltas between this
+     * Provider's attributes and this Provider's context that caused the
+     * re-render. If the `render()` method is overwritten, this call must be made
+     * manually.
+     */
+    updateContext() {
+        throw new Error('Not implemented');
+    }
     /**
      * Render this Provider.
      *

package/dist/react/navmenuitem/index.d.ts

@@ -3,7 +3,7 @@ import Component from '../../components/navmenuitem';
 import type { Events } from '../../components/navmenuitem/navmenuitem.types';
 import type { Events as EventsInherited } from '../../components/listitem/listitem.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**
  * 
@@ -35,6 +35,7 @@ import type { Events as EventsInherited } from '../../components/listitem/listit
  * @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.
@@ -48,7 +49,8 @@ import type { Events as EventsInherited } from '../../components/listitem/listit
  * @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 const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onActiveChange: EventName<Events["onActiveChangeEvent"]>;

package/dist/react/navmenuitem/index.js

@@ -23,6 +23,7 @@ import { TAG_NAME } from '../../components/navmenuitem/navmenuitem.constants';
  * @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.
@@ -36,7 +37,8 @@ import { TAG_NAME } from '../../components/navmenuitem/navmenuitem.constants';
  * @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.
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.134.21",
+  "version": "0.134.22",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"