@momentum-design/components 0.91.1 → 0.92.0

package/dist/custom-elements.json

@@ -530,67 +530,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/appheader/appheader.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
-          "name": "Appheader",
-          "cssParts": [
-            {
-              "description": "The main container for styling the header.",
-              "name": "container"
-            },
-            {
-              "description": "The leading section of the header.",
-              "name": "leading-section"
-            },
-            {
-              "description": "The center section of the header.",
-              "name": "center-section"
-            },
-            {
-              "description": "The trailing section of the header.",
-              "name": "trailing-section"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for the leading section (e.g., brand logo, brand name).",
-              "name": "leading"
-            },
-            {
-              "description": "Slot for the center section (e.g., search bar, icons).",
-              "name": "center"
-            },
-            {
-              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
-              "name": "trailing"
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-appheader",
-          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Appheader",
-            "module": "components/appheader/appheader.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/animation/animation.component.js",
@@ -803,6 +742,67 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/appheader/appheader.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
+          "name": "Appheader",
+          "cssParts": [
+            {
+              "description": "The main container for styling the header.",
+              "name": "container"
+            },
+            {
+              "description": "The leading section of the header.",
+              "name": "leading-section"
+            },
+            {
+              "description": "The center section of the header.",
+              "name": "center-section"
+            },
+            {
+              "description": "The trailing section of the header.",
+              "name": "trailing-section"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the leading section (e.g., brand logo, brand name).",
+              "name": "leading"
+            },
+            {
+              "description": "Slot for the center section (e.g., search bar, icons).",
+              "name": "center"
+            },
+            {
+              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
+              "name": "trailing"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-appheader",
+          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Appheader",
+            "module": "components/appheader/appheader.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/avatar/avatar.component.js",
@@ -15369,6 +15369,17 @@
               "description": "Returns all menuitem elements, including those nested inside menusection.",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "getAllPopovers",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Element[]"
+                }
+              },
+              "description": "Returns all menupopovers, including direct and slotted ones ."
+            },
             {
               "kind": "method",
               "name": "resetTabIndexAndSetActiveTabIndex",
@@ -15405,6 +15416,42 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "getSubmenu",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "MenuPopover | undefined"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "triggerId",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "showSubmenu",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "triggerId",
+                  "type": {
+                    "text": "string | null"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "updatePopoverPlacement",
@@ -15473,24 +15520,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "showSubmenu",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "triggerId",
-                  "type": {
-                    "text": "string | null"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "getKeyWithDirectionFix",
@@ -15587,24 +15616,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "hasSubmenu",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "triggerId",
-                  "type": {
-                    "text": "string | null"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "getParentMenuItemIndex",
@@ -15664,15 +15675,15 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/menuitemcheckbox/menuitemcheckbox.component.js",
+      "path": "components/menuitem/menuitem.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nMenu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.",
-          "name": "MenuItemCheckbox",
+          "description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.",
+          "name": "MenuItem",
           "slots": [
             {
-              "description": "slot for menu item checkbox controls to appear of leading end.",
+              "description": "slot for menu item controls to appear of leading end.",
               "name": "leading-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -15680,7 +15691,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox primary label.",
+              "description": "slot for menu item primary label.",
               "name": "leading-text-primary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -15688,7 +15699,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox secondary label.",
+              "description": "slot for menu item secondary label.",
               "name": "leading-text-secondary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -15696,7 +15707,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox tertiary label.",
+              "description": "slot for menu item tertiary label.",
               "name": "leading-text-tertiary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -15704,7 +15715,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox side header text.",
+              "description": "slot for menu item side header text.",
               "name": "trailing-text-side-header",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -15712,7 +15723,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox subline text.",
+              "description": "slot for menu item subline text.",
               "name": "trailing-text-subline",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -15720,7 +15731,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox controls to appear of trailing end.",
+              "description": "slot for menu item controls to appear of trailing end.",
               "name": "trailing-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -15731,107 +15742,34 @@
           "members": [
             {
               "kind": "field",
-              "name": "checked",
+              "name": "arrowPosition",
               "type": {
-                "text": "boolean"
+                "text": "ArrowPositions | undefined"
               },
-              "default": "false",
-              "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
-              "attribute": "checked",
+              "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
+              "attribute": "arrow-position",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "indicator",
+              "name": "arrowDirection",
               "type": {
-                "text": "Indicator"
+                "text": "ArrowDirections | undefined"
               },
-              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
-              "default": "'checkbox'",
-              "attribute": "indicator",
+              "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
+              "attribute": "arrow-direction",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "handleMouseClick",
-              "privacy": "private",
-              "description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`."
-            },
-            {
-              "kind": "method",
-              "name": "staticCheckbox",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
-            },
-            {
-              "kind": "method",
-              "name": "staticToggle",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Returns a static toggle element if the indicator is set to toggle.\nIf the indicator is not set to toggle, it returns nothing.\n\nThe toggle will always be positioned on the trailing side of the menuitem label."
-            },
-            {
-              "kind": "method",
-              "name": "getCheckmarkIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
-            },
-            {
-              "kind": "field",
-              "name": "arrowPosition",
-              "type": {
-                "text": "ArrowPositions | undefined"
-              },
-              "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
-              "attribute": "arrow-position",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "arrowDirection",
-              "type": {
-                "text": "ArrowDirections | undefined"
-              },
-              "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
-              "attribute": "arrow-direction",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "undefined | string | undefined"
-              },
-              "default": "undefined",
-              "description": "The name attribute is used to identify the menu item when it is selected.",
-              "attribute": "name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
+              "name": "name",
+              "type": {
+                "text": "undefined | string | undefined"
+              },
+              "default": "undefined",
+              "description": "The name attribute is used to identify the menu item when it is selected.",
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -15842,11 +15780,7 @@
               "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
               "attribute": "value",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "method",
@@ -15890,11 +15824,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page."
             },
             {
               "kind": "method",
@@ -16231,12 +16161,7 @@
           ],
           "events": [
             {
-              "description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
-              "name": "change",
-              "reactName": "onChange"
-            },
-            {
-              "description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
+              "description": "(React: onClick) This event is dispatched when the menuitem is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -16244,15 +16169,6 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
-            {
-              "description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
             {
               "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
               "name": "keydown",
@@ -16270,38 +16186,25 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ],
           "attributes": [
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "indicator",
-              "type": {
-                "text": "Indicator"
-              },
-              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
-              "default": "'checkbox'",
-              "fieldName": "indicator"
-            },
             {
               "name": "arrow-position",
               "type": {
                 "text": "ArrowPositions | undefined"
               },
               "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
-              "fieldName": "arrowPosition",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
+              "fieldName": "arrowPosition"
             },
             {
               "name": "arrow-direction",
@@ -16309,11 +16212,7 @@
                 "text": "ArrowDirections | undefined"
               },
               "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
-              "fieldName": "arrowDirection",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
+              "fieldName": "arrowDirection"
             },
             {
               "name": "name",
@@ -16322,11 +16221,7 @@
               },
               "default": "undefined",
               "description": "The name attribute is used to identify the menu item when it is selected.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
+              "fieldName": "name"
             },
             {
               "name": "value",
@@ -16335,11 +16230,7 @@
               },
               "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
+              "fieldName": "value"
             },
             {
               "name": "disabled",
@@ -16480,11 +16371,11 @@
             }
           ],
           "superclass": {
-            "name": "MenuItem",
-            "module": "/src/components/menuitem/menuitem.component"
+            "name": "ListItem",
+            "module": "/src/components/listitem/listitem.component"
           },
-          "tagName": "mdc-menuitemcheckbox",
-          "jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item checkbox primary label.\n * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.\n * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.\n * @slot trailing-text-side-header - slot for menu item checkbox side header text.\n * @slot trailing-text-subline - slot for menu item checkbox subline text.\n * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n */",
+          "tagName": "mdc-menuitem",
+          "jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-tooltip\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n */",
           "customElement": true,
           "cssProperties": [
             {
@@ -16559,23 +16450,23 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "MenuItemCheckbox",
-            "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
+            "name": "MenuItem",
+            "module": "components/menuitem/menuitem.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/menuitem/menuitem.component.js",
+      "path": "components/menuitemcheckbox/menuitemcheckbox.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.",
-          "name": "MenuItem",
+          "description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nMenu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.",
+          "name": "MenuItemCheckbox",
           "slots": [
             {
-              "description": "slot for menu item controls to appear of leading end.",
+              "description": "slot for menu item checkbox controls to appear of leading end.",
               "name": "leading-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -16583,7 +16474,7 @@
               }
             },
             {
-              "description": "slot for menu item primary label.",
+              "description": "slot for menu item checkbox primary label.",
               "name": "leading-text-primary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -16591,7 +16482,7 @@
               }
             },
             {
-              "description": "slot for menu item secondary label.",
+              "description": "slot for menu item checkbox secondary label.",
               "name": "leading-text-secondary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -16599,7 +16490,7 @@
               }
             },
             {
-              "description": "slot for menu item tertiary label.",
+              "description": "slot for menu item checkbox tertiary label.",
               "name": "leading-text-tertiary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -16607,7 +16498,7 @@
               }
             },
             {
-              "description": "slot for menu item side header text.",
+              "description": "slot for menu item checkbox side header text.",
               "name": "trailing-text-side-header",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -16615,7 +16506,7 @@
               }
             },
             {
-              "description": "slot for menu item subline text.",
+              "description": "slot for menu item checkbox subline text.",
               "name": "trailing-text-subline",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -16623,7 +16514,7 @@
               }
             },
             {
-              "description": "slot for menu item controls to appear of trailing end.",
+              "description": "slot for menu item checkbox controls to appear of trailing end.",
               "name": "trailing-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -16634,93 +16525,174 @@
           "members": [
             {
               "kind": "field",
-              "name": "arrowPosition",
-              "type": {
-                "text": "ArrowPositions | undefined"
-              },
-              "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
-              "attribute": "arrow-position",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "arrowDirection",
+              "name": "checked",
               "type": {
-                "text": "ArrowDirections | undefined"
+                "text": "boolean"
               },
-              "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
-              "attribute": "arrow-direction",
+              "default": "false",
+              "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
+              "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "indicator",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "Indicator"
               },
-              "default": "undefined",
-              "description": "The name attribute is used to identify the menu item when it is selected.",
-              "attribute": "name",
+              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
+              "default": "'checkbox'",
+              "attribute": "indicator",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "undefined | string | undefined"
-              },
-              "default": "undefined",
-              "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
-              "attribute": "value",
-              "reflects": true
+              "name": "handleMouseClick",
+              "privacy": "private",
+              "description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`."
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "protected",
+              "name": "staticCheckbox",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event that triggered the action."
-                }
-              ],
-              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
+              "description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
             },
             {
               "kind": "method",
-              "name": "handleKeyUp",
+              "name": "staticToggle",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event that triggered the action."
-                }
-              ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page."
+              "description": "Returns a static toggle element if the indicator is set to toggle.\nIf the indicator is not set to toggle, it returns nothing.\n\nThe toggle will always be positioned on the trailing side of the menuitem label."
             },
             {
               "kind": "method",
-              "name": "renderTrailingControls",
+              "name": "getCheckmarkIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
+            },
+            {
+              "kind": "field",
+              "name": "arrowPosition",
+              "type": {
+                "text": "ArrowPositions | undefined"
+              },
+              "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
+              "attribute": "arrow-position",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "arrowDirection",
+              "type": {
+                "text": "ArrowDirections | undefined"
+              },
+              "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
+              "attribute": "arrow-direction",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "undefined | string | undefined"
+              },
+              "default": "undefined",
+              "description": "The name attribute is used to identify the menu item when it is selected.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "undefined | string | undefined"
+              },
+              "default": "undefined",
+              "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event that triggered the action."
+                }
+              ],
+              "description": "Handles the keydown event for the menu item.\nIf the Enter key is pressed, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Enter key.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event that triggered the action."
+                }
+              ],
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderTrailingControls",
               "privacy": "protected",
               "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
               "return": {
@@ -17053,7 +17025,12 @@
           ],
           "events": [
             {
-              "description": "(React: onClick) This event is dispatched when the menuitem is clicked.",
+              "description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
+              "name": "change",
+              "reactName": "onChange"
+            },
+            {
+              "description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -17062,27 +17039,27 @@
               }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
+              "description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the menuitem.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the menuitem.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
@@ -17090,13 +17067,35 @@
             }
           ],
           "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "indicator",
