@momentum-design/components 0.96.2 → 0.96.4

package/dist/custom-elements.json

@@ -21353,403 +21353,281 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/navmenuitem/navmenuitem.component.js",
+      "path": "components/optgroup/optgroup.component.js",
       "declarations": [
         {
           "kind": "class",
-          "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",
+          "description": "optgroup component, which creates a grouping of mdc-option within a listbox element.",
+          "name": "OptGroup",
           "cssProperties": [
             {
-              "description": "Text color of the navmenuitem in its normal state.",
-              "name": "--mdc-navmenuitem-color"
-            },
-            {
-              "description": "Border color of the navmenuitem in its normal state.",
-              "name": "--mdc-navmenuitem-border-color"
-            },
-            {
-              "description": "Text color of the navmenuitem when disabled.",
-              "name": "--mdc-navmenuitem-disabled-color"
-            },
-            {
-              "description": "Width of the navmenuitem when expanded.",
-              "name": "--mdc-navmenuitem-expanded-width"
-            },
-            {
-              "description": "Background color of the navmenuitem when hovered.",
-              "name": "--mdc-navmenuitem-hover-background-color"
-            },
-            {
-              "description": "Background color of the active navmenuitem when hovered.",
-              "name": "--mdc-navmenuitem-hover-active-background-color"
-            },
-            {
-              "description": "Background color of the navmenuitem when pressed.",
-              "name": "--mdc-navmenuitem-pressed-background-color"
-            },
-            {
-              "description": "Background color of the active navmenuitem when pressed.",
-              "name": "--mdc-navmenuitem-pressed-active-background-color"
-            },
-            {
-              "description": "Background color of the navmenuitem when disabled.",
-              "name": "--mdc-navmenuitem-disabled-background-color"
-            },
+              "description": "Allows customization of the disabled option color.",
+              "name": "--mdc-optgroup-disabled-color"
+            }
+          ],
+          "slots": [
             {
-              "description": "Background color of the active navmenuitem when disabled.",
-              "name": "--mdc-navmenuitem-disabled-active-background-color"
-            },
+              "description": "This is a default slot for mdc-option elements.",
+              "name": "default"
+            }
+          ],
+          "members": [
             {
-              "description": "Background color of the active nav item in its rest state.",
-              "name": "--mdc-navmenuitem-rest-active-background-color"
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text to be displayed on the top of the options list.",
+              "attribute": "label",
+              "reflects": true
             },
             {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-listitem-default-background-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
+              "kind": "method",
+              "name": "setDisabledForAllOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               }
             },
             {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-listitem-background-color-hover",
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
             {
-              "description": "Allows customization of the background color when pressed.",
-              "name": "--mdc-listitem-background-color-active",
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
-            },
+            }
+          ],
+          "attributes": [
             {
-              "description": "Allows customization of the primary label, side header and subline text slot color.",
-              "name": "--mdc-listitem-primary-label-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text to be displayed on the top of the options list.",
+              "fieldName": "label"
             },
             {
-              "description": "Allows customization of the secondary and tertiary label text slot color.",
-              "name": "--mdc-listitem-secondary-label-color",
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
               "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
-              "description": "Allows customization of the disabled color.",
-              "name": "--mdc-listitem-disabled-color",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
-            },
+            }
+          ],
+          "mixins": [
             {
-              "description": "Allows customization of column gap.",
-              "name": "--mdc-listitem-column-gap",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             },
             {
-              "description": "Allows customization of padding left and right.",
-              "name": "--mdc-listitem-padding-left-and-right",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
             }
           ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-optgroup",
+          "jsDoc": "/**\n * optgroup component, which creates a grouping of mdc-option within a listbox element.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-optgroup\n *\n * @slot default - This is a default slot for mdc-option elements.\n *\n * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "OptGroup",
+            "module": "components/optgroup/optgroup.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/option/option.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Option component, which is used within Selectlistbox within Select component.\n\nThe label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\nThe `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n\nThe `selected` property is used to indicate whether the option is selected or not.\nWhen the `selected` property is set to true, a checkmark icon will be displayed\non the right side of the option to indicate that it is selected.\n\nThe `prefixIcon` property can be used to display an icon on the left side of the option label.\nWe can show a tooltip by setting `tooltip-text` attribute. This will be displayed on hover or focus of the option.\nThe tooltip will be helpful for a long label text which is truncated with ellipsis.",
+          "name": "Option",
           "members": [
             {
               "kind": "field",
-              "name": "active",
+              "name": "selected",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "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",
+              "default": "false",
+              "description": "The selected attribute is used to indicate that the option is selected.",
+              "attribute": "selected",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "badgeType",
+              "name": "prefixIcon",
               "type": {
-                "text": "BadgeType | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "Type of the badge\nCan be `dot` (notification) or `counter`.",
-              "attribute": "badge-type",
+              "description": "The prefix icon attribute is used to display the icon name on the left of the option label.",
+              "attribute": "prefix-icon",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "counter",
+              "name": "ariaLabel",
               "type": {
-                "text": "number | undefined"
+                "text": "string | null"
               },
-              "description": "Counter is the number which can be provided in the badge.",
-              "attribute": "counter",
+              "default": "null",
+              "description": "Any additional description can be provided here for screen readers.",
+              "attribute": "aria-label",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "maxCounter",
+              "name": "name",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
-              "default": "99",
-              "attribute": "max-counter",
-              "reflects": true
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "navId",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "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
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "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": "disableAriaCurrent",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "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
-            },
-            {
-              "kind": "method",
-              "name": "isNested",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "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",
-              "name": "handleClickEvent",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderTextLabel",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "label",
-                  "type": {
-                    "text": "string | undefined"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderArrowIcon",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "showLabel",
-                  "type": {
-                    "text": "boolean | undefined"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderBadge",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "showLabel",
-                  "type": {
-                    "text": "boolean | undefined"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
-              }
-            },
-            {
-              "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",
+              "name": "validationMessage",
               "type": {
-                "text": "ArrowDirections | undefined"
+                "text": "string | 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",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "attribute": "validation-message",
               "reflects": true,
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "validity",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "ValidityState"
               },
-              "default": "undefined",
-              "description": "The name attribute is used to identify the menu item when it is selected.",
-              "attribute": "name",
-              "reflects": true,
+              "readonly": true,
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.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.\n\nThis follows the native behaviour, actionable element can be triggered by Enter\nkey on the keydown event.\n\nNote: Action triggered by Space on the keyup event.",
+              "name": "willValidate",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleKeyUp",
-              "privacy": "private",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
               "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.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderTrailingControls",
-              "privacy": "protected",
-              "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "name": "checkValidity",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "boolean"
                 }
               },
               "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderLeadingControls",
-              "privacy": "protected",
-              "description": "Renders the leading controls slot and optionally the leading arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "name": "reportValidity",
               "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
@@ -21911,6 +21789,30 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
+                }
+              ],
+              "description": "Fires the click event when the enter or space key is pressed down.\nThis behavior is similar to a button click and key interaction.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "triggerClickEvent",
@@ -22032,32 +21934,62 @@
             },
             {
               "kind": "method",
-              "name": "stopEventPropagation",
+              "name": "renderTrailingControls",
               "privacy": "protected",
+              "description": "Renders the trailing controls slot.",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "The mouse event triggered when a click occurs."
-                }
-              ],
-              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
               }
