@momentum-design/components 0.112.4 → 0.112.6

package/dist/custom-elements.json

@@ -342,157 +342,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/accordiongroup/accordiongroup.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
-          "name": "AccordionGroup",
-          "cssProperties": [
-            {
-              "description": "The border color of the entire accordiongroup",
-              "name": "--mdc-accordiongroup-border-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "allowMultiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "attribute": "allow-multiple",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleAccordionExpanded",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "The event object from the 'shown' event."
-                }
-              ],
-              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
-            },
-            {
-              "kind": "method",
-              "name": "setChildrenAccordionAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "attributeName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The name of the attribute to set."
-                },
-                {
-                  "name": "attributeValue",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The value to set the attribute to."
-                }
-              ],
-              "description": "Sets the given attribute on all child accordion or accordionbutton components."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "fieldName": "size"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "allow-multiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "fieldName": "allowMultiple"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-accordiongroup",
-          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "AccordionGroup",
-            "module": "components/accordiongroup/accordiongroup.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/accordion/accordion.component.js",
@@ -970,102 +819,253 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/alertchip/alertchip.component.js",
+      "path": "components/accordiongroup/accordiongroup.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
-          "name": "AlertChip",
+          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
+          "name": "AccordionGroup",
           "cssProperties": [
             {
-              "description": "The color of the label text",
-              "name": "--mdc-chip-color"
-            },
-            {
-              "description": "The color of the icon",
-              "name": "--mdc-chip-icon-color"
-            },
-            {
-              "description": "The border color of the alertchip",
-              "name": "--mdc-chip-border-color"
-            },
-            {
-              "description": "The background color of the alertchip",
-              "name": "--mdc-chip-background-color"
+              "description": "The border color of the entire accordiongroup",
+              "name": "--mdc-accordiongroup-border-color"
             }
           ],
-          "cssParts": [
-            {
-              "description": "The alert icon",
-              "name": "icon"
-            },
+          "slots": [
             {
-              "description": "The text label of the alertchip",
-              "name": "label"
+              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
+              "name": "default"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "size",
               "type": {
-                "text": "VariantType"
+                "text": "Size"
               },
-              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
-              "default": "neutral",
-              "attribute": "variant"
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "Variant"
               },
-              "default": "''",
-              "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "attribute": "label"
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "autoFocusOnMount",
+              "name": "allowMultiple",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "attribute": "auto-focus-on-mount",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "utils/mixins/AutoFocusOnMountMixin.js"
-              }
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "attribute": "allow-multiple",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
+              "kind": "method",
+              "name": "handleAccordionExpanded",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
-              }
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event object from the 'shown' event."
+                }
+              ],
+              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
             },
             {
-              "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": {
+              "kind": "method",
+              "name": "setChildrenAccordionAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "attributeName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the attribute to set."
+                },
+                {
+                  "name": "attributeValue",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The value to set the attribute to."
+                }
+              ],
+              "description": "Sets the given attribute on all child accordion or accordionbutton components."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "allow-multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "fieldName": "allowMultiple"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-accordiongroup",
+          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AccordionGroup",
+            "module": "components/accordiongroup/accordiongroup.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/alertchip/alertchip.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
+          "name": "AlertChip",
+          "cssProperties": [
+            {
+              "description": "The color of the label text",
+              "name": "--mdc-chip-color"
+            },
+            {
+              "description": "The color of the icon",
+              "name": "--mdc-chip-icon-color"
+            },
+            {
+              "description": "The border color of the alertchip",
+              "name": "--mdc-chip-border-color"
+            },
+            {
+              "description": "The background color of the alertchip",
+              "name": "--mdc-chip-background-color"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The alert icon",
+              "name": "icon"
+            },
+            {
+              "description": "The text label of the alertchip",
+              "name": "label"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "VariantType"
+              },
+              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
+              "default": "neutral",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "autoFocusOnMount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "attribute": "auto-focus-on-mount",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AutoFocusOnMountMixin",
+                "module": "utils/mixins/AutoFocusOnMountMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
                 "name": "DisabledMixin",
                 "module": "utils/mixins/DisabledMixin.js"
               }