+              "type": {
+                "text": "Indicator"
+              },
+              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
+              "default": "'checkbox'",
+              "fieldName": "indicator"
+            },
             {
               "name": "arrow-position",
               "type": {
                 "text": "ArrowPositions | undefined"
               },
               "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
-              "fieldName": "arrowPosition"
+              "fieldName": "arrowPosition",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
             },
             {
               "name": "arrow-direction",
@@ -17104,7 +17103,11 @@
                 "text": "ArrowDirections | undefined"
               },
               "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
-              "fieldName": "arrowDirection"
+              "fieldName": "arrowDirection",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
             },
             {
               "name": "name",
@@ -17113,7 +17116,11 @@
               },
               "default": "undefined",
               "description": "The name attribute is used to identify the menu item when it is selected.",
-              "fieldName": "name"
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
             },
             {
               "name": "value",
@@ -17122,7 +17129,11 @@
               },
               "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
-              "fieldName": "value"
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
             },
             {
               "name": "disabled",
@@ -17263,11 +17274,11 @@
             }
           ],
           "superclass": {
-            "name": "ListItem",
-            "module": "/src/components/listitem/listitem.component"
+            "name": "MenuItem",
+            "module": "/src/components/menuitem/menuitem.component"
           },
-          "tagName": "mdc-menuitem",
-          "jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-tooltip\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n */",
+          "tagName": "mdc-menuitemcheckbox",
+          "jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item checkbox primary label.\n * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.\n * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.\n * @slot trailing-text-side-header - slot for menu item checkbox side header text.\n * @slot trailing-text-subline - slot for menu item checkbox subline text.\n * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n */",
           "customElement": true,
           "cssProperties": [
             {
@@ -17342,8 +17353,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "MenuItem",
-            "module": "components/menuitem/menuitem.component.js"
+            "name": "MenuItemCheckbox",
+            "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
           }
         }
       ]
