@momentum-design/components 0.127.3 → 0.127.5

package/dist/custom-elements.json

@@ -3292,108 +3292,53 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/avatarbutton/avatarbutton.component.js",
+      "path": "components/avatar/avatar.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",
+          "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
+          "name": "Avatar",
           "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": "Allows customization of the default background color.",
+              "name": "--mdc-avatar-default-background-color"
             },
             {
-              "description": "Height for button size",
-              "name": "--mdc-button-height",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Allows customization of the default foreground color.",
+              "name": "--mdc-avatar-default-foreground-color"
             },
             {
-              "description": "Background color of the button",
-              "name": "--mdc-button-background",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Allows customization of the loading indicator background color.",
+              "name": "--mdc-avatar-loading-indicator-background-color"
             },
             {
-              "description": "Borer color of the button",
-              "name": "--mdc-button-border-color",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Allows customization of the loading indicator foreground color.",
+              "name": "--mdc-avatar-loading-indicator-foreground-color"
             },
             {
-              "description": "Text color of the button",
-              "name": "--mdc-button-text-color",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Allows customization of the loading overlay background color.",
+              "name": "--mdc-avatar-loading-overlay-background-color"
             }
           ],
           "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.",
+              "description": "The photo of the avatar.",
               "name": "photo"
             },
             {
-              "description": "The presence indicator part of the avatar.",
+              "description": "The presence indicator of the avatar.",
               "name": "presence"
             },
             {
-              "description": "The wrapper for the loading indicator of the avatar.",
+              "description": "The wrapper for the loading indicator.",
               "name": "loading-wrapper"
             },
             {
-              "description": "The loading indicator part of the avatar.",
+              "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",
@@ -3437,15 +3382,15 @@
               "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"
               }
             },
             {
@@ -3487,757 +3432,667 @@
                 "name": "IconNameMixin",
                 "module": "utils/mixins/IconNameMixin.js"
               }
-            },
+            }
+          ],
+          "mixins": [
             {
-              "kind": "field",
-              "name": "autoFocusOnMount",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "attribute": "auto-focus-on-mount",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "utils/mixins/AutoFocusOnMountMixin.js"
-              }
+              "name": "AvatarComponentMixin",
+              "module": "/src/utils/mixins/AvatarComponentMixin"
             },
             {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
-              }
-            },
+              "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 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": [
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "src",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
+              "description": "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": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "active",
+              "name": "initials",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "attribute": "active",
-              "reflects": true,
+              "description": "The initials to be displayed for the avatar.",
+              "fieldName": "initials",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "softDisabled",
+              "name": "presence",
               "type": {
-                "text": "boolean | undefined"
+                "text": "PresenceType | undefined"
               },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button 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 button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
-              "reflects": true,
+              "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": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "role",
+              "name": "size",
               "type": {
-                "text": "RoleType"
+                "text": "AvatarSize"
               },
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "attribute": "role",
-              "reflects": true,
+              "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": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "ariaStateKey",
+              "name": "counter",
               "type": {
-                "text": "string | undefined"
+                "text": "number | undefined"
               },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "attribute": "ariaStateKey",
-              "reflects": true,
+              "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": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "type",
+              "name": "is-typing",
               "type": {
-                "text": "ButtonType"
+                "text": "boolean"
               },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "attribute": "type",
-              "reflects": true,
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "fieldName": "isTyping",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "name",
+              "name": "icon-name",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
-              "attribute": "name",
-              "reflects": true,
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
               }
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
-              "attribute": "value",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
+            }
+          ]
+        }
+      ],
+      "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": [
             {
-              "kind": "method",
-              "name": "setActive",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element"
-                },
-                {
-                  "name": "active",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state of the element"
-                }
-              ],
-              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Background color of the overlay in rest state",
+              "name": "--mdc-avatarbutton-overlay-background-color-rest"
             },
             {
-              "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "softDisabled",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
-                }
-              ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Background color of the overlay in hover state",
+              "name": "--mdc-avatarbutton-overlay-background-color-hover"
             },
             {
-              "kind": "method",
-              "name": "setDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The disabled state."
-                }
-              ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Background color of the overlay in active state",
+              "name": "--mdc-avatarbutton-overlay-background-color-active"
             },
             {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private",
+              "description": "Height for button size",
+              "name": "--mdc-button-height",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
+              "description": "Background color of the button",
+              "name": "--mdc-button-background",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
+              "description": "Borer color of the button",
+              "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleKeyUp",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
+              "description": "Text color of the button",
+              "name": "--mdc-button-text-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             }
           ],
