npm - @momentum-design/components - Versions diffs - 0.22.6 → 0.23.0 - Mend

@momentum-design/components 0.22.6 → 0.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (24) hide show

package/dist/custom-elements.json CHANGED Viewed

@@ -2,250 +2,6 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "components/avatar/avatar.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
-          "name": "Avatar",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-avatar-default-background-color"
-            },
-            {
-              "description": "Allows customization of the default foreground color.",
-              "name": "--mdc-avatar-default-foreground-color"
-            },
-            {
-              "description": "Allows customization of the loading indicator background color.",
-              "name": "--mdc-avatar-loading-indicator-background-color"
-            },
-            {
-              "description": "Allows customization of the loading indicator foreground color.",
-              "name": "--mdc-avatar-loading-indicator-foreground-color"
-            },
-            {
-              "description": "Allows customization of the loading overlay background color.",
-              "name": "--mdc-avatar-loading-overlay-background-color"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
-              "attribute": "src",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "initials",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The initials to be displayed for the avatar.",
-              "attribute": "initials",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "presence",
-              "type": {
-                "text": "PresenceType | undefined"
-              },
-              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "attribute": "presence",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "AvatarSize"
-              },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "counter",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "attribute": "counter",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isTyping",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "attribute": "is-typing",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "AvatarComponentMixin",
-              "module": "/src/utils/mixins/AvatarComponentMixin"
-            },
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-avatar",
-          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n */",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
-              "fieldName": "src",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "initials",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The initials to be displayed for the avatar.",
-              "fieldName": "initials",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "presence",
-              "type": {
-                "text": "PresenceType | undefined"
-              },
-              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "fieldName": "presence",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "AvatarSize"
-              },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "counter",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "fieldName": "counter",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "is-typing",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "fieldName": "isTyping",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "icon-name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Avatar",
-            "module": "components/avatar/avatar.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/avatarbutton/avatarbutton.component.js",
@@ -800,218 +556,115 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/badge/badge.component.js",
+      "path": "components/avatar/avatar.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
-          "name": "Badge",
+          "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
+          "name": "Avatar",
           "cssProperties": [
             {
-              "description": "The foreground color of the primary badge.",
-              "name": "--mdc-badge-primary-foreground-color"
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-avatar-default-background-color"
             },
             {
-              "description": "The background color of the primary badge.",
-              "name": "--mdc-badge-primary-background-color"
-            },
-            {
-              "description": "The foreground color of the secondary badge.",
-              "name": "--mdc-badge-secondary-foreground-color"
-            },
-            {
-              "description": "The background color of the secondary badge.",
-              "name": "--mdc-badge-secondary-background-color"
-            },
-            {
-              "description": "The foreground color of the success badge.",
-              "name": "--mdc-badge-success-foreground-color"
-            },
-            {
-              "description": "The background color of the success badge.",
-              "name": "--mdc-badge-success-background-color"
-            },
-            {
-              "description": "The foreground color of the warning badge.",
-              "name": "--mdc-badge-warning-foreground-color"
-            },
-            {
-              "description": "The background color of the warning badge.",
-              "name": "--mdc-badge-warning-background-color"
+              "description": "Allows customization of the default foreground color.",
+              "name": "--mdc-avatar-default-foreground-color"
             },
             {
-              "description": "The foreground color of the error badge.",
-              "name": "--mdc-badge-error-foreground-color"
+              "description": "Allows customization of the loading indicator background color.",
+              "name": "--mdc-avatar-loading-indicator-background-color"
             },
             {
-              "description": "The background color of the error badge.",
-              "name": "--mdc-badge-error-background-color"
+              "description": "Allows customization of the loading indicator foreground color.",
+              "name": "--mdc-avatar-loading-indicator-foreground-color"
             },
             {
-              "description": "The background color of the badge overlay.",
-              "name": "--mdc-badge-overlay-background-color"
+              "description": "Allows customization of the loading overlay background color.",
+              "name": "--mdc-avatar-loading-overlay-background-color"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "type",
+              "name": "src",
               "type": {
-                "text": "BadgeType | undefined"
+                "text": "string | undefined"
               },
-              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
-              "attribute": "type",
-              "reflects": true
+              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
+              "attribute": "src",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "initials",
               "type": {
-                "text": "IconVariant"
+                "text": "string | undefined"
               },
-              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
-              "default": "primary",
-              "attribute": "variant",
-              "reflects": true
+              "description": "The initials to be displayed for the avatar.",
+              "attribute": "initials",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "counter",
+              "name": "presence",
               "type": {
-                "text": "number | undefined"
+                "text": "PresenceType | undefined"
               },
-              "description": "Counter is the number which can be provided in the badge.",
-              "attribute": "counter"
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "attribute": "presence",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "maxCounter",
+              "name": "size",
               "type": {
-                "text": "number"
+                "text": "AvatarSize"
               },
-              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
-              "default": "99",
-              "attribute": "max-counter",
-              "reflects": true
+              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "overlay",
+              "name": "counter",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false",
-              "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
-              "attribute": "overlay"
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "attribute": "counter",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "isTyping",
               "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "method",
-              "name": "getCounterText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "maxCounter",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "the maximum limit which can be displayed on the badge"
-                },
-                {
-                  "name": "counter",
-                  "optional": true,
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "the number to be displayed on the badge"
-                }
-              ],
-              "description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
-            },
-            {
-              "kind": "method",
-              "name": "getBadgeIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "iconName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "the name of the icon from the icon set"
-                },
-                {
-                  "name": "backgroundClassPostfix",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "postfix for the class to style the badge icon."
-                }
-              ],
-              "description": "Method to generate the badge icon."
-            },
-            {
-              "kind": "method",
-              "name": "getBadgeDot",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Method to generate the badge dot template."
-            },
-            {
-              "kind": "method",
-              "name": "getBadgeCounterText",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Method to generate the badge text and counter template."
-            },
-            {
-              "kind": "method",
-              "name": "setRoleByAriaLabel",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
-            },
-            {
-              "kind": "method",
-              "name": "getBadgeContentBasedOnType",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+                "text": "boolean"
               },
