@momentum-design/components 0.74.0 → 0.74.1

package/dist/custom-elements.json

@@ -492,67 +492,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/appheader/appheader.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
-          "name": "Appheader",
-          "cssParts": [
-            {
-              "description": "The main container for styling the header.",
-              "name": "container"
-            },
-            {
-              "description": "The leading section of the header.",
-              "name": "leading-section"
-            },
-            {
-              "description": "The center section of the header.",
-              "name": "center-section"
-            },
-            {
-              "description": "The trailing section of the header.",
-              "name": "trailing-section"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Slot for the leading section (e.g., brand logo, brand name).",
-              "name": "leading"
-            },
-            {
-              "description": "Slot for the center section (e.g., search bar, icons).",
-              "name": "center"
-            },
-            {
-              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
-              "name": "trailing"
-            }
-          ],
-          "members": [],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-appheader",
-          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Appheader",
-            "module": "components/appheader/appheader.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/animation/animation.component.js",
@@ -767,35 +706,111 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/avatar/avatar.component.js",
+      "path": "components/appheader/appheader.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": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
+          "name": "Appheader",
+          "cssParts": [
             {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-avatar-default-background-color"
+              "description": "The main container for styling the header.",
+              "name": "container"
             },
             {
-              "description": "Allows customization of the default foreground color.",
-              "name": "--mdc-avatar-default-foreground-color"
+              "description": "The leading section of the header.",
+              "name": "leading-section"
             },
             {
-              "description": "Allows customization of the loading indicator background color.",
-              "name": "--mdc-avatar-loading-indicator-background-color"
+              "description": "The center section of the header.",
+              "name": "center-section"
             },
             {
-              "description": "Allows customization of the loading indicator foreground color.",
-              "name": "--mdc-avatar-loading-indicator-foreground-color"
+              "description": "The trailing section of the header.",
+              "name": "trailing-section"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Slot for the leading section (e.g., brand logo, brand name).",
+              "name": "leading"
             },
             {
-              "description": "Allows customization of the loading overlay background color.",
-              "name": "--mdc-avatar-loading-overlay-background-color"
+              "description": "Slot for the center section (e.g., search bar, icons).",
+              "name": "center"
+            },
+            {
+              "description": "Slot for the trailing section (e.g., profile avatar, icons).",
+              "name": "trailing"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-appheader",
+          "jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Appheader",
+            "module": "components/appheader/appheader.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/avatarbutton/avatarbutton.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
+          "name": "AvatarButton",
+          "cssProperties": [
+            {
+              "description": "Background color of the overlay in rest state",
+              "name": "--mdc-avatarbutton-overlay-background-color-rest"
+            },
+            {
+              "description": "Background color of the overlay in hover state",
+              "name": "--mdc-avatarbutton-overlay-background-color-hover"
+            },
+            {
+              "description": "Background color of the overlay in active state",
+              "name": "--mdc-avatarbutton-overlay-background-color-active"
             }
           ],
           "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",
@@ -839,15 +854,15 @@
               "kind": "field",
               "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",
               "attribute": "size",
               "reflects": true,
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
@@ -889,324 +904,65 @@
                 "name": "IconNameMixin",
                 "module": "utils/mixins/IconNameMixin.js"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "AvatarComponentMixin",
-              "module": "/src/utils/mixins/AvatarComponentMixin"
             },
             {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-avatar",
-          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n */",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "src",
+              "kind": "field",
+              "name": "tabIndex",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "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",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
               }
             },
             {
-              "name": "initials",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "The initials to be displayed for the avatar.",
-              "fieldName": "initials",
+              "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": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
-              "name": "presence",
+              "kind": "field",
+              "name": "active",
               "type": {
-                "text": "PresenceType | undefined"
+                "text": "boolean | 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",
+              "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,
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "softDisabled",
               "type": {
-                "text": "AvatarSize"
+                "text": "boolean | undefined"
               },
-              "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",
+              "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,
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "counter",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "fieldName": "counter",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "is-typing",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "fieldName": "isTyping",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "icon-name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Avatar",
-            "module": "components/avatar/avatar.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/avatarbutton/avatarbutton.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
-          "name": "AvatarButton",
-          "cssProperties": [
-            {
-              "description": "Background color of the overlay in rest state",
-              "name": "--mdc-avatarbutton-overlay-background-color-rest"
-            },
-            {
-              "description": "Background color of the overlay in hover state",
-              "name": "--mdc-avatarbutton-overlay-background-color-hover"
-            },
-            {
-              "description": "Background color of the overlay in active state",
-              "name": "--mdc-avatarbutton-overlay-background-color-active"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "method",
-              "name": "setSize",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "size",
-                  "type": {
-                    "text": "AvatarSize"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
-              "attribute": "src",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "initials",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The initials to be displayed for the avatar.",
-              "attribute": "initials",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "presence",
-              "type": {
-                "text": "PresenceType | undefined"
-              },
-              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "attribute": "presence",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "counter",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "attribute": "counter",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isTyping",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "attribute": "is-typing",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
-              }
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "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": "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",
-              "attribute": "active",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "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",
-              "attribute": "soft-disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
@@ -1653,218 +1409,115 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/badge/badge.component.js",
+      "path": "components/avatar/avatar.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",
+          "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": "The foreground color of the primary badge.",
-              "name": "--mdc-badge-primary-foreground-color"
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-avatar-default-background-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"
+              "description": "Allows customization of the default foreground color.",
+              "name": "--mdc-avatar-default-foreground-color"
             },
             {
-              "description": "The foreground color of the error badge.",
-              "name": "--mdc-badge-error-foreground-color"
+              "description": "Allows customization of the loading indicator background color.",
+              "name": "--mdc-avatar-loading-indicator-background-color"
             },
             {
-              "description": "The background color of the error badge.",
-              "name": "--mdc-badge-error-background-color"
+              "description": "Allows customization of the loading indicator foreground color.",
+              "name": "--mdc-avatar-loading-indicator-foreground-color"
             },
             {
-              "description": "The background color of the badge overlay.",
-              "name": "--mdc-badge-overlay-background-color"
+              "description": "Allows customization of the loading overlay background color.",
+              "name": "--mdc-avatar-loading-overlay-background-color"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "type",
+              "name": "src",
               "type": {
-                "text": "BadgeType | undefined"
+                "text": "string | undefined"
               },
-              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
-              "attribute": "type",
-              "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.",
+              "attribute": "src",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "initials",
               "type": {
-                "text": "IconVariant"
+                "text": "string | undefined"
               },
-              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
-              "default": "primary",
-              "attribute": "variant",
-              "reflects": true
+              "description": "The initials to be displayed for the avatar.",
+              "attribute": "initials",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "counter",
+              "name": "presence",
               "type": {
-                "text": "number | undefined"
+                "text": "PresenceType | undefined"
               },
-              "description": "Counter is the number which can be provided in the badge.",
-              "attribute": "counter"
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "attribute": "presence",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "maxCounter",
+              "name": "size",
               "type": {
-                "text": "number"
+                "text": "AvatarSize"
               },
-              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
-              "default": "99",
-              "attribute": "max-counter",
-              "reflects": true
+              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "overlay",
+              "name": "counter",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false",
-              "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
-              "attribute": "overlay"
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "attribute": "counter",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "isTyping",
               "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "method",
-              "name": "getCounterText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "maxCounter",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "the maximum limit which can be displayed on the badge"
-                },
-                {
-                  "name": "counter",
-                  "optional": true,
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "the number to be displayed on the badge"
-                }
-              ],
-              "description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
-            },
-            {
-              "kind": "method",
-              "name": "getBadgeIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "iconName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "the name of the icon from the icon set"
-                },
-                {
-                  "name": "backgroundClassPostfix",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "postfix for the class to style the badge icon."
-                }
-              ],
-              "description": "Method to generate the badge icon."
-            },
-            {
-              "kind": "method",
-              "name": "getBadgeDot",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Method to generate the badge dot template."
-            },
-            {
-              "kind": "method",
-              "name": "getBadgeCounterText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Method to generate the badge text and counter template."
-            },
-            {
-              "kind": "method",
-              "name": "setRoleByAriaLabel",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
-            },
-            {
-              "kind": "method",
-              "name": "getBadgeContentBasedOnType",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+                "text": "boolean"
               },