-          "events": [
+          "cssParts": [
             {
-              "description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
-              "name": "click",
-              "reactName": "onClick",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "The overlay part of the avatar button.",
+              "name": "overlay"
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "The main content of the avatar.",
+              "name": "content"
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "The photo part of the avatar.",
+              "name": "photo"
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "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"
             }
           ],
-          "attributes": [
+          "members": [
             {
-              "name": "aria-label",
+              "kind": "field",
+              "name": "ariaLabel",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "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.",
-              "fieldName": "src",
+              "attribute": "src",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "module": "utils/mixins/AvatarComponentMixin.js"
               }
             },
             {
+              "kind": "field",
               "name": "initials",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The initials to be displayed for the avatar.",
-              "fieldName": "initials",
+              "attribute": "initials",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "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`",
-              "fieldName": "presence",
+              "attribute": "presence",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "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",
-              "fieldName": "size",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.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`.",
-              "fieldName": "counter",
+              "attribute": "counter",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "module": "utils/mixins/AvatarComponentMixin.js"
               }
             },
             {
-              "name": "is-typing",
+              "kind": "field",
+              "name": "isTyping",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Represents the typing indicator when the user is typing.",
-              "fieldName": "isTyping",
+              "attribute": "is-typing",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "module": "utils/mixins/AvatarComponentMixin.js"
               }
             },
             {
-              "name": "icon-name",
+              "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.",
-              "fieldName": "iconName",
+              "attribute": "icon-name",
               "inheritedFrom": {
                 "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
+                "module": "utils/mixins/IconNameMixin.js"
               }
             },
             {
-              "name": "auto-focus-on-mount",
+              "kind": "field",
+              "name": "autoFocusOnMount",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "fieldName": "autoFocusOnMount",
+              "attribute": "auto-focus-on-mount",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "AutoFocusOnMountMixin",
-                "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
+                "module": "utils/mixins/AutoFocusOnMountMixin.js"
               }
             },
             {
+              "kind": "field",
               "name": "tabIndex",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
+              "attribute": "tabIndex",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
+                "module": "utils/mixins/TabIndexMixin.js"
               }
             },
             {
+              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "default": "undefined",
-              "fieldName": "disabled",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
+              "kind": "field",
               "name": "active",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
               "default": "undefined",
-              "fieldName": "active",
+              "attribute": "active",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "soft-disabled",
+              "kind": "field",
+              "name": "softDisabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button 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 button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
               "default": "undefined",
-              "fieldName": "softDisabled",
+              "attribute": "soft-disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "role",
               "type": {
                 "text": "RoleType"
               },
               "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
               "default": "button",
-              "fieldName": "role",
+              "attribute": "role",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "ariaStateKey",
               "type": {
                 "text": "string | undefined"
               },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
               "default": "'aria-pressed' (when)",
-              "fieldName": "ariaStateKey",
+              "attribute": "ariaStateKey",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "type",
               "type": {
                 "text": "ButtonType"
               },
               "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
               "default": "button",
-              "fieldName": "type",
+              "attribute": "type",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
-              "fieldName": "name",
+              "attribute": "name",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
-              "fieldName": "value",
+              "attribute": "value",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "AvatarComponentMixin",
-              "module": "/src/utils/mixins/AvatarComponentMixin"
-            },
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Buttonsimple",
-            "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 * 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
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "AvatarButton",
-            "module": "components/avatarbutton/avatarbutton.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/avatar/avatar.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
-          "name": "Avatar",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-avatar-default-background-color"
-            },
-            {
-              "description": "Allows customization of the default foreground color.",
-              "name": "--mdc-avatar-default-foreground-color"
             },
             {
-              "description": "Allows customization of the loading indicator background color.",
-              "name": "--mdc-avatar-loading-indicator-background-color"
+              "kind": "method",
+              "name": "executeAction",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "Allows customization of the loading indicator foreground color.",
-              "name": "--mdc-avatar-loading-indicator-foreground-color"
+              "kind": "method",
+              "name": "setActive",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element"
+                },
+                {
+                  "name": "active",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state of the element"
+                }
+              ],
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "Allows customization of the loading overlay background color.",
-              "name": "--mdc-avatar-loading-overlay-background-color"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The photo of the avatar.",
-              "name": "photo"
+              "kind": "method",
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
+                }
+              ],
+              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "The presence indicator of the avatar.",
-              "name": "presence"
+              "kind": "method",
+              "name": "setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state."
+                }
+              ],
+              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "The wrapper for the loading indicator.",
-              "name": "loading-wrapper"
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "The loading indicator of the avatar.",
-              "name": "loader"
-            }
-          ],
-          "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",
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "initials",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The initials to be displayed for the avatar.",
-              "attribute": "initials",
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.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",
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
-            },
+            }
+          ],
+          "events": [
             {
-              "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,
+              "description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
+              "name": "click",
+              "reactName": "onClick",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "isTyping",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "attribute": "is-typing",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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",
+              "description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
               "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             }
           ],
-          "mixins": [
+          "attributes": [
             {
-              "name": "AvatarComponentMixin",
-              "module": "/src/utils/mixins/AvatarComponentMixin"
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
             },
-            {
-              "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 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": {
@@ -4277,14 +4132,14 @@
             {
               "name": "size",
               "type": {
-                "text": "AvatarSize"
+                "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",
               "fieldName": "size",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
@@ -4323,60 +4178,205 @@
                 "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/badge/badge.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
-          "name": "Badge",
-          "cssProperties": [
+            },
             {
-              "description": "The foreground color of the primary badge.",
-              "name": "--mdc-badge-primary-foreground-color"
+              "name": "auto-focus-on-mount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "fieldName": "autoFocusOnMount",
+              "inheritedFrom": {
+                "name": "AutoFocusOnMountMixin",
+                "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
+              }
             },
             {
-              "description": "The background color of the primary badge.",
-              "name": "--mdc-badge-primary-background-color"
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
+              }
             },
             {
-              "description": "The foreground color of the secondary badge.",
-              "name": "--mdc-badge-secondary-foreground-color"
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
             },
             {
-              "description": "The background color of the secondary badge.",
-              "name": "--mdc-badge-secondary-background-color"
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "fieldName": "active",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "The foreground color of the success badge.",
-              "name": "--mdc-badge-success-foreground-color"
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button 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 button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "The background color of the success badge.",
-              "name": "--mdc-badge-success-background-color"
+              "name": "role",
+              "type": {
+                "text": "RoleType"
+              },
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "fieldName": "role",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "The foreground color of the warning badge.",
-              "name": "--mdc-badge-warning-foreground-color"
+              "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "fieldName": "ariaStateKey",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "The background color of the warning badge.",
+              "name": "type",
+              "type": {
+                "text": "ButtonType"
+              },
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "fieldName": "type",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "AvatarComponentMixin",
+              "module": "/src/utils/mixins/AvatarComponentMixin"
+            },
+            {
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Buttonsimple",
+            "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 * 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
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AvatarButton",
+            "module": "components/avatarbutton/avatarbutton.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/badge/badge.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
+          "name": "Badge",
+          "cssProperties": [
+            {
+              "description": "The foreground color of the primary badge.",
+              "name": "--mdc-badge-primary-foreground-color"
+            },
+            {
+              "description": "The background color of the primary badge.",
+              "name": "--mdc-badge-primary-background-color"
+            },
+            {
+              "description": "The foreground color of the secondary badge.",
+              "name": "--mdc-badge-secondary-foreground-color"
+            },
+            {
+              "description": "The background color of the secondary badge.",
+              "name": "--mdc-badge-secondary-background-color"
+            },
+            {
+              "description": "The foreground color of the success badge.",
+              "name": "--mdc-badge-success-foreground-color"
+            },
+            {
+              "description": "The background color of the success badge.",
+              "name": "--mdc-badge-success-background-color"
+            },
+            {
+              "description": "The foreground color of the warning badge.",
+              "name": "--mdc-badge-warning-foreground-color"
+            },
+            {
+              "description": "The background color of the warning badge.",
               "name": "--mdc-badge-warning-background-color"
             },
             {
@@ -4684,7 +4684,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-banner` is a component that allows applications to communicate important messages to users \nand requires user action to dismiss them. It supports different message types with appropriate styling \nand icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n\nThey are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n\nThis component supports both structured content via properties and flexible customization via slots:\n- Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n- Use slots for custom content and complete layout control.\n- Combine both approaches for maximum flexibility.\n- Create custom orientations and actions using CSS parts and slots.",
+          "description": "`mdc-banner` is a component that allows applications to communicate important messages to users\nand requires user action to dismiss them. It supports different message types with appropriate styling\nand icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n\nThey are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n\nThis component supports both structured content via properties and flexible customization via slots:\n- Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n- Use slots for custom content and complete layout control.\n- Combine both approaches for maximum flexibility.\n- Create custom orientations and actions using CSS parts and slots.",
           "name": "Banner",
           "cssProperties": [
             {
@@ -4695,6 +4695,10 @@
               "description": "Border color of the banner.",
               "name": "--mdc-banner-border-color"
             },
+            {
+              "description": "Border width of the banner.",
+              "name": "--mdc-banner-border-width"
+            },
             {
               "description": "Color of the icon in the banner.",
               "name": "--mdc-banner-icon-color"
@@ -4823,7 +4827,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-banner",
-          "jsDoc": "/**\n * `mdc-banner` is a component that allows applications to communicate important messages to users \n * and requires user action to dismiss them. It supports different message types with appropriate styling \n * and icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n * \n * They are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n *\n * This component supports both structured content via properties and flexible customization via slots:\n * - Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n * - Use slots for custom content and complete layout control.\n * - Combine both approaches for maximum flexibility.\n * - Create custom orientations and actions using CSS parts and slots.\n * \n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.\n * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.\n * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.\n * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.\n *\n * @tagname mdc-banner\n *\n * @csspart leading - The leading section containing the icon and text.\n * @csspart leading-icon - The icon displayed for variants or custom icon slot.\n * @csspart leading-text - The leading section containing label and secondary label text.\n * @csspart trailing - The trailing section containing action buttons and controls.\n * @csspart leading-label - The label text of the banner.\n * @csspart leading-secondary-label - The secondary label text of the banner.\n *\n * @cssproperty --mdc-banner-background-color - Background color of the banner.\n * @cssproperty --mdc-banner-border-color - Border color of the banner.\n * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.\n * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.\n * @cssproperty --mdc-banner-padding - Padding inside the banner.\n * @cssproperty --mdc-banner-gap - Gap between banner elements.\n */",
+          "jsDoc": "/**\n * `mdc-banner` is a component that allows applications to communicate important messages to users\n * and requires user action to dismiss them. It supports different message types with appropriate styling\n * and icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n *\n * They are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n *\n * This component supports both structured content via properties and flexible customization via slots:\n * - Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n * - Use slots for custom content and complete layout control.\n * - Combine both approaches for maximum flexibility.\n * - Create custom orientations and actions using CSS parts and slots.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.\n * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.\n * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.\n * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.\n *\n * @tagname mdc-banner\n *\n * @csspart leading - The leading section containing the icon and text.\n * @csspart leading-icon - The icon displayed for variants or custom icon slot.\n * @csspart leading-text - The leading section containing label and secondary label text.\n * @csspart trailing - The trailing section containing action buttons and controls.\n * @csspart leading-label - The label text of the banner.\n * @csspart leading-secondary-label - The secondary label text of the banner.\n *\n * @cssproperty --mdc-banner-background-color - Background color of the banner.\n * @cssproperty --mdc-banner-border-color - Border color of the banner.\n * @cssproperty --mdc-banner-border-width - Border width of the banner.\n * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.\n * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.\n * @cssproperty --mdc-banner-padding - Padding inside the banner.\n * @cssproperty --mdc-banner-gap - Gap between banner elements.\n */",
           "customElement": true
         }
       ],
@@ -22853,112 +22857,28 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/listitem/listitem.component.js",
+      "path": "components/marker/marker.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.\n\n**Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.\nConsumers need to add a unique ID to this listitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the listitem using the `triggerID` attribute.",
-          "name": "ListItem",
+          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+          "name": "Marker",
           "cssProperties": [
             {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-listitem-default-background-color"
-            },
-            {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-listitem-background-color-hover"
-            },
-            {
-              "description": "Allows customization of the background color when pressed.",
-              "name": "--mdc-listitem-background-color-active"
-            },
-            {
-              "description": "Allows customization of the primary label, side header and subline text slot color.",
-              "name": "--mdc-listitem-primary-label-color"
-            },
-            {
-              "description": "Allows customization of the secondary and tertiary label text slot color.",
-              "name": "--mdc-listitem-secondary-label-color"
-            },
-            {
-              "description": "Allows customization of the disabled color.",
-              "name": "--mdc-listitem-disabled-color"
-            },
-            {
-              "description": "Allows customization of column gap.",
-              "name": "--mdc-listitem-column-gap"
-            },
-            {
-              "description": "Allows customization of padding left and right.",
-              "name": "--mdc-listitem-padding-left-right"
-            },
-            {
-              "description": "Allows customization of padding top and bottom.",
-              "name": "--mdc-listitem-padding-top-bottom"
-            },
-            {
-              "description": "Allows customization of the cursor.",
-              "name": "--mdc-listitem-cursor"
-            },
-            {
-              "description": "Allows customization of the width of the list item.",
-              "name": "--mdc-listitem-width"
-            },
-            {
-              "description": "Allows customization of the height of the list item.",
-              "name": "--mdc-listitem-height"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "Allows customization of the leading part.",
-              "name": "leading"
-            },
-            {
-              "description": "Allows customization of the leading text part.",
-              "name": "leading-text"
-            },
-            {
-              "description": "Allows customization of the trailing part.",
-              "name": "trailing"
-            },
-            {
-              "description": "Allows customization of the trailing text part.",
-              "name": "trailing-text"
-            }
-          ],
-          "slots": [
-            {
-              "description": "slot for list item controls to appear of leading end.",
-              "name": "leading-controls"
-            },
-            {
-              "description": "slot for list item primary label.",
-              "name": "leading-text-primary-label"
-            },
-            {
-              "description": "slot for list item secondary label.",
-              "name": "leading-text-secondary-label"
-            },
-            {
-              "description": "slot for list item tertiary label.",
-              "name": "leading-text-tertiary-label"
-            },
-            {
-              "description": "slot for list item side header text.",
-              "name": "trailing-text-side-header"
+              "description": "Allows customization of the default background color in solid variant.",
+              "name": "--mdc-marker-solid-background-color"
             },
             {
-              "description": "slot for list item subline text.",
-              "name": "trailing-text-subline"
+              "description": "Allows customization of the default stripes in striped variant.",
+              "name": "--mdc-marker-striped-color"
             },
             {
-              "description": "slot for list item controls to appear of trailing end.",
-              "name": "trailing-controls"
+              "description": "Allows customization of the default background color in striped variant.",
+              "name": "--mdc-marker-striped-background-color"
             },
             {
-              "description": "content slot can be used to override the content completely. Be aware that this will override the default content of the list item.",
-              "name": "content"
+              "description": "Allows customization of the default width.",
+              "name": "--mdc-marker-width"
             }
           ],
           "members": [
@@ -22966,95 +22886,87 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "ListItemVariants"
+                "text": "MarkerVariants"
               },
-              "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
-              "default": "'full-width'",
+              "privacy": "public",
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
               "attribute": "variant",
               "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "secondaryLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
-              "attribute": "secondary-label",
-              "reflects": true
-            },
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "tertiaryLabel",
+              "name": "variant",
               "type": {
-                "text": "string | undefined"
+                "text": "MarkerVariants"
               },
-              "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
-              "attribute": "tertiary-label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "sideHeaderText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
-              "attribute": "side-header-text",
-              "reflects": true
-            },
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-marker",
+          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Marker",
+            "module": "components/marker/marker.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/menubar/menubar.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "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": [
             {
-              "kind": "field",
-              "name": "sublineText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
-              "attribute": "subline-text",
-              "reflects": true
-            },
+              "description": "Contains the menu items and their associated popovers",
+              "name": "default"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "softDisabled",
+              "name": "menusections",
               "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
+                "text": "Array<HTMLElement>"
+              }
             },
             {
               "kind": "field",
-              "name": "dataIndex",
+              "name": "menuItems",
               "type": {
-                "text": "number | undefined"
+                "text": "Array<HTMLElement>"
               },
-              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
-              "default": "undefined",
-              "attribute": "data-index",
-              "reflects": true
+              "description": "Returns all menuitem elements, including those nested inside menusection.",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "getAllPopovers",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Element[]"
+                }
               },