-              "description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "attribute": "is-typing",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -1027,58 +680,97 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "AvatarComponentMixin",
+              "module": "/src/utils/mixins/AvatarComponentMixin"
+            },
+            {
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-avatar",
+          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n */",
+          "customElement": true,
           "attributes": [
             {
-              "name": "type",
+              "name": "src",
               "type": {
-                "text": "BadgeType | undefined"
+                "text": "string | undefined"
               },
-              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
-              "fieldName": "type"
+              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
+              "fieldName": "src",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
             },
             {
-              "name": "variant",
+              "name": "initials",
               "type": {
-                "text": "IconVariant"
+                "text": "string | undefined"
               },
-              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
-              "default": "primary",
-              "fieldName": "variant"
-            },
+              "description": "The initials to be displayed for the avatar.",
+              "fieldName": "initials",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
             {
-              "name": "counter",
+              "name": "presence",
               "type": {
-                "text": "number | undefined"
+                "text": "PresenceType | undefined"
               },
-              "description": "Counter is the number which can be provided in the badge.",
-              "fieldName": "counter"
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "fieldName": "presence",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
             },
             {
-              "name": "max-counter",
+              "name": "size",
               "type": {
-                "text": "number"
+                "text": "AvatarSize"
               },
-              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
-              "default": "99",
-              "fieldName": "maxCounter"
+              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
+              "default": "32",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
             },
             {
-              "name": "overlay",
+              "name": "counter",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false",
-              "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
-              "fieldName": "overlay"
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "fieldName": "counter",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
             },
             {
-              "name": "aria-label",
+              "name": "is-typing",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "fieldName": "isTyping",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
             },
             {
               "name": "icon-name",
@@ -1092,20 +784,7 @@
                 "module": "src/utils/mixins/IconNameMixin.ts"
               }
             }
-          ],
-          "mixins": [
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-badge",
-          "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -1113,8 +792,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Badge",
-            "module": "components/badge/badge.component.js"
+            "name": "Avatar",
+            "module": "components/avatar/avatar.component.js"
           }
         }
       ]
@@ -1192,495 +871,825 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/checkbox/checkbox.component.js",
+      "path": "components/button/button.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.",
-          "name": "Checkbox",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-checkbox-background-color-hover"
-            },
-            {
-              "description": "Border color in high contrast.",
-              "name": "--mdc-checkbox-border-color"
-            },
-            {
-              "description": "Background color for a selected checkbox.",
-              "name": "--mdc-checkbox-checked-background-color"
-            },
-            {
-              "description": "Background color for a selected checkbox when hovered.",
-              "name": "--mdc-checkbox-checked-background-color-hover"
-            },
-            {
-              "description": "Background color for a selected checkbox when pressed.",
-              "name": "--mdc-checkbox-checked-pressed-icon-color"
-            },
-            {
-              "description": "Background color for a disabled checkbox.",
-              "name": "--mdc-checkbox-disabled-background-color"
-            },
-            {
-              "description": "Border color for a disabled checkbox.",
-              "name": "--mdc-checkbox-disabled-border-color"
-            },
-            {
-              "description": "Background color for a disabled, selected checkbox.",
-              "name": "--mdc-checkbox-disabled-checked-icon-color"
-            },
+          "description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\nButton 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\nButton Colors:\n- **Positive**: Green color.\n- **Negative**: Red color.\n- **Accent**: Blue color.\n- **Promotional**: Purple color.\n- **Default**: White color.\n\nButton 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\nButton 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.\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons.",
+          "name": "Button",
+          "slots": [
             {
-              "description": "Icon color for a disabled checkbox.",
-              "name": "--mdc-checkbox-disabled-icon-color"
-            },
+              "description": "Text label of the button.",
+              "name": ""
+            }
+          ],
+          "members": [
             {
-              "description": "Background color for an unselected checkbox.",
-              "name": "--mdc-checkbox-icon-background-color"
+              "kind": "field",
+              "name": "prefixIcon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
+              "attribute": "prefix-icon",
+              "reflects": true
             },
             {
-              "description": "Default background color for an unselected checkbox.",
-              "name": "--mdc-checkbox-icon-border-color"
+              "kind": "field",
+              "name": "postfixIcon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
+              "attribute": "postfix-icon",
+              "reflects": true
             },
             {
-              "description": "Icon color for an unselected checkbox.",
-              "name": "--mdc-checkbox-icon-color"
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ButtonVariant"
+              },
+              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
+              "default": "primary",
+              "attribute": "variant"
             },
