@momentum-design/components 0.85.3 → 0.85.5

package/dist/custom-elements.json

@@ -28,6 +28,16 @@
               "name": "--mdc-chip-background-color"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The alert icon",
+              "name": "icon"
+            },
+            {
+              "description": "The text label of the alertchip",
+              "name": "label"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -467,7 +477,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-alertchip",
-          "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
+          "jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n * @csspart icon - The alert icon\n * @csspart label - The text label of the alertchip\n */",
           "customElement": true,
           "events": [
             {
@@ -823,266 +833,29 @@
               "name": "--mdc-avatar-loading-overlay-background-color"
             }
           ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
-              "attribute": "src",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "initials",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The initials to be displayed for the avatar.",
-              "attribute": "initials",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "presence",
-              "type": {
-                "text": "PresenceType | undefined"
-              },
-              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "attribute": "presence",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "AvatarSize"
-              },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "counter",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "attribute": "counter",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isTyping",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "attribute": "is-typing",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "AvatarComponentMixin",
-              "module": "/src/utils/mixins/AvatarComponentMixin"
-            },
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-avatar",
-          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n */",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
-              "fieldName": "src",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
+          "cssParts": [
             {
-              "name": "initials",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The initials to be displayed for the avatar.",
-              "fieldName": "initials",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
+              "description": "The main content of the avatar.",
+              "name": "content"
             },
             {
-              "name": "presence",
-              "type": {
-                "text": "PresenceType | undefined"
-              },
-              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "fieldName": "presence",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
+              "description": "The photo of the avatar.",
+              "name": "photo"
             },
             {
-              "name": "size",
-              "type": {
-                "text": "AvatarSize"
-              },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
+              "description": "The presence indicator of the avatar.",
+              "name": "presence"
             },
             {
-              "name": "counter",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "fieldName": "counter",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "is-typing",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "fieldName": "isTyping",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
+              "description": "The wrapper for the loading indicator.",
+              "name": "loading-wrapper"
             },
             {
-              "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"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Avatar",
-            "module": "components/avatar/avatar.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/avatarbutton/avatarbutton.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
-          "name": "AvatarButton",
-          "cssProperties": [
-            {
-              "description": "Background color of the overlay in rest state",
-              "name": "--mdc-avatarbutton-overlay-background-color-rest"
-            },
-            {
-              "description": "Background color of the overlay in hover state",
-              "name": "--mdc-avatarbutton-overlay-background-color-hover"
-            },
-            {
-              "description": "Background color of the overlay in active state",
-              "name": "--mdc-avatarbutton-overlay-background-color-active"
+              "description": "The loading indicator of the avatar.",
+              "name": "loader"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "method",
-              "name": "setSize",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "size",
-                  "type": {
-                    "text": "AvatarSize"
-                  }
-                }
-              ]
-            },
             {
               "kind": "field",
               "name": "src",
@@ -1126,15 +899,300 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "ButtonSize"
+                "text": "AvatarSize"
               },
               "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
               "default": "32",
               "attribute": "size",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "attribute": "counter",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isTyping",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "attribute": "is-typing",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "AvatarComponentMixin",
+              "module": "/src/utils/mixins/AvatarComponentMixin"
+            },
+            {
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-avatar",
+          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n *\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
+              "fieldName": "src",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "initials",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The initials to be displayed for the avatar.",
+              "fieldName": "initials",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "presence",
+              "type": {
+                "text": "PresenceType | undefined"
+              },
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "fieldName": "presence",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "AvatarSize"
+              },
+              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
+              "default": "32",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "fieldName": "counter",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "is-typing",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "fieldName": "isTyping",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "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"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Avatar",
+            "module": "components/avatar/avatar.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/avatarbutton/avatarbutton.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.\n\nTo override styles of the avatar inside, use the specified css parts.",
+          "name": "AvatarButton",
+          "cssProperties": [
+            {
+              "description": "Background color of the overlay in rest state",
+              "name": "--mdc-avatarbutton-overlay-background-color-rest"
+            },
+            {
+              "description": "Background color of the overlay in hover state",
+              "name": "--mdc-avatarbutton-overlay-background-color-hover"
+            },
+            {
+              "description": "Background color of the overlay in active state",
+              "name": "--mdc-avatarbutton-overlay-background-color-active"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The overlay part of the avatar button.",
+              "name": "overlay"
+            },
+            {
+              "description": "The main content of the avatar.",
+              "name": "content"
+            },
+            {
+              "description": "The photo part of the avatar.",
+              "name": "photo"
+            },
+            {
+              "description": "The presence indicator part of the avatar.",
+              "name": "presence"
+            },
+            {
+              "description": "The wrapper for the loading indicator of the avatar.",
+              "name": "loading-wrapper"
+            },
+            {
+              "description": "The loading indicator part of the avatar.",
+              "name": "loader"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "method",
+              "name": "setSize",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "AvatarSize"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
+              "attribute": "src",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "initials",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The initials to be displayed for the avatar.",
+              "attribute": "initials",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "presence",
+              "type": {
+                "text": "PresenceType | undefined"
+              },
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "attribute": "presence",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
@@ -1692,7 +1750,7 @@
             "module": "/src/components/buttonsimple/buttonsimple.component"
           },
           "tagName": "mdc-avatarbutton",
-          "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state\n */",
+          "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * To override styles of the avatar inside, use the specified css parts.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state\n *\n * @csspart overlay - The overlay part of the avatar button.\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo part of the avatar.\n * @csspart presence - The presence indicator part of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.\n * @csspart loader - The loading indicator part of the avatar.\n */",
           "customElement": true
         }
       ],
