@momentum-design/components 0.112.2 → 0.112.3

package/dist/custom-elements.json

@@ -968,6 +968,218 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/animation/animation.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
+          "name": "Animation",
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "AnimationNames | undefined"
+              },
+              "description": "Name of the animation (= filename)",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "loop",
+              "type": {
+                "text": "LoopType | undefined"
+              },
+              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "attribute": "loop",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autoplay",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Weather start the animation automatically",
+              "attribute": "autoplay",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabelledBy",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "attribute": "aria-labelledby"
+            },
+            {
+              "kind": "field",
+              "name": "lottieInstance",
+              "type": {
+                "text": "AnimationItem | undefined"
+              },
+              "privacy": "private",
+              "description": "Lottie animation instance"
+            },
+            {
+              "kind": "field",
+              "name": "containerRef",
+              "type": {
+                "text": "Ref<HTMLDivElement>"
+              },
+              "privacy": "private",
+              "description": "Container for the animation"
+            },
+            {
+              "kind": "field",
+              "name": "animation",
+              "description": "Exposed API of the animation library (lottie)",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "getLoopValue",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onLoadSuccessHandler",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "animationData",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "description": "Create new lotty instance for the loaded data"
+            },
+            {
+              "kind": "method",
+              "name": "onLoadFailHandler",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "Error"
+                  }
+                }
+              ],
+              "description": "Error handler for animation loading"
+            },
+            {
+              "kind": "method",
+              "name": "getAnimationData",
+              "privacy": "private",
+              "description": "Import animation data dynamically"
+            },
+            {
+              "kind": "field",
+              "name": "onCompleteHandler",
+              "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
+            }
+          ],
+          "events": [
+            {
+              "name": "load",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onLoad) This event is dispatched when the animation is loaded",
+              "reactName": "onLoad"
+            },
+            {
+              "description": "(React: onComplete) This event is dispatched when all animation loops completed",
+              "name": "complete",
+              "reactName": "onComplete"
+            },
+            {
+              "description": "(React: onError) This event is dispatched when animation loading failed",
+              "name": "error",
+              "reactName": "onError"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "AnimationNames | undefined"
+              },
+              "description": "Name of the animation (= filename)",
+              "fieldName": "name"
+            },
+            {
+              "name": "loop",
+              "type": {
+                "text": "LoopType | undefined"
+              },
+              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "fieldName": "loop"
+            },
+            {
+              "name": "autoplay",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Weather start the animation automatically",
+              "fieldName": "autoplay"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "aria-labelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "fieldName": "ariaLabelledBy"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-animation",
+          "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Animation",
+            "module": "components/animation/animation.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/alertchip/alertchip.component.js",
@@ -1556,236 +1768,24 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/animation/animation.component.js",
+      "path": "components/appheader/appheader.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
-          "name": "Animation",
-          "members": [
+          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
+          "name": "Appheader",
+          "cssParts": [
             {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "AnimationNames | undefined"
-              },
-              "description": "Name of the animation (= filename)",
-              "attribute": "name",
-              "reflects": true
+              "description": "The main container for styling the header.",
+              "name": "container"
             },
             {
-              "kind": "field",
-              "name": "loop",
-              "type": {
-                "text": "LoopType | undefined"
-              },
-              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
-              "attribute": "loop",
-              "reflects": true
+              "description": "The leading section of the header.",
+              "name": "leading-section"
             },
             {
-              "kind": "field",
-              "name": "autoplay",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Weather start the animation automatically",
-              "attribute": "autoplay",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabelledBy",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "attribute": "aria-labelledby"
-            },
-            {
-              "kind": "field",
-              "name": "lottieInstance",
-              "type": {
-                "text": "AnimationItem | undefined"
-              },
-              "privacy": "private",
-              "description": "Lottie animation instance"
-            },
-            {
-              "kind": "field",
-              "name": "containerRef",
-              "type": {
-                "text": "Ref<HTMLDivElement>"
-              },
-              "privacy": "private",
-              "description": "Container for the animation"
-            },
-            {
-              "kind": "field",
-              "name": "animation",
-              "description": "Exposed API of the animation library (lottie)",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "getLoopValue",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "onLoadSuccessHandler",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "animationData",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ],
-              "description": "Create new lotty instance for the loaded data"
-            },
-            {
-              "kind": "method",
-              "name": "onLoadFailHandler",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "error",
-                  "type": {
-                    "text": "Error"
-                  }
-                }
-              ],
-              "description": "Error handler for animation loading"
-            },
-            {
-              "kind": "method",
-              "name": "getAnimationData",
-              "privacy": "private",
-              "description": "Import animation data dynamically"
-            },
-            {
-              "kind": "field",
-              "name": "onCompleteHandler",
-              "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
-            }
-          ],
-          "events": [
-            {
-              "name": "load",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onLoad) This event is dispatched when the animation is loaded",
-              "reactName": "onLoad"
-            },
-            {
-              "description": "(React: onComplete) This event is dispatched when all animation loops completed",
-              "name": "complete",
-              "reactName": "onComplete"
-            },
-            {
-              "description": "(React: onError) This event is dispatched when animation loading failed",
-              "name": "error",
-              "reactName": "onError"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "AnimationNames | undefined"
-              },
-              "description": "Name of the animation (= filename)",
-              "fieldName": "name"
-            },
-            {
-              "name": "loop",
-              "type": {
-                "text": "LoopType | undefined"
-              },
-              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
-              "fieldName": "loop"
-            },
-            {
-              "name": "autoplay",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Weather start the animation automatically",
-              "fieldName": "autoplay"
-            },
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            },
-            {
-              "name": "aria-labelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "fieldName": "ariaLabelledBy"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-animation",
-          "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Animation",
-            "module": "components/animation/animation.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/appheader/appheader.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
-          "name": "Appheader",
-          "cssParts": [
-            {
-              "description": "The main container for styling the header.",
-              "name": "container"
-            },
-            {
-              "description": "The leading section of the header.",
-              "name": "leading-section"
-            },
-            {
-              "description": "The center section of the header.",
-              "name": "center-section"
+              "description": "The center section of the header.",
+              "name": "center-section"
             },
             {
               "description": "The trailing section of the header.",
@@ -2095,218 +2095,156 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/badge/badge.component.js",
+      "path": "components/avatarbutton/avatarbutton.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
-          "name": "Badge",
+          "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.\n\nTo override styles of the avatar inside, use the specified css parts.",
+          "name": "AvatarButton",
           "cssProperties": [
             {
-              "description": "The foreground color of the primary badge.",
-              "name": "--mdc-badge-primary-foreground-color"
-            },
-            {
-              "description": "The background color of the primary badge.",
-              "name": "--mdc-badge-primary-background-color"
-            },
-            {
-              "description": "The foreground color of the secondary badge.",
-              "name": "--mdc-badge-secondary-foreground-color"
+              "description": "Background color of the overlay in rest state",
+              "name": "--mdc-avatarbutton-overlay-background-color-rest"
             },
             {
-              "description": "The background color of the secondary badge.",
-              "name": "--mdc-badge-secondary-background-color"
+              "description": "Background color of the overlay in hover state",
+              "name": "--mdc-avatarbutton-overlay-background-color-hover"
             },
             {
-              "description": "The foreground color of the success badge.",
-              "name": "--mdc-badge-success-foreground-color"
-            },
+              "description": "Background color of the overlay in active state",
+              "name": "--mdc-avatarbutton-overlay-background-color-active"
+            }
+          ],
+          "cssParts": [
             {
-              "description": "The background color of the success badge.",
-              "name": "--mdc-badge-success-background-color"
+              "description": "The overlay part of the avatar button.",
+              "name": "overlay"
             },
             {
-              "description": "The foreground color of the warning badge.",
-              "name": "--mdc-badge-warning-foreground-color"
+              "description": "The main content of the avatar.",
+              "name": "content"
             },
             {
-              "description": "The background color of the warning badge.",
-              "name": "--mdc-badge-warning-background-color"
+              "description": "The photo part of the avatar.",
+              "name": "photo"
             },
             {
-              "description": "The foreground color of the error badge.",
-              "name": "--mdc-badge-error-foreground-color"
+              "description": "The presence indicator part of the avatar.",
+              "name": "presence"
             },
             {
-              "description": "The background color of the error badge.",
-              "name": "--mdc-badge-error-background-color"
+              "description": "The wrapper for the loading indicator of the avatar.",
+              "name": "loading-wrapper"
             },
             {
-              "description": "The background color of the badge overlay.",
-              "name": "--mdc-badge-overlay-background-color"
+              "description": "The loading indicator part of the avatar.",
+              "name": "loader"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "type",
+              "name": "ariaLabel",
               "type": {
-                "text": "BadgeType | undefined"
+                "text": "string | null"
               },
-              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
-              "attribute": "type",
-              "reflects": true
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
             },
             {
-              "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": "method",
+              "name": "setSize",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "AvatarSize"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "counter",
+              "name": "src",
               "type": {
-                "text": "number | undefined"
+                "text": "string | undefined"
               },
-              "description": "Counter is the number which can be provided in the badge.",
-              "attribute": "counter"
+              "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": "maxCounter",
+              "name": "initials",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
-              "default": "99",
-              "attribute": "max-counter",
-              "reflects": true
+              "description": "The initials to be displayed for the avatar.",
+              "attribute": "initials",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "overlay",
+              "name": "presence",
               "type": {
-                "text": "boolean"
+                "text": "PresenceType | 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 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": "ariaLabel",
+              "name": "size",
               "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": ""
-                }
+                "text": "ButtonSize"
               },
-              "description": "Method to generate the badge text and counter template."
+              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "setRoleByAriaLabel",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
               },
-              "description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
+              "description": "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": "method",
-              "name": "getBadgeContentBasedOnType",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "isTyping",
+              "type": {
+                "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",
@@ -2320,858 +2258,876 @@
                 "name": "IconNameMixin",
                 "module": "utils/mixins/IconNameMixin.js"
               }
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "type",
+              "kind": "field",
+              "name": "autoFocusOnMount",
               "type": {
-                "text": "BadgeType | undefined"
+                "text": "boolean"
               },
-              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
-              "fieldName": "type"
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "attribute": "auto-focus-on-mount",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AutoFocusOnMountMixin",
+                "module": "utils/mixins/AutoFocusOnMountMixin.js"
+              }
             },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "tabIndex",
               "type": {
-                "text": "IconVariant"
+                "text": "number"
               },