@@ -20226,6 +20237,17 @@
               "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
               "attribute": "prefix-icon"
             },
+            {
+              "kind": "field",
+              "name": "showDivider",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to show a divider below the section header.\nThis is useful for visually separating sections in the menu.",
+              "attribute": "show-divider",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "renderHeader",
@@ -20265,6 +20287,15 @@
               },
               "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
               "fieldName": "prefixIcon"
+            },
+            {
+              "name": "show-divider",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to show a divider below the section header.\nThis is useful for visually separating sections in the menu.",
+              "fieldName": "showDivider"
             }
           ],
           "superclass": {
@@ -20289,56 +20320,56 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/navitem/navitem.component.js",
+      "path": "components/navmenuitem/navmenuitem.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-navitem` is a menuitem styled to work as a navigation tab.\nIt supports a leading icon, optional badge and dynamic text rendering.\n\nNote: `mdc-navitem` is intended to be used inside `mdc-navitemlist` as part of the sideNavigation\ncomponent. Its structure, spacing, and interactions are designed to align with\nthe visual and functional requirements of side navigation layouts.",
-          "name": "NavItem",
+          "description": "`mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\nIt supports a leading icon, optional badge and dynamic text rendering.\n\nNote: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\ncomponent. Its structure, spacing, and interactions are designed to align with\nthe visual and functional requirements of side navigation layouts.",
+          "name": "NavMenuItem",
           "cssProperties": [
             {
-              "description": "Text color of the navitem in its normal state.",
-              "name": "--mdc-navitem-color"
+              "description": "Text color of the navmenuitem in its normal state.",
+              "name": "--mdc-navmenuitem-color"
             },
             {
-              "description": "Border color of the navitem in its normal state.",
-              "name": "--mdc-navitem-border-color"
+              "description": "Border color of the navmenuitem in its normal state.",
+              "name": "--mdc-navmenuitem-border-color"
             },
             {
-              "description": "Text color of the navitem when disabled.",
-              "name": "--mdc-navitem-disabled-color"
+              "description": "Text color of the navmenuitem when disabled.",
+              "name": "--mdc-navmenuitem-disabled-color"
             },
             {
-              "description": "Width of the navItem when expanded.",
-              "name": "--mdc-navitem-expanded-width"
+              "description": "Width of the navmenuitem when expanded.",
+              "name": "--mdc-navmenuitem-expanded-width"
             },
             {
-              "description": "Background color of the navitem when hovered.",
-              "name": "--mdc-navitem-hover-background-color"
+              "description": "Background color of the navmenuitem when hovered.",
+              "name": "--mdc-navmenuitem-hover-background-color"
             },
             {
-              "description": "Background color of the active navitem when hovered.",
-              "name": "--mdc-navitem-hover-active-background-color"
+              "description": "Background color of the active navmenuitem when hovered.",
+              "name": "--mdc-navmenuitem-hover-active-background-color"
             },
             {
-              "description": "Background color of the navitem when pressed.",
-              "name": "--mdc-navitem-pressed-background-color"
+              "description": "Background color of the navmenuitem when pressed.",
+              "name": "--mdc-navmenuitem-pressed-background-color"
             },
             {
-              "description": "Background color of the active navitem when pressed.",
-              "name": "--mdc-navitem-pressed-active-background-color"
+              "description": "Background color of the active navmenuitem when pressed.",
+              "name": "--mdc-navmenuitem-pressed-active-background-color"
             },
             {
-              "description": "Background color of the navitem when disabled.",
-              "name": "--mdc-navitem-disabled-background-color"
+              "description": "Background color of the navmenuitem when disabled.",
+              "name": "--mdc-navmenuitem-disabled-background-color"
             },
             {
-              "description": "Background color of the active navitem when disabled.",
-              "name": "--mdc-navitem-disabled-active-background-color"
+              "description": "Background color of the active navmenuitem when disabled.",
+              "name": "--mdc-navmenuitem-disabled-active-background-color"
             },
             {
               "description": "Background color of the active nav item in its rest state.",
-              "name": "--mdc-navitem-rest-active-background-color"
+              "name": "--mdc-navmenuitem-rest-active-background-color"
             },
             {
               "description": "Allows customization of the default background color.",
@@ -20412,7 +20443,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "The navitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the navitem is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the navitem is in an inactive state, indicating it is toggled off.",
+              "description": "The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the navmenuitem is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the navmenuitem is in an inactive state, indicating it is toggled off.",
               "default": "undefined",
               "attribute": "active",
               "reflects": true
@@ -20454,7 +20485,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Id of the navItem (used as a identificator when used in the navItemList)\nNote: It has to be unique.",
+              "description": "Id of the navMenuItem (used as a identificator when used in the menubar)\nNote: It has to be unique.",
               "default": "undefined",
               "attribute": "nav-id",
               "reflects": true
@@ -20475,7 +20506,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
+              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
               "attribute": "disable-aria-current",
               "reflects": true
             },
@@ -20488,7 +20519,7 @@
                   "text": "boolean"
                 }
               },
