@momentum-design/components 0.83.0 → 0.83.1

package/dist/custom-elements.json

@@ -1039,110 +1039,27 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/badge/badge.component.js",
+      "path": "components/avatarbutton/avatarbutton.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-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": "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"
-            },
-            {
-              "description": "The foreground color of the error badge.",
-              "name": "--mdc-badge-error-foreground-color"
+              "description": "Background color of the overlay in rest state",
+              "name": "--mdc-avatarbutton-overlay-background-color-rest"
             },
             {
-              "description": "The background color of the error badge.",
-              "name": "--mdc-badge-error-background-color"
+              "description": "Background color of the overlay in hover state",
+              "name": "--mdc-avatarbutton-overlay-background-color-hover"
             },
             {
-              "description": "The background color of the badge overlay.",
-              "name": "--mdc-badge-overlay-background-color"
+              "description": "Background color of the overlay in active state",
+              "name": "--mdc-avatarbutton-overlay-background-color-active"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "BadgeType | undefined"
-              },
-              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
-              "attribute": "type",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "IconVariant"
-              },
-              "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": "counter",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Counter is the number which can be provided in the badge.",
-              "attribute": "counter"
-            },
-            {
-              "kind": "field",
-              "name": "maxCounter",
-              "type": {
-                "text": "number"
-              },
-              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
-              "default": "99",
-              "attribute": "max-counter",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "overlay",
-              "type": {
-                "text": "boolean"
-              },
-              "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": "ariaLabel",
@@ -1155,102 +1072,97 @@
             },
             {
               "kind": "method",
-              "name": "getCounterText",
+              "name": "setSize",
               "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,
+                  "name": "size",
                   "type": {
-                    "text": "number"
-                  },
-                  "description": "the number to be displayed on the badge"
+                    "text": "AvatarSize"
+                  }
                 }
-              ],
-              "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": ""
-                }
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
               },
-              "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."
+              "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": "method",
-              "name": "getBadgeDot",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "initials",
+              "type": {
+                "text": "string | undefined"
               },
-              "description": "Method to generate the badge dot template."
+              "description": "The initials to be displayed for the avatar.",
+              "attribute": "initials",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "getBadgeCounterText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "presence",
+              "type": {
+                "text": "PresenceType | undefined"
               },
-              "description": "Method to generate the badge text and counter template."
+              "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": "method",
-              "name": "setRoleByAriaLabel",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
               },
-              "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."
+              "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": "method",
-              "name": "getBadgeContentBasedOnType",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
               },
-              "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."
+              "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",
@@ -1264,860 +1176,844 @@
                 "name": "IconNameMixin",
                 "module": "utils/mixins/IconNameMixin.js"
               }
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "type",
+              "kind": "field",
+              "name": "autofocus",
               "type": {
-                "text": "BadgeType | undefined"
+                "text": "boolean"
               },
-              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
-              "fieldName": "type"
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
+              "attribute": "autofocus",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AutoFocusMixin",
+                "module": "utils/mixins/AutoFocusMixin.js"
+              }
             },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "tabIndex",
               "type": {
-                "text": "IconVariant"
+                "text": "number"
               },
-              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
-              "default": "primary",
-              "fieldName": "variant"
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
             },
             {
-              "name": "counter",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "Counter is the number which can be provided in the badge.",
-              "fieldName": "counter"
+              "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"
+              }
             },
             {
-              "name": "max-counter",
+              "kind": "field",
+              "name": "active",
               "type": {
-                "text": "number"
+                "text": "boolean | undefined"
               },
-              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
-              "default": "99",
-              "fieldName": "maxCounter"
+              "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"
+              }
             },
             {
-              "name": "overlay",
+              "kind": "field",
+              "name": "softDisabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | 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": "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": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "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,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "name": "icon-name",
+              "kind": "field",
+              "name": "ariaStateKey",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string | undefined"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
+              "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": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
-            }
-          ],
-          "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": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Badge",
-            "module": "components/badge/badge.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/brandvisual/brandvisual.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
-          "name": "Brandvisual",
-          "members": [
+            },
             {
               "kind": "field",
-              "name": "brandVisualData",
+              "name": "type",
               "type": {
-                "text": "HTMLElement | undefined"
+                "text": "ButtonType"
               },
-              "privacy": "private"
+              "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": "field",
-              "name": "name",
-              "type": {
-                "text": "BrandVisualNames | undefined"
-              },
-              "description": "Name of the brandVisual (= filename)",
-              "attribute": "name",
-              "reflects": true
+              "kind": "method",
+              "name": "executeAction",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "getBrandVisualData",
-              "privacy": "private"
+              "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": "handleBrandVisualLoadedSuccess",
+              "name": "setSoftDisabled",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "brandVisualHtml",
+                  "name": "element",
                   "type": {
                     "text": "HTMLElement"
                   },
-                  "description": "The brandvisual html element which has been fetched from the brandvisual provider."
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
                 }
               ],
