@momentum-design/components 0.96.4 → 0.98.0

package/dist/custom-elements.json

@@ -21353,170 +21353,174 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/optgroup/optgroup.component.js",
+      "path": "components/navmenuitem/navmenuitem.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "optgroup component, which creates a grouping of mdc-option within a listbox element.",
-          "name": "OptGroup",
+          "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": "Allows customization of the disabled option color.",
-              "name": "--mdc-optgroup-disabled-color"
-            }
-          ],
-          "slots": [
+              "description": "Text color of the navmenuitem in its normal state.",
+              "name": "--mdc-navmenuitem-color"
+            },
             {
-              "description": "This is a default slot for mdc-option elements.",
-              "name": "default"
-            }
-          ],
-          "members": [
+              "description": "Border color of the navmenuitem in its normal state.",
+              "name": "--mdc-navmenuitem-border-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": "Text color of the navmenuitem when disabled.",
+              "name": "--mdc-navmenuitem-disabled-color"
             },
             {
-              "kind": "method",
-              "name": "setDisabledForAllOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "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"
               }
             },
             {
-              "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": [
-        {
-          "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": "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
             },
             {
@@ -21526,108 +21530,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": "string"
+                "text": "IconNames | undefined"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
+              "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": "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"
               }
             },
             {
@@ -21789,30 +21911,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",
@@ -21932,36 +22030,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",
@@ -21989,7 +22057,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": {
@@ -21998,7 +22066,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": {
@@ -22007,7 +22075,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": {
@@ -22016,7 +22084,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": {
@@ -22024,6 +22092,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",
@@ -22063,21 +22136,47 @@
           ],
           "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": "prefix-icon",
+              "name": "badge-type",
               "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.",
-              "fieldName": "prefixIcon"
+              "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",
@@ -22085,45 +22184,77 @@
                 "text": "string | null"
               },
               "default": "null",