@@ -12034,6 +12092,12 @@
               "name": "--mdc-icon-border-radius"
             }
           ],
+          "cssParts": [
+            {
+              "description": "The svg inside the icon element.",
+              "name": "icon"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -12239,7 +12303,7 @@
             "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 */",
+          "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 *\n * @csspart icon - The svg inside the icon element.\n */",
           "customElement": true
         }
       ],
@@ -14698,6 +14762,17 @@
               "attribute": "subline-text",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "tooltipText",
@@ -14825,6 +14900,7 @@
               "parameters": [
                 {
                   "name": "disabled",
+                  "default": "false",
                   "type": {
                     "text": "boolean"
                   },
@@ -14978,6 +15054,15 @@
               "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
               "fieldName": "sublineText"
             },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled"
+            },
             {
               "name": "tooltip-text",
               "type": {
@@ -15129,7 +15214,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,\nwith support for nested submenus and keyboard navigation. It serves as a container\nfor menu items and manages their interaction patterns, including:\n- Keyboard navigation (arrow keys, Home, End)\n- Menu item activation (Enter/Space)\n- Submenu toggling (Right/Left arrow keys)\n- Focus management\n- Support for both horizontal and vertical orientations\n- Integration with MenuPopover for nested menus\n\nA menubar will contain a set of menu items and their associated popovers.\nEach menu item can have a popover for nested menus.\n\nThe component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.\nIt works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.",
+          "description": "Menubar is a navigational menu component that provides a vertical fixed list of menu items,\nwith support for nested submenus and keyboard navigation. It serves as a container\nfor menu items and manages their interaction patterns, including:\n- Keyboard navigation (Arrow keys, Home, End)\n- Menu item activation (Enter/Space)\n- Submenu toggling (Right/Left arrow keys)\n- Focus management\n- Integration with MenuPopover for nested menus\n\nA menubar will contain a set of menu items and their associated popovers.\nEach menu item can have a popover for nested menus.\n\nThe component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.\nIt works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.\n\n**Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.\n\n`mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.",
           "name": "MenuBar",
           "slots": [
             {
@@ -15140,227 +15225,60 @@
           "members": [
             {
               "kind": "field",
-              "name": "ariaOrientation",
+              "name": "menuItems",
               "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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
+                "text": "Array<HTMLElement>"
               }
             },
             {
               "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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "updateTabIndexAndFocusNewIndex",
+              "name": "resetTabIndexAndSetActiveTabIndex",
               "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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.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": "MenuMixin",
-                "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": "The index of the new active element in the list.",
+                  "name": "newIndex"
                 }
               ],
-              "description": "Checks if the given tag name is a valid navitemlist tag name.",
-              "inheritedFrom": {
-                "name": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
+              "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": "isValidPopover",
+              "name": "getCurrentIndex",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "number"
                 }
               },
               "parameters": [
                 {
-                  "name": "tagName",
-                  "optional": true,
+                  "name": "target",
                   "type": {
-                    "text": "string"
-                  },
-                  "description": "The tag name to check."
+                    "text": "EventTarget | null"
+                  }
                 }
-              ],
-              "description": "Checks if the given tag name is a valid menu popover tag name.",
-              "inheritedFrom": {
-                "name": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "openPopover",
+              "name": "updatePopoverPlacement",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the menu item to open the popover for."
+                  "text": "void"
                 }
-              ],
-              "description": "Opens the popover at the given index if it exists.",
-              "inheritedFrom": {
-                "name": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "navigateToPrevMenuItem",
+              "name": "updateTabIndexAndFocus",
               "privacy": "private",
               "return": {
                 "type": {
@@ -15369,43 +15287,28 @@
               },
               "parameters": [
                 {
-                  "name": "currentIndex",
+                  "name": "menuItems",
                   "type": {
-                    "text": "number"
-                  },
-                  "description": "The current index of the focused menu item."
+                    "text": "HTMLElement[]"
+                  }
                 },
                 {
-                  "name": "firstMenuIndex",
+                  "name": "currentIndex",
                   "type": {
                     "text": "number"
-                  },
-                  "description": "The index of the first menu item."
+                  }
                 },
                 {
-                  "name": "lastMenuIndex",
+                  "name": "newIndex",
                   "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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "navigateToNextMenuItem",
+              "name": "navigateToMenuItem",
               "privacy": "private",
               "return": {
                 "type": {
@@ -15417,72 +15320,23 @@
                   "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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getParentMenuItemDetails",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "menuChildId",
+                  "name": "direction",
                   "type": {
-                    "text": "string"
-                  },
-                  "description": "The id of the menu child element."
+                    "text": "'prev' | 'next'"
+                  }
                 },
                 {
-                  "name": "menu",
-                  "optional": true,
-                  "type": {
-                    "text": "HTMLElement | null"
-                  },
-                  "description": "The current menu element to start traversing from."
+                  "name": "shouldOpenSubmenu",
+                  "default": "false"
                 }
-              ],
-              "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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "hideAllPopovers",
+              "name": "showSubmenu",
               "privacy": "private",
               "return": {
                 "type": {
@@ -15491,275 +15345,161 @@
               },
               "parameters": [
                 {
-                  "name": "menu",
-                  "optional": true,
+                  "name": "triggerId",
                   "type": {
-                    "text": "HTMLElement | null"
-                  },
-                  "description": "The current menu element to start traversing from."
+                    "text": "string | null"
+                  }
                 }
-              ],
-              "description": "Recursively hides all the popovers up the DOM tree until it finds a menu or menubar element.",
-              "inheritedFrom": {
-                "name": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "navigateToPrevParentMenuItem",
+              "name": "getKeyWithDirectionFix",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "string"
                 }
               },
               "parameters": [
                 {
-                  "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The current index of the focused menu item."
-                },
-                {
-                  "name": "key",
+                  "name": "originalKey",
                   "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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "closePopoverAndNavigateToPrevParentMenuItem",
+              "name": "isTopLevelMenuItem",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "boolean"
                 }
               },
               "parameters": [
                 {
-                  "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The current index of the focused menu item."
-                },
-                {
-                  "name": "key",
+                  "name": "element",
                   "type": {
-                    "text": "string"
+                    "text": "HTMLElement"
                   }
                 }
-              ],
-              "description": "Closes the current menu popover and navigates to the previous parent menu item.",
-              "inheritedFrom": {
-                "name": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "getParentMenuContents",
+              "name": "isNestedMenuItem",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "boolean"
                 }
               },
               "parameters": [
                 {
-                  "name": "currentMenuItem",
+                  "name": "element",
                   "type": {
-                    "text": "HTMLElement | null"
-                  },
-                  "description": "The current menu item to start traversing from."
+                    "text": "HTMLElement"
+                  }
                 }