-              "description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
+              "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": "handleBrandVisualLoadedFailure",
+              "name": "setDisabled",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "error",
+                  "name": "element",
                   "type": {
-                    "text": "unknown"
-                  }
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state."
                 }
               ],
-              "description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
-            }
-          ],
-          "events": [
+              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
-              "description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
-              "name": "load",
-              "reactName": "onLoad"
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
-              "name": "error",
-              "reactName": "onError"
-            }
-          ],
-          "attributes": [
+              "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"
+              }
+            },
             {
-              "name": "name",
-              "type": {
-                "text": "BrandVisualNames | undefined"
-              },
-              "description": "Name of the brandVisual (= filename)",
-              "fieldName": "name"
+              "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"
+              }
             }
           ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-brandvisual",
-          "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Brandvisual",
-            "module": "components/brandvisual/brandvisual.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": [
+          "events": [
             {
-              "description": "Background color of the overlay in rest state",
-              "name": "--mdc-avatarbutton-overlay-background-color-rest"
+              "description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
+              "name": "click",
+              "reactName": "onClick",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "Background color of the overlay in hover state",
-              "name": "--mdc-avatarbutton-overlay-background-color-hover"
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "Background color of the overlay in active state",
-              "name": "--mdc-avatarbutton-overlay-background-color-active"
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
-              "name": "ariaLabel",
+              "name": "aria-label",
               "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"
-                  }
-                }
-              ]
+              "fieldName": "ariaLabel"
             },
             {
-              "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",
+              "fieldName": "src",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "initials",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The initials to be displayed for the avatar.",
-              "attribute": "initials",
+              "fieldName": "initials",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "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",
+              "fieldName": "presence",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "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,
+              "fieldName": "size",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "counter",
               "type": {
                 "text": "number | undefined"
               },
               "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "attribute": "counter",
+              "fieldName": "counter",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "isTyping",
+              "name": "is-typing",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Represents the typing indicator when the user is typing.",
-              "attribute": "is-typing",
+              "fieldName": "isTyping",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "iconName",
+              "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.",
-              "attribute": "icon-name",
+              "fieldName": "iconName",
               "inheritedFrom": {
                 "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
+                "module": "src/utils/mixins/IconNameMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "autofocus",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
-              "attribute": "autofocus",
-              "reflects": true,
+              "fieldName": "autofocus",
               "inheritedFrom": {
                 "name": "AutoFocusMixin",
-                "module": "utils/mixins/AutoFocusMixin.js"
+                "module": "src/utils/mixins/AutoFocusMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "tabIndex",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
+              "fieldName": "tabIndex",
               "inheritedFrom": {
                 "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
+              "fieldName": "disabled",
               "inheritedFrom": {
                 "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
-              "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,
+              "fieldName": "active",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "softDisabled",
+              "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",
-              "attribute": "soft-disabled",
-              "reflects": true,
+              "fieldName": "softDisabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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,
+              "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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,
+              "fieldName": "type",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
-            },
+            }
+          ],
+          "mixins": [
             {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "name": "AvatarComponentMixin",
+              "module": "/src/utils/mixins/AvatarComponentMixin"
             },
             {
-              "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"
-              }
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.component"
+          },
+          "tagName": "mdc-avatarbutton",
+          "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AvatarButton",
+            "module": "components/avatarbutton/avatarbutton.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/badge/badge.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
+          "name": "Badge",
+          "cssProperties": [
+            {
+              "description": "The foreground color of the primary badge.",
+              "name": "--mdc-badge-primary-foreground-color"
             },
             {
-              "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "softDisabled",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
-                }
-              ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "The background color of the primary badge.",
+              "name": "--mdc-badge-primary-background-color"
             },
             {
-              "kind": "method",
-              "name": "setDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The disabled state."
-                }
-              ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "The foreground color of the secondary badge.",
+              "name": "--mdc-badge-secondary-foreground-color"
             },
             {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "The background color of the secondary badge.",
+              "name": "--mdc-badge-secondary-background-color"
             },
             {
-              "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": "The foreground color of the success badge.",
+              "name": "--mdc-badge-success-foreground-color"
             },
             {
-              "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"
-              }
+              "description": "The background color of the success badge.",
+              "name": "--mdc-badge-success-background-color"
             },
             {
-              "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"
-              }
-            }
-          ],
-          "events": [
+              "description": "The foreground color of the warning badge.",
+              "name": "--mdc-badge-warning-foreground-color"
+            },
             {
-              "description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
-              "name": "click",
-              "reactName": "onClick",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "The background color of the warning badge.",
+              "name": "--mdc-badge-warning-background-color"
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "The foreground color of the error badge.",
+              "name": "--mdc-badge-error-foreground-color"
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "The background color of the error badge.",
+              "name": "--mdc-badge-error-background-color"
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "The background color of the badge overlay.",
+              "name": "--mdc-badge-overlay-background-color"
             }
           ],