-            {
-              "description": "Background color for a selected checkbox when pressed.",
-              "name": "--mdc-checkbox-pressed-icon-color"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "checked",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "ButtonSize"
               },
-              "default": "false",
-              "description": "Determines whether the checkbox is selected or unselected.",
-              "attribute": "checked",
-              "reflects": true
+              "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "indeterminate",
+              "name": "color",
               "type": {
-                "text": "boolean"
+                "text": "ButtonColor"
               },
-              "default": "false",
-              "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
-              "attribute": "indeterminate",
-              "reflects": true
+              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
+              "default": "default",
+              "attribute": "color"
             },
             {
-              "kind": "method",
-              "name": "setFormValue",
-              "privacy": "private",
-              "description": "Updates the form value to reflect the current state of the checkbox.\nIf checked, the value is set to either the user-provided value or 'on' if no value is provided.\nIf unchecked, the value is set to null."
+              "kind": "field",
+              "name": "role",
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "'button'",
+              "attribute": "role",
+              "reflects": true,
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "toggleState",
+              "name": "modifyIconName",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
+              "parameters": [
+                {
+                  "name": "active",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state."
                 }
-              },
-              "description": "Toggles the state of the checkbox element.\nIf the element is not disabled, then\nthe checked property is toggled and the indeterminate property is set to false."
+              ],
+              "description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
             },
             {
               "kind": "method",
-              "name": "handleChange",
-              "privacy": "public",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
+              "name": "setVariant",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "variant",
                   "type": {
-                    "text": "Event"
-                  }
+                    "text": "ButtonVariant"
+                  },
+                  "description": "The variant to set."
                 }
               ],
-              "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
+              "description": "Sets the variant attribute for the button component.\nIf the provided variant is not included in the BUTTON_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
+              "name": "setSize",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "size",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "PillButtonSize | IconButtonSize"
                   },
-                  "description": "The keyboard event."
+                  "description": "The size to set."
                 }
               ],