-              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
-              "default": "primary",
-              "fieldName": "variant"
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
             },
             {
-              "name": "counter",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "Counter is the number which can be provided in the badge.",
-              "fieldName": "counter"
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
             },
             {
-              "name": "max-counter",
+              "kind": "field",
+              "name": "active",
               "type": {
-                "text": "number"
+                "text": "boolean | undefined"
               },
-              "description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
-              "default": "99",
-              "fieldName": "maxCounter"
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "attribute": "active",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "name": "overlay",
+              "kind": "field",
+              "name": "softDisabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
-              "fieldName": "overlay"
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "name": "aria-label",
+              "kind": "field",
+              "name": "role",
               "type": {
-                "text": "string | null"
+                "text": "RoleType"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "attribute": "role",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "name": "icon-name",
+              "kind": "field",
+              "name": "ariaStateKey",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string | undefined"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "attribute": "ariaStateKey",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-badge",
-          "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Badge",
-            "module": "components/badge/badge.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/brandvisual/brandvisual.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
-          "name": "Brandvisual",
-          "members": [
+            },
             {
               "kind": "field",
-              "name": "brandVisualData",
+              "name": "type",
               "type": {
-                "text": "Element | TemplateResult | undefined"
+                "text": "ButtonType"
               },
-              "privacy": "private"
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "attribute": "type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
               "name": "name",
               "type": {
-                "text": "BrandVisualNames | undefined"
+                "text": "string | undefined"
               },
-              "description": "Name of the brandVisual (= filename)",
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
               "attribute": "name",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "altText",
+              "name": "value",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
-              "attribute": "altText",
-              "reflects": true
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "getBrandVisualData",
-              "privacy": "private"
+              "name": "executeAction",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "injectTemplateAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Element | TemplateResult"
-                }
-              },
+              "name": "setActive",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "litTemplate",
+                  "name": "element",
                   "type": {
-                    "text": "TemplateResult"
-                  }
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element"
                 },
                 {
-                  "name": "tag",
+                  "name": "active",
+                  "optional": true,
                   "type": {
-                    "text": "string"
-                  }
+                    "text": "boolean"
+                  },
+                  "description": "The active state of the element"
+                }
+              ],
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
                 },
                 {
-                  "name": "props",
+                  "name": "softDisabled",
+                  "optional": true,
                   "type": {
-                    "text": "any"
-                  }
+                    "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": "injectHtmlAttributes",
+              "name": "setDisabled",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Element"
-                }
-              },
               "parameters": [
                 {
-                  "name": "html",
+                  "name": "element",
                   "type": {
-                    "text": "Element"
-                  }
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
                 },
                 {
-                  "name": "props",
+                  "name": "disabled",
                   "type": {
-                    "text": "imageProps"
-                  }
+                    "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": "handleBrandVisualLoadedSuccess",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "brandVisualHtml",
+                  "name": "event",
                   "type": {
-                    "text": "TemplateResult"
+                    "text": "KeyboardEvent"
                   },
-                  "description": "The brandvisual html element which has been fetched from the brandvisual provider."
+                  "description": "The keyboard event."
                 }
               ],