@@ -1829,57 +1829,76 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/avatar/avatar.component.js",
+      "path": "components/avatarbutton/avatarbutton.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
-          "name": "Avatar",
+          "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": "Allows customization of the default background color.",
-              "name": "--mdc-avatar-default-background-color"
-            },
-            {
-              "description": "Allows customization of the default foreground color.",
-              "name": "--mdc-avatar-default-foreground-color"
-            },
-            {
-              "description": "Allows customization of the loading indicator background color.",
-              "name": "--mdc-avatar-loading-indicator-background-color"
+              "description": "Background color of the overlay in rest state",
+              "name": "--mdc-avatarbutton-overlay-background-color-rest"
             },
             {
-              "description": "Allows customization of the loading indicator foreground color.",
-              "name": "--mdc-avatar-loading-indicator-foreground-color"
+              "description": "Background color of the overlay in hover state",
+              "name": "--mdc-avatarbutton-overlay-background-color-hover"
             },
             {
-              "description": "Allows customization of the loading overlay background color.",
-              "name": "--mdc-avatar-loading-overlay-background-color"
+              "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 of the avatar.",
+              "description": "The photo part of the avatar.",
               "name": "photo"
             },
             {
-              "description": "The presence indicator of the avatar.",
+              "description": "The presence indicator part of the avatar.",
               "name": "presence"
             },
             {
-              "description": "The wrapper for the loading indicator.",
+              "description": "The wrapper for the loading indicator of the avatar.",
               "name": "loading-wrapper"
             },
             {
-              "description": "The loading indicator of the avatar.",
+              "description": "The loading indicator part of the avatar.",
               "name": "loader"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "method",
+              "name": "setSize",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "AvatarSize"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "src",
@@ -1923,15 +1942,15 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "AvatarSize"
+                "text": "ButtonSize"
               },
               "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
               "default": "32",
               "attribute": "size",
               "reflects": true,
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
@@ -1973,246 +1992,149 @@
                 "name": "IconNameMixin",
                 "module": "utils/mixins/IconNameMixin.js"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "AvatarComponentMixin",
-              "module": "/src/utils/mixins/AvatarComponentMixin"
             },
             {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-avatar",
-          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n *\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "src",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
-              "fieldName": "src",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
-              }
-            },
-            {
-              "name": "initials",
+              "kind": "field",
+              "name": "autoFocusOnMount",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "The initials to be displayed for the avatar.",
-              "fieldName": "initials",
+              "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": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "AutoFocusOnMountMixin",
+                "module": "utils/mixins/AutoFocusOnMountMixin.js"
               }
             },
             {
-              "name": "presence",
+              "kind": "field",
+              "name": "tabIndex",
               "type": {
-                "text": "PresenceType | undefined"
+                "text": "number"
               },
-              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
-              "fieldName": "presence",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
               }
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "AvatarSize"
+                "text": "boolean | undefined"
               },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "fieldName": "size",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
-              "name": "counter",
+              "kind": "field",
+              "name": "active",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
-              "fieldName": "counter",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "attribute": "active",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "is-typing",
+              "kind": "field",
+              "name": "softDisabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "fieldName": "isTyping",
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "icon-name",
+              "kind": "field",
+              "name": "role",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "RoleType"
               },
-              "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 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": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Avatar",
-            "module": "components/avatar/avatar.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/avatarbutton/avatarbutton.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.\n\nTo override styles of the avatar inside, use the specified css parts.",
-          "name": "AvatarButton",
-          "cssProperties": [
-            {
-              "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": "The presence indicator part of the avatar.",
-              "name": "presence"
-            },
-            {
-              "description": "The wrapper for the loading indicator of the avatar.",
-              "name": "loading-wrapper"
-            },
-            {
-              "description": "The loading indicator part of the avatar.",
-              "name": "loader"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "method",
-              "name": "setSize",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "size",
-                  "type": {
-                    "text": "AvatarSize"
-                  }
-                }
-              ]
             },
             {
               "kind": "field",
-              "name": "src",
+              "name": "ariaStateKey",
               "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",
+              "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": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "initials",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "ButtonType"
               },