-              "description": "Check whether the navitem is inside a nested nav structure.\nReturns `true` if there is a parent `mdc-menupopover`\nThis method assumes nesting implies deeper levels of nav hierarchy."
+              "description": "Check whether the navmenuitem is inside a nested nav structure.\nReturns `true` if there is a parent `mdc-menupopover`\nThis method assumes nesting implies deeper levels of nav hierarchy."
             },
             {
               "kind": "method",
@@ -20993,7 +21024,7 @@
           ],
           "events": [
             {
-              "description": "(React: onClick) This event is dispatched when the navitem is clicked.",
+              "description": "(React: onClick) This event is dispatched when the navmenuitem is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -21002,7 +21033,7 @@
               }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the navitem.",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.",
               "name": "keydown",
               "reactName": "onKeyDown",
               "inheritedFrom": {
@@ -21011,7 +21042,7 @@
               }
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the navitem.",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.",
               "name": "keyup",
               "reactName": "onKeyUp",
               "inheritedFrom": {
@@ -21020,7 +21051,7 @@
               }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the navitem receives focus.",
+              "description": "(React: onFocus) This event is dispatched when the navmenuitem receives focus.",
               "name": "focus",
               "reactName": "onFocus",
               "inheritedFrom": {
@@ -21029,7 +21060,7 @@
               }
             },
             {
-              "description": "(React: onActiveChange) Dispatched when the active state of the navitem changes.",
+              "description": "(React: onActiveChange) Dispatched when the active state of the navmenuitem changes.",
               "name": "activechange",
               "reactName": "onActiveChange"
             }