-              ],
-              "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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
+              "name": "closeAllMenuPopovers",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "isValidMenuItem",
+              "name": "crossMenubarNavigationOnLeft",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "Promise<void>"
                 }
               },
               "parameters": [
                 {
-                  "name": "menuItem",
+                  "name": "element",
                   "type": {
                     "text": "HTMLElement"
-                  },
-                  "description": "The menu item to check."
-                }
-              ],
-              "description": "Checks if the given menu item is a valid menu item.",
-              "inheritedFrom": {
-                "name": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "getKeyBasedOnDirection",
+              "name": "crossMenubarNavigationOnRight",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "Promise<void>"
                 }
               },
               "parameters": [
                 {
-                  "name": "originalKey",
+                  "name": "element",
                   "type": {
-                    "text": "string"
-                  },
-                  "description": "The original key pressed."
+                    "text": "HTMLElement"
+                  }
                 }
-              ],
-              "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",
-              "privacy": "protected",
+              "name": "hasSubmenu",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "boolean"
                 }
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "triggerId",
                   "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+                    "text": "string | null"
+                  }
                 }
-              ],
-              "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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "closeAllPopoversExceptCurrent",
+              "name": "getParentMenuItemIndex",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "number"
                 }
               },
               "parameters": [
                 {
-                  "name": "currentIndex",
+                  "name": "element",
                   "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the current menu item."
+                    "text": "HTMLElement"
+                  }
                 }
-              ],
-              "description": "Closes all popovers except the current one.",
-              "inheritedFrom": {
-                "name": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleMouseClick",
-              "privacy": "protected",
+              "name": "handleKeyDown",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "Promise<void>"
                 }
               },
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The mouse click event."
+                    "text": "KeyboardEvent"
+                  }
                 }
-              ],
-              "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": "MenuMixin",
-                "module": "utils/mixins/MenuMixin.js"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "MenuMixin",
-              "module": "/src/utils/mixins/MenuMixin"
+              ]
             }
           ],
           "superclass": {
@@ -15767,23 +15507,8 @@
             "module": "/src/models"
           },
           "tagName": "mdc-menubar",