-              "description": "Indicates whether the list item is active.\nWhen set to true, the list item appears in a active state.\n\nNOTE: this is a visual state only, it does not affect the behavior or a11y of the list item.",
-              "default": "undefined",
-              "attribute": "active",
-              "reflects": true
+              "description": "Returns all menupopovers, including direct and slotted ones ."
             },
             {
               "kind": "method",
@@ -23070,90 +22982,72 @@
                   "name": "event",
                   "type": {
                     "text": "MouseEvent"
-                  },
-                  "description": "The mouse event triggered when the list item is clicked."
+                  }
+                },
+                {
+                  "description": "The target menu item that was clicked.",
+                  "name": "target"
                 }
               ],
-              "description": "Handles the click event on the list item.\nPrevents click when listitem is disabled"
+              "description": "Closes all other submenus on the top level.\nThis method is used to ensure that only one topolevel submenu is open at a time.\nIt finds all other menu items with submenus and closes their submenus."
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
+              "name": "resetTabIndexAndSetActiveTabIndex",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "menuItems",
                   "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event triggered when a key is pressed down."
+                    "text": "Array<HTMLElement>"
+                  }
+                },
+                {
+                  "description": "The index of the new active element in the list.",
+                  "name": "newIndex"
                 }
               ],
-              "description": "Fires the click event when the enter or space key is pressed down.\nThis behavior is similar to a button click and key interaction."
+              "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": "triggerClickEvent",
-              "privacy": "protected",
+              "name": "getCurrentIndex",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "number"
                 }
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "target",
                   "type": {
-                    "text": "Event"
-                  },
-                  "description": "The event that triggered the click."
+                    "text": "EventTarget | null"
+                  }
                 }