-              "description": "Any additional description can be provided here for screen readers.",
+              "description": "Aria-label attribute to be set for accessibility",
               "fieldName": "ariaLabel"
             },
             {
-              "name": "name",
+              "name": "disable-aria-current",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "fieldName": "name",
+              "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": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
               }
             },
             {
-              "name": "value",
+              "name": "arrow-position",
               "type": {
-                "text": "string"
+                "text": "ArrowPositions | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value",
+              "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",
+              "type": {
+                "text": "ArrowDirections | undefined"
+              },
+              "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
+              "fieldName": "arrowDirection",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "undefined | string | undefined"
+              },
+              "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": "validation-message",
+              "name": "value",
               "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.",
-              "fieldName": "validationMessage",
+              "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": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
               }
             },
             {
@@ -22221,598 +22352,410 @@
               "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
               "fieldName": "sublineText",
               "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "name": "soft-disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "fieldName": "softDisabled",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "name": "tooltip-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tooltip text is displayed on hover of the list item.",
-              "fieldName": "tooltipText",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "name": "tooltip-placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
-              "default": "'top'",
-              "fieldName": "tooltipPlacement",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
-            }
-          ],
-          "superclass": {
-            "name": "ListItem",
-            "module": "/src/components/listitem/listitem.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 */",
-          "customElement": true,
-          "slots": [
-            {
-              "description": "slot for list item controls to appear of leading end.",
-              "name": "leading-controls",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for list item primary label.",
-              "name": "leading-text-primary-label",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for list item secondary label.",
-              "name": "leading-text-secondary-label",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for list item tertiary label.",
-              "name": "leading-text-tertiary-label",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for list item side header text.",
-              "name": "trailing-text-side-header",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for list item subline text.",
-              "name": "trailing-text-subline",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "slot for list 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"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Option",
-            "module": "components/option/option.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/navmenuitem/navmenuitem.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",
-          "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"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             },
             {
-              "description": "Background color of the active navmenuitem when disabled.",
-              "name": "--mdc-navmenuitem-disabled-active-background-color"
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             },
             {
-              "description": "Background color of the active nav item in its rest state.",
-              "name": "--mdc-navmenuitem-rest-active-background-color"
+              "name": "tooltip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tooltip text is displayed on hover of the list item.",
+              "fieldName": "tooltipText",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             },
             {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-listitem-default-background-color",
+              "name": "tooltip-placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
+              "default": "'top'",
+              "fieldName": "tooltipPlacement",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
-            },
+            }
+          ],
+          "mixins": [
             {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-listitem-background-color-hover",
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "MenuItem",
+            "module": "/src/components/menuitem/menuitem.component"
+          },
+          "tagName": "mdc-navmenuitem",
+          "jsDoc": "/**\n * `mdc-navmenuitem` is a menuitem styled to work as a navigation tab.\n * It supports a leading icon, optional badge and dynamic text rendering.\n *\n * Note: `mdc-navmenuitem` is intended to be used inside `mdc-menubar` as part of the sideNavigation\n * component. Its structure, spacing, and interactions are designed to align with\n * the visual and functional requirements of side navigation layouts.\n *\n * @tagname mdc-navmenuitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-badge\n * @dependency mdc-tooltip\n *\n * @event click - (React: onClick) This event is dispatched when the navmenuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navmenuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navmenuitem.\n * @event focus - (React: onFocus) This event is dispatched when the navmenuitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @cssproperty --mdc-navmenuitem-color - Text color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-border-color - Border color of the navmenuitem in its normal state.\n * @cssproperty --mdc-navmenuitem-disabled-color - Text color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-expanded-width - Width of the navmenuitem when expanded.\n * @cssproperty --mdc-navmenuitem-hover-background-color - Background color of the navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-hover-active-background-color - Background color of the active navmenuitem when hovered.\n * @cssproperty --mdc-navmenuitem-pressed-background-color - Background color of the navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-pressed-active-background-color - Background color of the active navmenuitem when pressed.\n * @cssproperty --mdc-navmenuitem-disabled-background-color - Background color of the navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-disabled-active-background-color - Background color of the active navmenuitem when disabled.\n * @cssproperty --mdc-navmenuitem-rest-active-background-color - Background color of the active nav item in its rest state.\n */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "slot for menu item controls to appear of leading end.",
+              "name": "leading-controls",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "description": "Allows customization of the background color when pressed.",
-              "name": "--mdc-listitem-background-color-active",
+              "description": "slot for menu item primary label.",
+              "name": "leading-text-primary-label",
               "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",
+              "description": "slot for menu item secondary label.",
+              "name": "leading-text-secondary-label",
               "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",
+              "description": "slot for menu item tertiary label.",
+              "name": "leading-text-tertiary-label",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "description": "Allows customization of the disabled color.",
-              "name": "--mdc-listitem-disabled-color",
+              "description": "slot for menu item side header text.",
+              "name": "trailing-text-side-header",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "description": "Allows customization of column gap.",
-              "name": "--mdc-listitem-column-gap",
+              "description": "slot for menu item subline text.",
+              "name": "trailing-text-subline",
               "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",
+              "description": "slot for menu item controls to appear of trailing end.",
+              "name": "trailing-controls",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
             }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "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": "active",
+              "name": "label",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | 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",
-              "attribute": "active",
+              "description": "The header text to be displayed on the top of the options list.",
+              "attribute": "label",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "badgeType",
-              "type": {
-                "text": "BadgeType | undefined"
-              },
-              "description": "Type of the badge\nCan be `dot` (notification) or `counter`.",
-              "attribute": "badge-type",
-              "reflects": true
+              "kind": "method",
+              "name": "setDisabledForAllOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
             },
             {
               "kind": "field",
-              "name": "counter",
+              "name": "dataAriaLabel",
               "type": {
-                "text": "number | undefined"
+                "text": "string | null"
               },
-              "description": "Counter is the number which can be provided in the badge.",
-              "attribute": "counter",
-              "reflects": true
+              "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": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "maxCounter",
+              "name": "disabled",
               "type": {
-                "text": "number"
+                "text": "boolean | undefined"
               },
-              "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
-            },
+              "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": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "navId",
+              "name": "label",
               "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