-              "description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
+              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "handleBrandVisualLoadedFailure",
+              "name": "handleKeyUp",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "error",
+                  "name": "event",
                   "type": {
-                    "text": "unknown"
-                  }
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
                 }
               ],
-              "description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
+              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             }
           ],
           "events": [
             {
-              "description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
-              "name": "load",
-              "reactName": "onLoad"
-            },
-            {
-              "description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
-              "name": "error",
-              "reactName": "onError"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "BrandVisualNames | undefined"
-              },
-              "description": "Name of the brandVisual (= filename)",
-              "fieldName": "name"
-            },
-            {
-              "name": "altText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
-              "fieldName": "altText"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-brandvisual",
-          "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Brandvisual",
-            "module": "components/brandvisual/brandvisual.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/avatarbutton/avatarbutton.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.\n\nTo override styles of the avatar inside, use the specified css parts.",
-          "name": "AvatarButton",
-          "cssProperties": [
-            {
-              "description": "Background color of the overlay in rest state",
-              "name": "--mdc-avatarbutton-overlay-background-color-rest"
-            },
-            {
-              "description": "Background color of the overlay in hover state",
-              "name": "--mdc-avatarbutton-overlay-background-color-hover"
-            },
-            {
-              "description": "Background color of the overlay in active state",
-              "name": "--mdc-avatarbutton-overlay-background-color-active"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The overlay part of the avatar button.",
-              "name": "overlay"
-            },
-            {
-              "description": "The main content of the avatar.",
-              "name": "content"
-            },
-            {
-              "description": "The photo part of the avatar.",
-              "name": "photo"
+              "description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
+              "name": "click",
+              "reactName": "onClick",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "The presence indicator part of the avatar.",
-              "name": "presence"
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "The wrapper for the loading indicator of the avatar.",
-              "name": "loading-wrapper"
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "The loading indicator part of the avatar.",
-              "name": "loader"
+              "description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
-          "members": [
+          "attributes": [
             {
-              "kind": "field",
-              "name": "ariaLabel",
+              "name": "aria-label",
               "type": {
                 "text": "string | null"
               },
               "default": "null",
               "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "method",
-              "name": "setSize",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "size",
-                  "type": {
-                    "text": "AvatarSize"
-                  }
-                }
-              ]
+              "fieldName": "ariaLabel"
             },
             {
-              "kind": "field",
               "name": "src",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
-              "attribute": "src",
+              "fieldName": "src",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "initials",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The initials to be displayed for the avatar.",
-              "attribute": "initials",
+              "fieldName": "initials",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "presence",
               "type": {
                 "text": "PresenceType | undefined"
               },
               "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "attribute": "presence",
+              "fieldName": "presence",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "size",
               "type": {
                 "text": "ButtonSize"
               },
               "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
               "default": "32",
-              "attribute": "size",
-              "reflects": true,
+              "fieldName": "size",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "counter",
               "type": {
                 "text": "number | undefined"
               },
               "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "attribute": "counter",
+              "fieldName": "counter",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "isTyping",
+              "name": "is-typing",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "Represents the typing indicator when the user is typing.",
-              "attribute": "is-typing",
+              "fieldName": "isTyping",
               "inheritedFrom": {
                 "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "iconName",
+              "name": "icon-name",
               "type": {
                 "text": "IconNames | undefined"
               },
               "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
+              "fieldName": "iconName",
               "inheritedFrom": {
                 "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
+                "module": "src/utils/mixins/IconNameMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "autoFocusOnMount",
+              "name": "auto-focus-on-mount",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "attribute": "auto-focus-on-mount",
-              "reflects": true,
+              "fieldName": "autoFocusOnMount",
               "inheritedFrom": {
                 "name": "AutoFocusOnMountMixin",
-                "module": "utils/mixins/AutoFocusOnMountMixin.js"
+                "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "tabIndex",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
+              "fieldName": "tabIndex",
               "inheritedFrom": {
                 "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
+              "fieldName": "disabled",
               "inheritedFrom": {
                 "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "active",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
               "default": "undefined",
-              "attribute": "active",
-              "reflects": true,
+              "fieldName": "active",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "softDisabled",
+              "name": "soft-disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
               "default": "undefined",
-              "attribute": "soft-disabled",
-              "reflects": true,
+              "fieldName": "softDisabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "role",
               "type": {
                 "text": "RoleType"
               },
               "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
               "default": "button",
-              "attribute": "role",
-              "reflects": true,
+              "fieldName": "role",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "ariaStateKey",
               "type": {
                 "text": "string | undefined"
               },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
               "default": "'aria-pressed' (when)",
-              "attribute": "ariaStateKey",
-              "reflects": true,
+              "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "type",
               "type": {
                 "text": "ButtonType"
               },
               "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
               "default": "button",
-              "attribute": "type",
-              "reflects": true,
+              "fieldName": "type",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
-              "attribute": "name",
-              "reflects": true,
+              "fieldName": "name",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
-              "attribute": "value",
-              "reflects": true,
+              "fieldName": "value",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
-            },
+            }
+          ],
+          "mixins": [
             {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "name": "AvatarComponentMixin",
+              "module": "/src/utils/mixins/AvatarComponentMixin"
             },
             {
-              "kind": "method",
-              "name": "setActive",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element"
-                },
-                {
-                  "name": "active",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state of the element"
-                }
-              ],
-              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.component"
+          },
+          "tagName": "mdc-avatarbutton",
+          "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * To override styles of the avatar inside, use the specified css parts.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state\n *\n * @csspart overlay - The overlay part of the avatar button.\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo part of the avatar.\n * @csspart presence - The presence indicator part of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.\n * @csspart loader - The loading indicator part of the avatar.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AvatarButton",
+            "module": "components/avatarbutton/avatarbutton.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/badge/badge.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
+          "name": "Badge",
+          "cssProperties": [
+            {
+              "description": "The foreground color of the primary badge.",
+              "name": "--mdc-badge-primary-foreground-color"
+            },
+            {
+              "description": "The background color of the primary badge.",
+              "name": "--mdc-badge-primary-background-color"
+            },
+            {
+              "description": "The foreground color of the secondary badge.",
+              "name": "--mdc-badge-secondary-foreground-color"
+            },
+            {
+              "description": "The background color of the secondary badge.",
+              "name": "--mdc-badge-secondary-background-color"
+            },
+            {
+              "description": "The foreground color of the success badge.",
+              "name": "--mdc-badge-success-foreground-color"
+            },
+            {
+              "description": "The background color of the success badge.",
+              "name": "--mdc-badge-success-background-color"
+            },
+            {
+              "description": "The foreground color of the warning badge.",
+              "name": "--mdc-badge-warning-foreground-color"
+            },
+            {
+              "description": "The background color of the warning badge.",
+              "name": "--mdc-badge-warning-background-color"
+            },
+            {
+              "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": "setSoftDisabled",
+              "name": "getCounterText",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "maxCounter",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "number"
                   },
-                  "description": "The button element."
+                  "description": "the maximum limit which can be displayed on the badge"
                 },
                 {
-                  "name": "softDisabled",
+                  "name": "counter",
                   "optional": true,
                   "type": {
-                    "text": "boolean"
+                    "text": "number"
                   },
-                  "description": "The soft-disabled state."
+                  "description": "the number to be displayed on the badge"
                 }
               ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
             },
             {
               "kind": "method",
-              "name": "setDisabled",
+              "name": "getBadgeIcon",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "iconName",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "string"
                   },
-                  "description": "The button element."
+                  "description": "the name of the icon from the icon set"
                 },
                 {
-                  "name": "disabled",
+                  "name": "backgroundClassPostfix",
                   "type": {
-                    "text": "boolean"
+                    "text": "string"
                   },
-                  "description": "The disabled state."
+                  "description": "postfix for the class to style the badge icon."
                 }
               ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Method to generate the badge icon."
             },
             {
               "kind": "method",
-              "name": "triggerClickEvent",
+              "name": "getBadgeDot",
               "privacy": "private",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Method to generate the badge dot template."
             },
             {
               "kind": "method",
-              "name": "handleBlur",
+              "name": "getBadgeCounterText",
               "privacy": "private",
-              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Method to generate the badge text and counter template."
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
+              "name": "setRoleByAriaLabel",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+              "return": {
+                "type": {
+                  "text": "void"
                 }
-              ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              },
+              "description": "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": "handleKeyUp",
+              "name": "getBadgeContentBasedOnType",
               "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
-              "name": "click",
-              "reactName": "onClick",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              },
+              "description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
+              "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": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
               }
             }
           ],
           "attributes": [
             {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            },
-            {
-              "name": "src",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "BadgeType | 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"
-              }
+              "description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
+              "fieldName": "type"
             },
             {
-              "name": "initials",
+              "name": "variant",
               "type": {
-                "text": "string | undefined"
+                "text": "IconVariant"
               },
-              "description": "The initials to be displayed for the avatar.",
-              "fieldName": "initials",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
+              "description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
+              "default": "primary",
+              "fieldName": "variant"
             },
             {
-              "name": "presence",
+              "name": "counter",
               "type": {
-                "text": "PresenceType | undefined"
+                "text": "number | undefined"
               },
-              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "fieldName": "presence",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
+              "description": "Counter is the number which can be provided in the badge.",
+              "fieldName": "counter"
             },
             {
-              "name": "size",
+              "name": "max-counter",
               "type": {
-                "text": "ButtonSize"
+                "text": "number"
               },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "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": "counter",
+              "name": "overlay",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean"
               },