@@ -21040,7 +21071,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "The navitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the navitem is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the navitem is in an inactive state, indicating it is toggled off.",
+              "description": "The navmenuitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the navmenuitem is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the navmenuitem is in an inactive state, indicating it is toggled off.",
               "default": "undefined",
               "fieldName": "active"
             },
@@ -21074,7 +21105,7 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Id of the navItem (used as a identificator when used in the navItemList)\nNote: It has to be unique.",
+              "description": "Id of the navMenuItem (used as a identificator when used in the menubar)\nNote: It has to be unique.",
               "default": "undefined",
               "fieldName": "navId"
             },
@@ -21092,7 +21123,7 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
+              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navmenuitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
               "fieldName": "disableAriaCurrent"
             },
             {
@@ -21247,541 +21278,125 @@
             {
               "name": "subline-text",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
-              "fieldName": "sublineText",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "name": "soft-disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "fieldName": "softDisabled",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "name": "tooltip-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "fieldName": "tooltipText",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "name": "tooltip-placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
-              "default": "'top'",
-              "fieldName": "tooltipPlacement",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "MenuItem",
-            "module": "/src/components/menuitem/menuitem.component"
-          },
-          "tagName": "mdc-navitem",
-          "jsDoc": "/**\n * `mdc-navitem` is a menuitem styled to work as a navigation tab.\n * It supports a leading icon, optional badge and dynamic text rendering.\n *\n * Note: `mdc-navitem` is intended to be used inside `mdc-navitemlist` as part of the sideNavigation\n * component. Its structure, spacing, and interactions are designed to align with\n * the visual and functional requirements of side navigation layouts.\n *\n * @tagname mdc-navitem\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 navitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navitem.\n * @event focus - (React: onFocus) This event is dispatched when the navitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.\n *\n * @cssproperty --mdc-navitem-color - Text color of the navitem in its normal state.\n * @cssproperty --mdc-navitem-border-color - Border color of the navitem in its normal state.\n * @cssproperty --mdc-navitem-disabled-color - Text color of the navitem when disabled.\n * @cssproperty --mdc-navitem-expanded-width - Width of the navItem when expanded.\n * @cssproperty --mdc-navitem-hover-background-color - Background color of the navitem when hovered.\n * @cssproperty --mdc-navitem-hover-active-background-color - Background color of the active navitem when hovered.\n * @cssproperty --mdc-navitem-pressed-background-color - Background color of the navitem when pressed.\n * @cssproperty --mdc-navitem-pressed-active-background-color - Background color of the active navitem when pressed.\n * @cssproperty --mdc-navitem-disabled-background-color - Background color of the navitem when disabled.\n * @cssproperty --mdc-navitem-disabled-active-background-color - Background color of the active navitem when disabled.\n * @cssproperty --mdc-navitem-rest-active-background-color - Background color of the active nav item in its rest state.\n */",
-          "customElement": true,
-          "slots": [
-            {
-              "description": "slot for menu item controls to appear of leading end.",
-              "name": "leading-controls",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for menu item primary label.",
-              "name": "leading-text-primary-label",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for menu item secondary label.",
-              "name": "leading-text-secondary-label",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for menu item tertiary label.",
-              "name": "leading-text-tertiary-label",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for menu item side header text.",
-              "name": "trailing-text-side-header",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for menu item subline text.",
-              "name": "trailing-text-subline",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for menu item controls to appear of trailing end.",
-              "name": "trailing-controls",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "NavItem",
-            "module": "components/navitem/navitem.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/navitemlist/navitemlist.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.\nIt provides the structural foundation for organizing vertical nav items and\nensures consistent behavior and layout within side navigation patterns.\n\nNote: mdc-navitemlist is typically used within the sidenavigation component.",
-          "name": "NavItemList",
-          "slots": [
-            {
-              "description": "Slot for projecting one or more navigation items, optional section headers and dividers.",
-              "name": "default",
-              "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "src/components/menubar/menubar.component.ts"
-              }
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "field",
-              "name": "navItems",
-              "type": {
-                "text": "NavItem[]"
-              },
-              "privacy": "private",
-              "description": "Returns all nested, non-disabled mdc-navitem elements inside this component.",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "menuItems",
-              "type": {
-                "text": "Array<HTMLElement>"
-              },
-              "description": "Returns all menuitem elements, including those nested inside menusection.",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "resetTabIndexAndSetActiveTabIndex",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "menuItems",
-                  "type": {
-                    "text": "Array<HTMLElement>"
-                  }
-                },
-                {
-                  "description": "The index of the new active element in the list.",
-                  "name": "newIndex"
-                }
-              ],
-              "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard.",
-              "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getCurrentIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "target",
-                  "type": {
-                    "text": "EventTarget | null"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "updatePopoverPlacement",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "updateTabIndexAndFocus",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "menuItems",
-                  "type": {
-                    "text": "HTMLElement[]"
-                  }
-                },
-                {
-                  "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "newIndex",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ],
-              "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "navigateToMenuItem",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "direction",
-                  "type": {
-                    "text": "'prev' | 'next'"
-                  }
-                },
-                {
-                  "name": "shouldOpenSubmenu",
-                  "default": "false"
-                }
-              ],
+                "text": "string | undefined"
+              },
+              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
+              "fieldName": "sublineText",
               "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "showSubmenu",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
               },