-              "description": "The initials to be displayed for the avatar.",
-              "attribute": "initials",
+              "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": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "presence",
+              "name": "name",
               "type": {
-                "text": "PresenceType | undefined"
+                "text": "string | 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",
+              "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,
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "value",
               "type": {
-                "text": "ButtonSize"
+                "text": "string | undefined"
               },
-              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
-              "default": "32",
-              "attribute": "size",
+              "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",
@@ -2220,200 +2142,12 @@
               }
             },
             {
-              "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",
+              "kind": "method",
+              "name": "executeAction",
+              "privacy": "protected",
               "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isTyping",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Represents the typing indicator when the user is typing.",
-              "attribute": "is-typing",
-              "inheritedFrom": {
-                "name": "AvatarComponentMixin",
-                "module": "utils/mixins/AvatarComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "autoFocusOnMount",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "attribute": "auto-focus-on-mount",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "utils/mixins/AutoFocusOnMountMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "attribute": "active",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "softDisabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "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,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "ariaStateKey",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "attribute": "ariaStateKey",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "ButtonType"
-              },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "attribute": "type",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "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,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
-              "attribute": "value",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
@@ -3346,49 +3080,315 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bullet/bullet.component.js",
+      "path": "components/avatar/avatar.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
-          "name": "Bullet",
+          "description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
+          "name": "Avatar",
           "cssProperties": [
             {
-              "description": "background color of the bullet",
-              "name": "--mdc-bullet-background-color"
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-avatar-default-background-color"
             },
             {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
+              "description": "Allows customization of the default foreground color.",
+              "name": "--mdc-avatar-default-foreground-color"
             },
             {
-              "description": "medium size value of the bullet",
-              "name": "--mdc-bullet-size-medium"
+              "description": "Allows customization of the loading indicator background color.",
+              "name": "--mdc-avatar-loading-indicator-background-color"
             },
             {
-              "description": "large size value of the bullet",
-              "name": "--mdc-bullet-size-large"
+              "description": "Allows customization of the loading indicator foreground color.",
+              "name": "--mdc-avatar-loading-indicator-foreground-color"
+            },
+            {
+              "description": "Allows customization of the loading overlay background color.",
+              "name": "--mdc-avatar-loading-overlay-background-color"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The main content of the avatar.",
+              "name": "content"
+            },
+            {
+              "description": "The photo of the avatar.",
+              "name": "photo"
+            },
+            {
+              "description": "The presence indicator of the avatar.",
+              "name": "presence"
+            },
+            {
+              "description": "The wrapper for the loading indicator.",
+              "name": "loading-wrapper"
+            },
+            {
+              "description": "The loading indicator of the avatar.",
+              "name": "loader"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "size",
+              "name": "src",
               "type": {
-                "text": "Size"
+                "text": "string | undefined"
               },
-              "privacy": "public",
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "attribute": "size",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "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"
+              }
+            },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "initials",
               "type": {
-                "text": "Size"
+                "text": "string | undefined"
+              },
+              "description": "The initials to be displayed for the avatar.",
+              "attribute": "initials",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "presence",
+              "type": {
+                "text": "PresenceType | undefined"
+              },
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "attribute": "presence",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "AvatarSize"
+              },
+              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "attribute": "counter",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isTyping",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "attribute": "is-typing",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "utils/mixins/AvatarComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "AvatarComponentMixin",
+              "module": "/src/utils/mixins/AvatarComponentMixin"
+            },
+            {
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-avatar",
+          "jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n *  Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n *  Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n *  Allows customization of the loading overlay background color.\n *\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
+              "fieldName": "src",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "initials",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The initials to be displayed for the avatar.",
+              "fieldName": "initials",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "presence",
+              "type": {
+                "text": "PresenceType | undefined"
+              },
+              "description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
+              "fieldName": "presence",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "AvatarSize"
+              },
+              "description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
+              "default": "32",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "counter",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
+              "fieldName": "counter",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "is-typing",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Represents the typing indicator when the user is typing.",
+              "fieldName": "isTyping",
+              "inheritedFrom": {
+                "name": "AvatarComponentMixin",
+                "module": "src/utils/mixins/AvatarComponentMixin.ts"
+              }
+            },
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Avatar",
+            "module": "components/avatar/avatar.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/bullet/bullet.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "name": "Bullet",
+          "cssProperties": [
+            {
+              "description": "background color of the bullet",
+              "name": "--mdc-bullet-background-color"
+            },
+            {
+              "description": "small size value of the bullet",
+              "name": "--mdc-bullet-size-small"
+            },
+            {
+              "description": "medium size value of the bullet",
+              "name": "--mdc-bullet-size-medium"
+            },
+            {
+              "description": "large size value of the bullet",
+              "name": "--mdc-bullet-size-large"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "privacy": "public",
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
               },
               "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
               "default": "small",
@@ -4392,6 +4392,11 @@
               ],
               "description": "Sets the soft-disabled attribute for the buttonlink.\nWhen soft-disabled, the buttonlink looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
             },