-            }
-          ],
-          "events": [
+            },
             {
-              "description": "(React: onClick) This event is dispatched when the navmenuitem is clicked.",
+              "kind": "method",
+              "name": "renderLeadingControls",
+              "privacy": "protected",
+              "description": "Renders the leading controls slot.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "stopEventPropagation",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The mouse event triggered when a click occurs."
+                }
+              ],
+              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the option is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -22066,7 +21998,7 @@
               }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the option.",
               "name": "keydown",
               "reactName": "onKeyDown",
               "inheritedFrom": {
@@ -22075,7 +22007,7 @@
               }
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the option.",
               "name": "keyup",
               "reactName": "onKeyUp",
               "inheritedFrom": {
@@ -22084,7 +22016,7 @@
               }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the navmenuitem receives focus.",
+              "description": "(React: onFocus) This event is dispatched when the option receives focus.",
               "name": "focus",
               "reactName": "onFocus",
               "inheritedFrom": {
@@ -22092,11 +22024,6 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
-            {
-              "description": "(React: onActiveChange) Dispatched when the active state of the navmenuitem changes.",
-              "name": "activechange",
-              "reactName": "onActiveChange"
-            },
             {
               "description": "(React: onEnabled) This event is dispatched after the listitem is enabled",
               "name": "enabled",
@@ -22136,47 +22063,21 @@
           ],
           "attributes": [
             {
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "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"
-            },
-            {
-              "name": "badge-type",
-              "type": {
-                "text": "BadgeType | undefined"
-              },
-              "description": "Type of the badge\nCan be `dot` (notification) or `counter`.",
-              "fieldName": "badgeType"
-            },
-            {
-              "name": "counter",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Counter is the number which can be provided in the badge.",
-              "fieldName": "counter"
-            },
-            {
-              "name": "max-counter",
+              "name": "selected",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
-              "default": "99",
-              "fieldName": "maxCounter"
+              "default": "false",
+              "description": "The selected attribute is used to indicate that the option is selected.",
+              "fieldName": "selected"
             },
             {
-              "name": "nav-id",
+              "name": "prefix-icon",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "Id of the navMenuItem (used as a identificator when used in the menubar)\nNote: It has to be unique.",
-              "default": "undefined",
-              "fieldName": "navId"
+              "description": "The prefix icon attribute is used to display the icon name on the left of the option label.",
+              "fieldName": "prefixIcon"
             },
             {
               "name": "aria-label",
@@ -22184,77 +22085,45 @@
                 "text": "string | null"
               },
               "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
+              "description": "Any additional description can be provided here for screen readers.",
               "fieldName": "ariaLabel"
             },
             {
-              "name": "disable-aria-current",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "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"
-            },
-            {
-              "name": "icon-name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "name": "arrow-direction",
+              "name": "name",
               "type": {
-                "text": "ArrowDirections | undefined"
+                "text": "string"
               },
-              "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",
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "name",
+              "name": "value",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string"
               },
-              "default": "undefined",
-              "description": "The name attribute is used to identify the menu item when it is selected.",
-              "fieldName": "name",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "value",
+              "name": "validation-message",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "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.",
-              "fieldName": "value",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "fieldName": "validationMessage",
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
@@ -22397,20 +22266,20 @@
           ],
           "mixins": [
             {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
             }
           ],
           "superclass": {
-            "name": "MenuItem",
-            "module": "/src/components/menuitem/menuitem.component"
+            "name": "ListItem",
+            "module": "/src/components/listitem/listitem.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 */",
+          "tagName": "mdc-option",
+          "jsDoc": "/**\n * Option component, which is used within Selectlistbox within Select component.\n *\n * The label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\n * The `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n *\n * The `selected` property is used to indicate whether the option is selected or not.\n * When the `selected` property is set to true, a checkmark icon will be displayed\n * on the right side of the option to indicate that it is selected.\n *\n * The `prefixIcon` property can be used to display an icon on the left side of the option label.\n * We can show a tooltip by setting `tooltip-text` attribute. This will be displayed on hover or focus of the option.\n * The tooltip will be helpful for a long label text which is truncated with ellipsis.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-tooltip\n *\n * @tagname mdc-option\n *\n * @event click - (React: onClick) This event is dispatched when the option is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.\n * @event focus - (React: onFocus) This event is dispatched when the option receives focus.\n */",
           "customElement": true,
           "slots": [
             {
-              "description": "slot for menu item controls to appear of leading end.",
+              "description": "slot for list item controls to appear of leading end.",
               "name": "leading-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -22418,7 +22287,7 @@
               }
             },
             {
-              "description": "slot for menu item primary label.",
+              "description": "slot for list item primary label.",
               "name": "leading-text-primary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -22426,7 +22295,7 @@
               }
             },
             {
-              "description": "slot for menu item secondary label.",
+              "description": "slot for list item secondary label.",
               "name": "leading-text-secondary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -22434,7 +22303,7 @@
               }
             },
             {
-              "description": "slot for menu item tertiary label.",
+              "description": "slot for list item tertiary label.",
               "name": "leading-text-tertiary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -22442,7 +22311,7 @@
               }
             },
             {
-              "description": "slot for menu item side header text.",
+              "description": "slot for list item side header text.",
               "name": "trailing-text-side-header",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -22450,7 +22319,7 @@
               }
             },
             {
-              "description": "slot for menu item subline text.",
+              "description": "slot for list item subline text.",
               "name": "trailing-text-subline",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -22458,152 +22327,80 @@
               }
             },
             {
-              "description": "slot for menu item controls to appear of trailing end.",
+              "description": "slot for list 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": "NavMenuItem",
-            "module": "components/navmenuitem/navmenuitem.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/optgroup/optgroup.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "optgroup component, which creates a grouping of mdc-option within a listbox element.",
-          "name": "OptGroup",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the disabled option color.",
-              "name": "--mdc-optgroup-disabled-color"
-            }
           ],