-              "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"
-              }
+              "default": "false",
+              "description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
+              "fieldName": "overlay"
             },
             {
-              "name": "is-typing",
+              "name": "aria-label",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "fieldName": "isTyping",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
             },
             {
               "name": "icon-name",
@@ -3184,152 +3140,196 @@
                 "name": "IconNameMixin",
                 "module": "src/utils/mixins/IconNameMixin.ts"
               }
-            },
+            }
+          ],
+          "mixins": [
             {
-              "name": "auto-focus-on-mount",
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-badge",
+          "jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Badge",
+            "module": "components/badge/badge.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/brandvisual/brandvisual.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\ndisplayed correctly within applications.\n\nFeatures:\n- Dynamically loads brandvisuals based on the `name` attribute.\n- Emits a `load` event when the brandvisual is successfully fetched.\n- Emits an `error` event when the brandvisual import fails.\n- Supports accessibility best practices.\n- Used for brand representation within the design system.",
+          "name": "Brandvisual",
+          "members": [
+            {
+              "kind": "field",
+              "name": "brandVisualData",
               "type": {
-                "text": "boolean"
+                "text": "Element | TemplateResult | undefined"
               },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "fieldName": "autoFocusOnMount",
-              "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
-              }
+              "privacy": "private"
             },
             {
-              "name": "tabIndex",
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "number"
+                "text": "BrandVisualNames | undefined"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
-              }
+              "description": "Name of the brandVisual (= filename)",
+              "attribute": "name",
+              "reflects": true
             },
             {
-              "name": "disabled",
+              "kind": "field",
+              "name": "altText",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
+              "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
+              "attribute": "altText",
+              "reflects": true
             },
             {
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "fieldName": "active",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "kind": "method",
+              "name": "getBrandVisualData",
+              "privacy": "private"
             },
             {
-              "name": "soft-disabled",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "injectTemplateAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Element | TemplateResult"
+                }
               },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "fieldName": "softDisabled",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "parameters": [
+                {
+                  "name": "litTemplate",
+                  "type": {
+                    "text": "TemplateResult"
+                  }
+                },
+                {
+                  "name": "tag",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "props",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
             },
             {
-              "name": "role",
-              "type": {
-                "text": "RoleType"
+              "kind": "method",
+              "name": "injectHtmlAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Element"
+                }
               },
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "fieldName": "role",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "parameters": [
+                {
+                  "name": "html",
+                  "type": {
+                    "text": "Element"
+                  }
+                },
+                {
+                  "name": "props",
+                  "type": {
+                    "text": "imageProps"
+                  }
+                }
+              ]
             },
             {
-              "name": "ariaStateKey",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "fieldName": "ariaStateKey",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "kind": "method",
+              "name": "handleBrandVisualLoadedSuccess",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "brandVisualHtml",
+                  "type": {
+                    "text": "TemplateResult"
+                  },
+                  "description": "The brandvisual html element which has been fetched from the brandvisual provider."
+                }
+              ],
+              "description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
             },
             {
-              "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"
-              }
+              "kind": "method",
+              "name": "handleBrandVisualLoadedFailure",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "unknown"
+                  }
+                }
+              ],
+              "description": "Dispatches an 'error' event on the component when the brandvisual import has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.",
+              "name": "load",
+              "reactName": "onLoad"
             },