-              "description": "Handles the keydown event on the checkbox.\nWhen the user presses Enter, the form is submitted."
+              "description": "Sets the size attribute for the button component.\nValidates the size based on the button type (icon, pill, or tertiary).\nDefaults to DEFAULTS.SIZE if invalid."
             },
             {
-              "kind": "field",
-              "name": "internals"
+              "kind": "method",
+              "name": "setColor",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "color",
+                  "type": {
+                    "text": "ButtonColor"
+                  },
+                  "description": "The color to set."
+                }
+              ],
+              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary buttons."
             },
             {
-              "kind": "field",
-              "name": "helpTextType",
-              "type": {
-                "text": "ValidationType"
-              },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
-              "reflects": true,
-              "default": "undefined as unknown",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "kind": "method",
+              "name": "inferButtonType",
+              "privacy": "private",
+              "description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
+              "parameters": [
+                {
+                  "description": "default slot of button",
+                  "name": "slot"
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "tabIndex",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
-              "attribute": "name",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
               "reflects": true,
               "inheritedFrom": {
-                "name": "NameMixin",
-                "module": "utils/mixins/NameMixin.js"
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "ValueMixin",
-                "module": "utils/mixins/ValueMixin.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "active",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
+              "default": "false",
+              "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.",
+              "attribute": "active",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "softDisabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "attribute": "disabled",
-              "reflects": true,
+              "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.",
+              "attribute": "soft-disabled",
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "ButtonType"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "attribute": "label",
+              "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": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "id",
-              "default": "`mdc-input-${uuidv4()}`",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "attribute": "id",
+              "kind": "method",
+              "name": "executeAction",
+              "privacy": "protected",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "helpText",
+              "kind": "method",
+              "name": "setActive",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element"
+                },
+                {
+                  "name": "active",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state of the element"
+                }
+              ],
+              "description": "Sets the aria-pressed attribute based on the active state of the button.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
+                }
+              ],
+              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state."
+                }
+              ],
+              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "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.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "prefix-icon",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
+              "fieldName": "prefixIcon"
+            },
+            {
+              "name": "postfix-icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
+              "fieldName": "postfixIcon"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "ButtonVariant"
+              },
+              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
+              "default": "primary",
+              "fieldName": "variant"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
+              "default": "32",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "ButtonColor"
+              },
+              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
+              "default": "default",
+              "fieldName": "color"
+            },
+            {
+              "name": "role",
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "'button'",
+              "fieldName": "role",
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "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.",
+              "fieldName": "active",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "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.",
+              "fieldName": "softDisabled",
+              "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"
+              }
+            }
+          ],
+          "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
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Button",
+            "module": "components/button/button.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/badge/badge.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
+          "name": "Badge",
+          "cssProperties": [
+            {
+              "description": "The foreground color of the primary badge.",
+              "name": "--mdc-badge-primary-foreground-color"
+            },
+            {
+              "description": "The background color of the primary badge.",
+              "name": "--mdc-badge-primary-background-color"
+            },
+            {
+              "description": "The foreground color of the secondary badge.",
+              "name": "--mdc-badge-secondary-foreground-color"
+            },
+            {
+              "description": "The background color of the secondary badge.",
+              "name": "--mdc-badge-secondary-background-color"
+            },
+            {
+              "description": "The foreground color of the success badge.",
+              "name": "--mdc-badge-success-foreground-color"
+            },
+            {
+              "description": "The background color of the success badge.",
+              "name": "--mdc-badge-success-background-color"
+            },
+            {
+              "description": "The foreground color of the warning badge.",
+              "name": "--mdc-badge-warning-foreground-color"
+            },
+            {
+              "description": "The background color of the warning badge.",
+              "name": "--mdc-badge-warning-background-color"
+            },
+            {
+              "description": "The foreground color of the error badge.",
+              "name": "--mdc-badge-error-foreground-color"
+            },
+            {
+              "description": "The background color of the error badge.",
+              "name": "--mdc-badge-error-background-color"
+            },
+            {
+              "description": "The background color of the badge overlay.",
+              "name": "--mdc-badge-overlay-background-color"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "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",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "method",
+              "name": "getCounterText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "maxCounter",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "the maximum limit which can be displayed on the badge"
+                },
+                {
+                  "name": "counter",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "the number to be displayed on the badge"
+                }
+              ],
+              "description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
+            },
+            {
+              "kind": "method",
+              "name": "getBadgeIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "iconName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the name of the icon from the icon set"
+                },
+                {
+                  "name": "backgroundClassPostfix",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "postfix for the class to style the badge icon."
+                }
+              ],
+              "description": "Method to generate the badge icon."
             },
             {
               "kind": "method",
-              "name": "renderLabelElement",
-              "privacy": "protected",
-              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "name": "getBadgeDot",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "Method to generate the badge dot template."
             },
             {
               "kind": "method",
-              "name": "renderHelpTextIcon",
-              "privacy": "protected",
-              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
+              "name": "getBadgeCounterText",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "Method to generate the badge text and counter template."
             },
             {
               "kind": "method",
-              "name": "renderHelpText",
-              "privacy": "protected",
-              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
+              "name": "setRoleByAriaLabel",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
               },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
             },
             {
               "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "name": "getBadgeContentBasedOnType",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "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."
             },
             {
-              "kind": "method",
-              "name": "renderHelperText",
-              "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
               },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "type": {
-                "text": "EventConstructor"
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
               }
             }
           ],
           "attributes": [
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the checkbox is selected or unselected.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "indeterminate",
+              "name": "type",
               "type": {
-                "text": "boolean"
+                "text": "BadgeType | undefined"
               },
-              "default": "false",
-              "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
-              "fieldName": "indeterminate"
+              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
+              "fieldName": "type"
             },
             {
-              "name": "name",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "IconVariant"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "NameMixin",
-                "module": "src/utils/mixins/NameMixin.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": "value",
+              "name": "counter",
               "type": {
-                "text": "string"
+                "text": "number | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "ValueMixin",
-                "module": "src/utils/mixins/ValueMixin.ts"
-              }
+              "description": "Counter is the number which can be provided in the badge.",
+              "fieldName": "counter"
             },
             {
-              "name": "data-aria-label",
+              "name": "max-counter",
               "type": {
-                "text": "string | null"
+                "text": "number"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
+              "description": "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": "disabled",
+              "name": "overlay",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "fieldName": "label",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "name": "id",
-              "default": "`mdc-input-${uuidv4()}`",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "fieldName": "id",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "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": "help-text-type",
+              "name": "aria-label",
               "type": {
-                "text": "ValidationType"
+                "text": "string | null"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
             },
             {
-              "name": "help-text",
+              "name": "icon-name",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
               }
             }
           ],
           "mixins": [
             {
-              "name": "NameMixin",
-              "module": "/src/utils/mixins/NameMixin"
-            },
-            {
-              "name": "ValueMixin",
-              "module": "/src/utils/mixins/ValueMixin"
-            },
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
             }
           ],
           "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
+            "name": "Component",
+            "module": "/src/models"
           },
-          "tagName": "mdc-checkbox",
-          "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-checkbox\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n */",
-          "customElement": true,
-          "slots": [
-            {
-              "description": "slot to add the label info icon",
-              "name": "label-info",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            }
-          ]
+          "tagName": "mdc-badge",
+          "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -1688,8 +1697,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Checkbox",
-            "module": "components/checkbox/checkbox.component.js"
+            "name": "Badge",
+            "module": "components/badge/badge.component.js"
           }
         }
       ]
