@momentum-design/components 0.80.4 → 0.80.5

package/dist/custom-elements.json

@@ -520,67 +520,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/appheader/appheader.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
-          "name": "Appheader",
-          "cssParts": [
-            {
-              "description": "The main container for styling the header.",
-              "name": "container"
-            },
-            {
-              "description": "The leading section of the header.",
-              "name": "leading-section"
-            },
-            {
-              "description": "The center section of the header.",
-              "name": "center-section"
-            },
-            {
-              "description": "The trailing section of the header.",
-              "name": "trailing-section"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for the leading section (e.g., brand logo, brand name).",
-              "name": "leading"
-            },
-            {
-              "description": "Slot for the center section (e.g., search bar, icons).",
-              "name": "center"
-            },
-            {
-              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
-              "name": "trailing"
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-appheader",
-          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Appheader",
-            "module": "components/appheader/appheader.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/animation/animation.component.js",
@@ -793,6 +732,67 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/appheader/appheader.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
+          "name": "Appheader",
+          "cssParts": [
+            {
+              "description": "The main container for styling the header.",
+              "name": "container"
+            },
+            {
+              "description": "The leading section of the header.",
+              "name": "leading-section"
+            },
+            {
+              "description": "The center section of the header.",
+              "name": "center-section"
+            },
+            {
+              "description": "The trailing section of the header.",
+              "name": "trailing-section"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the leading section (e.g., brand logo, brand name).",
+              "name": "leading"
+            },
+            {
+              "description": "Slot for the center section (e.g., search bar, icons).",
+              "name": "center"
+            },
+            {
+              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
+              "name": "trailing"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-appheader",
+          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Appheader",
+            "module": "components/appheader/appheader.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/avatar/avatar.component.js",
@@ -11475,6 +11475,248 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/icon/icon.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n  by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n  the role will be unset.\n\n### Informative Standalone Icons\n- If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\nhave a Tooltip that describes what it means.\n- For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\nand the `role` will be set to \"img\" automatically.\n- **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**",
+          "name": "Icon",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default fill color.",
+              "name": "--mdc-icon-fill-color"
+            },
+            {
+              "description": "Allows customization of the icon size.",
+              "name": "--mdc-icon-size"
+            },
+            {
+              "description": "Allows customization of the icon border radius.",
+              "name": "--mdc-icon-border-radius"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "iconData",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "lengthUnitFromContext",
+              "type": {
+                "text": "string | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "sizeFromContext",
+              "type": {
+                "text": "number | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename)",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Size of the icon (works in combination with length unit)",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "lengthUnit",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "attribute": "length-unit"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabelledBy",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "attribute": "aria-labelledby"
+            },
+            {
+              "kind": "field",
+              "name": "iconProviderContext",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "abortController",
+              "type": {
+                "text": "AbortController"
+              },
+              "privacy": "private",
+              "default": "new AbortController()"
+            },
+            {
+              "kind": "method",
+              "name": "prepareIconElement",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "iconData",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The icon string to be parsed"
+                }
+              ],
+              "description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getIconData",
+              "privacy": "private",
+              "description": "Fetches the icon (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
+            },
+            {
+              "kind": "method",
+              "name": "handleIconLoadedSuccess",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "iconHtml",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The icon html element which has been fetched from the icon provider."
+                }
+              ],
+              "description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
+            },
+            {
+              "kind": "method",
+              "name": "handleIconLoadedFailure",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "unknown"
+                  }
+                }
+              ],
+              "description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
+            },
+            {
+              "kind": "method",
+              "name": "updateSize",
+              "privacy": "private",
+              "description": "Updates the size by setting the width and height"
+            },
+            {
+              "kind": "field",
+              "name": "computedIconSize",
+              "privacy": "private",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename)",
+              "fieldName": "name"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Size of the icon (works in combination with length unit)",
+              "fieldName": "size"
+            },
+            {
+              "name": "length-unit",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "fieldName": "lengthUnit"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "aria-labelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "fieldName": "ariaLabelledBy"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-icon",
+          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Icon",
+            "module": "components/icon/icon.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/formfieldwrapper/formfieldwrapper.component.js",
@@ -11745,248 +11987,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/icon/icon.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n  by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n  the role will be unset.\n\n### Informative Standalone Icons\n- If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\nhave a Tooltip that describes what it means.\n- For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\nand the `role` will be set to \"img\" automatically.\n- **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**",
-          "name": "Icon",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default fill color.",
-              "name": "--mdc-icon-fill-color"
-            },
-            {
-              "description": "Allows customization of the icon size.",
-              "name": "--mdc-icon-size"
-            },
-            {
-              "description": "Allows customization of the icon border radius.",
-              "name": "--mdc-icon-border-radius"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "iconData",
-              "type": {
-                "text": "HTMLElement | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnitFromContext",
-              "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "sizeFromContext",
-              "type": {
-                "text": "number | undefined"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename)",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Size of the icon (works in combination with length unit)",
-              "attribute": "size"
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnit",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
-              "attribute": "length-unit"
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabelledBy",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "attribute": "aria-labelledby"
-            },
-            {
-              "kind": "field",
-              "name": "iconProviderContext",
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "abortController",
-              "type": {
-                "text": "AbortController"
-              },
-              "privacy": "private",
-              "default": "new AbortController()"
-            },
-            {
-              "kind": "method",
-              "name": "prepareIconElement",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "iconData",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The icon string to be parsed"
-                }
-              ],
-              "description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getIconData",
-              "privacy": "private",
-              "description": "Fetches the icon (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
-            },
-            {
-              "kind": "method",
-              "name": "handleIconLoadedSuccess",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "iconHtml",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The icon html element which has been fetched from the icon provider."
-                }
-              ],
-              "description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
-            },
-            {
-              "kind": "method",
-              "name": "handleIconLoadedFailure",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "error",
-                  "type": {
-                    "text": "unknown"
-                  }
-                }
-              ],
-              "description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
-            },
-            {
-              "kind": "method",
-              "name": "updateSize",
-              "privacy": "private",
-              "description": "Updates the size by setting the width and height"
-            },
-            {
-              "kind": "field",
-              "name": "computedIconSize",
-              "privacy": "private",
-              "readonly": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename)",
-              "fieldName": "name"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Size of the icon (works in combination with length unit)",
-              "fieldName": "size"
-            },
-            {
-              "name": "length-unit",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
-              "fieldName": "lengthUnit"
-            },
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            },
-            {
-              "name": "aria-labelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "fieldName": "ariaLabelledBy"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-icon",
-          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Icon",
-            "module": "components/icon/icon.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/iconprovider/iconprovider.component.js",
@@ -14200,7 +14200,7 @@
             {
               "kind": "method",
               "name": "handleMouseClick",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
@@ -14993,7 +14993,7 @@
             {
               "kind": "method",
               "name": "handleMouseClick",
-              "privacy": "private",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
@@ -15242,6 +15242,31 @@
                 "module": "utils/mixins/MenuMixin.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "isValidNavItemList",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "tagName",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The tag name to check."
+                }
+              ],
+              "description": "Checks if the given tag name is a valid navitemlist tag name.",
+              "inheritedFrom": {
+                "name": "MenuMixin",
+                "module": "utils/mixins/MenuMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "isValidPopover",
@@ -15592,6 +15617,30 @@
                 "module": "utils/mixins/MenuMixin.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "getKeyBasedOnDirection",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "originalKey",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The original key pressed."
+                }
+              ],
+              "description": "Returns the key based on the direction of the document.\nIf the document is in RTL mode and the key is ARROW_LEFT or ARROW_RIGHT,\nit will swap them to maintain the correct navigation direction.",
+              "inheritedFrom": {
+                "name": "MenuMixin",
+                "module": "utils/mixins/MenuMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleKeyDown",
@@ -18093,6 +18142,31 @@
                 "module": "utils/mixins/MenuMixin.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "isValidNavItemList",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "tagName",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The tag name to check."
+                }
+              ],
+              "description": "Checks if the given tag name is a valid navitemlist tag name.",
+              "inheritedFrom": {
+                "name": "MenuMixin",
+                "module": "utils/mixins/MenuMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "isValidPopover",
@@ -18443,6 +18517,30 @@
                 "module": "utils/mixins/MenuMixin.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "getKeyBasedOnDirection",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "originalKey",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The original key pressed."
+                }
+              ],
+              "description": "Returns the key based on the direction of the document.\nIf the document is in RTL mode and the key is ARROW_LEFT or ARROW_RIGHT,\nit will swap them to maintain the correct navigation direction.",
+              "inheritedFrom": {
+                "name": "MenuMixin",
+                "module": "utils/mixins/MenuMixin.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleKeyDown",
@@ -20161,206 +20259,116 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/optgroup/optgroup.component.js",
+      "path": "components/navitem/navitem.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "optgroup component, which creates a grouping of mdc-option within a listbox element.",
-          "name": "OptGroup",
+          "description": "`mdc-navitem` is a menuitem styled to work as a navigation tab.\nIt supports a leading icon, optional badge and dynamic text rendering.\n\nNote: `mdc-navitem` is intended to be used inside `mdc-navitemlist` as part of the sideNavigation\ncomponent. Its structure, spacing, and interactions are designed to align with\nthe visual and functional requirements of side navigation layouts.",
+          "name": "NavItem",
           "cssProperties": [
             {
-              "description": "Allows customization of the disabled option color.",
-              "name": "--mdc-optgroup-disabled-color"
-            }
-          ],
-          "slots": [
+              "description": "Text color of the navitem in its normal state.",
+              "name": "--mdc-navitem-color"
+            },
             {
-              "description": "This is a default slot for mdc-option elements.",
-              "name": "default"
-            }
-          ],
-          "members": [
+              "description": "Border color of the navitem in its normal state.",
+              "name": "--mdc-navitem-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 navitem when disabled.",
+              "name": "--mdc-navitem-disabled-color"
             },
             {
-              "kind": "method",
-              "name": "setDisabledForAllOptions",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
+              "description": "Width of the navItem when expanded.",
+              "name": "--mdc-navitem-expanded-width"
             },
             {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
-              }
+              "description": "Background color of the navitem when hovered.",
+              "name": "--mdc-navitem-hover-background-color"
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
-            }
-          ],
-          "attributes": [
+              "description": "Background color of the active navitem when hovered.",
+              "name": "--mdc-navitem-hover-active-background-color"
+            },
             {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text to be displayed on the top of the options list.",
-              "fieldName": "label"
+              "description": "Background color of the navitem when pressed.",
+              "name": "--mdc-navitem-pressed-background-color"
             },
             {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
+              "description": "Background color of the active navitem when pressed.",
+              "name": "--mdc-navitem-pressed-active-background-color"
             },
             {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
+              "description": "Background color of the navitem when disabled.",
+              "name": "--mdc-navitem-disabled-background-color"
+            },
             {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
+              "description": "Background color of the active navitem when disabled.",
+              "name": "--mdc-navitem-disabled-active-background-color"
             },
             {
-              "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 as a list item in a select component.<br/>\nWe can pass an icon which will be displayed in leading position of the option label text.\nWe can pass a tooltip which will be displayed on hover of the option label text.\nThe tooltip will be helpful for a long label text which is truncated with ellipsis.",
-          "name": "Option",
-          "slots": [
+              "description": "Background color of the active nav item in its rest state.",
+              "name": "--mdc-navitem-rest-active-background-color"
+            },
             {
-              "description": "This is a default/unnamed slot",
-              "name": "default"
+              "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": "slot for list item controls to appear of leading end.",
-              "name": "leading-controls",
+              "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": "slot for list item primary label.",
-              "name": "leading-text-primary-label",
+              "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": "slot for list item secondary label.",
-              "name": "leading-text-secondary-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"
               }
             },
             {
-              "description": "slot for list item tertiary label.",
-              "name": "leading-text-tertiary-label",
+              "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": "slot for list item side header text.",
-              "name": "trailing-text-side-header",
+              "description": "Allows customization of the disabled color.",
+              "name": "--mdc-listitem-disabled-color",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "description": "slot for list item subline text.",
-              "name": "trailing-text-subline",
+              "description": "Allows customization of column gap.",
+              "name": "--mdc-listitem-column-gap",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "description": "slot for list item controls to appear of trailing end.",
-              "name": "trailing-controls",
+              "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"
@@ -20370,23 +20378,55 @@
           "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 navitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the navitem is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the navitem is in an inactive state, indicating it is toggled off.",
+              "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 navItem (used as a identificator when used in the navItemList)\nNote: It has to be unique.",
+              "default": "undefined",
+              "attribute": "nav-id",
               "reflects": true
             },
             {
@@ -20396,139 +20436,1887 @@
                 "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 navitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
+              "attribute": "disable-aria-current",
               "reflects": true
             },
             {
               "kind": "method",
-              "name": "handleDefaultSlotChange",
+              "name": "isNested",
               "privacy": "private",
-              "description": "Listens to changes in the default slot and updates the label of the option accordingly.\nThis is used to set the label of the option when it is not explicitly set.\nIt is called internally when the slot is changed."
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Check whether the navitem is inside a nested nav structure.\nReturns `true` if there is a parent `mdc-menupopover`\nThis method assumes nesting implies deeper levels of nav hierarchy."
             },
             {
               "kind": "method",
-              "name": "updateAttribute",
+              "name": "handleClickEvent",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
-              },
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderTextLabel",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "attributeName",
+                  "name": "label",
                   "type": {
-                    "text": "string"
+                    "text": "string | undefined"
                   }