+              "description": "The header text to be displayed on the top of the options list.",
+              "fieldName": "label"
             },
             {
-              "kind": "field",
-              "name": "ariaLabel",
+              "name": "data-aria-label",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "disableAriaCurrent",
+              "name": "disabled",
               "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",
+              "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": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            },
+            {
+              "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": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The selected attribute is used to indicate that the option is selected.",
+              "attribute": "selected",
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "isNested",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
+              "kind": "field",
+              "name": "prefixIcon",
+              "type": {
+                "text": "IconNames | undefined"
               },
-              "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"
-                  }
-                }
-              ]
+              "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": "iconName",
+              "name": "ariaLabel",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string | null"
               },
-              "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"
-              }
+              "default": "null",
+              "description": "Any additional description can be provided here for screen readers.",
+              "attribute": "aria-label",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "arrowPosition",
+              "name": "name",
               "type": {
-                "text": "ArrowPositions | undefined"
+                "text": "string"
               },
-              "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",
+              "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": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "arrowDirection",
+              "name": "value",
               "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.",
-              "attribute": "arrow-direction",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "validationMessage",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
-              "description": "The name attribute is used to identify the menu item when it is selected.",
-              "attribute": "name",
+              "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": "value",
+              "name": "validity",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "ValidityState"
               },
-              "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,
+              "readonly": true,
               "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.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.",
+              "kind": "field",
+              "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"
               }
             },
             {
@@ -22974,6 +22917,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",
@@ -23061,8 +23028,48 @@
                   },
                   "description": "The text content to be displayed within the slot."
                 }
-              ],
-              "description": "Generates a template for a text slot with the specified content.",
+              ],
+              "description": "Generates a template for a text slot with the specified content.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "disableSlottedChildren",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "default": "false",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Whether to disable or enable the controls."
+                }
+              ],
+              "description": "Disable or enable all slotted elements in the leading and trailing slots.\nThis is useful when the list item is disabled, to prevent the user from interacting with the controls.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "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"
@@ -23070,24 +23077,14 @@
             },
             {
               "kind": "method",
-              "name": "disableSlottedChildren",
-              "privacy": "private",
+              "name": "renderLeadingControls",
+              "privacy": "protected",
+              "description": "Renders the leading controls slot.",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
-              "parameters": [
-                {
-                  "name": "disabled",
-                  "default": "false",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Whether to disable or enable the controls."
-                }
-              ],
-              "description": "Disable or enable all slotted elements in the leading and trailing slots.\nThis is useful when the list item is disabled, to prevent the user from interacting with the controls.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -23120,7 +23117,7 @@
           ],
           "events": [
             {
-              "description": "(React: onClick) This event is dispatched when the navmenuitem is clicked.",
+              "description": "(React: onClick) This event is dispatched when the option is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -23129,7 +23126,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": {
@@ -23138,7 +23135,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": {
@@ -23147,7 +23144,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": {
@@ -23155,11 +23152,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",
@@ -23199,47 +23191,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",
@@ -23247,77 +23213,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"
               }
             },
             {
@@ -23460,20 +23394,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",
@@ -23481,7 +23415,7 @@
               }
             },
             {
-              "description": "slot for menu item primary label.",
+              "description": "slot for list item primary label.",
               "name": "leading-text-primary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -23489,7 +23423,7 @@
               }
             },
             {
-              "description": "slot for menu item secondary label.",
+              "description": "slot for list item secondary label.",
               "name": "leading-text-secondary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -23497,7 +23431,7 @@
               }
             },
             {
-              "description": "slot for menu item tertiary label.",
+              "description": "slot for list item tertiary label.",
               "name": "leading-text-tertiary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -23505,7 +23439,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",
@@ -23513,7 +23447,7 @@
               }
             },
             {
-              "description": "slot for menu item subline text.",
+              "description": "slot for list item subline text.",
               "name": "trailing-text-subline",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -23521,13 +23455,79 @@
               }
             },
             {
-              "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"
               }
             }
+          ],
+          "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": "NavMenuItem",
-            "module": "components/navmenuitem/navmenuitem.component.js"
+            "name": "Option",
+            "module": "components/option/option.component.js"
           }
         }
       ]