-          "jsDoc": "/**\n * Menubar is a navigational menu component that provides a horizontal (default) or vertical fixed list of menu items,\n * with support for nested submenus and keyboard navigation. It serves as a container\n * for menu items and manages their interaction patterns, including:\n * - Keyboard navigation (arrow keys, Home, End)\n * - Menu item activation (Enter/Space)\n * - Submenu toggling (Right/Left arrow keys)\n * - Focus management\n * - Support for both horizontal and vertical orientations\n * - Integration with MenuPopover for nested menus\n *\n * A menubar will contain a set of menu items and their associated popovers.\n * Each menu item can have a popover for nested menus.\n *\n * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.\n * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.\n *\n * @tagname mdc-menubar\n * @slot default - Contains the menu items and their associated popovers\n */",
-          "customElement": true,
-          "attributes": [
-            {
-              "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": "MenuMixin",
-                "module": "src/utils/mixins/MenuMixin.ts"
-              }
-            }
-          ]
+          "jsDoc": "/**\n * Menubar is a navigational menu component that provides a vertical fixed list of menu items,\n * with support for nested submenus and keyboard navigation. It serves as a container\n * for menu items and manages their interaction patterns, including:\n * - Keyboard navigation (Arrow keys, Home, End)\n * - Menu item activation (Enter/Space)\n * - Submenu toggling (Right/Left arrow keys)\n * - Focus management\n * - Integration with MenuPopover for nested menus\n *\n * A menubar will contain a set of menu items and their associated popovers.\n * Each menu item can have a popover for nested menus.\n *\n * The component automatically handles ARIA attributes and follows WAI-ARIA menu design patterns.\n * It works in conjunction with `mdc-menuitem` and `mdc-menupopover` to create accessible menu structures.\n *\n * **Note:** A menubar contains three types of menu items, including menuitem, menuitemradio and menuitemcheckbox. These menu items may optionally be nested in one or more group containers. Groups or items may optionally by separated with separator elements.\n *\n * `mdc-menubar` contains a group that wraps all its chilren passed within the default slot. This has been added to ensure the right accessibility behavior while using screen readers.\n *\n * @tagname mdc-menubar\n * @slot default - Contains the menu items and their associated popovers\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -16015,6 +15740,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "tooltipText",
@@ -16150,6 +15890,7 @@
               "parameters": [
                 {
                   "name": "disabled",
+                  "default": "false",
                   "type": {
                     "text": "boolean"
                   },
@@ -16341,6 +16082,19 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
             {
               "name": "tooltip-text",
               "type": {
@@ -16872,6 +16626,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "tooltipText",
@@ -17007,6 +16776,7 @@
               "parameters": [
                 {
                   "name": "disabled",
+                  "default": "false",
                   "type": {
                     "text": "boolean"
                   },
@@ -17229,6 +16999,19 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
             {
               "name": "tooltip-text",
               "type": {
@@ -17591,6 +17374,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "tooltipText",
@@ -17726,6 +17524,7 @@
               "parameters": [
                 {
                   "name": "disabled",
+                  "default": "false",
                   "type": {
                     "text": "boolean"
                   },
@@ -17948,6 +17747,19 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
             {
               "name": "tooltip-text",
               "type": {
@@ -18255,6 +18067,16 @@
               ],
               "description": "Checks if the menu popover has a submenu with the specified trigger ID.\nThis method is used to determine if a menu item has a submenu associated with it,\nwhich is indicated by the presence of a `triggerid` attribute in the submenu popover.\nIt queries the parent element for any popover with the specified trigger ID."
             },
+            {
+              "kind": "field",
+              "name": "togglePopoverVisible",
+              "privacy": "public",
+              "description": "Toggles the popover visibility.",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "components/popover/popover.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "handleMouseClick",
@@ -19432,16 +19254,6 @@
                 "module": "components/popover/popover.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "togglePopoverVisible",
-              "privacy": "public",
-              "description": "Toggles the popover visibility.",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "components/popover/popover.component.js"
-              }
-            },
             {
               "kind": "method",
               "name": "positionPopover",
@@ -20515,6 +20327,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "tooltipText",
@@ -20650,6 +20477,7 @@
               "parameters": [
                 {
                   "name": "disabled",
+                  "default": "false",
                   "type": {
                     "text": "boolean"
                   },
@@ -20926,6 +20754,19 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
             {
               "name": "tooltip-text",
               "type": {
@@ -21077,33 +20918,10 @@
             },
             {
               "kind": "field",
-              "name": "ariaOrientation",
+              "name": "menuItems",
               "type": {
-                "text": "Orientation"
+                "text": "Array<HTMLElement>"
               },
-              "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"
@@ -21111,161 +20929,21 @@
             },
             {
               "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",
+              "name": "resetTabIndexAndSetActiveTabIndex",
               "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": "The index of the new active element in the list.",
+                  "name": "newIndex"
                 }
               ],
-              "description": "Checks if the given tag name is a valid menu popover tag name.",
+              "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"
@@ -21273,23 +20951,21 @@
             },
             {
               "kind": "method",
-              "name": "openPopover",
+              "name": "getCurrentIndex",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "number"
                 }
               },
               "parameters": [
                 {
-                  "name": "index",
+                  "name": "target",
                   "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the menu item to open the popover for."
+                    "text": "EventTarget | null"
+                  }
                 }
               ],
-              "description": "Opens the popover at the given index if it exists.",
               "inheritedFrom": {
                 "name": "MenuBar",
                 "module": "components/menubar/menubar.component.js"
@@ -21297,44 +20973,13 @@
             },
             {
               "kind": "method",
-              "name": "navigateToPrevMenuItem",
+              "name": "updatePopoverPlacement",
               "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"
@@ -21342,7 +20987,7 @@
             },
             {
               "kind": "method",
-              "name": "navigateToNextMenuItem",
+              "name": "updateTabIndexAndFocus",
               "privacy": "private",
               "return": {
                 "type": {
@@ -21351,122 +20996,24 @@
               },
               "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",
+                  "name": "menuItems",
                   "type": {
-                    "text": "string"
-                  },
-                  "description": "The id of the menu child element."
+                    "text": "HTMLElement[]"
+                  }
                 },
-                {
-                  "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",
+                  "name": "newIndex",
                   "type": {
-                    "text": "string"
+                    "text": "number"
                   }
                 }
               ],
-              "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"
@@ -21474,7 +21021,7 @@
             },
             {
               "kind": "method",
-              "name": "closePopoverAndNavigateToPrevParentMenuItem",
+              "name": "navigateToMenuItem",
               "privacy": "private",
               "return": {
                 "type": {
@@ -21486,17 +21033,19 @@
                   "name": "currentIndex",
                   "type": {
                     "text": "number"
-                  },
-                  "description": "The current index of the focused menu item."
+                  }
                 },
                 {
-                  "name": "key",
+                  "name": "direction",
                   "type": {
-                    "text": "string"
+                    "text": "'prev' | 'next'"
                   }
+                },
+                {
+                  "name": "shouldOpenSubmenu",
+                  "default": "false"
                 }
               ],
-              "description": "Closes the current menu popover and navigates to the previous parent menu item.",
               "inheritedFrom": {
                 "name": "MenuBar",
                 "module": "components/menubar/menubar.component.js"
@@ -21504,23 +21053,21 @@
             },
             {
               "kind": "method",
-              "name": "getParentMenuContents",
+              "name": "showSubmenu",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
               },
               "parameters": [
                 {
-                  "name": "currentMenuItem",
+                  "name": "triggerId",
                   "type": {
-                    "text": "HTMLElement | null"
-                  },
-                  "description": "The current menu item to start traversing from."
+                    "text": "string | null"
+                  }
                 }
               ],
-              "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"
@@ -21528,23 +21075,21 @@
             },
             {
               "kind": "method",
-              "name": "openPopoverAndNavigateToNextChildrenMenuItem",
+              "name": "getKeyWithDirectionFix",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "string"
                 }
               },
               "parameters": [
                 {
-                  "name": "currentIndex",
+                  "name": "originalKey",
                   "type": {
-                    "text": "number"
-                  },
-                  "description": "The current index of the focused menu item."
+                    "text": "string"
+                  }
                 }
               ],
-              "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"
@@ -21552,23 +21097,21 @@
             },
             {
               "kind": "method",
-              "name": "isValidMenuItem",
+              "name": "isTopLevelMenuItem",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "boolean"
                 }
               },
               "parameters": [
                 {
-                  "name": "menuItem",
+                  "name": "element",
                   "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"
@@ -21576,21 +21119,52 @@
             },
             {
               "kind": "method",
-              "name": "resetTabIndexAndSetActiveTabIndex",
+              "name": "isNestedMenuItem",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
               "parameters": [
                 {
-                  "name": "menuItems",
+                  "name": "element",
                   "type": {
-                    "text": "Array<HTMLElement>"
+                    "text": "HTMLElement"
                   }
-                },
+                }
+              ],
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "closeAllMenuPopovers",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "MenuBar",
+                "module": "components/menubar/menubar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "crossMenubarNavigationOnLeft",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
                 {
-                  "description": "The index of the new active element in the list.",
-                  "name": "newIndex"
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
                 }
               ],
-              "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"
@@ -21598,23 +21172,21 @@
             },
             {
               "kind": "method",
-              "name": "getKeyBasedOnDirection",
+              "name": "crossMenubarNavigationOnRight",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "Promise<void>"
                 }
               },
               "parameters": [
                 {
-                  "name": "originalKey",
+                  "name": "element",
                   "type": {
-                    "text": "string"
-                  },
-                  "description": "The original key pressed."
+                    "text": "HTMLElement"
+                  }
                 }
               ],