-                },
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderArrowIcon",
+              "privacy": "private",
+              "parameters": [
                 {
-                  "name": "value",
+                  "name": "showLabel",
                   "type": {
-                    "text": "string"
+                    "text": "boolean | undefined"
                   }
                 }
-              ],
-              "description": "Updates the attribute of the option to reflect the current state."
+              ]
             },
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "kind": "method",
+              "name": "renderBadge",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "showLabel",
+                  "type": {
+                    "text": "boolean | undefined"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "iconName",
               "type": {
-                "text": "string"
+                "text": "IconNames | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
-              "reflects": true,
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "validationMessage",
+              "name": "arrowPosition",
               "type": {
-                "text": "string | undefined"
+                "text": "ArrowPositions | undefined"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
-              "attribute": "validation-message",
+              "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": "validity",
+              "name": "arrowDirection",
               "type": {
-                "text": "ValidityState"
+                "text": "ArrowDirections | undefined"
               },
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
+              "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": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
+              "name": "renderTrailingControls",
+              "privacy": "protected",
+              "description": "Renders the trailing controls slot and optionally the trailing 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"
               }
             },
             {
               "kind": "method",
-              "name": "checkValidity",
+              "name": "renderLeadingControls",
+              "privacy": "protected",
+              "description": "Renders the leading controls slot and optionally the leading arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ListItemVariants"
+              },
+              "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
+              "default": "'full-width'",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
+              "attribute": "label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "secondaryLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
+              "attribute": "secondary-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tertiaryLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
+              "attribute": "tertiary-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "sideHeaderText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
+              "attribute": "side-header-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "sublineText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
+              "attribute": "subline-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tooltipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tooltip text is displayed on hover of the list item.",
+              "attribute": "tooltip-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tooltipPlacement",
+              "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'",
+              "attribute": "tooltip-placement",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "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.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "description": "Triggers a click event on the list item.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "displayTooltipForLongText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Display a tooltip for the listitem.\nCreate the tooltip programmatically after the nearest parent element.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hideTooltipOnLeave",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Removes the dynamically created tooltip for long text label on focus or mouse leave.\nThis is triggered on focusout and mouseout events.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getText",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "slotName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the slot to be used."
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "TextType"
+                  },
+                  "description": "The type of the text element."
+                },
+                {
+                  "name": "content",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text content to be displayed within the slot."
+                }
+              ],
+              "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",
+                  "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": "stopEventPropagation",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The mouse event triggered when a click occurs."
+                }
+              ],
+              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the navitem is clicked.",
+              "name": "click",
+              "reactName": "onClick",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the navitem.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the navitem.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the navitem receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "(React: onActiveChange) Dispatched when the active state of the navitem changes.",
+              "name": "activechange",
+              "reactName": "onActiveChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The navitem's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the navitem is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the navitem is in an inactive state, indicating it is toggled off.",
+              "default": "undefined",
+              "fieldName": "active"
+            },
+            {
+              "name": "badge-type",
+              "type": {
+                "text": "BadgeType | undefined"
+              },
+              "description": "Type of the badge\nCan be `dot` (notification) or `counter`.",
+              "fieldName": "badgeType"
+            },
+            {
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Counter is the number which can be provided in the badge.",
+              "fieldName": "counter"
+            },
+            {
+              "name": "max-counter",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
+              "default": "99",
+              "fieldName": "maxCounter"
+            },
+            {
+              "name": "nav-id",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Id of the navItem (used as a identificator when used in the navItemList)\nNote: It has to be unique.",
+              "default": "undefined",
+              "fieldName": "navId"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "disable-aria-current",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "When set to true, prevents the automatic setting of the `aria-current` attribute on the navitem\nwhen it becomes active. This is useful for cases where you want to maintain the visual active styling\nbut need to handle aria-current attribute differently or not at all.\nThe active button styling will still be applied regardless of this setting.",
+              "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",
+              "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": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "ListItemVariants"
+              },
+              "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
+              "default": "'full-width'",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "name": "secondary-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "secondaryLabel",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "name": "tertiary-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "tertiaryLabel",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "name": "side-header-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
+              "fieldName": "sideHeaderText",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "name": "subline-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
+              "fieldName": "sublineText",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "name": "tooltip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tooltip text is displayed on hover of the list item.",
+              "fieldName": "tooltipText",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "name": "tooltip-placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The tooltip placement of the list item. If the tooltip text is present,\nthen this tooltip placement will be applied.",
+              "default": "'top'",
+              "fieldName": "tooltipPlacement",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "MenuItem",
+            "module": "/src/components/menuitem/menuitem.component"
+          },
+          "tagName": "mdc-navitem",
+          "jsDoc": "/**\n * `mdc-navitem` is a menuitem styled to work as a navigation tab.\n * It supports a leading icon, optional badge and dynamic text rendering.\n *\n * Note: `mdc-navitem` is intended to be used inside `mdc-navitemlist` as part of the sideNavigation\n * component. Its structure, spacing, and interactions are designed to align with\n * the visual and functional requirements of side navigation layouts.\n *\n * @tagname mdc-navitem\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-badge\n * @dependency mdc-tooltip\n *\n * @event click - (React: onClick) This event is dispatched when the navitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the navitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the navitem.\n * @event focus - (React: onFocus) This event is dispatched when the navitem receives focus.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.\n *\n * @cssproperty --mdc-navitem-color - Text color of the navitem in its normal state.\n * @cssproperty --mdc-navitem-border-color - Border color of the navitem in its normal state.\n * @cssproperty --mdc-navitem-disabled-color - Text color of the navitem when disabled.\n * @cssproperty --mdc-navitem-expanded-width - Width of the navItem when expanded.\n * @cssproperty --mdc-navitem-hover-background-color - Background color of the navitem when hovered.\n * @cssproperty --mdc-navitem-hover-active-background-color - Background color of the active navitem when hovered.\n * @cssproperty --mdc-navitem-pressed-background-color - Background color of the navitem when pressed.\n * @cssproperty --mdc-navitem-pressed-active-background-color - Background color of the active navitem when pressed.\n * @cssproperty --mdc-navitem-disabled-background-color - Background color of the navitem when disabled.\n * @cssproperty --mdc-navitem-disabled-active-background-color - Background color of the active navitem when disabled.\n * @cssproperty --mdc-navitem-rest-active-background-color - Background color of the active nav item in its rest state.\n */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "slot for 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"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NavItem",
+            "module": "components/navitem/navitem.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/navitemlist/navitemlist.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.\nIt provides the structural foundation for organizing vertical nav items and\nensures consistent behavior and layout within side navigation patterns.\n\nNote: mdc-navitemlist is typically used within the sidenavigation component.",
+          "name": "NavItemList",
+          "slots": [
+            {
+              "description": "Slot for projecting one or more navigation items, optional section headers and dividers.",
+              "name": "default",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "src/components/menubar/menubar.component.ts"
+              }
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "navItems",
+              "type": {
+                "text": "NavItem[]"
+              },
+              "privacy": "private",
+              "description": "Returns all nested, non-disabled mdc-navitem elements inside this component.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaOrientation",
+              "type": {
+                "text": "Orientation"
+              },
+              "description": "Defines the orientation of the menu. This value is reflected to\nthe `aria-orientation` attribute and can be either `'horizontal'` or `'vertical'`.",
+              "default": "'horizontal'",
+              "attribute": "aria-orientation",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setMenuBarPopoverValue",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The value to set."
+                }
+              ],
+              "description": "Sets the value of the data-menu-popover-open attribute on the menu element.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isMenuPopoverOpen",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "description": "Returns true if the data-menu-popover-open attribute on the menu element is set to 'true', false otherwise.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "EventTarget | null"
+                  },
+                  "description": "The target element to find the index of."
+                }
+              ],
+              "description": "Returns the index of the given target in the menuItems array.\nIf the target is not a menu item, but a child element of a menu item,\nit returns the index of the parent menu item.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updatePopoverPlacementBasedOnOrientation",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Updates the placement of the popover based on the aria-orientation property.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateTabIndexAndFocusNewIndex",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "menuItems",
+                  "type": {
+                    "text": "Array<HTMLElement>"
+                  },
+                  "description": "The list of menu items."
+                },
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The current index of the focused menu item."
+                },
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the new active element in the list."
+                }
+              ],
+              "description": "Updates the tabindex of the current index to -1 and the tabindex of the new index to 0,\neffectively setting the active element. This is used when navigating the menu via keyboard.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isValidMenu",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "tagName",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The tag name to check."
+                }
+              ],
+              "description": "Checks if the given tag name is a valid menu tag name.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isValidNavItemList",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "tagName",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The tag name to check."
+                }
+              ],
+              "description": "Checks if the given tag name is a valid navitemlist tag name.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isValidPopover",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "tagName",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The tag name to check."
+                }
+              ],
+              "description": "Checks if the given tag name is a valid menu popover tag name.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "openPopover",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the menu item to open the popover for."
+                }
+              ],
+              "description": "Opens the popover at the given index if it exists.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "navigateToPrevMenuItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The current index of the focused menu item."
+                },
+                {
+                  "name": "firstMenuIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the first menu item."
+                },
+                {
+                  "name": "lastMenuIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the last menu item."
+                },
+                {
+                  "name": "ariaOrientation",
+                  "type": {
+                    "text": "Orientation"
+                  },
+                  "description": "The orientation of the menu."
+                }
+              ],
+              "description": "Navigates to the previous menu item and updates the tabindex of the current index\nto -1 and the tabindex of the new index to 0.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "navigateToNextMenuItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The current index of the focused menu item."
+                },
+                {
+                  "name": "firstMenuIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the first menu item."
+                },
+                {
+                  "name": "lastMenuIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the last menu item."
+                },
+                {
+                  "name": "ariaOrientation",
+                  "type": {
+                    "text": "Orientation"
+                  },
+                  "description": "The orientation of the menu."
+                }
+              ],
+              "description": "Navigates to the next menu item and updates the tabindex of the current index\nto -1 and the tabindex of the new index to 0.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getParentMenuItemDetails",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "menuChildId",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The id of the menu child element."
+                },
+                {
+                  "name": "menu",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "The current menu element to start traversing from."
+                }
+              ],
+              "description": "Returns the parent menu item details for the given menu child id.\nIt recursively traverses up the DOM tree until it finds a menu or menubar element.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hideAllPopovers",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "menu",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "The current menu element to start traversing from."
+                }
+              ],
+              "description": "Recursively hides all the popovers up the DOM tree until it finds a menu or menubar element.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "navigateToPrevParentMenuItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The current index of the focused menu item."
+                },
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Recursively navigates up the DOM tree until it finds the previous menu item\nand updates the tabindex of the current index to -1 and the tabindex of the new index to 0.\nAlso opens the popover of the previous menu item.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "closePopoverAndNavigateToPrevParentMenuItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The current index of the focused menu item."
+                },
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Closes the current menu popover and navigates to the previous parent menu item.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getParentMenuContents",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "currentMenuItem",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "The current menu item to start traversing from."
+                }
+              ],
+              "description": "Gets the parent menu contents of the given current menu item.\nIt recursively traverses up the DOM tree until it finds the parent menu element\nand gets the parent menu item details and the children of the parent menu item.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "openPopoverAndNavigateToNextChildrenMenuItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The current index of the focused menu item."
+                }
+              ],
+              "description": "Opens the popover of the next children menu item if there are children.\nIf there are no children, then it closes all popovers recursively and\nnavigates to the next menu item from the menu bar.\nIf the parent menu item does not have any children, then we will go to the next menu item.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "isValidMenuItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "menuItem",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The menu item to check."
+                }
+              ],
+              "description": "Checks if the given menu item is a valid menu item.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexAndSetActiveTabIndex",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "menuItems",
+                  "type": {
+                    "text": "Array<HTMLElement>"
+                  }
+                },
+                {
+                  "description": "The index of the new active element in the list.",
+                  "name": "newIndex"
+                }
+              ],
+              "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getKeyBasedOnDirection",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "originalKey",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The original key pressed."
+                }
+              ],
+              "description": "Returns the key based on the direction of the document.\nIf the document is in RTL mode and the key is ARROW_LEFT or ARROW_RIGHT,\nit will swap them to maintain the correct navigation direction.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the menu bar.\nThe keys are as follows:\n- HOME: Sets focus to the first menu item.\n- END: Sets focus to the last menu item.\n- ARROW_LEFT:\n  - If orientation is horizontal, then it navigates to the previous menu item.\n  - If orientation is vertical, then it closes the popover of the current menu item and\n    navigates to the previous parent menu item.\n- ARROW_RIGHT:\n  - If orientation is horizontal, then it navigates to the next menu item.\n  - If orientation is vertical, then it opens the popover of the current menu item and\n    navigates to the next children menu item.\n- ARROW_UP:\n  - If orientation is horizontal, then it opens the popover of the current menu item.\n  - If orientation is vertical, then it navigates to the previous menu item.\n- ARROW_DOWN:\n  - If orientation is horizontal, then it opens the popover of the current menu item.\n  - If orientation is vertical, then it navigates to the next menu item.\n- SPACE:\n- ENTER:\n  - If the next element sibling is a menu popover, then it opens the popover of the current\n    menu item and navigates to the next children menu item.\n  - If the target element is a menu item, then it closes all popovers recursively and\n    navigates to the previous parent menu item.\n- ESCAPE:\n  - If a popover is already open then we close it and navigate to the parent menu item.\n  - If the current menuitem is a child of menubar, then we will set the value of isMenuPopoverOpen to false.,",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "closeAllPopoversExceptCurrent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the current menu item."
+                }
+              ],
+              "description": "Closes all popovers except the current one.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseClick",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  },
+                  "description": "The mouse click event."
+                }
+              ],
+              "description": "Handles the mouse click event on the menu items.\n- If the menuitem has children, then it opens the popover of the next children menu item.\n- If the menuitem does not have children, then it closes all popovers recursively.",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "aria-orientation",
+              "type": {
+                "text": "Orientation"
+              },
+              "description": "Defines the orientation of the menu. This value is reflected to\nthe `aria-orientation` attribute and can be either `'horizontal'` or `'vertical'`.",
+              "default": "'horizontal'",
+              "fieldName": "ariaOrientation",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "src/components/menubar/menubar.component.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "MenuMixin",
+              "module": "/src/utils/mixins/MenuMixin"
+            }
+          ],
+          "superclass": {
+            "name": "MenuBar",
+            "module": "/src/components/menubar/menubar.component"
+          },
+          "tagName": "mdc-navitemlist",
+          "jsDoc": "/**\n * `mdc-navitemlist` is a container component used to group multiple mdc-navitem elements into a navigation list.\n * It provides the structural foundation for organizing vertical nav items and\n * ensures consistent behavior and layout within side navigation patterns.\n *\n * Note: mdc-navitemlist is typically used within the sidenavigation component.\n * @tagname mdc-navitemlist\n *\n * @slot default - Slot for projecting one or more navigation items, optional section headers and dividers.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "NavItemList",
+            "module": "components/navitemlist/navitemlist.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/optgroup/optgroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "optgroup component, which creates a grouping of mdc-option within a listbox element.",
+          "name": "OptGroup",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the disabled option color.",
+              "name": "--mdc-optgroup-disabled-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default slot for mdc-option elements.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text to be displayed on the top of the options list.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "setDisabledForAllOptions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text to be displayed on the top of the options list.",
+              "fieldName": "label"
+            },
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.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",
+              "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 as a list item in a select component.<br/>\nWe can pass an icon which will be displayed in leading position of the option label text.\nWe can pass a tooltip which will be displayed on hover of the option label text.\nThe tooltip will be helpful for a long label text which is truncated with ellipsis.",
+          "name": "Option",
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot",
+              "name": "default"
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "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": "field",
+              "name": "prefixIcon",
+              "type": {
+                "text": "IconNames | 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": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Any additional description can be provided here for screen readers.",
+              "attribute": "aria-label",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleDefaultSlotChange",
+              "privacy": "private",
+              "description": "Listens to changes in the default slot and updates the label of the option accordingly.\nThis is used to set the label of the option when it is not explicitly set.\nIt is called internally when the slot is changed."
+            },
+            {
+              "kind": "method",
+              "name": "updateAttribute",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "attributeName",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Updates the attribute of the option to reflect the current state."
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "attribute": "validation-message",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
@@ -27310,6 +29098,165 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/sidenavigation/sidenavigation.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\ntypically used in layouts with persistent or collapsible sidebars.\n\n## Features:\n- Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n- Toggleable expand/collapse behavior\n- Displays brand logo and customer name\n- Serves as a context provider for descendant components - `mdc-navitemlist` and `mdc-navitem`\n\n### Usage:\nIn a sidenavigation, navitems can be used in the following ways:\n\n1. **Simple navitem** – No submenu or interaction beyond selection.\n\n2. **Navitem with submenu**:\n   - Provide an `id` on the `mdc-navitem`\n   - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem's `id`\n   - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n     inside the nested menupopover is active, conveying which submenu item is currently selected\n\n3. **Actionable navitem (no submenu)**:\n   - Performs an action such as navigation or alert trigger\n   - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n\n### Recommendations:\n- Use `mdc-text` for section headers\n- Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n- For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n\n#### Accessibility Notes:\n- Always provide meaningful `aria-label` attributes for both `mdc-navitem` and `mdc-navitemlist`\nto ensure screen reader support\n- Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button",
+          "name": "SideNavigation",
+          "cssProperties": [
+            {
+              "description": "width of the sideNavigation when expanded",
+              "name": "--mdc-sidenavigation-expanded-width"
+            },
+            {
+              "description": "width of the sideNavigation when collpased",
+              "name": "--mdc-sidenavigation-collapsed-width"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the scrollable content area of the side navigation.",
+              "name": "scrollable-section"
+            },
+            {
+              "description": "Slot for the fixed content area of the side navigation.",
+              "name": "fixed-section"
+            },
+            {
+              "description": "Slot for the brand logo (e.g., icon or img).",
+              "name": "brand-logo"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "SideNavigationVariant"
+              },
+              "description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
+              "default": "flexible",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "customerName",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Name of the customer. This is displayed in the bottom section of the side-navigation component.",
+              "attribute": "customer-name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "grabberBtnAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
+              "default": "''",
+              "attribute": "grabber-btn-aria-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "parentNavTooltipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tooltip text shown on parent nav items when a child is active.",
+              "attribute": "parent-nav-tooltip-text",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onActiveChange) Dispatched when the active state of the navitem changes.",
+              "name": "activechange",
+              "reactName": "onActiveChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "SideNavigationVariant"
+              },
+              "description": "Four variants of the sideNavigation\n- **fixed-collapsed**: Shows icons without labels and has fixed width, 4.5rem.\n- **fixed-expanded**: Shows icons with labels and has fixed width, 15rem.\n- **flexible**: Toggles between collapsed/expanded states.\n- **hidden**: Removes the sidenavigation from the DOM.",
+              "default": "flexible",
+              "fieldName": "variant"
+            },
+            {
+              "name": "customer-name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Name of the customer. This is displayed in the bottom section of the side-navigation component.",
+              "fieldName": "customerName"
+            },
+            {
+              "name": "grabber-btn-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Provides an accessible label for the grabber button.\nThis value is used to set the `aria-label` attribute for the button.",
+              "default": "''",
+              "fieldName": "grabberBtnAriaLabel"
+            },
+            {
+              "name": "parent-nav-tooltip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Tooltip text shown on parent nav items when a child is active.",
+              "fieldName": "parentNavTooltipText"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-sidenavigation",
+          "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-navitemlist` and `mdc-navitem`\n *\n * ### Usage:\n * In a sidenavigation, navitems can be used in the following ways:\n *\n * 1. **Simple navitem** – No submenu or interaction beyond selection.\n *\n * 2. **Navitem with submenu**:\n *    - Provide an `id` on the `mdc-navitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navitem` and `mdc-navitemlist`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SideNavigation",
+            "module": "components/sidenavigation/sidenavigation.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/spinner/spinner.component.js",
@@ -36198,6 +38145,27 @@
               ],
               "description": "Checks if the given tag name is a valid menu tag name."
             },
+            {
+              "kind": "method",
+              "name": "isValidNavItemList",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "tagName",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The tag name to check."
+                }
+              ],
+              "description": "Checks if the given tag name is a valid navitemlist tag name."
+            },
             {
               "kind": "method",
               "name": "isValidPopover",
@@ -36500,6 +38468,26 @@
               ],
               "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
             },
+            {
+              "kind": "method",
+              "name": "getKeyBasedOnDirection",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "originalKey",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The original key pressed."
+                }
+              ],
+              "description": "Returns the key based on the direction of the document.\nIf the document is in RTL mode and the key is ARROW_LEFT or ARROW_RIGHT,\nit will swap them to maintain the correct navigation direction."
+            },
             {
               "kind": "method",
               "name": "handleKeyDown",