-              ],
-              "description": "Triggers a click event on the list item."
+              ]
             },
             {
               "kind": "method",
-              "name": "getText",
-              "privacy": "protected",
+              "name": "getSubmenu",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "MenuPopover | undefined"
                 }
               },
               "parameters": [
                 {
-                  "name": "slotName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The name of the slot to be used."
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "TextType"
-                  },
-                  "description": "The type of the text element."
-                },
-                {
-                  "name": "content",
-                  "optional": true,
+                  "name": "triggerId",
                   "type": {
-                    "text": "string"
-                  },
-                  "description": "The text content to be displayed within the slot."
+                    "text": "string | null"
+                  }
                 }
-              ],
-              "description": "Generates a template for a text slot with the specified content."
+              ]
             },
             {
               "kind": "method",
-              "name": "disableSlottedChildren",
+              "name": "showSubmenu",
               "privacy": "private",
               "return": {
                 "type": {
@@ -23162,42 +23056,57 @@
               },
               "parameters": [
                 {
-                  "name": "disabled",
-                  "default": "false",
+                  "name": "triggerId",
                   "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Whether to disable or enable the controls."
+                    "text": "string | null"
+                  }
                 }
-              ],
-              "description": "Disable or enable all slotted elements in the leading and trailing slots.\nThis is useful when the list item is disabled, to prevent the user from interacting with the controls."
+              ]
             },
             {
               "kind": "method",
-              "name": "renderTrailingControls",
-              "privacy": "protected",
-              "description": "Renders the trailing controls slot.",
+              "name": "updatePopoverPlacement",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
               }
             },
             {
               "kind": "method",
-              "name": "renderLeadingControls",
-              "privacy": "protected",
-              "description": "Renders the leading controls slot.",
+              "name": "updateTabIndexAndFocus",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
-              }
+              },
+              "parameters": [
+                {
+                  "name": "menuItems",
+                  "type": {
+                    "text": "HTMLElement[]"
+                  }
+                },
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "stopEventPropagation",
-              "privacy": "protected",
+              "name": "navigateToMenuItem",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -23205,250 +23114,284 @@
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "currentIndex",
                   "type": {
-                    "text": "Event"
-                  },
-                  "description": "The mouse event triggered when a click occurs."
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "direction",
+                  "type": {
+                    "text": "'prev' | 'next'"
+                  }
+                },
+                {
+                  "name": "shouldOpenSubmenu",
+                  "default": "false"
                 }