+            {
+              "description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
+              "name": "error",
+              "reactName": "onError"
+            }
+          ],
+          "attributes": [
             {
               "name": "name",
               "type": {
-                "text": "string | undefined"
+                "text": "BrandVisualNames | undefined"
               },
-              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Name of the brandVisual (= filename)",
+              "fieldName": "name"
             },
             {
-              "name": "value",
+              "name": "altText",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "AvatarComponentMixin",
-              "module": "/src/utils/mixins/AvatarComponentMixin"
-            },
-            {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
+              "description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
+              "fieldName": "altText"
             }
           ],
           "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
+            "name": "Component",
+            "module": "/src/models"
           },
-          "tagName": "mdc-avatarbutton",
-          "jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * To override styles of the avatar inside, use the specified css parts.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state\n *\n * @csspart overlay - The overlay part of the avatar button.\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo part of the avatar.\n * @csspart presence - The presence indicator part of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.\n * @csspart loader - The loading indicator part of the avatar.\n */",
+          "tagName": "mdc-brandvisual",
+          "jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
           "customElement": true
         }
       ],
@@ -3338,8 +3338,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "AvatarButton",
-            "module": "components/avatarbutton/avatarbutton.component.js"
+            "name": "Brandvisual",
+            "module": "components/brandvisual/brandvisual.component.js"
           }
         }
       ]