-          "slots": [
-            {
-              "description": "This is a default slot for mdc-option elements.",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text to be displayed on the top of the options list.",
-              "attribute": "label",
-              "reflects": true
-            },
+          "cssProperties": [
             {
-              "kind": "method",
-              "name": "setDisabledForAllOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-listitem-default-background-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-listitem-background-color-hover",
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
+              "description": "Allows customization of the background color when pressed.",
+              "name": "--mdc-listitem-background-color-active",
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text to be displayed on the top of the options list.",
-              "fieldName": "label"
+              "description": "Allows customization of the primary label, side header and subline text slot color.",
+              "name": "--mdc-listitem-primary-label-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             },
             {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
+              "description": "Allows customization of the secondary and tertiary label text slot color.",
+              "name": "--mdc-listitem-secondary-label-color",
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
+              "description": "Allows customization of the disabled color.",
+              "name": "--mdc-listitem-disabled-color",
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
               }
-            }
-          ],
-          "mixins": [
+            },
             {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
+              "description": "Allows customization of column gap.",
+              "name": "--mdc-listitem-column-gap",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             },
             {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
+              "description": "Allows customization of padding left and right.",
+              "name": "--mdc-listitem-padding-left-and-right",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-optgroup",
-          "jsDoc": "/**\n * optgroup component, which creates a grouping of mdc-option within a listbox element.\n *\n * @dependency mdc-text\n *\n * @tagname mdc-optgroup\n *\n * @slot default - This is a default slot for mdc-option elements.\n *\n * @cssproperty --mdc-optgroup-disabled-color - Allows customization of the disabled option color.\n */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -22611,40 +22408,182 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "OptGroup",
-            "module": "components/optgroup/optgroup.component.js"
+            "name": "Option",
+            "module": "components/option/option.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/option/option.component.js",
+      "path": "components/navmenuitem/navmenuitem.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Option component, which is used within Selectlistbox within Select component.\n\nThe label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\nThe `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n\nThe `selected` property is used to indicate whether the option is selected or not.\nWhen the `selected` property is set to true, a checkmark icon will be displayed\non the right side of the option to indicate that it is selected.\n\nThe `prefixIcon` property can be used to display an icon on the left side of the option label.\nWe can show a tooltip by setting `tooltip-text` attribute. This will be displayed on hover or focus of the option.\nThe tooltip will be helpful for a long label text which is truncated with ellipsis.",
-          "name": "Option",
+          "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 navmenuitem in its normal state.",
+              "name": "--mdc-navmenuitem-color"
+            },
+            {
+              "description": "Border color of the navmenuitem in its normal state.",
+              "name": "--mdc-navmenuitem-border-color"
+            },
+            {
+              "description": "Text color of the navmenuitem when disabled.",
+              "name": "--mdc-navmenuitem-disabled-color"
+            },
+            {
+              "description": "Width of the navmenuitem when expanded.",
+              "name": "--mdc-navmenuitem-expanded-width"
+            },
+            {
+              "description": "Background color of the navmenuitem when hovered.",
+              "name": "--mdc-navmenuitem-hover-background-color"
+            },
+            {
+              "description": "Background color of the active navmenuitem when hovered.",
+              "name": "--mdc-navmenuitem-hover-active-background-color"
+            },
+            {
+              "description": "Background color of the navmenuitem when pressed.",
+              "name": "--mdc-navmenuitem-pressed-background-color"
+            },
+            {
+              "description": "Background color of the active navmenuitem when pressed.",
+              "name": "--mdc-navmenuitem-pressed-active-background-color"
+            },
+            {
+              "description": "Background color of the navmenuitem when disabled.",
+              "name": "--mdc-navmenuitem-disabled-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-navmenuitem-rest-active-background-color"
+            },
+            {
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-listitem-default-background-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-listitem-background-color-hover",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the background color when pressed.",
+              "name": "--mdc-listitem-background-color-active",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the primary label, side header and subline text slot color.",
+              "name": "--mdc-listitem-primary-label-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the secondary and tertiary label text slot color.",
+              "name": "--mdc-listitem-secondary-label-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the disabled color.",
+              "name": "--mdc-listitem-disabled-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of column gap.",
+              "name": "--mdc-listitem-column-gap",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of padding left and right.",
+              "name": "--mdc-listitem-padding-left-and-right",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "selected",
+              "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The selected attribute is used to indicate that the option is selected.",
-              "attribute": "selected",
+              "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
             },
             {
               "kind": "field",
-              "name": "prefixIcon",
+              "name": "badgeType",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "BadgeType | undefined"
               },
-              "description": "The prefix icon attribute is used to display the icon name on the left of the option label.",
-              "attribute": "prefix-icon",
+              "description": "Type of the badge\nCan be `dot` (notification) or `counter`.",
+              "attribute": "badge-type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Counter is the number which can be provided in the badge.",
+              "attribute": "counter",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "maxCounter",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
+              "default": "99",
+              "attribute": "max-counter",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "navId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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
             },
             {
@@ -22654,108 +22593,226 @@
                 "text": "string | null"
               },
               "default": "null",