@@ -1993,442 +2002,402 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/button/button.component.js",
+      "path": "components/checkbox/checkbox.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\nButton 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\nButton Colors:\n- **Positive**: Green color.\n- **Negative**: Red color.\n- **Accent**: Blue color.\n- **Promotional**: Purple color.\n- **Default**: White color.\n\nButton 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\nButton 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.\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons.",
-          "name": "Button",
-          "slots": [
+          "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.",
+          "name": "Checkbox",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-checkbox-background-color-hover"
+            },
+            {
+              "description": "Border color in high contrast.",
+              "name": "--mdc-checkbox-border-color"
+            },
+            {
+              "description": "Background color for a selected checkbox.",
+              "name": "--mdc-checkbox-checked-background-color"
+            },
+            {
+              "description": "Background color for a selected checkbox when hovered.",
+              "name": "--mdc-checkbox-checked-background-color-hover"
+            },
+            {
+              "description": "Background color for a selected checkbox when pressed.",
+              "name": "--mdc-checkbox-checked-pressed-icon-color"
+            },
+            {
+              "description": "Background color for a disabled checkbox.",
+              "name": "--mdc-checkbox-disabled-background-color"
+            },
             {
-              "description": "Text label of the button.",
-              "name": ""
-            }
-          ],
-          "members": [
+              "description": "Border color for a disabled checkbox.",
+              "name": "--mdc-checkbox-disabled-border-color"
+            },
             {
-              "kind": "field",
-              "name": "prefixIcon",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
-              "attribute": "prefix-icon",
-              "reflects": true
+              "description": "Background color for a disabled, selected checkbox.",
+              "name": "--mdc-checkbox-disabled-checked-icon-color"
             },
             {
-              "kind": "field",
-              "name": "postfixIcon",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
-              "attribute": "postfix-icon",
-              "reflects": true
+              "description": "Icon color for a disabled checkbox.",
+              "name": "--mdc-checkbox-disabled-icon-color"
             },
             {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "ButtonVariant"
-              },
-              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
-              "default": "primary",
-              "attribute": "variant"
+              "description": "Background color for an unselected checkbox.",
+              "name": "--mdc-checkbox-icon-background-color"
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Default background color for an unselected checkbox.",
+              "name": "--mdc-checkbox-icon-border-color"
+            },
+            {
+              "description": "Icon color for an unselected checkbox.",
+              "name": "--mdc-checkbox-icon-color"
             },
+            {
+              "description": "Background color for a selected checkbox when pressed.",
+              "name": "--mdc-checkbox-pressed-icon-color"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "color",
+              "name": "checked",
               "type": {
-                "text": "ButtonColor"
+                "text": "boolean"
               },
-              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
-              "default": "default",
-              "attribute": "color"
+              "default": "false",
+              "description": "Determines whether the checkbox is selected or unselected.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "role",
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "'button'",
-              "attribute": "role",
-              "reflects": true,
+              "name": "indeterminate",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "default": "false",
+              "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
+              "attribute": "indeterminate",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "modifyIconName",
+              "name": "setFormValue",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "active",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state."
-                }
-              ],
-              "description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
+              "description": "Updates the form value to reflect the current state of the checkbox.\nIf checked, the value is set to either the user-provided value or 'on' if no value is provided.\nIf unchecked, the value is set to null."
             },
             {
               "kind": "method",
-              "name": "setVariant",
+              "name": "toggleState",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "variant",
-                  "type": {
-                    "text": "ButtonVariant"
-                  },
-                  "description": "The variant to set."
+              "return": {
+                "type": {
+                  "text": "void"
                 }
-              ],
-              "description": "Sets the variant attribute for the button component.\nIf the provided variant is not included in the BUTTON_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
+              },
+              "description": "Toggles the state of the checkbox element.\nIf the element is not disabled, then\nthe checked property is toggled and the indeterminate property is set to false."
             },
             {
               "kind": "method",
-              "name": "setSize",
-              "privacy": "private",
+              "name": "handleChange",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "size",
+                  "name": "event",
                   "type": {
-                    "text": "PillButtonSize | IconButtonSize"
-                  },
-                  "description": "The size to set."
+                    "text": "Event"
+                  }
                 }
               ],
-              "description": "Sets the size attribute for the button component.\nValidates the size based on the button type (icon, pill, or tertiary).\nDefaults to DEFAULTS.SIZE if invalid."
+              "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
             },
             {
               "kind": "method",
-              "name": "setColor",
+              "name": "handleKeyDown",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "color",
+                  "name": "event",
                   "type": {
-                    "text": "ButtonColor"
+                    "text": "KeyboardEvent"
                   },
-                  "description": "The color to set."
+                  "description": "The keyboard event."
                 }
               ],