-              ],
-              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself."
+              ]
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "getKeyWithDirectionFix",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
+              "parameters": [
+                {
+                  "name": "originalKey",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
+              "kind": "method",
+              "name": "isTopLevelMenuItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the listitem is clicked.",
-              "name": "click",
-              "reactName": "onClick"
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)"
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the listitem.",
-              "name": "keyup",
-              "reactName": "onKeyUp"
+              "kind": "method",
+              "name": "isNestedMenuItem",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the listitem receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
+              "kind": "method",
+              "name": "closeAllMenuPopovers",
+              "privacy": "private"
             },
             {
-              "description": "(React: onEnabled) This event is dispatched after the listitem is enabled",
-              "name": "enabled",
-              "reactName": "onEnabled"
+              "kind": "method",
+              "name": "crossMenubarNavigationOnLeft",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
             },
             {
-              "description": "(React: onDisabled) This event is dispatched after the listitem is disabled",
-              "name": "disabled",
-              "reactName": "onDisabled"
+              "kind": "method",
+              "name": "crossMenubarNavigationOnRight",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
             },
             {
-              "description": "(React: onCreated) This event is dispatched after the listitem is created (added to the DOM)",
-              "name": "created",
-              "reactName": "onCreated"
+              "kind": "method",
+              "name": "getParentMenuItemIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
             },
             {
-              "description": "(React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)",
-              "name": "destroyed",
-              "reactName": "onDestroyed"
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Promise<void>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
             }
           ],