-              "description": "Any additional description can be provided here for screen readers.",
-              "attribute": "aria-label",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "disableAriaCurrent",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "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
             },
+            {
+              "kind": "method",
+              "name": "isNested",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "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",
+              "name": "handleClickEvent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderTextLabel",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "label",
+                  "type": {
+                    "text": "string | undefined"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderArrowIcon",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "showLabel",
+                  "type": {
+                    "text": "boolean | undefined"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderBadge",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "showLabel",
+                  "type": {
+                    "text": "boolean | undefined"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
-              "name": "name",
+              "name": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "arrowPosition",
               "type": {
-                "text": "string"
+                "text": "ArrowPositions | undefined"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
+              "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": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "arrowDirection",
               "type": {
-                "text": "string"
+                "text": "ArrowDirections | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
+              "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": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "validationMessage",
+              "name": "name",
               "type": {
-                "text": "string | undefined"
+                "text": "undefined | string | undefined"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "attribute": "validation-message",
+              "default": "undefined",
+              "description": "The name attribute is used to identify the menu item when it is selected.",
+              "attribute": "name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "validity",
+              "name": "value",
               "type": {
-                "text": "ValidityState"
+                "text": "undefined | string | undefined"
               },
-              "readonly": true,
+              "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": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
+              "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.\n\nThis follows the native behaviour, actionable element can be triggered by Enter\nkey on the keydown event.\n\nNote: Action triggered by Space on the keyup event.",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
+              "name": "handleKeyUp",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "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.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "checkValidity",
+              "name": "renderTrailingControls",
+              "privacy": "protected",
+              "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "reportValidity",
+              "name": "renderLeadingControls",
+              "privacy": "protected",
+              "description": "Renders the leading controls slot and optionally the leading arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
               }
             },
             {
@@ -22917,30 +22974,6 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event triggered when a key is pressed down."
-                }
-              ],
-              "description": "Fires the click event when the enter or space key is pressed down.\nThis behavior is similar to a button click and key interaction.",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "triggerClickEvent",
@@ -23060,36 +23093,6 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderTrailingControls",
-              "privacy": "protected",
-              "description": "Renders the trailing controls slot.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderLeadingControls",
-              "privacy": "protected",
-              "description": "Renders the leading controls slot.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "components/listitem/listitem.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "stopEventPropagation",
@@ -23117,7 +23120,7 @@
           ],
           "events": [
             {
-              "description": "(React: onClick) This event is dispatched when the option is clicked.",
+              "description": "(React: onClick) This event is dispatched when the navmenuitem is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -23126,7 +23129,7 @@
               }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the option.",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.",
               "name": "keydown",
               "reactName": "onKeyDown",
               "inheritedFrom": {
@@ -23135,7 +23138,7 @@
               }
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the option.",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.",
               "name": "keyup",
               "reactName": "onKeyUp",
               "inheritedFrom": {
@@ -23144,7 +23147,7 @@
               }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the option receives focus.",
+              "description": "(React: onFocus) This event is dispatched when the navmenuitem receives focus.",
               "name": "focus",
               "reactName": "onFocus",
               "inheritedFrom": {
@@ -23152,6 +23155,11 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
+            {
+              "description": "(React: onActiveChange) Dispatched when the active state of the navmenuitem changes.",
+              "name": "activechange",
+              "reactName": "onActiveChange"
+            },
             {
               "description": "(React: onEnabled) This event is dispatched after the listitem is enabled",
               "name": "enabled",
@@ -23191,67 +23199,125 @@
           ],
           "attributes": [
             {
-              "name": "selected",
+              "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "The selected attribute is used to indicate that the option is selected.",
-              "fieldName": "selected"
+              "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"
+            },
+            {
+              "name": "badge-type",
+              "type": {
+                "text": "BadgeType | undefined"
+              },
+              "description": "Type of the badge\nCan be `dot` (notification) or `counter`.",
+              "fieldName": "badgeType"
+            },
+            {
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Counter is the number which can be provided in the badge.",
+              "fieldName": "counter"
+            },
+            {
+              "name": "max-counter",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
+              "default": "99",
+              "fieldName": "maxCounter"
+            },
+            {
+              "name": "nav-id",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Id of the navMenuItem (used as a identificator when used in the menubar)\nNote: It has to be unique.",
+              "default": "undefined",
+              "fieldName": "navId"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "disable-aria-current",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "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"
+            },
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
+              }
             },
             {
-              "name": "prefix-icon",
+              "name": "arrow-position",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "ArrowPositions | undefined"
               },
-              "description": "The prefix icon attribute is used to display the icon name on the left of the option label.",
-              "fieldName": "prefixIcon"
+              "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"
+              }
             },
             {
-              "name": "aria-label",
+              "name": "arrow-direction",
               "type": {
-                "text": "string | null"
+                "text": "ArrowDirections | undefined"
               },
-              "default": "null",
-              "description": "Any additional description can be provided here for screen readers.",
-              "fieldName": "ariaLabel"
+              "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"
+              }
             },
             {
               "name": "name",
               "type": {
-                "text": "string"
+                "text": "undefined | string | undefined"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "default": "undefined",
+              "description": "The name attribute is used to identify the menu item when it is selected.",
               "fieldName": "name",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
               }
             },
             {
               "name": "value",
               "type": {
-                "text": "string"
+                "text": "undefined | string | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "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": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
-            },
-            {
-              "name": "validation-message",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "fieldName": "validationMessage",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
               }
             },
             {
@@ -23394,20 +23460,20 @@
           ],
           "mixins": [
             {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
             }
           ],
           "superclass": {
-            "name": "ListItem",
-            "module": "/src/components/listitem/listitem.component"
+            "name": "MenuItem",
+            "module": "/src/components/menuitem/menuitem.component"
           },
-          "tagName": "mdc-option",
-          "jsDoc": "/**\n * Option component, which is used within Selectlistbox within Select component.\n *\n * The label and secondary label of the option can be set using the `label` and `secondaryLabel` properties respectively.\n * The `label` is the primary text displayed in the option, while the `secondaryLabel` is the secondary text displayed below the primary label.\n *\n * The `selected` property is used to indicate whether the option is selected or not.\n * When the `selected` property is set to true, a checkmark icon will be displayed\n * on the right side of the option to indicate that it is selected.\n *\n * The `prefixIcon` property can be used to display an icon on the left side of the option label.\n * We can show a tooltip by setting `tooltip-text` attribute. This will be displayed on hover or focus of the option.\n * The tooltip will be helpful for a long label text which is truncated with ellipsis.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-tooltip\n *\n * @tagname mdc-option\n *\n * @event click - (React: onClick) This event is dispatched when the option is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the option.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the option.\n * @event focus - (React: onFocus) This event is dispatched when the option receives focus.\n */",
+          "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 list item controls to appear of leading end.",
+              "description": "slot for menu item controls to appear of leading end.",
               "name": "leading-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -23415,7 +23481,7 @@
               }
             },
             {
-              "description": "slot for list item primary label.",
+              "description": "slot for menu item primary label.",
               "name": "leading-text-primary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -23423,7 +23489,7 @@
               }
             },
             {
-              "description": "slot for list item secondary label.",
+              "description": "slot for menu item secondary label.",
               "name": "leading-text-secondary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -23431,7 +23497,7 @@
               }
             },
             {
-              "description": "slot for list item tertiary label.",
+              "description": "slot for menu item tertiary label.",
               "name": "leading-text-tertiary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -23439,7 +23505,7 @@
               }
             },
             {
-              "description": "slot for list item side header text.",
+              "description": "slot for menu item side header text.",
               "name": "trailing-text-side-header",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -23447,7 +23513,7 @@
               }
             },
             {
-              "description": "slot for list item subline text.",
+              "description": "slot for menu item subline text.",
               "name": "trailing-text-subline",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -23455,79 +23521,13 @@
               }
             },
             {
-              "description": "slot for list item controls to appear of trailing end.",
+              "description": "slot for menu item controls to appear of trailing end.",
               "name": "trailing-controls",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
             }