-              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary buttons."
+              "description": "Handles the keydown event on the checkbox.\nWhen the user presses Enter, the form is submitted."
             },
             {
-              "kind": "method",
-              "name": "inferButtonType",
-              "privacy": "private",
-              "description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
-              "parameters": [
-                {
-                  "description": "default slot of button",
-                  "name": "slot"
-                }
-              ]
+              "kind": "field",
+              "name": "internals"
             },
             {
               "kind": "field",
-              "name": "tabIndex",
+              "name": "helpTextType",
               "type": {
-                "text": "number"
+                "text": "ValidationType"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
               "reflects": true,
+              "default": "undefined as unknown",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "attribute": "disabled",
+              "default": "''",
+              "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
+              "attribute": "name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "NameMixin",
+                "module": "utils/mixins/NameMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "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.",
-              "attribute": "active",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "ValueMixin",
+                "module": "utils/mixins/ValueMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "softDisabled",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "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.",
-              "attribute": "soft-disabled",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "label",
               "type": {
-                "text": "ButtonType"
+                "text": "string | 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",
-              "attribute": "type",
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "id",
+              "default": "`mdc-input-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "setActive",
+              "name": "renderLabelElement",
               "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element"
-                },
-                {
-                  "name": "active",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state of the element"
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Sets the aria-pressed attribute based on the active state of the button.",
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "softDisabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
+              "name": "renderHelpTextIcon",
+              "privacy": "protected",
+              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "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"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "setDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The disabled state."
+              "name": "renderHelpText",
+              "privacy": "protected",
+              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private",
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "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.",
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "handleKeyUp",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "prefix-icon",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
-              "fieldName": "prefixIcon"
-            },
+                "text": "EventConstructor"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "name": "postfix-icon",
+              "name": "checked",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
-              "fieldName": "postfixIcon"
+              "default": "false",
+              "description": "Determines whether the checkbox is selected or unselected.",
+              "fieldName": "checked"
             },
             {
-              "name": "variant",
+              "name": "indeterminate",
               "type": {
-                "text": "ButtonVariant"
+                "text": "boolean"
               },
-              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
-              "default": "primary",
-              "fieldName": "variant"
+              "default": "false",
+              "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
+              "fieldName": "indeterminate"
             },
             {
-              "name": "size",
+              "name": "name",
               "type": {
-                "text": "ButtonSize"
+                "text": "string"
               },
-              "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
-              "default": "32",
-              "fieldName": "size",
+              "default": "''",
+              "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "NameMixin",
+                "module": "src/utils/mixins/NameMixin.ts"
               }
             },
             {
-              "name": "color",
-              "type": {
-                "text": "ButtonColor"
-              },
-              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
-              "default": "default",
-              "fieldName": "color"
-            },
-            {
-              "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",
+              "name": "value",
               "type": {
                 "text": "string"
               },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "ValueMixin",
+                "module": "src/utils/mixins/ValueMixin.ts"
               }
             },
             {
-              "name": "tabIndex",
+              "name": "data-aria-label",
               "type": {
-                "text": "number"
+                "text": "string | null"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
@@ -2440,57 +2409,88 @@
               "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "id",
+              "default": "`mdc-input-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "fieldName": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "active",
+              "name": "help-text-type",
               "type": {
-                "text": "boolean"
+                "text": "ValidationType"
               },
-              "default": "false",
-              "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.",
-              "fieldName": "active",
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "soft-disabled",
+              "name": "help-text",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "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.",
-              "fieldName": "softDisabled",
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "NameMixin",
+              "module": "/src/utils/mixins/NameMixin"
             },
             {
-              "name": "type",
-              "type": {
-                "text": "ButtonType"
-              },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "fieldName": "type",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "name": "ValueMixin",
+              "module": "/src/utils/mixins/ValueMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
           ],
           "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.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
+          "tagName": "mdc-checkbox",
+          "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-checkbox\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-checkbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "slot to add the label info icon",
+              "name": "label-info",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -2498,8 +2498,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Button",
-            "module": "components/button/button.component.js"
+            "name": "Checkbox",
+            "module": "components/checkbox/checkbox.component.js"
           }
         }
       ]
@@ -2753,273 +2753,79 @@
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
-            },
-            {
-              "kind": "method",
-              "name": "getArrowIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
-            },
-            {
-              "kind": "method",
-              "name": "inferDividerType",
-              "privacy": "private",
-              "description": "Infers the type of divider based on the kind of slot present.",
-              "parameters": [
-                {
-                  "description": "default slot of divider",
-                  "name": "slot"
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "orientation",
-              "type": {
-                "text": "DividerOrientation"
-              },
-              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
-              "default": "horizontal",
-              "fieldName": "orientation"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "DividerVariant"
-              },
-              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
-              "default": "solid",
-              "fieldName": "variant"
-            },
-            {
-              "name": "arrow-direction",
-              "type": {
-                "text": "Directions"
-              },
-              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
-              "fieldName": "arrowDirection"
-            },
-            {
-              "name": "button-position",
-              "type": {
-                "text": "Directions"
-              },
-              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
-              "default": "'negative'",
-              "fieldName": "buttonPosition"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-divider",
-          "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n *  - **Primary**: A simple horizontal or vertical divider.\n *  - **Text**: A horizontal divider with a text label in the center.\n *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n *   - `aria-label` should be passed to the `mdc-button`.\n *   - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n *   the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Divider",
-            "module": "components/divider/divider.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/formfieldwrapper/formfieldwrapper.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
-          "name": "FormfieldWrapper",
-          "slots": [
-            {
-              "description": "slot to add the label info icon",
-              "name": "label-info"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "id",
-              "default": "`mdc-input-${uuidv4()}`",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "attribute": "id"
-            },
-            {
-              "kind": "field",
-              "name": "helpTextType",
-              "type": {
-                "text": "ValidationType"
-              },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "renderLabelElement",
-              "privacy": "protected",
-              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderHelpTextIcon",
-              "privacy": "protected",
-              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderHelpText",
-              "privacy": "protected",
-              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
-              "return": {
-                "type": {
-                  "text": ""
+                  "text": "void"
                 }
-              }
+              },
+              "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
             },
             {
               "kind": "method",
-              "name": "renderHelperText",
-              "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "name": "getArrowIcon",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": ""
                 }
-              }
+              },
+              "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
+              "kind": "method",
+              "name": "inferDividerType",
+              "privacy": "private",
+              "description": "Infers the type of divider based on the kind of slot present.",
+              "parameters": [
+                {
+                  "description": "default slot of divider",
+                  "name": "slot"
+                }
+              ]
             }
           ],
           "attributes": [
             {
-              "name": "label",
+              "name": "orientation",
               "type": {
-                "text": "string | undefined"
+                "text": "DividerOrientation"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "fieldName": "label"
-            },
-            {
-              "name": "id",
-              "default": "`mdc-input-${uuidv4()}`",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "fieldName": "id"
+              "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
+              "default": "horizontal",
+              "fieldName": "orientation"
             },
             {
-              "name": "help-text-type",
+              "name": "variant",
               "type": {
-                "text": "ValidationType"
+                "text": "DividerVariant"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType"
+              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
+              "default": "solid",
+              "fieldName": "variant"
             },
             {
-              "name": "help-text",
+              "name": "arrow-direction",
               "type": {
-                "text": "string | undefined"
+                "text": "Directions"
               },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText"
+              "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "fieldName": "arrowDirection"
             },
             {
-              "name": "disabled",
+              "name": "button-position",
               "type": {
-                "text": "boolean"
+                "text": "Directions"
               },
-              "default": "false",
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
+              "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
+              "default": "'negative'",
+              "fieldName": "buttonPosition"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-formfieldwrapper",
-          "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n *  that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @slot label-info - slot to add the label info icon\n *\n */",
+          "tagName": "mdc-divider",
+          "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n *  - **Primary**: A simple horizontal or vertical divider.\n *  - **Text**: A horizontal divider with a text label in the center.\n *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n *   - `aria-label` should be passed to the `mdc-button`.\n *   - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n *   the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
           "customElement": true
         }
       ],
@@ -3028,8 +2834,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FormfieldWrapper",
-            "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+            "name": "Divider",
+            "module": "components/divider/divider.component.js"
           }
         }
       ]