-          "attributes": [
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-menubar",
+          "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": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "MenuBar",
+            "module": "components/menubar/menubar.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/listitem/listitem.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.\n\n**Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.\nConsumers need to add a unique ID to this listitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the listitem using the `triggerID` attribute.",
+          "name": "ListItem",
+          "cssProperties": [
             {
-              "name": "variant",
-              "type": {
-                "text": "ListItemVariants"
-              },
-              "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
-              "default": "'full-width'",
-              "fieldName": "variant"
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-listitem-default-background-color"
             },
             {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
-              "fieldName": "label"
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-listitem-background-color-hover"
             },
             {
-              "name": "secondary-label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
-              "fieldName": "secondaryLabel"
+              "description": "Allows customization of the background color when pressed.",
+              "name": "--mdc-listitem-background-color-active"
             },
             {
-              "name": "tertiary-label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
-              "fieldName": "tertiaryLabel"
+              "description": "Allows customization of the primary label, side header and subline text slot color.",
+              "name": "--mdc-listitem-primary-label-color"
             },
             {
-              "name": "side-header-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
-              "fieldName": "sideHeaderText"
+              "description": "Allows customization of the secondary and tertiary label text slot color.",
+              "name": "--mdc-listitem-secondary-label-color"
             },
             {
-              "name": "subline-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
-              "fieldName": "sublineText"
+              "description": "Allows customization of the disabled color.",
+              "name": "--mdc-listitem-disabled-color"
             },
             {
-              "name": "soft-disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the element is soft disabled.\nWhen set to `true`, the element appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe element behaves like a disabled element, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "fieldName": "softDisabled"
+              "description": "Allows customization of column gap.",
+              "name": "--mdc-listitem-column-gap"
             },
             {
-              "name": "data-index",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
-              "default": "undefined",
-              "fieldName": "dataIndex"
+              "description": "Allows customization of padding left and right.",
+              "name": "--mdc-listitem-padding-left-right"
             },
             {
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the list item is active.\nWhen set to true, the list item appears in a active state.\n\nNOTE: this is a visual state only, it does not affect the behavior or a11y of the list item.",
-              "default": "undefined",
-              "fieldName": "active"
+              "description": "Allows customization of padding top and bottom.",
+              "name": "--mdc-listitem-padding-top-bottom"
             },
             {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
+              "description": "Allows customization of the cursor.",
+              "name": "--mdc-listitem-cursor"
             },
             {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
-              }
+              "description": "Allows customization of the width of the list item.",
+              "name": "--mdc-listitem-width"
+            },
+            {
+              "description": "Allows customization of the height of the list item.",
+              "name": "--mdc-listitem-height"
             }
           ],