-              "parameters": [
-                {
-                  "name": "triggerId",
-                  "type": {
-                    "text": "string | null"
-                  }
-                }
-              ],
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
               "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "getKeyWithDirectionFix",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
+              "name": "tooltip-text",
+              "type": {
+                "text": "string | undefined"
               },
-              "parameters": [
-                {
-                  "name": "originalKey",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
+              "description": "The tooltip text is displayed on hover of the list item.",
+              "fieldName": "tooltipText",
               "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "isTopLevelMenuItem",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
+              "name": "tooltip-placement",
+              "type": {
+                "text": "PopoverPlacement"
               },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ],
-              "description": "Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)",
+              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
+              "default": "'top'",
+              "fieldName": "tooltipPlacement",
               "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
-            },
+            }
+          ],
+          "mixins": [
             {
-              "kind": "method",
-              "name": "isNestedMenuItem",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ],
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "MenuItem",
+            "module": "/src/components/menuitem/menuitem.component"
+          },
+          "tagName": "mdc-navmenuitem",
+          "jsDoc": "/**\n * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\n * It supports a leading icon, optional badge and dynamic text rendering.\n *\n * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\n * component. Its structure, spacing, and interactions are designed to align with\n * the visual and functional requirements of side navigation layouts.\n *\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-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-border-color - Border 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-expanded-width - Width of the navmenuitem when expanded.\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 * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "slot for menu item controls to appear of leading end.",
+              "name": "leading-controls",
               "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "closeAllMenuPopovers",