-              "description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "attribute": "is-typing",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -1880,58 +1533,97 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "AvatarComponentMixin",
+              "module": "/src/utils/mixins/AvatarComponentMixin"
+            },
+            {
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-avatar",
+          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n */",
+          "customElement": true,
           "attributes": [
             {
-              "name": "type",
+              "name": "src",
               "type": {
-                "text": "BadgeType | undefined"
+                "text": "string | undefined"
               },
-              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
-              "fieldName": "type"
+              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
+              "fieldName": "src",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
             },
             {
-              "name": "variant",
+              "name": "initials",
               "type": {
-                "text": "IconVariant"
+                "text": "string | undefined"
               },
-              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
-              "default": "primary",
-              "fieldName": "variant"
+              "description": "The initials to be displayed for the avatar.",
+              "fieldName": "initials",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
             },
             {
-              "name": "counter",
+              "name": "presence",
               "type": {
-                "text": "number | undefined"
+                "text": "PresenceType | undefined"
               },
-              "description": "Counter is the number which can be provided in the badge.",
-              "fieldName": "counter"
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "fieldName": "presence",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
             },
             {
-              "name": "max-counter",
+              "name": "size",
               "type": {
-                "text": "number"
+                "text": "AvatarSize"
               },
-              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
-              "default": "99",
-              "fieldName": "maxCounter"
+              "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": "overlay",
+              "name": "counter",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false",
-              "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
-              "fieldName": "overlay"
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "fieldName": "counter",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
             },
             {
-              "name": "aria-label",
+              "name": "is-typing",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "fieldName": "isTyping",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
             },
             {
               "name": "icon-name",
@@ -1945,20 +1637,7 @@
                 "module": "src/utils/mixins/IconNameMixin.ts"
               }
             }
-          ],
-          "mixins": [
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-badge",
-          "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported 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`,\n * it 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 *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -1966,8 +1645,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Badge",
-            "module": "components/badge/badge.component.js"
+            "name": "Avatar",
+            "module": "components/avatar/avatar.component.js"
           }
         }
       ]