-          "mixins": [
+          "cssParts": [
             {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
+              "description": "Allows customization of the leading part.",
+              "name": "leading"
             },
             {
-              "name": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
+              "description": "Allows customization of the leading text part.",
+              "name": "leading-text"
             },
             {
-              "name": "LifeCycleMixin",
-              "module": "/src/utils/mixins/lifecycle/LifeCycleMixin"
+              "description": "Allows customization of the trailing part.",
+              "name": "trailing"
+            },
+            {
+              "description": "Allows customization of the trailing text part.",
+              "name": "trailing-text"
             }
           ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-listitem",
-          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * **Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.\n * Consumers need to add a unique ID to this listitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the listitem using the `triggerID` attribute.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n * @slot content - content slot can be used to override the content completely. Be aware that\n * this will override the default content of the list item.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.\n * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.\n * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.\n * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.\n * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.\n *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-text - Allows customization of the trailing text part.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the listitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the listitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ListItem",
-            "module": "components/listitem/listitem.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/marker/marker.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-          "name": "Marker",
-          "cssProperties": [
+          "slots": [
             {
-              "description": "Allows customization of the default background color in solid variant.",
-              "name": "--mdc-marker-solid-background-color"
+              "description": "slot for list item controls to appear of leading end.",
+              "name": "leading-controls"
             },
             {
-              "description": "Allows customization of the default stripes in striped variant.",
-              "name": "--mdc-marker-striped-color"
+              "description": "slot for list item primary label.",
+              "name": "leading-text-primary-label"
             },
             {
-              "description": "Allows customization of the default background color in striped variant.",
-              "name": "--mdc-marker-striped-background-color"
+              "description": "slot for list item secondary label.",
+              "name": "leading-text-secondary-label"
             },
             {
-              "description": "Allows customization of the default width.",
-              "name": "--mdc-marker-width"
+              "description": "slot for list item tertiary label.",
+              "name": "leading-text-tertiary-label"
+            },
+            {
+              "description": "slot for list item side header text.",
+              "name": "trailing-text-side-header"
+            },
+            {
+              "description": "slot for list item subline text.",
+              "name": "trailing-text-subline"
+            },
+            {
+              "description": "slot for list item controls to appear of trailing end.",
+              "name": "trailing-controls"
+            },
+            {
+              "description": "content slot can be used to override the content completely. Be aware that this will override the default content of the list item.",
+              "name": "content"
             }
           ],
           "members": [
@@ -23456,87 +23399,95 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "MarkerVariants"
+                "text": "ListItemVariants"
               },
-              "privacy": "public",
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
+              "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
+              "default": "'full-width'",
               "attribute": "variant",
               "reflects": true
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "label",
               "type": {
-                "text": "MarkerVariants"
+                "text": "string | undefined"
               },
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-marker",
-          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Marker",
-            "module": "components/marker/marker.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/menubar/menubar.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "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": [
+              "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
+              "attribute": "label",
+              "reflects": true
+            },
             {
-              "description": "Contains the menu items and their associated popovers",
-              "name": "default"
-            }
-          ],
-          "members": [
+              "kind": "field",
+              "name": "secondaryLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
+              "attribute": "secondary-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tertiaryLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
+              "attribute": "tertiary-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "sideHeaderText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
+              "attribute": "side-header-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "sublineText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
+              "attribute": "subline-text",
+              "reflects": true
+            },
             {
               "kind": "field",
-              "name": "menusections",
+              "name": "softDisabled",
               "type": {
-                "text": "Array<HTMLElement>"
-              }
+                "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": "menuItems",
+              "name": "dataIndex",
               "type": {
-                "text": "Array<HTMLElement>"
+                "text": "number | undefined"
               },
-              "description": "Returns all menuitem elements, including those nested inside menusection.",
-              "readonly": true
+              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
+              "default": "undefined",
+              "attribute": "data-index",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "getAllPopovers",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Element[]"
-                }
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
               },
-              "description": "Returns all menupopovers, including direct and slotted ones ."
+              "description": "Indicates whether the list item is active.\nWhen set to true, the list item appears in a active state.\n\nNOTE: this is a visual state only, it does not affect the behavior or a11y of the list item.",
+              "default": "undefined",
+              "attribute": "active",
+              "reflects": true
             },
             {
               "kind": "method",
@@ -23552,73 +23503,16 @@
                   "name": "event",
                   "type": {
                     "text": "MouseEvent"
-                  }
-                },
-                {
-                  "description": "The target menu item that was clicked.",
-                  "name": "target"
-                }
-              ],
-              "description": "Closes all other submenus on the top level.\nThis method is used to ensure that only one topolevel submenu is open at a time.\nIt finds all other menu items with submenus and closes their submenus."
-            },
-            {
-              "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": "The mouse event triggered when the list item is clicked."
                 }
               ],
-              "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": "getCurrentIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "target",
-                  "type": {
-                    "text": "EventTarget | null"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "getSubmenu",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "MenuPopover | undefined"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "triggerId",
-                  "type": {
-                    "text": "string | null"
-                  }
-                }
-              ]
+              "description": "Handles the click event on the list item.\nPrevents click when listitem is disabled"
             },
             {
               "kind": "method",
-              "name": "showSubmenu",
-              "privacy": "private",
+              "name": "handleKeyDown",
+              "privacy": "protected",
               "return": {
                 "type": {
                   "text": "void"
@@ -23626,220 +23520,330 @@
               },
               "parameters": [
                 {
-                  "name": "triggerId",
+                  "name": "event",
                   "type": {
-                    "text": "string | null"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "updatePopoverPlacement",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
                 }
-              }
+              ],
+              "description": "Fires the click event when the enter or space key is pressed down.\nThis behavior is similar to a button click and key interaction."
             },
             {
               "kind": "method",
-              "name": "updateTabIndexAndFocus",
-              "privacy": "private",
+              "name": "triggerClickEvent",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
               "parameters": [
                 {
-                  "name": "menuItems",
-                  "type": {
-                    "text": "HTMLElement[]"
-                  }
-                },
-                {
-                  "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "newIndex",
+                  "name": "event",
                   "type": {
-                    "text": "number"
-                  }
+                    "text": "Event"
+                  },
+                  "description": "The event that triggered the click."
                 }
-              ]
+              ],
+              "description": "Triggers a click event on the list item."
             },
             {
               "kind": "method",
-              "name": "navigateToMenuItem",
-              "privacy": "private",
+              "name": "getText",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
               "parameters": [
                 {
-                  "name": "currentIndex",
+                  "name": "slotName",
                   "type": {
-                    "text": "number"
-                  }
+                    "text": "string"
+                  },
+                  "description": "The name of the slot to be used."
                 },
                 {
-                  "name": "direction",
+                  "name": "type",
                   "type": {
-                    "text": "'prev' | 'next'"
-                  }
+                    "text": "TextType"
+                  },
+                  "description": "The type of the text element."
                 },
                 {
-                  "name": "shouldOpenSubmenu",
-                  "default": "false"
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "getKeyWithDirectionFix",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "string"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "originalKey",
+                  "name": "content",
+                  "optional": true,
                   "type": {
                     "text": "string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "isTopLevelMenuItem",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ],
-              "description": "Determines if a menuitem is a top-level menuitem (direct child of menubar or child of menusection whose parent is menubar)"
-            },
-            {
-              "kind": "method",
-              "name": "isNestedMenuItem",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "closeAllMenuPopovers",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "crossMenubarNavigationOnLeft",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Promise<void>"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
+                  },
+                  "description": "The text content to be displayed within the slot."
                 }