-              "privacy": "private",
+              "description": "slot for menu item primary label.",
+              "name": "leading-text-primary-label",
               "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "crossMenubarNavigationOnLeft",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ],
+              "description": "slot for menu item secondary label.",
+              "name": "leading-text-secondary-label",
               "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "crossMenubarNavigationOnRight",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ],
+              "description": "slot for menu item tertiary label.",
+              "name": "leading-text-tertiary-label",
               "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "hasSubmenu",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "triggerId",
-                  "type": {
-                    "text": "string | null"
-                  }
-                }
-              ],
+              "description": "slot for menu item side header text.",
+              "name": "trailing-text-side-header",
               "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "getParentMenuItemIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ],
+              "description": "slot for menu item subline text.",
+              "name": "trailing-text-subline",
               "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ],
+              "description": "slot for menu item controls to appear of trailing end.",
+              "name": "trailing-controls",
               "inheritedFrom": {
-                "name": "MenuBar",
-                "module": "components/menubar/menubar.component.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             }
-          ],
-          "attributes": [
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            }
-          ],
-          "superclass": {
-            "name": "MenuBar",
-            "module": "/src/components/menubar/menubar.component"
-          },
-          "tagName": "mdc-navitemlist",
-          "jsDoc": "/**\n * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.\n * It provides the structural foundation for organizing vertical nav items and\n * ensures consistent behavior and layout within side navigation patterns.\n *\n * Note: mdc-navitemlist is typically used within the sidenavigation component.\n * @tagname mdc-navitemlist\n *\n * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.\n */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -21789,8 +21404,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "NavItemList",
-            "module": "components/navitemlist/navitemlist.component.js"
+            "name": "NavMenuItem",
+            "module": "components/navmenuitem/navmenuitem.component.js"
           }
         }
       ]