@@ -2178,629 +1857,950 @@
               }
             },
             {
-              "kind": "field",
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "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,
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "inferFilledIconName",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "active",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state."
+                }
+              ],
+              "description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
+            },
+            {
+              "kind": "field",
+              "name": "prefixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
+              "attribute": "prefix-icon",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "postfixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
+              "attribute": "postfix-icon",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ButtonVariant"
+              },
+              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
+              "default": "primary",
+              "attribute": "variant",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "ButtonColor"
+              },
+              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
+              "default": "default",
+              "attribute": "color",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setVariant",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "ButtonVariant"
+                  },
+                  "description": "The variant to set."
+                }
+              ],
+              "description": "Sets the variant attribute for the button component.\nIf the provided variant is not included in the BUTTON_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT.",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setColor",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "color",
+                  "type": {
+                    "text": "ButtonColor"
+                  },
+                  "description": "The color to set."
+                }
+              ],
+              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary button.",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setSize",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "PillButtonSize | IconButtonSize"
+                  },
+                  "description": "The size to set."
+                }
+              ],
+              "description": "Sets the size attribute for the button component.\nValidates the size based on the button type (icon, pill, or tertiary).\nDefaults to DEFAULTS.SIZE if invalid.",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "inferButtonType",
+              "privacy": "protected",
+              "description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
+              "parameters": [
+                {
+                  "description": "default slot of button",
+                  "name": "slot"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.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"
+              }
+            },
+            {
+              "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": "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",
+              "attribute": "active",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "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",
+              "attribute": "soft-disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "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)",
+              "attribute": "ariaStateKey",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "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",
+              "attribute": "type",
+              "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"
+              }
+            },
+            {
+              "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"
+              }
+            },
+            {
+              "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"
+              }
+            },
+            {
+              "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"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "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": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "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": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "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": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
+              "default": "32",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
               "name": "inverted",
               "type": {
                 "text": "boolean"
               },
               "description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
               "default": "false",
-              "attribute": "inverted",
-              "reflects": true
+              "fieldName": "inverted"
             },
             {
-              "kind": "field",
               "name": "role",
               "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,
+              "fieldName": "role",
               "type": {
                 "text": "string"
               },
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "inferFilledIconName",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "active",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state."
-                }
-              ],
-              "description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
-            },
-            {
-              "kind": "field",
-              "name": "prefixIcon",
+              "name": "prefix-icon",
               "type": {
                 "text": "IconNames | undefined"
               },
               "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
-              "attribute": "prefix-icon",
-              "reflects": true,
+              "fieldName": "prefixIcon",
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "module": "src/utils/mixins/ButtonComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "postfixIcon",
+              "name": "postfix-icon",
               "type": {
                 "text": "IconNames | undefined"
               },
               "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
-              "attribute": "postfix-icon",
-              "reflects": true,
+              "fieldName": "postfixIcon",
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "module": "src/utils/mixins/ButtonComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "variant",
               "type": {
                 "text": "ButtonVariant"
               },
               "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
               "default": "primary",
-              "attribute": "variant",
+              "fieldName": "variant",
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "module": "src/utils/mixins/ButtonComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "color",
               "type": {
                 "text": "ButtonColor"
               },
               "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
               "default": "default",
-              "attribute": "color",
+              "fieldName": "color",
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "module": "src/utils/mixins/ButtonComponentMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setVariant",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "variant",
-                  "type": {
-                    "text": "ButtonVariant"
-                  },
-                  "description": "The variant to set."
-                }
-              ],
-              "description": "Sets the variant attribute for the button component.\nIf the provided variant is not included in the BUTTON_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT.",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setColor",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "color",
-                  "type": {
-                    "text": "ButtonColor"
-                  },
-                  "description": "The color to set."
-                }
-              ],
-              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary button.",
+              "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": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            },
+            {
+              "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"
+              }
+            },
+            {
+              "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"
+              }
+            },
+            {
+              "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"
+              }
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "ButtonComponentMixin",
+              "module": "/src/utils/mixins/ButtonComponentMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.component"
+          },
+          "tagName": "mdc-button",
+          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n */",
+          "customElement": true,
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the button is clicked.",
+              "name": "click",
+              "reactName": "onClick",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Button",
+            "module": "components/button/button.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"
             },
             {
-              "kind": "method",
-              "name": "setSize",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "size",
-                  "type": {
-                    "text": "PillButtonSize | IconButtonSize"
-                  },
-                  "description": "The size to set."
-                }
-              ],
-              "description": "Sets the size attribute for the button component.\nValidates the size based on the button type (icon, pill, or tertiary).\nDefaults to DEFAULTS.SIZE if invalid.",
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
+              "description": "The foreground color of the error badge.",
+              "name": "--mdc-badge-error-foreground-color"
             },
             {
-              "kind": "method",
-              "name": "inferButtonType",
-              "privacy": "protected",
-              "description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
-              "parameters": [
-                {
-                  "description": "default slot of button",
-                  "name": "slot"
-                }
-              ],
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
+              "description": "The background color of the error badge.",
+              "name": "--mdc-badge-error-background-color"
             },