+            {
+              "kind": "method",
+              "name": "renderAnchorContent",
+              "privacy": "protected"
+            },
             {
               "kind": "field",
               "name": "prefixIcon",
@@ -4585,9 +4590,8 @@
               "kind": "field",
               "name": "href",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'#'",
               "description": "Href for navigation. The URL that the hyperlink points to",
               "attribute": "href",
               "reflects": true,
@@ -4899,9 +4903,8 @@
             {
               "name": "href",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'#'",
               "description": "Href for navigation. The URL that the hyperlink points to",
               "fieldName": "href",
               "inheritedFrom": {
@@ -5006,7 +5009,7 @@
             "module": "/src/components/linksimple/linksimple.component"
           },
           "tagName": "mdc-buttonlink",
-          "jsDoc": "/**\n * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\n * features of `mdc-button`. This includes support for variants, sizing, and optional\n * prefix and postfix icons via slots.\n *\n * ### Features:\n * - Behaves like an link while visually resembling a button.\n * - Supports slots for `prefix-icon` and `postfix-icon`.\n * - Customizable size, color, and variant through attributes.\n * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-buttonlink\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n * \n * @csspart anchor - The anchor element that wraps the buttonlink content.\n * @csspart prefix-icon - The prefix icon element.\n * @csspart button-text - The slot containing the buttonlink text.\n * @csspart postfix-icon - The postfix icon element.\n *\n */",
+          "jsDoc": "/**\n * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\n * features of `mdc-button`. This includes support for variants, sizing, and optional\n * prefix and postfix icons via slots.\n *\n * ### Features:\n * - Behaves like an link while visually resembling a button.\n * - Supports slots for `prefix-icon` and `postfix-icon`.\n * - Customizable size, color, and variant through attributes.\n * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-buttonlink\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @csspart anchor - The anchor element that wraps the buttonlink content.\n * @csspart prefix-icon - The prefix icon element.\n * @csspart button-text - The slot containing the buttonlink text.\n * @csspart postfix-icon - The postfix icon element.\n *\n */",
           "customElement": true,
           "cssProperties": [
             {
@@ -15926,6 +15929,11 @@
               },
               "description": "Method to get the size of the trailing icon based on the link size."
             },
+            {
+              "kind": "method",
+              "name": "renderAnchorContent",
+              "privacy": "protected"
+            },
             {
               "kind": "field",
               "name": "iconName",
@@ -16003,9 +16011,8 @@
               "kind": "field",
               "name": "href",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'#'",
               "description": "Href for navigation. The URL that the hyperlink points to",
               "attribute": "href",
               "reflects": true,
@@ -16270,9 +16277,8 @@
             {
               "name": "href",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'#'",
               "description": "Href for navigation. The URL that the hyperlink points to",
               "fieldName": "href",
               "inheritedFrom": {
@@ -16377,7 +16383,7 @@
             "module": "/src/components/linksimple/linksimple.component"
           },
           "tagName": "mdc-link",
-          "jsDoc": "/**\n * `mdc-link` component can be used to navigate to a different page\n * within the application or to an external site. It can be used to link to\n * emails or phone numbers.\n *\n * The `children` of the link component is expected to be the text content.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-link\n *\n * @event click - (React: onClick) Fired when the user activates the Link using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the Link has focus.\n * @event focus - (React: onFocus) Fired when the Link receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the Link loses keyboard or mouse focus.\n * \n * @csspart anchor - The anchor element that wraps the link content.\n * @csspart icon - The icon element.\n */",
+          "jsDoc": "/**\n * `mdc-link` component can be used to navigate to a different page\n * within the application or to an external site. It can be used to link to\n * emails or phone numbers.\n *\n * The `children` of the link component is expected to be the text content.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-link\n *\n * @event click - (React: onClick) Fired when the user activates the Link using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the Link has focus.\n * @event focus - (React: onFocus) Fired when the Link receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the Link loses keyboard or mouse focus.\n *\n * @csspart anchor - The anchor element that wraps the link content.\n * @csspart icon - The icon element.\n */",
           "customElement": true,
           "cssProperties": [
             {
@@ -17195,9 +17201,8 @@
               "kind": "field",
               "name": "href",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'#'",
               "description": "Href for navigation. The URL that the hyperlink points to",
               "attribute": "href",
               "reflects": true
@@ -17381,9 +17386,8 @@
             {
               "name": "href",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'#'",
               "description": "Href for navigation. The URL that the hyperlink points to",
               "fieldName": "href"
             },
@@ -17486,7 +17490,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-linksimple",
-          "jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n * \n * @csspart anchor - The anchor element that wraps the linksimple content.\n */",
+          "jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n *\n * @csspart anchor - The anchor element that wraps the linksimple content.\n */",
           "customElement": true
         }
       ],
@@ -30234,674 +30238,753 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/radiogroup/radiogroup.component.js",
+      "path": "components/radio/radio.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\nIt can have a header text and a description. It enables users to select a single option from a set of options.\nIt is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.",
-          "name": "RadioGroup",
+          "description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
+          "name": "Radio",
           "cssProperties": [
             {
-              "description": "color of the description text",
-              "name": "--mdc-radiogroup-description-text-normal"
+              "description": "color of the label when disabled",
+              "name": "--mdc-radio-text-disabled-color"
+            },
+            {
+              "description": "color of the radio button when inactive and hovered",
+              "name": "--mdc-radio-control-inactive-hover"
+            },
+            {
+              "description": "color of the radio button when inactive and pressed",
+              "name": "--mdc-radio-control-inactive-pressed-color"
+            },
+            {
+              "description": "color of the radio button when active and hovered",
+              "name": "--mdc-radio-control-active-hover-color"
+            },
+            {
+              "description": "color of the radio button when active and pressed",
+              "name": "--mdc-radio-control-active-pressed-color"
+            },
+            {
+              "description": "color of the radio button when disabled",
+              "name": "--mdc-radio-disabled-border-color"
+            },
+            {
+              "description": "color of the radio button when active and disabled",
+              "name": "--mdc-radio-control-active-disabled-background"
+            },
+            {
+              "description": "color of the radio button when inactive and disabled",
+              "name": "--mdc-radio-control-inactive-disabled-background"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "name",
+              "name": "checked",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "Name of the radio group.\nThey are used to group elements in a form together.",
-              "attribute": "name"
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "readonly",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
-              }
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "attribute": "readonly",
+              "reflects": true
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "getAllRadiosWithinSameGroup",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Radio[]"
+                }
               },
-              "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": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
+              "description": "Returns all radios within the same group (name)."
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "setGroupValidity",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "radios",
+                  "type": {
+                    "text": "Radio[]"
+                  },
+                  "description": "Array of radios of the same group"
+                },
+                {
+                  "name": "isValid",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Boolean value to set the validity of the group"
+                }
+              ],
+              "description": "Sets the validity of the group of radios."
+            },
+            {
+              "kind": "method",
+              "name": "setActualFormValue",
+              "privacy": "private",
+              "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
               },