-          "attributes": [
+          "members": [
             {
-              "name": "aria-label",
+              "kind": "field",
+              "name": "type",
               "type": {
-                "text": "string | null"
+                "text": "BadgeType | undefined"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
+              "attribute": "type",
+              "reflects": true
             },
             {
-              "name": "src",
+              "kind": "field",
+              "name": "variant",
               "type": {
-                "text": "string | undefined"
+                "text": "IconVariant"
               },
-              "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"
-              }
+              "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
             },
             {
-              "name": "initials",
+              "kind": "field",
+              "name": "counter",
               "type": {
-                "text": "string | undefined"
+                "text": "number | undefined"
               },
-              "description": "The initials to be displayed for the avatar.",
-              "fieldName": "initials",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
+              "description": "Counter is the number which can be provided in the badge.",
+              "attribute": "counter"
             },
             {
-              "name": "presence",
+              "kind": "field",
+              "name": "maxCounter",
               "type": {
-                "text": "PresenceType | undefined"
+                "text": "number"
               },
-              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "fieldName": "presence",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
+              "description": "The 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
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "overlay",
               "type": {
-                "text": "ButtonSize"
+                "text": "boolean"
               },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "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.",
+              "attribute": "overlay"
             },
             {
-              "name": "counter",
+              "kind": "field",
+              "name": "ariaLabel",
               "type": {
-                "text": "number | undefined"
+                "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": "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"
-              }
+              "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": "is-typing",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "getBadgeContentBasedOnType",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "fieldName": "isTyping",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.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": "icon-name",
+              "kind": "field",
+              "name": "iconName",
               "type": {
                 "text": "IconNames | undefined"
               },
               "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
+              "attribute": "icon-name",
               "inheritedFrom": {
                 "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
+                "module": "utils/mixins/IconNameMixin.js"
               }
-            },
+            }
+          ],
+          "attributes": [
             {
-              "name": "autofocus",
+              "name": "type",
               "type": {
-                "text": "boolean"
+                "text": "BadgeType | undefined"
               },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
-              "fieldName": "autofocus",
-              "inheritedFrom": {
-                "name": "AutoFocusMixin",
-                "module": "src/utils/mixins/AutoFocusMixin.ts"
-              }
+              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
+              "fieldName": "type"
             },
             {
-              "name": "tabIndex",
+              "name": "variant",
               "type": {
-                "text": "number"
+                "text": "IconVariant"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
-              }
+              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
+              "default": "primary",
+              "fieldName": "variant"
             },
             {
-              "name": "disabled",
+              "name": "counter",
               "type": {
-                "text": "boolean | undefined"
+                "text": "number | undefined"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
+              "description": "Counter is the number which can be provided in the badge.",
+              "fieldName": "counter"
             },
             {
-              "name": "active",
+              "name": "max-counter",
               "type": {
-                "text": "boolean | undefined"
+                "text": "number"
               },
-              "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"
-              }
-            },
-            {
-              "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",
-              "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": "AvatarComponentMixin",
-              "module": "/src/utils/mixins/AvatarComponentMixin"
-            },
             {
               "name": "IconNameMixin",
               "module": "/src/utils/mixins/IconNameMixin"
             }
           ],
           "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