-              "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"
@@ -21622,23 +21194,21 @@
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "protected",
+              "name": "hasSubmenu",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "boolean"
                 }
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "triggerId",
                   "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+                    "text": "string | null"
+                  }
                 }
               ],
-              "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"
@@ -21646,23 +21216,21 @@
             },
             {
               "kind": "method",
-              "name": "closeAllPopoversExceptCurrent",
+              "name": "getParentMenuItemIndex",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "number"
                 }
               },
               "parameters": [
                 {
-                  "name": "currentIndex",
+                  "name": "element",
                   "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the current menu item."
+                    "text": "HTMLElement"
+                  }
                 }
               ],
-              "description": "Closes all popovers except the current one.",
               "inheritedFrom": {
                 "name": "MenuBar",
                 "module": "components/menubar/menubar.component.js"
@@ -21670,23 +21238,21 @@
             },
             {
               "kind": "method",
-              "name": "handleMouseClick",
-              "privacy": "protected",
+              "name": "handleKeyDown",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "Promise<void>"
                 }
               },
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The mouse click event."
+                    "text": "KeyboardEvent"
+                  }
                 }
               ],
-              "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"
@@ -21702,25 +21268,6 @@
               "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": {
@@ -22205,6 +21752,21 @@
                 "module": "components/listitem/listitem.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "tooltipText",
@@ -22364,6 +21926,7 @@
               "parameters": [
                 {
                   "name": "disabled",
+                  "default": "false",
                   "type": {
                     "text": "boolean"
                   },
@@ -22633,6 +22196,19 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
             {
               "name": "tooltip-text",
               "type": {
@@ -24299,144 +23875,96 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/progressspinner/progressspinner.component.js",
+      "path": "components/progressbar/progressbar.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-progressspinner` is a customizable, circular progress indicator component.\nIt visually represents the current completion state of a process, such as loading,\nsyncing, uploading, or any ongoing task that has a measurable percentage.\n\nThe spinner is built using SVG with two concentric `<circle>` elements:\n- The `progress` arc represents the portion of work completed.\n- The `track` arc represents the remaining part.\n\nA visual gap is maintained between the progress and track arcs to clearly\ndistinguish the two segments. The component smoothly animates arc length\nand respects accessibility best practices with ARIA attributes.\n\nThe component supports different states:\n- **Default**: Circular spinner shows the progress.\n- **Success**: Displays a checkmark icon when progress reaches 100%.\n- **Error**: Displays an error icon when in an error state.",
-          "name": "Progressspinner",
+          "description": "mdc-progressbar component visually represents a progress indicator, typically used to show\nthe completion state of an ongoing process (e.g., loading, file upload, etc.).\nIt contains an optional label and an optional helper text.\n\n- It supports mainly two types: Default and Inline\n- It supports three validation variants: Default, Success and Error.\n\nThis component is created by extending FormfieldWrapper.",
+          "name": "Progressbar",
           "cssProperties": [
-            {
-              "description": "The size of the spinner.",
-              "name": "--mdc-spinner-size"
-            },
-            {
-              "description": "The color of the spinner track.",
-              "name": "--mdc-track-color"
-            },
-            {
-              "description": "The color of the spinner progress.",
-              "name": "--mdc-progress-color"
-            },
-            {
-              "description": "The color of the spinner when in success state.",
-              "name": "--mdc-progress-success-color"
-            },
-            {
-              "description": "The color of the spinner when in error state.",
-              "name": "--mdc-progress-error-color"
-            },
             {
               "description": "Background color of the progressbar when inactive.",
-              "name": "--mdc-progressbar-default-background-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-default-background-color"
             },
             {
               "description": "Background color of the progressbar when active.",
-              "name": "--mdc-progressbar-default-active-background-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-default-active-background-color"
             },
             {
               "description": "Background color of the progressbar when in success state.",
-              "name": "--mdc-progressbar-success-background-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-success-background-color"
             },
             {
               "description": "Background color of the progressbar when in error state.",
-              "name": "--mdc-progressbar-error-background-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-error-background-color"
             },
             {
               "description": "The height of the progressbar.",
-              "name": "--mdc-progressbar-height",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-height"
             },
             {
               "description": "The border radius of the progressbar.",
-              "name": "--mdc-progressbar-border-radius",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-border-radius"
             },
             {
               "description": "Color of the progressbar label text.",
-              "name": "--mdc-progressbar-label-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-label-color"
             },
             {
               "description": "Line height of the label text.",
-              "name": "--mdc-progressbar-label-lineheight",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-label-lineheight"
             },
             {
               "description": "Font size of the label text.",
-              "name": "--mdc-progressbar-label-fontsize",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-label-fontsize"
             },
             {
               "description": "Font weight of the label text.",
-              "name": "--mdc-progressbar-label-fontweight",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-label-fontweight"
             },
             {
               "description": "Color of the help text.",
-              "name": "--mdc-progressbar-help-text-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-help-text-color"
             }
           ],
           "members": [
             {
-              "kind": "method",
-              "name": "renderProgressSpinner",
-              "privacy": "private"
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
+              "default": "default",
+              "attribute": "variant",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "renderErrorState",
-              "privacy": "private",
-              "description": "Renders the error state of the progress spinner.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "'0'",
+              "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Define error state of the progressbar\n- **true**\n- **false**",
+              "attribute": "error"
             },
             {
               "kind": "method",
-              "name": "renderSuccessState",
+              "name": "getValidationVariant",
               "privacy": "private",
-              "description": "Renders the success state of the progress spinner.",
+              "description": "Determines the validation state (success, error, or default) based on progress value and error state.",
               "return": {
                 "type": {
                   "text": ""
@@ -24458,65 +23986,6 @@
                 "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
-              "default": "default",
-              "attribute": "variant",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "'0'",
-              "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
-              "attribute": "value",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Define error state of the progressbar\n- **true**\n- **false**",
-              "attribute": "error",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "getValidationVariant",
-              "privacy": "private",
-              "description": "Determines the validation state (success, error, or default) based on progress value and error state.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "disabled",
@@ -24722,27 +24191,7 @@
               }
             }
           ],
-          "superclass": {
-            "name": "Progressbar",
-            "module": "/src/components/progressbar/progressbar.component"
-          },
-          "tagName": "mdc-progressspinner",
-          "jsDoc": "/**\n * `mdc-progressspinner` is a customizable, circular progress indicator component.\n * It visually represents the current completion state of a process, such as loading,\n * syncing, uploading, or any ongoing task that has a measurable percentage.\n *\n * The spinner is built using SVG with two concentric `<circle>` elements:\n * - The `progress` arc represents the portion of work completed.\n * - The `track` arc represents the remaining part.\n *\n * A visual gap is maintained between the progress and track arcs to clearly\n * distinguish the two segments. The component smoothly animates arc length\n * and respects accessibility best practices with ARIA attributes.\n *\n * The component supports different states:\n * - **Default**: Circular spinner shows the progress.\n * - **Success**: Displays a checkmark icon when progress reaches 100%.\n * - **Error**: Displays an error icon when in an error state.\n *\n * @tagname mdc-progressspinner\n *\n * @cssproperty --mdc-spinner-size - The size of the spinner.\n * @cssproperty --mdc-track-color - The color of the spinner track.\n * @cssproperty --mdc-progress-color - The color of the spinner progress.\n * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.\n * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.\n *\n */",
-          "customElement": true,
           "attributes": [
-            {
-              "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": "variant",
               "type": {
@@ -24750,11 +24199,7 @@
               },
               "description": "Types of the progressbar\n- **Default**\n- **Inline**",
               "default": "default",
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "fieldName": "variant"
             },
             {
               "name": "value",
@@ -24763,11 +24208,7 @@
               },
               "default": "'0'",
               "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "fieldName": "value"
             },
             {
               "name": "error",
@@ -24776,10 +24217,19 @@
               },
               "default": "false",
               "description": "Define error state of the progressbar\n- **true**\n- **false**",
-              "fieldName": "error",
+              "fieldName": "error"
+            },
+            {
+              "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": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
@@ -24894,7 +24344,20 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            }
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper"
+          },
+          "tagName": "mdc-progressbar",
+          "jsDoc": "/**\n * mdc-progressbar component visually represents a progress indicator, typically used to show\n * the completion state of an ongoing process (e.g., loading, file upload, etc.).\n * It contains an optional label and an optional helper text.\n *\n * - It supports mainly two types: Default and Inline\n * - It supports three validation variants: Default, Success and Error.\n *\n * This component is created by extending FormfieldWrapper.\n *\n * @tagname mdc-progressbar\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-progressbar-default-background-color - Background color of the progressbar when inactive.\n * @cssproperty --mdc-progressbar-default-active-background-color - Background color of the progressbar when active.\n * @cssproperty --mdc-progressbar-success-background-color - Background color of the progressbar when in success state.\n * @cssproperty --mdc-progressbar-error-background-color - Background color of the progressbar when in error state.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.\n * @cssproperty --mdc-progressbar-label-lineheight - Line height of the label text.\n * @cssproperty --mdc-progressbar-label-fontsize - Font size of the label text.\n * @cssproperty --mdc-progressbar-label-fontweight - Font weight of the label text.\n * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -24902,104 +24365,152 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Progressspinner",
-            "module": "components/progressspinner/progressspinner.component.js"
+            "name": "Progressbar",
+            "module": "components/progressbar/progressbar.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/progressbar/progressbar.component.js",
+      "path": "components/progressspinner/progressspinner.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-progressbar component visually represents a progress indicator, typically used to show\nthe completion state of an ongoing process (e.g., loading, file upload, etc.).\nIt contains an optional label and an optional helper text.\n\n- It supports mainly two types: Default and Inline\n- It supports three validation variants: Default, Success and Error.\n\nThis component is created by extending FormfieldWrapper.",
-          "name": "Progressbar",
+          "description": "`mdc-progressspinner` is a customizable, circular progress indicator component.\nIt visually represents the current completion state of a process, such as loading,\nsyncing, uploading, or any ongoing task that has a measurable percentage.\n\nThe spinner is built using SVG with two concentric `<circle>` elements:\n- The `progress` arc represents the portion of work completed.\n- The `track` arc represents the remaining part.\n\nA visual gap is maintained between the progress and track arcs to clearly\ndistinguish the two segments. The component smoothly animates arc length\nand respects accessibility best practices with ARIA attributes.\n\nThe component supports different states:\n- **Default**: Circular spinner shows the progress.\n- **Success**: Displays a checkmark icon when progress reaches 100%.\n- **Error**: Displays an error icon when in an error state.",
+          "name": "Progressspinner",
           "cssProperties": [
+            {
+              "description": "The size of the spinner.",
+              "name": "--mdc-spinner-size"
+            },
+            {
+              "description": "The color of the spinner track.",
+              "name": "--mdc-track-color"
+            },
+            {
+              "description": "The color of the spinner progress.",
+              "name": "--mdc-progress-color"
+            },
+            {
+              "description": "The color of the spinner when in success state.",
+              "name": "--mdc-progress-success-color"
+            },
+            {
+              "description": "The color of the spinner when in error state.",
+              "name": "--mdc-progress-error-color"
+            },
             {
               "description": "Background color of the progressbar when inactive.",
-              "name": "--mdc-progressbar-default-background-color"
+              "name": "--mdc-progressbar-default-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Background color of the progressbar when active.",
-              "name": "--mdc-progressbar-default-active-background-color"
+              "name": "--mdc-progressbar-default-active-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Background color of the progressbar when in success state.",
-              "name": "--mdc-progressbar-success-background-color"
+              "name": "--mdc-progressbar-success-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Background color of the progressbar when in error state.",
-              "name": "--mdc-progressbar-error-background-color"
+              "name": "--mdc-progressbar-error-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "The height of the progressbar.",
-              "name": "--mdc-progressbar-height"
+              "name": "--mdc-progressbar-height",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "The border radius of the progressbar.",
-              "name": "--mdc-progressbar-border-radius"
+              "name": "--mdc-progressbar-border-radius",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Color of the progressbar label text.",
-              "name": "--mdc-progressbar-label-color"
+              "name": "--mdc-progressbar-label-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Line height of the label text.",
-              "name": "--mdc-progressbar-label-lineheight"
+              "name": "--mdc-progressbar-label-lineheight",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Font size of the label text.",
-              "name": "--mdc-progressbar-label-fontsize"
+              "name": "--mdc-progressbar-label-fontsize",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Font weight of the label text.",
-              "name": "--mdc-progressbar-label-fontweight"
+              "name": "--mdc-progressbar-label-fontweight",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Color of the help text.",
-              "name": "--mdc-progressbar-help-text-color"
+              "name": "--mdc-progressbar-help-text-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             }
           ],
           "members": [
             {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
-              "default": "default",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "'0'",
-              "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
-              "attribute": "value",
-              "reflects": true
+              "kind": "method",
+              "name": "renderProgressSpinner",
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "error",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Define error state of the progressbar\n- **true**\n- **false**",
-              "attribute": "error"
+              "kind": "method",
+              "name": "renderErrorState",
+              "privacy": "private",
+              "description": "Renders the error state of the progress spinner.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "getValidationVariant",
+              "name": "renderSuccessState",
               "privacy": "private",
-              "description": "Determines the validation state (success, error, or default) based on progress value and error state.",
+              "description": "Renders the success state of the progress spinner.",
               "return": {
                 "type": {
                   "text": ""
@@ -25021,6 +24532,65 @@
                 "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
+              "default": "default",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "'0'",
+              "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Define error state of the progressbar\n- **true**\n- **false**",
+              "attribute": "error",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getValidationVariant",
+              "privacy": "private",
+              "description": "Determines the validation state (success, error, or default) based on progress value and error state.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -25226,7 +24796,27 @@
               }
             }
           ],
+          "superclass": {
+            "name": "Progressbar",
+            "module": "/src/components/progressbar/progressbar.component"
+          },
+          "tagName": "mdc-progressspinner",
+          "jsDoc": "/**\n * `mdc-progressspinner` is a customizable, circular progress indicator component.\n * It visually represents the current completion state of a process, such as loading,\n * syncing, uploading, or any ongoing task that has a measurable percentage.\n *\n * The spinner is built using SVG with two concentric `<circle>` elements:\n * - The `progress` arc represents the portion of work completed.\n * - The `track` arc represents the remaining part.\n *\n * A visual gap is maintained between the progress and track arcs to clearly\n * distinguish the two segments. The component smoothly animates arc length\n * and respects accessibility best practices with ARIA attributes.\n *\n * The component supports different states:\n * - **Default**: Circular spinner shows the progress.\n * - **Success**: Displays a checkmark icon when progress reaches 100%.\n * - **Error**: Displays an error icon when in an error state.\n *\n * @tagname mdc-progressspinner\n *\n * @cssproperty --mdc-spinner-size - The size of the spinner.\n * @cssproperty --mdc-track-color - The color of the spinner track.\n * @cssproperty --mdc-progress-color - The color of the spinner progress.\n * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.\n * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.\n *\n */",
+          "customElement": true,
           "attributes": [
+            {
+              "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": "variant",
               "type": {
@@ -25234,7 +24824,11 @@
               },
               "description": "Types of the progressbar\n- **Default**\n- **Inline**",
               "default": "default",
-              "fieldName": "variant"
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "name": "value",
@@ -25243,7 +24837,11 @@
               },
               "default": "'0'",
               "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
-              "fieldName": "value"
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "name": "error",
@@ -25252,19 +24850,10 @@
               },
               "default": "false",
               "description": "Define error state of the progressbar\n- **true**\n- **false**",
-              "fieldName": "error"
-            },
-            {
-              "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",
+              "fieldName": "error",
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
               }
             },
             {
@@ -25379,20 +24968,7 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             }
-          ],
-          "mixins": [
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            }
-          ],
-          "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper"
-          },
-          "tagName": "mdc-progressbar",
-          "jsDoc": "/**\n * mdc-progressbar component visually represents a progress indicator, typically used to show\n * the completion state of an ongoing process (e.g., loading, file upload, etc.).\n * It contains an optional label and an optional helper text.\n *\n * - It supports mainly two types: Default and Inline\n * - It supports three validation variants: Default, Success and Error.\n *\n * This component is created by extending FormfieldWrapper.\n *\n * @tagname mdc-progressbar\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-progressbar-default-background-color - Background color of the progressbar when inactive.\n * @cssproperty --mdc-progressbar-default-active-background-color - Background color of the progressbar when active.\n * @cssproperty --mdc-progressbar-success-background-color - Background color of the progressbar when in success state.\n * @cssproperty --mdc-progressbar-error-background-color - Background color of the progressbar when in error state.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.\n * @cssproperty --mdc-progressbar-label-lineheight - Line height of the label text.\n * @cssproperty --mdc-progressbar-label-fontsize - Font size of the label text.\n * @cssproperty --mdc-progressbar-label-fontweight - Font weight of the label text.\n * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.\n */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -25400,8 +24976,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Progressbar",
-            "module": "components/progressbar/progressbar.component.js"
+            "name": "Progressspinner",
+            "module": "components/progressspinner/progressspinner.component.js"
           }
         }
       ]
@@ -38156,637 +37732,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "utils/mixins/MenuMixin.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "MenuMixinInterface",
-          "members": [
-            {
-              "kind": "field",
-              "name": "ariaOrientation",
-              "type": {
-                "text": "Orientation"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseClick",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "updatePopoverPlacementBasedOnOrientation",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ]
-        },
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "MenuMixin",
-          "members": [
-            {
-              "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
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "kind": "method",
-              "name": "updatePopoverPlacementBasedOnOrientation",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Updates the placement of the popover based on the aria-orientation property."
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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",
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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",
-              "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.,"
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            }
-          ],
-          "attributes": [
-            {
-              "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"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "MenuMixinInterface",
-          "declaration": {
-            "name": "MenuMixinInterface",
-            "module": "utils/mixins/MenuMixin.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "MenuMixin",
-          "declaration": {
-            "name": "MenuMixin",
-            "module": "utils/mixins/MenuMixin.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/PreventScrollMixin.js",