-              "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": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
+            },
+            {
+              "kind": "method",
+              "name": "updateRadio",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "enabledRadios",
+                  "type": {
+                    "text": "Radio[]"
+                  },
+                  "description": "An array of enabled radio buttons within the same group."
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the radio button to be updated within the enabled radios array."
+                }
+              ],
+              "description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ],
+              "description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
+            },
+            {
+              "kind": "method",
+              "name": "updateTabIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "renderLabelAndHelperText",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "autoFocusOnMount",
               "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",
+              "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": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "AutoFocusOnMountMixin",
+                "module": "utils/mixins/AutoFocusOnMountMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "helpTextType",
+              "name": "name",
               "type": {
-                "text": "ValidationType"
+                "text": "string"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "toggletipText",
+              "name": "validationMessage",
               "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",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "attribute": "validation-message",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "toggletipPlacement",
+              "name": "validity",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "ValidityState"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "attribute": "toggletip-placement",
-              "reflects": true,
+              "readonly": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "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,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "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": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "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": "willValidate",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderHelpText",
-              "privacy": "protected",
-              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "name": "checkValidity",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "boolean"
                 }
               },
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderHelperText",
-              "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "name": "reportValidity",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Name of the radio group.\nThey are used to group elements in a form together.",
-              "fieldName": "name"
             },
             {
-              "name": "data-aria-label",
+              "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.",
-              "fieldName": "dataAriaLabel",
+              "attribute": "data-aria-label",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "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",
-              "fieldName": "disabled",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
+              "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.",
-              "fieldName": "label",
+              "attribute": "label",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
+              "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.",
-              "fieldName": "required",
+              "attribute": "required",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "help-text-type",
+              "kind": "field",
+              "name": "helpTextType",
               "type": {
                 "text": "ValidationType"
               },
               "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType",
+              "attribute": "help-text-type",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "help-text",
+              "kind": "field",
+              "name": "helpText",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText",
+              "attribute": "help-text",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "toggletip-text",
+              "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.",
-              "fieldName": "toggletipText",
+              "attribute": "toggletip-text",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "toggletip-placement",
+              "kind": "field",
+              "name": "toggletipPlacement",
               "type": {
                 "text": "PopoverPlacement"
               },
               "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
               "default": "'top'",
-              "fieldName": "toggletipPlacement",
+              "attribute": "toggletip-placement",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
-              "name": "info-icon-aria-label",
+              "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.",
-              "fieldName": "infoIconAriaLabel",
+              "attribute": "info-icon-aria-label",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "FormfieldGroup",
-            "module": "/src/components/formfieldgroup"
-          },
-          "tagName": "mdc-radiogroup",
-          "jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text\n *\n */",
-          "customElement": true,
-          "slots": [
-            {
-              "description": "This is a default slot for checkbox or toggle components.",
-              "name": "default",
-              "inheritedFrom": {
-                "name": "FormfieldGroup",
-                "module": "src/components/formfieldgroup/formfieldgroup.component.ts"
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "RadioGroup",
-            "module": "components/radiogroup/radiogroup.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/radio/radio.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
-          "name": "Radio",
-          "cssProperties": [
-            {
-              "description": "color of the label when disabled",
-              "name": "--mdc-radio-text-disabled-color"
-            },
-            {
-              "description": "color of the radio button when inactive and hovered",
-              "name": "--mdc-radio-control-inactive-hover"
-            },
-            {
-              "description": "color of the radio button when inactive and pressed",
-              "name": "--mdc-radio-control-inactive-pressed-color"
-            },
-            {
-              "description": "color of the radio button when active and hovered",
-              "name": "--mdc-radio-control-active-hover-color"
-            },
-            {
-              "description": "color of the radio button when active and pressed",
-              "name": "--mdc-radio-control-active-pressed-color"
-            },
-            {
-              "description": "color of the radio button when disabled",
-              "name": "--mdc-radio-disabled-border-color"
-            },
-            {
-              "description": "color of the radio button when active and disabled",
-              "name": "--mdc-radio-control-active-disabled-background"
-            },
-            {
-              "description": "color of the radio button when inactive and disabled",
-              "name": "--mdc-radio-control-inactive-disabled-background"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "attribute": "readonly",
-              "reflects": true
             },
             {
               "kind": "method",
-              "name": "getAllRadiosWithinSameGroup",
-              "privacy": "private",
+              "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": "Radio[]"
+                  "text": ""
                 }
               },
-              "description": "Returns all radios within the same group (name)."
-            },
-            {
-              "kind": "method",
-              "name": "setGroupValidity",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "radios",
-                  "type": {
-                    "text": "Radio[]"
-                  },
-                  "description": "Array of radios of the same group"
-                },
-                {
-                  "name": "isValid",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Boolean value to set the validity of the group"
-                }
-              ],
-              "description": "Sets the validity of the group of radios."
-            },
-            {
-              "kind": "method",
-              "name": "setActualFormValue",
-              "privacy": "private",
-              "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "handleChange",
-              "privacy": "private",
+              "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": "void"
+                  "text": ""
                 }
               },