@@ -3172,77 +2978,271 @@
                   },
                   "description": "The icon html element which has been fetched from the icon provider."
                 }
-              ],
-              "description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
+              ],
+              "description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
+            },
+            {
+              "kind": "method",
+              "name": "handleIconLoadedFailure",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "unknown"
+                  }
+                }
+              ],
+              "description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
+            },
+            {
+              "kind": "method",
+              "name": "updateSize",
+              "privacy": "private",
+              "description": "Updates the size by setting the width and height"
+            },
+            {
+              "kind": "field",
+              "name": "computedIconSize",
+              "privacy": "private",
+              "readonly": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename)",
+              "fieldName": "name"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Size of the icon (works in combination with length unit)",
+              "fieldName": "size"
+            },
+            {
+              "name": "length-unit",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "fieldName": "lengthUnit"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-icon",
+          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Icon",
+            "module": "components/icon/icon.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/formfieldwrapper/formfieldwrapper.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
+          "name": "FormfieldWrapper",
+          "slots": [
+            {
+              "description": "slot to add the label info icon",
+              "name": "label-info"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "id",
+              "default": "`mdc-input-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id"
+            },
+            {
+              "kind": "field",
+              "name": "helpTextType",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "renderLabelElement",
+              "privacy": "protected",
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpTextIcon",
+              "privacy": "protected",
+              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpText",
+              "privacy": "protected",
+              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "handleIconLoadedFailure",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "error",
-                  "type": {
-                    "text": "unknown"
-                  }
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
+              }
             },
             {
               "kind": "method",
-              "name": "updateSize",
-              "privacy": "private",
-              "description": "Updates the size by setting the width and height"
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
               "kind": "field",
-              "name": "computedIconSize",
-              "privacy": "private",
-              "readonly": true
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "name",
+              "name": "label",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string | undefined"
               },
-              "description": "Name of the icon (= filename)",
-              "fieldName": "name"
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label"
             },
             {
-              "name": "size",
+              "name": "id",
+              "default": "`mdc-input-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "fieldName": "id"
+            },
+            {
+              "name": "help-text-type",
               "type": {
-                "text": "number | undefined"
+                "text": "ValidationType"
               },
-              "description": "Size of the icon (works in combination with length unit)",
-              "fieldName": "size"
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType"
             },
             {
-              "name": "length-unit",
+              "name": "help-text",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
-              "fieldName": "lengthUnit"
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText"
             },
             {
-              "name": "aria-label",
+              "name": "disabled",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-icon",
-          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n */",
+          "tagName": "mdc-formfieldwrapper",
+          "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n *  that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @slot label-info - slot to add the label info icon\n *\n */",
           "customElement": true
         }
       ],
@@ -3251,8 +3251,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Icon",
-            "module": "components/icon/icon.component.js"
+            "name": "FormfieldWrapper",
+            "module": "components/formfieldwrapper/formfieldwrapper.component.js"
           }
         }
       ]