@@ -12581,354 +12581,108 @@
               "name": "aria-description",
               "type": {
                 "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value for the aria-description attribute that refers to the element\ndescribing the dialog for accessibility",
-              "fieldName": "ariaDescription"
-            },
-            {
-              "name": "header-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Defines a string value to display as the title of the dialog",
-              "fieldName": "headerText"
-            },
-            {
-              "name": "description-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Defines a string value to display as the under-header description of the dialog",
-              "fieldName": "descriptionText"
-            },
-            {
-              "name": "header-tag-name",
-              "type": {
-                "text": "string"
-              },
-              "description": "The html tag to be used for the header text",
-              "fieldName": "headerTagName"
-            },
-            {
-              "name": "description-tag-name",
-              "type": {
-                "text": "string"
-              },
-              "description": "The html tag to be used for the below-header description text",
-              "fieldName": "descriptionTagName"
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "DialogRole"
-              },
-              "description": "Role of the dialog",
-              "default": "dialog",
-              "fieldName": "role"
-            },
-            {
-              "name": "disable-aria-haspopup",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
-              "default": "false",
-              "fieldName": "disableAriaHasPopup"
-            },
-            {
-              "name": "focus-trap",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
-              "default": "true",
-              "fieldName": "focusTrap"
-            },
-            {
-              "name": "should-focus-trap-wrap",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
-              "fieldName": "shouldFocusTrapWrap",
-              "inheritedFrom": {
-                "name": "FocusTrapMixin",
-                "module": "src/utils/mixins/FocusTrapMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "BackdropMixin",
-              "module": "/src/utils/mixins/BackdropMixin"
-            },
-            {
-              "name": "PreventScrollMixin",
-              "module": "/src/utils/mixins/PreventScrollMixin"
-            },
-            {
-              "name": "FocusTrapMixin",
-              "module": "/src/utils/mixins/FocusTrapMixin"
-            },
-            {
-              "name": "FooterMixin",
-              "module": "/src/utils/mixins/FooterMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-dialog",
-          "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Dialog",
-            "module": "components/dialog/dialog.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/divider/divider.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt 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.",
-          "name": "Divider",
-          "cssProperties": [
-            {
-              "description": "background color of the divider",
-              "name": "--mdc-divider-background-color"
-            },
-            {
-              "description": "width of the divider",
-              "name": "--mdc-divider-width"
-            },
-            {
-              "description": "gradient of the horizontal divider",
-              "name": "--mdc-divider-horizontal-gradient"
-            },
-            {
-              "description": "gradient of the vertical divider",
-              "name": "--mdc-divider-vertical-gradient"
-            },
-            {
-              "description": "font size of label in the text divider",
-              "name": "--mdc-divider-text-size"
-            },
-            {
-              "description": "font color of label in the text divider",
-              "name": "--mdc-divider-text-color"
-            },
-            {
-              "description": "left and right margin of label in the text divider",
-              "name": "--mdc-divider-text-margin"
-            },
-            {
-              "description": "line height of label in the text divider",
-              "name": "--mdc-divider-text-line-height"
-            },
-            {
-              "description": "background color of the grabber button in rest state",
-              "name": "--mdc-divider-grabber-button-background-color-normal"
-            },
-            {
-              "description": "background color of the grabber button in hover state",
-              "name": "--mdc-divider-grabber-button-background-color-hover"
-            },
-            {
-              "description": "background color of the grabber button in pressed state",
-              "name": "--mdc-divider-grabber-button-background-color-pressed"
-            },
-            {
-              "description": "border color of the grabber button",
-              "name": "--mdc-divider-grabber-button-border-color"
-            },
-            {
-              "description": "border radius of the grabber button",
-              "name": "--mdc-divider-grabber-button-border-radius"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "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",
-              "attribute": "orientation",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "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",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "arrowDirection",
-              "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'",
-              "attribute": "arrow-direction",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "buttonPosition",
-              "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'",
-              "attribute": "button-position",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "setVariant",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "variant",
-                  "type": {
-                    "text": "DividerVariant"
-                  },
-                  "description": "The variant to set."
-                }
-              ],
-              "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
-            },
-            {
-              "kind": "method",
-              "name": "setOrientation",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "orientation",
-                  "type": {
-                    "text": "DividerOrientation"
-                  },
-                  "description": "The orientation to set."
-                }
-              ],
-              "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
+              },
+              "default": "null",
+              "description": "Defines a string value for the aria-description attribute that refers to the element\ndescribing the dialog for accessibility",
+              "fieldName": "ariaDescription"
             },
             {
-              "kind": "method",
-              "name": "ensureValidDirections",
-              "privacy": "private",
-              "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
-              "parameters": [
-                {
-                  "description": "The buttonPosition to set.",
-                  "name": "buttonPosition"
-                },
-                {
-                  "description": "The arrowDirection to set.",
-                  "name": "arrowDirection"
-                }
-              ]
+              "name": "header-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines a string value to display as the title of the dialog",
+              "fieldName": "headerText"
             },
             {
-              "kind": "method",
-              "name": "setGrabberButton",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "description-text",
+              "type": {
+                "text": "string | undefined"
               },
-              "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."
+              "description": "Defines a string value to display as the under-header description of the dialog",
+              "fieldName": "descriptionText"
             },
             {
-              "kind": "method",
-              "name": "getArrowIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "header-tag-name",
+              "type": {
+                "text": "string"
               },
-              "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
+              "description": "The html tag to be used for the header text",
+              "fieldName": "headerTagName"
             },
             {
-              "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": "description-tag-name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The html tag to be used for the below-header description text",
+              "fieldName": "descriptionTagName"
+            },
             {
-              "name": "orientation",
+              "name": "role",
               "type": {
-                "text": "DividerOrientation"
+                "text": "DialogRole"
               },
-              "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"
+              "description": "Role of the dialog",
+              "default": "dialog",
+              "fieldName": "role"
             },
             {
-              "name": "variant",
+              "name": "disable-aria-haspopup",
               "type": {
-                "text": "DividerVariant"
+                "text": "boolean"
               },
-              "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"
+              "description": "Disable setting the aria-haspopup attribute on trigger element.\nMake sure to set this to true when the popover is extended and its role\nis not 'dialog' or 'alertdialog' i.e. listbox, menu, etc.",
+              "default": "false",
+              "fieldName": "disableAriaHasPopup"
             },
             {
-              "name": "arrow-direction",
+              "name": "focus-trap",
               "type": {
-                "text": "Directions"
+                "text": "boolean"
               },
-              "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"
+              "description": "Determines whether the focus trap is enabled.\nIf true, focus will be restricted to the content within this component.\n\nNOTE: this should only be disabled in rare cases! By default a Modal Dialog\nshould trap focus always.",
+              "default": "true",
+              "fieldName": "focusTrap"
             },
             {
-              "name": "button-position",
+              "name": "should-focus-trap-wrap",
               "type": {
-                "text": "Directions"
+                "text": "boolean"
               },
-              "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"
+              "default": "true",
+              "description": "Determines whether focus should wrap around when reaching the first or last focusable element.\nIf true, focus will cycle from end to start and vice versa.\n\nThis only applies when `focusTrap` is true.",
+              "fieldName": "shouldFocusTrapWrap",
+              "inheritedFrom": {
+                "name": "FocusTrapMixin",
+                "module": "src/utils/mixins/FocusTrapMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "BackdropMixin",
+              "module": "/src/utils/mixins/BackdropMixin"
+            },
+            {
+              "name": "PreventScrollMixin",
+              "module": "/src/utils/mixins/PreventScrollMixin"
+            },
+            {
+              "name": "FocusTrapMixin",
+              "module": "/src/utils/mixins/FocusTrapMixin"
+            },
+            {
+              "name": "FooterMixin",
+              "module": "/src/utils/mixins/FooterMixin"
             }
           ],
           "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-background-color-normal - background color of the grabber button\n *  in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n *  in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n *  in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
+          "tagName": "mdc-dialog",
+          "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * The dialog is a controlled component, meaning it does not have its own state management for visibility.\n * Use the `visible` property to control the visibility of the dialog.\n * Use the `onClose` event to handle the close action of the dialog (fired when Close button is clicked\n * or Escape is pressed).\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n * @event close - (React: onClose) Dispatched when the Close Button is clicked or Escape key is pressed\n * (this does not hide the dialog)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
           "customElement": true
         }
       ],