-              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "updateRadio",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "enabledRadios",
-                  "type": {
-                    "text": "Radio[]"
-                  },
-                  "description": "An array of enabled radio buttons within the same group."
-                },
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the radio button to be updated within the enabled radios array."
+              "name": "renderHelpText",
+              "privacy": "protected",
+              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ],
-              "description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "updateTabIndex",
-              "privacy": "private",
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
-              "description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "(React: onChange) Event that gets dispatched when the radio state changes.",
+              "reactName": "onChange"
             },
             {
-              "kind": "field",
-              "name": "renderLabelAndHelperText",
-              "privacy": "private"
+              "description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "fieldName": "checked"
             },
             {
-              "kind": "field",
-              "name": "autoFocusOnMount",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "fieldName": "readonly"
+            },
+            {
+              "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": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
-              "reflects": true,
+              "fieldName": "name",
               "inheritedFrom": {
                 "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
-              "reflects": true,
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "validation-message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "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": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.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": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "validationMessage",
+              "name": "help-text-type",
               "type": {
-                "text": "string | undefined"
+                "text": "ValidationType"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "attribute": "validation-message",
-              "reflects": true,
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "validity",
+              "name": "help-text",
               "type": {
-                "text": "ValidityState"
+                "text": "string | undefined"
               },
-              "readonly": true,
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
+              "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",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "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",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "checkValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
+              "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",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "AutoFocusOnMountMixin",
+              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
             },
             {
-              "kind": "method",
-              "name": "reportValidity",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            }
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
+          },
+          "tagName": "mdc-radio",
+          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled\n * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled\n * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled\n *\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Radio",
+            "module": "components/radio/radio.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/radiogroup/radiogroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\nIt can have a header text and a description. It enables users to select a single option from a set of options.\nIt is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.",
+          "name": "RadioGroup",
+          "cssProperties": [
+            {
+              "description": "color of the description text",
+              "name": "--mdc-radiogroup-description-text-normal"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Name of the radio group.\nThey are used to group elements in a form together.",
+              "attribute": "name"
             },
             {
               "kind": "field",
@@ -31109,90 +31192,15 @@
               }
             }
           ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "Event"
-              },
-              "description": "(React: onChange) Event that gets dispatched when the radio state changes.",
-              "reactName": "onChange"
-            },
-            {
-              "description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
           "attributes": [
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "fieldName": "readonly"
-            },
-            {
-              "name": "auto-focus-on-mount",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "fieldName": "autoFocusOnMount",
-              "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
-              }
-            },
             {
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
-            },
-            {
-              "name": "validation-message",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "fieldName": "validationMessage",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
+              "description": "Name of the radio group.\nThey are used to group elements in a form together.",
+              "fieldName": "name"
             },
             {
               "name": "data-aria-label",
@@ -31307,27 +31315,23 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "AutoFocusOnMountMixin",
-              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
-            },
-            {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
-            },
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            }
-          ],
           "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
+            "name": "FormfieldGroup",
+            "module": "/src/components/formfieldgroup"
           },
-          "tagName": "mdc-radio",
-          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled\n * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled\n * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled\n *\n */",
-          "customElement": true
+          "tagName": "mdc-radiogroup",
+          "jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text\n *\n */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "This is a default slot for checkbox or toggle components.",
+              "name": "default",
+              "inheritedFrom": {
+                "name": "FormfieldGroup",
+                "module": "src/components/formfieldgroup/formfieldgroup.component.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -31335,8 +31339,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Radio",
-            "module": "components/radio/radio.component.js"
+            "name": "RadioGroup",
+            "module": "components/radiogroup/radiogroup.component.js"
           }
         }
       ]