-              ]
+              ],
+              "description": "Generates a template for a text slot with the specified content."
             },
             {
               "kind": "method",
-              "name": "crossMenubarNavigationOnRight",
+              "name": "disableSlottedChildren",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "Promise<void>"
+                  "text": "void"
                 }
               },
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "disabled",
+                  "default": "false",
                   "type": {
-                    "text": "HTMLElement"
-                  }
+                    "text": "boolean"
+                  },
+                  "description": "Whether to disable or enable the controls."
                 }
-              ]
+              ],
+              "description": "Disable or enable all slotted elements in the leading and trailing slots.\nThis is useful when the list item is disabled, to prevent the user from interacting with the controls."
             },
             {
               "kind": "method",
-              "name": "getParentMenuItemIndex",
-              "privacy": "private",
+              "name": "renderTrailingControls",
+              "privacy": "protected",
+              "description": "Renders the trailing controls slot.",
               "return": {
                 "type": {
-                  "text": "number"
+                  "text": ""
                 }
-              },
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLeadingControls",
+              "privacy": "protected",
+              "description": "Renders the leading controls slot.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ]
+              }
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
+              "name": "stopEventPropagation",
+              "privacy": "protected",
               "return": {
                 "type": {
-                  "text": "Promise<void>"
+                  "text": "void"
                 }
               },
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "KeyboardEvent"
-                  }
+                    "text": "Event"
+                  },
+                  "description": "The mouse event triggered when a click occurs."
                 }
-              ]
+              ],
+              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself."
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the listitem is clicked.",
+              "name": "click",
+              "reactName": "onClick"
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the listitem.",
+              "name": "keyup",
+              "reactName": "onKeyUp"
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the listitem receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            },
+            {
+              "description": "(React: onEnabled) This event is dispatched after the listitem is enabled",
+              "name": "enabled",
+              "reactName": "onEnabled"
+            },
+            {
+              "description": "(React: onDisabled) This event is dispatched after the listitem is disabled",
+              "name": "disabled",
+              "reactName": "onDisabled"
+            },
+            {
+              "description": "(React: onCreated) This event is dispatched after the listitem is created (added to the DOM)",
+              "name": "created",
+              "reactName": "onCreated"
+            },
+            {
+              "description": "(React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)",
+              "name": "destroyed",
+              "reactName": "onDestroyed"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "ListItemVariants"
+              },
+              "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
+              "default": "'full-width'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "label"
+            },
+            {
+              "name": "secondary-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "secondaryLabel"
+            },
+            {
+              "name": "tertiary-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "tertiaryLabel"
+            },
+            {
+              "name": "side-header-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
+              "fieldName": "sideHeaderText"
+            },
+            {
+              "name": "subline-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
+              "fieldName": "sublineText"
+            },
+            {
+              "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": "data-index",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Data attribute to define the index of the list item in a list.\nThis also set the `aria-posinset` attribute for accessibility purposes.\n\nIt is required when the list item is used inside a virtualized list where the items are not sequentially rendered.\nIt should be a zero-based index.",
+              "default": "undefined",
+              "fieldName": "dataIndex"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the list item is active.\nWhen set to true, the list item appears in a active state.\n\nNOTE: this is a visual state only, it does not affect the behavior or a11y of the list item.",
+              "default": "undefined",
+              "fieldName": "active"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            },
+            {
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
+            },
+            {
+              "name": "LifeCycleMixin",
+              "module": "/src/utils/mixins/lifecycle/LifeCycleMixin"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-menubar",
-          "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 */",
+          "tagName": "mdc-listitem",
+          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * **Note**: If a listitem contains a long text, it is recommended to create a tooltip for the listitem that displays the full text on hover.\n * Consumers need to add a unique ID to this listitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the listitem using the `triggerID` attribute.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n * @slot content - content slot can be used to override the content completely. Be aware that\n * this will override the default content of the list item.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.\n * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.\n * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.\n * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.\n * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.\n *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-text - Allows customization of the trailing text part.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the listitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the listitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)\n */",
           "customElement": true
         }
       ],
@@ -23848,8 +23852,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "MenuBar",
-            "module": "components/menubar/menubar.component.js"
+            "name": "ListItem",
+            "module": "components/listitem/listitem.component.js"
           }
         }
       ]