@@ -30344,7 +29959,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\ntypically used in layouts with persistent or collapsible sidebars.\n\n## Features:\n- Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n- Toggleable expand/collapse behavior\n- Displays brand logo and customer name\n- Serves as a context provider for descendant components - `mdc-navitemlist` and `mdc-navitem`\n\n### Usage:\nIn a sidenavigation, navitems can be used in the following ways:\n\n1. **Simple navitem** – No submenu or interaction beyond selection.\n\n2. **Navitem with submenu**:\n   - Provide an `id` on the `mdc-navitem`\n   - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem's `id`\n   - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n     inside the nested menupopover is active, conveying which submenu item is currently selected\n\n3. **Actionable navitem (no submenu)**:\n   - Performs an action such as navigation or alert trigger\n   - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n\n### Recommendations:\n- Use `mdc-text` for section headers\n- Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n- For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n\n#### Accessibility Notes:\n- Always provide meaningful `aria-label` attributes for both `mdc-navitem` and `mdc-navitemlist`\nto ensure screen reader support\n- Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button",
+          "description": "The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\ntypically used in layouts with persistent or collapsible sidebars.\n\n## Features:\n- Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n- Toggleable expand/collapse behavior\n- Displays brand logo and customer name\n- Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n\n### Usage:\nIn a sidenavigation, navmenuitems can be used in the following ways:\n\n1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n\n2. **NavMenuItem with submenu**:\n   - Provide an `id` on the `mdc-navmenuitem`\n   - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n   - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n     inside the nested menupopover is active, conveying which submenu item is currently selected\n\n3. **Actionable navmenuitem (no submenu)**:\n   - Performs an action such as navigation or alert trigger\n   - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n\n### Recommendations:\n- Use `mdc-text` for section headers\n- Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n- For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n\n#### Accessibility Notes:\n- Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\nto ensure screen reader support\n- Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button",
           "name": "SideNavigation",
           "cssProperties": [
             {
@@ -30391,13 +30006,13 @@
             },
             {
               "kind": "field",
-              "name": "customerName",
+              "name": "footerText",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Name of the customer. This is displayed in the bottom section of the side-navigation component.",
-              "attribute": "customer-name",
+              "description": "Displays footer text in the bottom section of the sidenavigation.",
+              "attribute": "footer-text",
               "reflects": true
             },
             {
@@ -30431,11 +30046,39 @@
                 }
               },
               "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
+            },
+            {
+              "kind": "field",
+              "name": "navMenuItems",
+              "type": {
+                "text": "NavMenuItem[]"
+              },
+              "privacy": "private",
+              "description": "Returns all nested, non-disabled mdc-navmenuitem elements inside this component.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "preventScrollOnSpace",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             }
           ],
           "events": [
             {
-              "description": "(React: onActiveChange) Dispatched when the active state of the navitem changes.",
+              "description": "(React: onActiveChange) Dispatched when the active state of the navmenuitem changes.",
               "name": "activechange",
               "reactName": "onActiveChange"
             }
@@ -30451,13 +30094,13 @@
               "fieldName": "variant"
             },
             {
-              "name": "customer-name",
+              "name": "footer-text",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Name of the customer. This is displayed in the bottom section of the side-navigation component.",
-              "fieldName": "customerName"
+              "description": "Displays footer text in the bottom section of the sidenavigation.",
+              "fieldName": "footerText"
             },
             {
               "name": "grabber-btn-aria-label",
@@ -30482,7 +30125,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-sidenavigation",
-          "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-navitemlist` and `mdc-navitem`\n *\n * ### Usage:\n * In a sidenavigation, navitems can be used in the following ways:\n *\n * 1. **Simple navitem** – No submenu or interaction beyond selection.\n *\n * 2. **Navitem with submenu**:\n *    - Provide an `id` on the `mdc-navitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navitem` and `mdc-navitemlist`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased\n */",
+          "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n *    - Provide an `id` on the `mdc-navmenuitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\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 * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased\n */",
           "customElement": true
         }
       ],