+            {
+              "description": "The background color of the badge overlay.",
+              "name": "--mdc-badge-overlay-background-color"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "tabIndex",
+              "name": "type",
               "type": {
-                "text": "number"
+                "text": "BadgeType | undefined"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
-              }
+              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "variant",
               "type": {
-                "text": "boolean | undefined"
+                "text": "IconVariant"
               },
-              "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"
-              }
+              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
+              "default": "primary",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "counter",
               "type": {
-                "text": "boolean | undefined"
+                "text": "number | 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,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Counter is the number which can be provided in the badge.",
+              "attribute": "counter"
             },
             {
               "kind": "field",
-              "name": "softDisabled",
+              "name": "maxCounter",
               "type": {
-                "text": "boolean | undefined"
+                "text": "number"
               },
-              "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,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
+              "default": "99",
+              "attribute": "max-counter",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "ariaStateKey",
+              "name": "overlay",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "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,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "default": "false",
+              "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
+              "attribute": "overlay"
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "ariaLabel",
               "type": {
-                "text": "ButtonType"
+                "text": "string | null"
               },
-              "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,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "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"
-              }
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
             },
             {
               "kind": "method",
-              "name": "setSoftDisabled",
+              "name": "getCounterText",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "maxCounter",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "number"
                   },
-                  "description": "The button element."
+                  "description": "the maximum limit which can be displayed on the badge"
                 },
                 {
-                  "name": "softDisabled",
+                  "name": "counter",
                   "optional": true,
                   "type": {
-                    "text": "boolean"
+                    "text": "number"
                   },
-                  "description": "The soft-disabled state."
+                  "description": "the number to be displayed on the badge"
                 }
               ],