+            "name": "Component",
+            "module": "/src/models"
           },
-          "tagName": "mdc-avatarbutton",
-          "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state\n */",
+          "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
         }
       ],
@@ -2126,69 +2022,102 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "AvatarButton",
-            "module": "components/avatarbutton/avatarbutton.component.js"
+            "name": "Badge",
+            "module": "components/badge/badge.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/bullet/bullet.component.js",
+      "path": "components/brandvisual/brandvisual.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
-          "name": "Bullet",
-          "cssProperties": [
+          "description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
+          "name": "Brandvisual",
+          "members": [
             {
-              "description": "background color of the bullet",
-              "name": "--mdc-bullet-background-color"
+              "kind": "field",
+              "name": "brandVisualData",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private"
             },
             {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "BrandVisualNames | undefined"
+              },
+              "description": "Name of the brandVisual (= filename)",
+              "attribute": "name",
+              "reflects": true
             },
             {
-              "description": "medium size value of the bullet",
-              "name": "--mdc-bullet-size-medium"
+              "kind": "method",
+              "name": "getBrandVisualData",
+              "privacy": "private"
             },
             {
-              "description": "large size value of the bullet",
-              "name": "--mdc-bullet-size-large"
+              "kind": "method",
+              "name": "handleBrandVisualLoadedSuccess",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "brandVisualHtml",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The brandvisual html element which has been fetched from the brandvisual provider."
+                }
+              ],
+              "description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
+            },
+            {
+              "kind": "method",
+              "name": "handleBrandVisualLoadedFailure",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "unknown"
+                  }
+                }
+              ],
+              "description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
             }
           ],
-          "members": [
+          "events": [
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "privacy": "public",
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "attribute": "size",
-              "reflects": true
+              "description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
+              "name": "load",
+              "reactName": "onLoad"
+            },
+            {
+              "description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
+              "name": "error",
+              "reactName": "onError"
             }
           ],
           "attributes": [
             {
-              "name": "size",
+              "name": "name",
               "type": {
-                "text": "Size"
+                "text": "BrandVisualNames | undefined"
               },
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "fieldName": "size"
+              "description": "Name of the brandVisual (= filename)",
+              "fieldName": "name"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-bullet",
-          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
+          "tagName": "mdc-brandvisual",
+          "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
           "customElement": true
         }
       ],
@@ -2196,9 +2125,9 @@
         {
           "kind": "js",
           "name": "default",
-          "declaration": {
-            "name": "Bullet",
-            "module": "components/bullet/bullet.component.js"
+          "declaration": {
+            "name": "Brandvisual",
+            "module": "components/brandvisual/brandvisual.component.js"
           }
         }
       ]