-          ],
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-listitem-default-background-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-listitem-background-color-hover",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the background color when pressed.",
-              "name": "--mdc-listitem-background-color-active",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the primary label, side header and subline text slot color.",
-              "name": "--mdc-listitem-primary-label-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the secondary and tertiary label text slot color.",
-              "name": "--mdc-listitem-secondary-label-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the disabled color.",
-              "name": "--mdc-listitem-disabled-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of column gap.",
-              "name": "--mdc-listitem-column-gap",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of padding left and right.",
-              "name": "--mdc-listitem-padding-left-and-right",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            }
           ]
         }
       ],
@@ -23536,8 +23536,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Option",
-            "module": "components/option/option.component.js"
+            "name": "NavMenuItem",
+            "module": "components/navmenuitem/navmenuitem.component.js"
           }
         }
       ]
@@ -31933,40 +31933,137 @@
               "fieldName": "checked"
             },
             {
-              "name": "size",
+              "name": "size",
+              "type": {
+                "text": "ToggleSize"
+              },
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-statictoggle",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 3 properties - checked, size and disabled. <br/>\n * We are using the same styling that has been created for the `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --mdc-statictoggle-width - Width of the toggle\n * @cssproperty --mdc-statictoggle-height - Height of the toggle\n * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle\n * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border - Border of the toggle\n * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state\n * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state\n * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state\n * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state\n * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state\n * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StaticToggle",
+            "module": "components/statictoggle/statictoggle.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/stepper/stepper.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.\nIt provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.",
+          "name": "Stepper",
+          "slots": [
+            {
+              "description": "Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "OrientationType"
+              },
+              "description": "The orientation of the stepperconnector (vertical or horizontal)",
+              "default": "\"horizontal\"",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "VariantType"
+              },
+              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
+              "default": "'inline'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Get the context for the stepper component.\nThis context provides the orientation and variant for the stepper items and connectors.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "orientation",
               "type": {
-                "text": "ToggleSize"
+                "text": "OrientationType"
               },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "fieldName": "size"
+              "description": "The orientation of the stepperconnector (vertical or horizontal)",
+              "default": "\"horizontal\"",
+              "fieldName": "orientation"
             },
             {
-              "name": "disabled",
+              "name": "variant",
               "type": {
-                "text": "boolean | undefined"
+                "text": "VariantType"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
+              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
+              "default": "'inline'",
+              "fieldName": "variant"
             }
           ],
           "superclass": {
-            "name": "Component",
+            "name": "Provider",
             "module": "/src/models"
           },