-              "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": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
             },
             {
               "kind": "method",
-              "name": "setDisabled",
+              "name": "getBadgeIcon",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "iconName",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "string"
                   },
-                  "description": "The button element."
+                  "description": "the name of the icon from the icon set"
                 },
                 {
-                  "name": "disabled",
+                  "name": "backgroundClassPostfix",
                   "type": {
-                    "text": "boolean"
+                    "text": "string"
                   },
-                  "description": "The disabled state."
+                  "description": "postfix for the class to style the badge icon."
                 }
               ],
-              "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"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "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": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Method to generate the badge icon."
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
+              "name": "getBadgeDot",
               "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": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Method to generate the badge dot template."
             },
             {
               "kind": "method",
-              "name": "handleKeyUp",
+              "name": "getBadgeCounterText",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "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": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
               },
-              "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
-              "default": "32",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Method to generate the badge text and counter template."
             },
             {
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "setRoleByAriaLabel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
-              "default": "false",
-              "fieldName": "inverted"
+              "description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
             },
             {
-              "name": "role",
-              "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",
-              "type": {
-                "text": "string"
+              "kind": "method",
+              "name": "getBadgeContentBasedOnType",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
             },
             {
-              "name": "prefix-icon",
+              "kind": "field",
+              "name": "iconName",
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
-              "fieldName": "prefixIcon",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
               "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "src/utils/mixins/ButtonComponentMixin.ts"
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
               }
-            },
+            }
+          ],
+          "attributes": [
             {
-              "name": "postfix-icon",
+              "name": "type",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "BadgeType | undefined"
               },
-              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
-              "fieldName": "postfixIcon",
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "src/utils/mixins/ButtonComponentMixin.ts"
-              }
+              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
+              "fieldName": "type"
             },
             {
               "name": "variant",
               "type": {
-                "text": "ButtonVariant"
+                "text": "IconVariant"
               },
-              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
+              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
               "default": "primary",
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "src/utils/mixins/ButtonComponentMixin.ts"
-              }
+              "fieldName": "variant"
             },
             {
-              "name": "color",
+              "name": "counter",
               "type": {
-                "text": "ButtonColor"
+                "text": "number | undefined"
               },
-              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
-              "default": "default",
-              "fieldName": "color",
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "src/utils/mixins/ButtonComponentMixin.ts"
-              }
+              "description": "Counter is the number which can be provided in the badge.",
+              "fieldName": "counter"
             },
             {
-              "name": "tabIndex",
+              "name": "max-counter",
               "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"
-              }
-            },
-            {
-              "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": "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 maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
+              "default": "99",
+              "fieldName": "maxCounter"
             },
             {
-              "name": "soft-disabled",
+              "name": "overlay",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "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"
-              }
+              "default": "false",
+              "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
+              "fieldName": "overlay"
             },
             {
-              "name": "ariaStateKey",
+              "name": "aria-label",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "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"
-              }
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
             },
             {
-              "name": "type",
+              "name": "icon-name",
               "type": {
-                "text": "ButtonType"
+                "text": "IconNames | undefined"
               },
-              "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",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
               }
             }
           ],
           "mixins": [
             {
-              "name": "ButtonComponentMixin",
-              "module": "/src/utils/mixins/ButtonComponentMixin"
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
             }
           ],
           "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
+            "name": "Component",
+            "module": "/src/models"
           },
-          "tagName": "mdc-button",
-          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n */",
-          "customElement": true,
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the button is clicked.",
-              "name": "click",
-              "reactName": "onClick",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ]
+          "tagName": "mdc-badge",
+          "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported 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`,\n * it 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 *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -2808,8 +2808,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Button",
-            "module": "components/button/button.component.js"
+            "name": "Badge",
+            "module": "components/badge/badge.component.js"
           }
         }
       ]