@@ -2782,109 +2711,312 @@
               }
             },
             {
-              "name": "active",
+              "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/bullet/bullet.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "name": "Bullet",
+          "cssProperties": [
+            {
+              "description": "background color of the bullet",
+              "name": "--mdc-bullet-background-color"
+            },
+            {
+              "description": "small size value of the bullet",
+              "name": "--mdc-bullet-size-small"
+            },
+            {
+              "description": "medium size value of the bullet",
+              "name": "--mdc-bullet-size-medium"
+            },
+            {
+              "description": "large size value of the bullet",
+              "name": "--mdc-bullet-size-large"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "privacy": "public",
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-bullet",
+          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Bullet",
+            "module": "components/bullet/bullet.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/buttongroup/buttongroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
+          "name": "ButtonGroup",
+          "cssProperties": [
+            {
+              "description": "The border radius of the buttongroup",
+              "name": "--mdc-buttongroup-border-radius"
+            },
+            {
+              "description": "The border color of the buttongroup",
+              "name": "--mdc-buttongroup-border-color"
+            },
+            {
+              "description": "The color of the divider between buttons within the buttongroup",
+              "name": "--mdc-buttongroup-divider-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, which contains the buttons",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "ButtonGroupOrientation"
+              },
+              "description": "Orientation of the buttongroup.",
+              "default": "'horizontal'",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ButtonGroupVariant"
+              },
+              "description": "Variant of the buttons within the buttongroup.",
+              "default": "'primary'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ButtonGroupSize"
+              },
+              "description": "Size of the buttons within the buttongroup.",
+              "default": "'28'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
+              "attribute": "compact",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "orientation",
               "type": {
-                "text": "boolean | undefined"
+                "text": "ButtonGroupOrientation"
               },
-              "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": "Orientation of the buttongroup.",
+              "default": "'horizontal'",
+              "fieldName": "orientation"
             },
             {
-              "name": "soft-disabled",
+              "name": "variant",
               "type": {
-                "text": "boolean | undefined"
+                "text": "ButtonGroupVariant"
               },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "fieldName": "softDisabled",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Variant of the buttons within the buttongroup.",
+              "default": "'primary'",
+              "fieldName": "variant"
             },
             {
-              "name": "ariaStateKey",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "ButtonGroupSize"
               },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "fieldName": "ariaStateKey",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Size of the buttons within the buttongroup.",
+              "default": "'28'",
+              "fieldName": "size"
             },
             {
-              "name": "type",
+              "name": "compact",
               "type": {
-                "text": "ButtonType"
+                "text": "boolean"
               },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "fieldName": "type",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "ButtonComponentMixin",
-              "module": "/src/utils/mixins/ButtonComponentMixin"
+              "default": "false",
+              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
+              "fieldName": "compact"
             }
           ],
           "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-buttongroup",
+          "jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -2892,8 +3024,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Button",
-            "module": "components/button/button.component.js"
+            "name": "ButtonGroup",
+            "module": "components/buttongroup/buttongroup.component.js"
           }
         }
       ]
@@ -4297,138 +4429,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/buttongroup/buttongroup.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
-          "name": "ButtonGroup",
-          "cssProperties": [
-            {
-              "description": "The border radius of the buttongroup",
-              "name": "--mdc-buttongroup-border-radius"
-            },
-            {
-              "description": "The border color of the buttongroup",
-              "name": "--mdc-buttongroup-border-color"
-            },
-            {
-              "description": "The color of the divider between buttons within the buttongroup",
-              "name": "--mdc-buttongroup-divider-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot, which contains the buttons",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "ButtonGroupOrientation"
-              },
-              "description": "Orientation of the buttongroup.",
-              "default": "'horizontal'",
-              "attribute": "orientation",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "ButtonGroupVariant"
-              },
-              "description": "Variant of the buttons within the buttongroup.",
-              "default": "'primary'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ButtonGroupSize"
-              },
-              "description": "Size of the buttons within the buttongroup.",
-              "default": "'28'",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
-              "attribute": "compact",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "orientation",
-              "type": {
-                "text": "ButtonGroupOrientation"
-              },
-              "description": "Orientation of the buttongroup.",
-              "default": "'horizontal'",
-              "fieldName": "orientation"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "ButtonGroupVariant"
-              },
-              "description": "Variant of the buttons within the buttongroup.",
-              "default": "'primary'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "ButtonGroupSize"
-              },
-              "description": "Size of the buttons within the buttongroup.",
-              "default": "'28'",
-              "fieldName": "size"
-            },
-            {
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
-              "fieldName": "compact"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-buttongroup",
-          "jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "components/buttongroup/buttongroup.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/cardbutton/cardbutton.component.js",