-          "tagName": "mdc-statictoggle",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 3 properties - checked, size and disabled. <br/>\n * We are using the same styling that has been created for the `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --mdc-statictoggle-width - Width of the toggle\n * @cssproperty --mdc-statictoggle-height - Height of the toggle\n * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle\n * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border - Border of the toggle\n * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state\n * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state\n * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state\n * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state\n * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state\n * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state\n */",
+          "tagName": "mdc-stepper",
+          "jsDoc": "/**\n * Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.\n * It provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.\n *\n * @tagname mdc-stepper\n *\n * @slot default - Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.\n *\n */",
           "customElement": true
         }
       ],
@@ -31975,8 +32072,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "StaticToggle",
-            "module": "components/statictoggle/statictoggle.component.js"
+            "name": "Stepper",
+            "module": "components/stepper/stepper.component.js"
           }
         }
       ]
@@ -33359,116 +33456,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/themeprovider/themeprovider.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "ThemeProvider component, which sets the passed in themeclass as class.\nIf the themeclass switches, the existing themeclass will be removed as a class\nand the new themeclass will be added.\n\nCSS variables defined in the themeclass will be used for the styling of child dom nodes.\n\nAvailable Momentum theme classes:\n\n`mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n\n`mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n\n`mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n\n`mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n\n`mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n\n`mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n\nThemeclass context can be be consumed from Lit child components\n(see providerUtils.consume for how to consume)\n\nThemeProvider also includes basic font defaults for text.",
-          "name": "ThemeProvider",
-          "cssProperties": [
-            {
-              "description": "Option to override the default color, default: color-theme-text-primary-normal",
-              "name": "--mdc-themeprovider-color-default"
-            },
-            {
-              "description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
-              "name": "--mdc-themeprovider-font-family"
-            },
-            {
-              "description": "Option to override the font weight, default: `400`",
-              "name": "--mdc-themeprovider-font-weight"
-            },
-            {
-              "description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
-              "name": "--mdc-themeprovider-letter-spacing-adjustment"
-            },
-            {
-              "description": "Option to override the font feature settings, default: `\"ss02\" on`",
-              "name": "--mdc-themeprovider-font-feature-settings"
-            },
-            {
-              "description": "Option to override the color of the scrollbar track.",
-              "name": "--mdc-themeprovider-scrollbar-track-color"
-            },
-            {
-              "description": "Option to override the color of the scrollbar thumb.",
-              "name": "--mdc-themeprovider-scrollbar-thumb-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "children",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "description": "Context object of the ThemeProvider, to be consumed by child components",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "themeclass",
-              "type": {
-                "text": "string"
-              },
-              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
-              "attribute": "themeclass"
-            },
-            {
-              "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
-            },
-            {
-              "kind": "method",
-              "name": "setThemeInClassList",
-              "privacy": "private",
-              "description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "themeclass",
-              "type": {
-                "text": "string"
-              },
-              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
-              "fieldName": "themeclass"
-            }
-          ],
-          "superclass": {
-            "name": "Provider",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-themeprovider",
-          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Available Momentum theme classes:\n *\n * `mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n *\n * `mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n *\n * `mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n *\n * `mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n *\n * `mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n *\n * `mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `\"ss02\" on`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ThemeProvider",
-            "module": "components/themeprovider/themeprovider.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/textarea/textarea.component.js",
@@ -34383,6 +34370,116 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/themeprovider/themeprovider.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "ThemeProvider component, which sets the passed in themeclass as class.\nIf the themeclass switches, the existing themeclass will be removed as a class\nand the new themeclass will be added.\n\nCSS variables defined in the themeclass will be used for the styling of child dom nodes.\n\nAvailable Momentum theme classes:\n\n`mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n\n`mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n\n`mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n\n`mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n\n`mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n\n`mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n\nThemeclass context can be be consumed from Lit child components\n(see providerUtils.consume for how to consume)\n\nThemeProvider also includes basic font defaults for text.",
+          "name": "ThemeProvider",
+          "cssProperties": [
+            {
+              "description": "Option to override the default color, default: color-theme-text-primary-normal",
+              "name": "--mdc-themeprovider-color-default"
+            },
+            {
+              "description": "Option to override the font family, default: `Momentum` (from momentum-design/fonts)",
+              "name": "--mdc-themeprovider-font-family"
+            },
+            {
+              "description": "Option to override the font weight, default: `400`",
+              "name": "--mdc-themeprovider-font-weight"
+            },
+            {
+              "description": "Option to override the default letter-spacing, default: `-0.25px` (this is to match the old CiscoSans)",
+              "name": "--mdc-themeprovider-letter-spacing-adjustment"
+            },
+            {
+              "description": "Option to override the font feature settings, default: `\"ss02\" on`",
+              "name": "--mdc-themeprovider-font-feature-settings"
+            },
+            {
+              "description": "Option to override the color of the scrollbar track.",
+              "name": "--mdc-themeprovider-scrollbar-track-color"
+            },
+            {
+              "description": "Option to override the color of the scrollbar thumb.",
+              "name": "--mdc-themeprovider-scrollbar-thumb-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "children",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Context object of the ThemeProvider, to be consumed by child components",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "themeclass",
+              "type": {
+                "text": "string"
+              },
+              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
+              "attribute": "themeclass"
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
+            },
+            {
+              "kind": "method",
+              "name": "setThemeInClassList",
+              "privacy": "private",
+              "description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "themeclass",
+              "type": {
+                "text": "string"
+              },
+              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
+              "fieldName": "themeclass"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-themeprovider",
+          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Available Momentum theme classes:\n *\n * `mds-theme-stable-darkWebex`, `mds-theme-stable-lightWebex`\n *\n * `mds-theme-stable-darkBronzeWebex`, `mds-theme-stable-lightBronzeWebex`\n *\n * `mds-theme-stable-darkIndigoWebex`, `mds-theme-stable-lightIndigoWebex`\n *\n * `mds-theme-stable-darkJadeWebex`, `mds-theme-stable-lightJadeWebex`\n *\n * `mds-theme-stable-darkLavenderWebex`, `mds-theme-stable-lightLavenderWebex`\n *\n * `mds-theme-stable-darkRoseWebex`, `mds-theme-stable-lightRoseWebex`\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `\"ss02\" on`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ThemeProvider",
+            "module": "components/themeprovider/themeprovider.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/toggle/toggle.component.js",