@@ -12937,360 +12691,245 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Divider",
-            "module": "components/divider/divider.component.js"
+            "name": "Dialog",
+            "module": "components/dialog/dialog.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/formfieldgroup/formfieldgroup.component.js",
+      "path": "components/divider/divider.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-formfieldgroup` component, groups the form field components together.\nAll passed in children will have a gap of 12px (0.75rem) each applied.\n\nThis component is specifically for creating a `checkbox` group and a `toggle` group component.\nFor the radiogroup use the RadioGroup component instead.\n\nThe header text and description text are displayed above the items with accessible labels.<br/>\nThe consumer has to provide atleast the header-text or the aria-label,\nlike one of them <b>has</b> to be passed in always, otherwise its not accessible.\n\nThe role will be set to `group`.\nThe aria-label will be set with the data-aria-label property.\nThe aria-labelledby will be set with the header id which contains the header text information.\nThe aria-describedby will be set with the description id which contains the description text information.",
-          "name": "FormfieldGroup",
-          "slots": [
+          "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt 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.",
+          "name": "Divider",
+          "cssProperties": [
             {
-              "description": "This is a default slot for checkbox or toggle components.",
-              "name": "default"
-            }
-          ],
-          "members": [
+              "description": "background color of the divider",
+              "name": "--mdc-divider-background-color"
+            },
             {
-              "kind": "field",
-              "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"
-              }
+              "description": "width of the divider",
+              "name": "--mdc-divider-width"
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
+              "description": "gradient of the horizontal divider",
+              "name": "--mdc-divider-horizontal-gradient"
             },
             {
-              "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,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "gradient of the vertical divider",
+              "name": "--mdc-divider-vertical-gradient"
             },
             {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "attribute": "required",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "font size of label in the text divider",
+              "name": "--mdc-divider-text-size"
             },
             {
-              "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,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "font color of label in the text divider",
+              "name": "--mdc-divider-text-color"
+            },
+            {
+              "description": "left and right margin of label in the text divider",
+              "name": "--mdc-divider-text-margin"
+            },
+            {
+              "description": "line height of label in the text divider",
+              "name": "--mdc-divider-text-line-height"
+            },
+            {
+              "description": "background color of the grabber button in rest state",
+              "name": "--mdc-divider-grabber-button-background-color-normal"
+            },
+            {
+              "description": "background color of the grabber button in hover state",
+              "name": "--mdc-divider-grabber-button-background-color-hover"
+            },
+            {
+              "description": "background color of the grabber button in pressed state",
+              "name": "--mdc-divider-grabber-button-background-color-pressed"
+            },
+            {
+              "description": "border color of the grabber button",
+              "name": "--mdc-divider-grabber-button-border-color"
             },
+            {
+              "description": "border radius of the grabber button",
+              "name": "--mdc-divider-grabber-button-border-radius"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "orientation",
               "type": {
-                "text": "string | undefined"
+                "text": "DividerOrientation"
               },
-              "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": "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",
+              "attribute": "orientation",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "toggletipText",
+              "name": "variant",
               "type": {
-                "text": "string | undefined"
+                "text": "DividerVariant"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "attribute": "toggletip-text",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
+              "default": "solid",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "toggletipPlacement",
+              "name": "arrowDirection",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "Directions"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "attribute": "toggletip-placement",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "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'",
+              "attribute": "arrow-direction",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "infoIconAriaLabel",
+              "name": "buttonPosition",
               "type": {
-                "text": "string | undefined"
+                "text": "Directions"
               },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "attribute": "info-icon-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "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'",
+              "attribute": "button-position",
+              "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": ""
+              "name": "setVariant",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "DividerVariant"
+                  },
+                  "description": "The variant to set."
                 }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              ],
+              "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
             },
             {
               "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": ""
+              "name": "setOrientation",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "orientation",
+                  "type": {
+                    "text": "DividerOrientation"
+                  },
+                  "description": "The orientation to set."
                 }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              ],
+              "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
             },
             {
               "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": ""
+              "name": "ensureValidDirections",
+              "privacy": "private",
+              "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
+              "parameters": [
+                {
+                  "description": "The buttonPosition to set.",
+                  "name": "buttonPosition"
+                },
+                {
+                  "description": "The arrowDirection to set.",
+                  "name": "arrowDirection"
                 }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              ]
             },
             {
               "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "name": "setGrabberButton",
+              "privacy": "private",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
               },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "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": ""
                 }
               },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            }
-          ],
-          "mixins": [
+              "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
+            },
             {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
+              "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"
+                }
+              ]
             }
           ],
-          "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
-          },
-          "tagName": "mdc-formfieldgroup",
-          "jsDoc": "/**\n * `mdc-formfieldgroup` component, groups the form field components together.\n * All passed in children will have a gap of 12px (0.75rem) each applied.\n *\n * This component is specifically for creating a `checkbox` group and a `toggle` group component.\n * For the radiogroup use the RadioGroup component instead.\n *\n * The header text and description text are displayed above the items with accessible labels.<br/>\n * The consumer has to provide atleast the header-text or the aria-label,\n * like one of them <b>has</b> to be passed in always, otherwise its not accessible.\n *\n * The role will be set to `group`.\n * The aria-label will be set with the data-aria-label property.\n * The aria-labelledby will be set with the header id which contains the header text information.\n * The aria-describedby will be set with the description id which contains the description text information.\n *\n * @tagname mdc-formfieldgroup\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot default - This is a default slot for checkbox or toggle components.\n */",
-          "customElement": true,
           "attributes": [
             {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            },
-            {
-              "name": "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": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "fieldName": "required",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
-            {
-              "name": "help-text-type",
-              "type": {
-                "text": "ValidationType"
-              },
-              "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"
-              }
-            },
-            {
-              "name": "help-text",
+              "name": "orientation",
               "type": {
-                "text": "string | undefined"
+                "text": "DividerOrientation"
               },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "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": "toggletip-text",
+              "name": "variant",
               "type": {
-                "text": "string | undefined"
+                "text": "DividerVariant"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "fieldName": "toggletipText",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "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": "toggletip-placement",
+              "name": "arrow-direction",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "Directions"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "fieldName": "toggletipPlacement",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "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": "info-icon-aria-label",
+              "name": "button-position",
               "type": {
-                "text": "string | undefined"
+                "text": "Directions"
               },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "fieldName": "infoIconAriaLabel",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "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-background-color-normal - background color of the grabber button\n *  in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n *  in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n *  in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -13298,8 +12937,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FormfieldGroup",
-            "module": "components/formfieldgroup/formfieldgroup.component.js"
+            "name": "Divider",
+            "module": "components/divider/divider.component.js"
           }
         }
       ]