@@ -6731,6 +6731,217 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/virtualizedlist/virtualizedlist.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-virtualizedlist` component for creating custom virtualized lists.\nIMPORTANT: This component does not create it's own list/list items.\nUse the setlistdata callback prop to update client state in order to\nPass list/listitems as a child of this component, which this will virtuailze\nThis implementation handles dynamic lists as well as fixed sized lists.\nPlease refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.",
+          "name": "VirtualizedList",
+          "slots": [
+            {
+              "description": "Client side List with nested list items.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "onscroll",
+              "type": {
+                "text": "((this: GlobalEventHandlers, ev: Event) => any) | null"
+              },
+              "description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
+              "default": "null",
+              "attribute": "onscroll"
+            },
+            {
+              "kind": "field",
+              "name": "virtualizerprops",
+              "type": {
+                "text": "VirtualizerProps"
+              },
+              "description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
+              "attribute": "virtualizerprops"
+            },
+            {
+              "kind": "field",
+              "name": "setlistdata",
+              "type": {
+                "text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
+              },
+              "description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
+              "default": "null",
+              "attribute": "setlistdata"
+            },
+            {
+              "kind": "field",
+              "name": "scrollElementRef",
+              "type": {
+                "text": "Ref<HTMLDivElement>"
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "virtualizer",
+              "type": {
+                "text": "Virtualizer<Element, Element> | null"
+              },
+              "privacy": "public",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "virtualizerController",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "onscroll",
+              "type": {
+                "text": "((this: GlobalEventHandlers, ev: Event) => any) | null"
+              },
+              "description": "Callback that gets called when user scrolls inside of list. This gives access to the scroll container element\nas well via the event. Particularly useful for\nhandling logic related when the user scrolls to the top or bottom of a list.",
+              "default": "null",
+              "fieldName": "onscroll"
+            },
+            {
+              "name": "virtualizerprops",
+              "type": {
+                "text": "VirtualizerProps"
+              },
+              "description": "Object that sets and updates the virtualizer with any relevant props.\nThere are two required object props in order to get virtualization to work properly.\ncount - The length of your list that you are virtualizing.\nAs your list grows/shrinks, this component must be updated with the appropriate value\n(Same with any other updated prop).\nestimateSize - A function that returns the estimated size of your items.\nIf your list is fixed, this will just be the size of your items.\nIf your list is dynamic, try to return approximate the size of each item.\n\nA full list of possible props can be in\n[Tanstack Virtualizer API Docs](https://tanstack.com/virtual/latest/docs/api/virtualizer)",
+              "fieldName": "virtualizerprops"
+            },
+            {
+              "name": "setlistdata",
+              "type": {
+                "text": "(({ virtualItems, measureElement, listStyle }: SetListDataProps) => void) | null"
+              },
+              "description": "Callback that gets envoked when updates to the virtualizer interally occur.\nThis must be implemented in such a way that this function will trigger update to parent.\n\nvirtualItems - Array that will be what the client displays on screen. Use this to render\na List of your choosing with these items nested inside as your ListItems.\nmeasureElement - Ref to pass to each ListItem rendered client side.\nEach ListItem should also be be passed key and a data-index (which can be found on the virtualItem).\nlistStyle - This should be passed as the style attribute to your List.",
+              "default": "null",
+              "fieldName": "setlistdata"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-virtualizedlist",
+          "jsDoc": "/**\n * `mdc-virtualizedlist` component for creating custom virtualized lists.\n * IMPORTANT: This component does not create it's own list/list items.\n * Use the setlistdata callback prop to update client state in order to\n * Pass list/listitems as a child of this component, which this will virtuailze\n * This implementation handles dynamic lists as well as fixed sized lists.\n * Please refer to [Tanstack Virtual Docs](https://tanstack.com/virtual/latest) for more in depth documentation.\n *\n * @tagname mdc-virtualizedlist\n *\n * @slot - Client side List with nested list items.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "VirtualizedList",
+            "module": "components/virtualizedlist/virtualizedlist.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/virtualizedlist/virtualizedlist.test.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "VirtualizedWrapper",
+          "members": [
+            {
+              "kind": "field",
+              "name": "onscroll",
+              "type": {
+                "text": "((this: GlobalEventHandlers, ev: Event) => any) | null"
+              },
+              "default": "null",
+              "attribute": "onscroll"
+            },
+            {
+              "kind": "field",
+              "name": "virtualizerprops",
+              "type": {
+                "text": "VirtualizerProps"
+              },
+              "default": "{ count: 100, estimateSize: () => 100 }",
+              "attribute": "virtualizerprops"
+            },
+            {
+              "kind": "field",
+              "name": "list",
+              "type": {
+                "text": "TemplateResult<1>"
+              },
+              "default": "html``"
+            },
+            {
+              "kind": "field",
+              "name": "listItemTexts"
+            },
+            {
+              "kind": "method",
+              "name": "updateListItemTextArray",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "setListData",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "{ virtualItems, measureElement, listStyle }",
+                  "type": {
+                    "text": "SetListDataProps"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "onscroll",
+              "type": {
+                "text": "((this: GlobalEventHandlers, ev: Event) => any) | null"
+              },
+              "default": "null",
+              "fieldName": "onscroll"
+            },
+            {
+              "name": "virtualizerprops",
+              "type": {
+                "text": "VirtualizerProps"
+              },
+              "default": "{ count: 100, estimateSize: () => 100 }",
+              "fieldName": "virtualizerprops"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "VirtualizedWrapper",
+            "module": "components/virtualizedlist/virtualizedlist.test.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/AvatarComponentMixin.js",