@@ -13997,13 +13636,49 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/formfieldwrapper/formfieldwrapper.component.js",
+      "path": "components/formfieldgroup/formfieldgroup.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",
+          "description": "`mdc-formfieldgroup` component, groups the form field components together.\nAll passed in children will have a gap of 12px (0.75rem) each applied.\n\nThis component is specifically for creating a `checkbox` group and a `toggle` group component.\nFor the radiogroup use the RadioGroup component instead.\n\nThe header text and description text are displayed above the items with accessible labels.<br/>\nThe consumer has to provide atleast the header-text or the aria-label,\nlike one of them <b>has</b> to be passed in always, otherwise its not accessible.\n\nThe role will be set to `group`.\nThe aria-label will be set with the data-aria-label property.\nThe aria-labelledby will be set with the header id which contains the header text information.\nThe aria-describedby will be set with the description id which contains the description text information.",
+          "name": "FormfieldGroup",
+          "slots": [
+            {
+              "description": "This is a default slot for checkbox or toggle components.",
+              "name": "default"
+            }
+          ],
           "members": [
+            {
+              "kind": "field",
+              "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 | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "label",
@@ -14012,7 +13687,11 @@
               },
               "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
               "attribute": "label",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "field",
@@ -14023,7 +13702,11 @@
               "default": "false",
               "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
               "attribute": "required",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "field",
@@ -14033,7 +13716,11 @@
               },
               "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
               "attribute": "help-text-type",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "field",
@@ -14043,7 +13730,11 @@
               },
               "description": "The help text that is displayed below the input field.",
               "attribute": "help-text",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "field",
@@ -14053,7 +13744,11 @@
               },
               "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
               "attribute": "toggletip-text",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "field",
@@ -14064,7 +13759,11 @@
               "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
               "default": "'top'",
               "attribute": "toggletip-placement",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "field",
@@ -14074,7 +13773,11 @@
               },
               "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
               "attribute": "info-icon-aria-label",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "method",
@@ -14085,6 +13788,10 @@
                 "type": {
                   "text": ""
                 }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
@@ -14096,6 +13803,10 @@
                 "type": {
                   "text": ""
                 }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
@@ -14107,6 +13818,10 @@
                 "type": {
                   "text": ""
                 }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
@@ -14118,6 +13833,10 @@
                 "type": {
                   "text": ""
                 }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
@@ -14129,32 +13848,64 @@
                 "type": {
                   "text": ""
                 }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            }
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
+          },
+          "tagName": "mdc-formfieldgroup",
+          "jsDoc": "/**\n * `mdc-formfieldgroup` component, groups the form field components together.\n * All passed in children will have a gap of 12px (0.75rem) each applied.\n *\n * This component is specifically for creating a `checkbox` group and a `toggle` group component.\n * For the radiogroup use the RadioGroup component instead.\n *\n * The header text and description text are displayed above the items with accessible labels.<br/>\n * The consumer has to provide atleast the header-text or the aria-label,\n * like one of them <b>has</b> to be passed in always, otherwise its not accessible.\n *\n * The role will be set to `group`.\n * The aria-label will be set with the data-aria-label property.\n * The aria-labelledby will be set with the header id which contains the header text information.\n * The aria-describedby will be set with the description id which contains the description text information.\n *\n * @tagname mdc-formfieldgroup\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @slot default - This is a default slot for checkbox or toggle components.\n */",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
+              "fieldName": "disabled",
               "inheritedFrom": {
                 "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
-            }
-          ],
-          "attributes": [
+            },
             {
               "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"
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
               "name": "required",
@@ -14163,7 +13914,11 @@
               },
               "default": "false",
               "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "fieldName": "required"
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
               "name": "help-text-type",
@@ -14171,7 +13926,11 @@
                 "text": "ValidationType"
               },
               "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType"
+              "fieldName": "helpTextType",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
               "name": "help-text",
@@ -14179,7 +13938,11 @@
                 "text": "string | undefined"
               },
               "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText"
+              "fieldName": "helpText",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
               "name": "toggletip-text",
@@ -14187,7 +13950,11 @@
                 "text": "string | undefined"
               },
               "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "fieldName": "toggletipText"
+              "fieldName": "toggletipText",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
               "name": "toggletip-placement",
@@ -14196,7 +13963,11 @@
               },
               "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
               "default": "'top'",
-              "fieldName": "toggletipPlacement"
+              "fieldName": "toggletipPlacement",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
             },
             {
               "name": "info-icon-aria-label",
@@ -14204,35 +13975,13 @@
                 "text": "string | undefined"
               },
               "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "fieldName": "infoIconAriaLabel"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
+              "fieldName": "infoIconAriaLabel",
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             }
-          ],
-          "mixins": [
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            }
-          ],
-          "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 * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n *\n */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -14240,8 +13989,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FormfieldWrapper",
-            "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+            "name": "FormfieldGroup",
+            "module": "components/formfieldgroup/formfieldgroup.component.js"
           }
         }
       ]
@@ -14690,6 +14439,257 @@
         }
       ]
     },
+    {
+      "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",
+          "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": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "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": "field",
+              "name": "toggletipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "attribute": "toggletip-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "toggletipPlacement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "attribute": "toggletip-placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "infoIconAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "attribute": "info-icon-aria-label",
+              "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": ""
+                }
+              }
+            },
+            {
+              "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": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "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"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required"
+            },
+            {
+              "name": "help-text-type",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "toggletip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "fieldName": "toggletipText"
+            },
+            {
+              "name": "toggletip-placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "fieldName": "toggletipPlacement"
+            },
+            {
+              "name": "info-icon-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "fieldName": "infoIconAriaLabel"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "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 * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n *\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FormfieldWrapper",
+            "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/input/input.component.js",