@momentum-design/components 0.75.4 → 0.76.1

package/dist/custom-elements.json

@@ -2147,6 +2147,138 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/buttongroup/buttongroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
+          "name": "ButtonGroup",
+          "cssProperties": [
+            {
+              "description": "The border radius of the buttongroup",
+              "name": "--mdc-buttongroup-border-radius"
+            },
+            {
+              "description": "The border color of the buttongroup",
+              "name": "--mdc-buttongroup-border-color"
+            },
+            {
+              "description": "The color of the divider between buttons within the buttongroup",
+              "name": "--mdc-buttongroup-divider-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, which contains the buttons",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "ButtonGroupOrientation"
+              },
+              "description": "Orientation of the buttongroup.",
+              "default": "'horizontal'",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ButtonGroupVariant"
+              },
+              "description": "Variant of the buttons within the buttongroup.",
+              "default": "'primary'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ButtonGroupSize"
+              },
+              "description": "Size of the buttons within the buttongroup.",
+              "default": "'28'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
+              "attribute": "compact",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "orientation",
+              "type": {
+                "text": "ButtonGroupOrientation"
+              },
+              "description": "Orientation of the buttongroup.",
+              "default": "'horizontal'",
+              "fieldName": "orientation"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "ButtonGroupVariant"
+              },
+              "description": "Variant of the buttons within the buttongroup.",
+              "default": "'primary'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ButtonGroupSize"
+              },
+              "description": "Size of the buttons within the buttongroup.",
+              "default": "'28'",
+              "fieldName": "size"
+            },
+            {
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
+              "fieldName": "compact"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-buttongroup",
+          "jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "components/buttongroup/buttongroup.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",
@@ -2816,231 +2948,99 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/buttongroup/buttongroup.component.js",
+      "path": "components/buttonlink/buttonlink.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
-          "name": "ButtonGroup",
-          "cssProperties": [
-            {
-              "description": "The border radius of the buttongroup",
-              "name": "--mdc-buttongroup-border-radius"
-            },
-            {
-              "description": "The border color of the buttongroup",
-              "name": "--mdc-buttongroup-border-color"
-            },
-            {
-              "description": "The color of the divider between buttons within the buttongroup",
-              "name": "--mdc-buttongroup-divider-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot, which contains the buttons",
-              "name": "default"
-            }
-          ],
+          "description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix 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`.",
+          "name": "ButtonLink",
           "members": [
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "size",
               "type": {
-                "text": "ButtonGroupOrientation"
+                "text": "PillButtonSize | IconButtonSize"
               },
-              "description": "Orientation of the buttongroup.",
-              "default": "'horizontal'",
-              "attribute": "orientation",
+              "description": "ButtonLink sizing is based on the buttonlink type.\n - **Pill buttonlink**: 40, 32, 28, 24.\n - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n - Tertiary icon buttonlink can also be 20.",
+              "default": "32",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "softDisabled",
               "type": {
-                "text": "ButtonGroupVariant"
+                "text": "boolean | undefined"
               },
-              "description": "Variant of the buttons within the buttongroup.",
-              "default": "'primary'",
-              "attribute": "variant",
+              "description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink 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 buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ButtonGroupSize"
-              },
-              "description": "Size of the buttons within the buttongroup.",
-              "default": "'28'",
-              "attribute": "size",
-              "reflects": true
+              "kind": "method",
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The buttonlink element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
+                }
+              ],
+              "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": "field",
-              "name": "compact",
+              "name": "prefixIcon",
               "type": {
-                "text": "boolean"
+                "text": "IconNames | undefined"
               },
-              "default": "false",
-              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
-              "attribute": "compact",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
+              "attribute": "prefix-icon",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
             {
-              "name": "orientation",
+              "kind": "field",
+              "name": "postfixIcon",
               "type": {
-                "text": "ButtonGroupOrientation"
+                "text": "IconNames | undefined"
               },
-              "description": "Orientation of the buttongroup.",
-              "default": "'horizontal'",
-              "fieldName": "orientation"
+              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
+              "attribute": "postfix-icon",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
             },
             {
+              "kind": "field",
               "name": "variant",
               "type": {
-                "text": "ButtonGroupVariant"
+                "text": "ButtonVariant"
               },
-              "description": "Variant of the buttons within the buttongroup.",
-              "default": "'primary'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "ButtonGroupSize"
-              },
-              "description": "Size of the buttons within the buttongroup.",
-              "default": "'28'",
-              "fieldName": "size"
-            },
-            {
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
-              "fieldName": "compact"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-buttongroup",
-          "jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "components/buttongroup/buttongroup.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/buttonlink/buttonlink.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix 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`.",
-          "name": "ButtonLink",
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "PillButtonSize | IconButtonSize"
-              },
-              "description": "ButtonLink sizing is based on the buttonlink type.\n - **Pill buttonlink**: 40, 32, 28, 24.\n - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n - Tertiary icon buttonlink can also be 20.",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "softDisabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink 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 buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The buttonlink element."
-                },
-                {
-                  "name": "softDisabled",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
-                }
-              ],
-              "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": "field",
-              "name": "prefixIcon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
-              "attribute": "prefix-icon",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "postfixIcon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
-              "attribute": "postfix-icon",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "ButtonVariant"
-              },
-              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
-              "default": "primary",
-              "attribute": "variant",
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
+              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
+              "default": "primary",
+              "attribute": "variant",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -11614,126 +11614,322 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/input/input.component.js",
+      "path": "components/iconprovider/iconprovider.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-input is a component that allows users to input text.\n It contains:\n- label field - describe the input field.\n- input field - contains the value\n- help text or validation message - displayed below the input field.\n- trailing button - it displays a clear the input field.\n- prefix text - displayed before the input field.\n- leading icon - displayed before the input field.\n- clear-aria-label - aria label for the trailing button.\n- all the attributes of the input field.",
-          "name": "Input",
-          "cssProperties": [
-            {
-              "description": "Border color for the input container when disabled",
-              "name": "--mdc-input-disabled-border-color"
-            },
-            {
-              "description": "Text color for the input field when disabled",
-              "name": "--mdc-input-disabled-text-color"
-            },
-            {
-              "description": "Background color for the input field when disabled",
-              "name": "--mdc-input-disabled-background-color"
-            },
-            {
-              "description": "Border color for the input container",
-              "name": "--mdc-input-border-color"
-            },
-            {
-              "description": "Text color for the input field",
-              "name": "--mdc-input-text-color"
-            },
-            {
-              "description": "Background color for the input field",
-              "name": "--mdc-input-background-color"
-            },
-            {
-              "description": "Background color for the selected text",
-              "name": "--mdc-input-selection-background-color"
-            },
-            {
-              "description": "Text color for the selected text",
-              "name": "--mdc-input-selection-text-color"
-            },
-            {
-              "description": "Text color for the help text",
-              "name": "--mdc-input-support-text-color"
-            },
-            {
-              "description": "Background color for the input field when hovered",
-              "name": "--mdc-input-hover-background-color"
-            },
-            {
-              "description": "Background color for the input field when focused",
-              "name": "--mdc-input-focused-background-color"
-            },
-            {
-              "description": "Border color for the input container when focused",
-              "name": "--mdc-input-focused-border-color"
-            },
-            {
-              "description": "Border color for the input container when error",
-              "name": "--mdc-input-error-border-color"
-            },
-            {
-              "description": "Border color for the input container when warning",
-              "name": "--mdc-input-warning-border-color"
-            },
-            {
-              "description": "Border color for the input container when success",
-              "name": "--mdc-input-success-border-color"
-            },
+          "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
+          "name": "IconProvider",
+          "slots": [
             {
-              "description": "Border color for the input container when primary",
-              "name": "--mdc-input-primary-border-color"
+              "description": "children",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The placeholder text that is displayed when the input field is empty.",
-              "attribute": "placeholder"
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Context object of the IconProvider, to be consumed by child components",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "readonly",
+              "name": "iconSet",
               "type": {
-                "text": "boolean"
+                "text": "IconSet | undefined"
               },
-              "default": "false",
-              "description": "readonly attribute of the input field. If true, the input field is read-only.",
-              "attribute": "readonly"
+              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
+              "default": "momentum-icons",
+              "attribute": "icon-set",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "prefixText",
+              "name": "url",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
-              "attribute": "prefix-text"
+              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
+              "attribute": "url"
             },
             {
               "kind": "field",
-              "name": "leadingIcon",
+              "name": "fileExtension",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string | undefined"
               },
-              "description": "The leading icon that is displayed before the input field.",
-              "attribute": "leading-icon"
+              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
+              "default": "svg",
+              "attribute": "file-extension",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "trailingButton",
+              "name": "lengthUnit",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
-              "attribute": "trailing-button"
+              "description": "Length unit used for sizing of icons",
+              "default": "em",
+              "attribute": "length-unit",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
+              "default": "1",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "cacheStrategy",
+              "type": {
+                "text": "CacheStrategy | undefined"
+              },
+              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
+              "default": "undefined",
+              "attribute": "cache-strategy"
+            },
+            {
+              "kind": "field",
+              "name": "cacheName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
+              "default": "undefined",
+              "attribute": "cache-name"
+            },
+            {
+              "kind": "method",
+              "name": "updateValuesInContext",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "icon-set",
+              "type": {
+                "text": "IconSet | undefined"
+              },
+              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
+              "default": "momentum-icons",
+              "fieldName": "iconSet"
+            },
+            {
+              "name": "url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
+              "fieldName": "url"
+            },
+            {
+              "name": "file-extension",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
+              "default": "svg",
+              "fieldName": "fileExtension"
+            },
+            {
+              "name": "length-unit",
+              "type": {
+                "text": "string"
+              },
+              "description": "Length unit used for sizing of icons",
+              "default": "em",
+              "fieldName": "lengthUnit"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
+              "default": "1",
+              "fieldName": "size"
+            },
+            {
+              "name": "cache-strategy",
+              "type": {
+                "text": "CacheStrategy | undefined"
+              },
+              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
+              "default": "undefined",
+              "fieldName": "cacheStrategy"
+            },
+            {
+              "name": "cache-name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
+              "default": "undefined",
+              "fieldName": "cacheName"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-iconprovider",
+          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "IconProvider",
+            "module": "components/iconprovider/iconprovider.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/input/input.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-input is a component that allows users to input text.\n It contains:\n- label field - describe the input field.\n- input field - contains the value\n- help text or validation message - displayed below the input field.\n- trailing button - it displays a clear the input field.\n- prefix text - displayed before the input field.\n- leading icon - displayed before the input field.\n- clear-aria-label - aria label for the trailing button.\n- all the attributes of the input field.",
+          "name": "Input",
+          "cssProperties": [
+            {
+              "description": "Border color for the input container when disabled",
+              "name": "--mdc-input-disabled-border-color"
+            },
+            {
+              "description": "Text color for the input field when disabled",
+              "name": "--mdc-input-disabled-text-color"
+            },
+            {
+              "description": "Background color for the input field when disabled",
+              "name": "--mdc-input-disabled-background-color"
+            },
+            {
+              "description": "Border color for the input container",
+              "name": "--mdc-input-border-color"
+            },
+            {
+              "description": "Text color for the input field",
+              "name": "--mdc-input-text-color"
+            },
+            {
+              "description": "Background color for the input field",
+              "name": "--mdc-input-background-color"
+            },
+            {
+              "description": "Background color for the selected text",
+              "name": "--mdc-input-selection-background-color"
+            },
+            {
+              "description": "Text color for the selected text",
+              "name": "--mdc-input-selection-text-color"
+            },
+            {
+              "description": "Text color for the help text",
+              "name": "--mdc-input-support-text-color"
+            },
+            {
+              "description": "Background color for the input field when hovered",
+              "name": "--mdc-input-hover-background-color"
+            },
+            {
+              "description": "Background color for the input field when focused",
+              "name": "--mdc-input-focused-background-color"
+            },
+            {
+              "description": "Border color for the input container when focused",
+              "name": "--mdc-input-focused-border-color"
+            },
+            {
+              "description": "Border color for the input container when error",
+              "name": "--mdc-input-error-border-color"
+            },
+            {
+              "description": "Border color for the input container when warning",
+              "name": "--mdc-input-warning-border-color"
+            },
+            {
+              "description": "Border color for the input container when success",
+              "name": "--mdc-input-success-border-color"
+            },
+            {
+              "description": "Border color for the input container when primary",
+              "name": "--mdc-input-primary-border-color"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The placeholder text that is displayed when the input field is empty.",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "readonly attribute of the input field. If true, the input field is read-only.",
+              "attribute": "readonly"
+            },
+            {
+              "kind": "field",
+              "name": "prefixText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
+              "attribute": "prefix-text"
+            },
+            {
+              "kind": "field",
+              "name": "leadingIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The leading icon that is displayed before the input field.",
+              "attribute": "leading-icon"
+            },
+            {
+              "kind": "field",
+              "name": "trailingButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
+              "attribute": "trailing-button"
             },
             {
               "kind": "field",
@@ -12563,203 +12759,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/iconprovider/iconprovider.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
-          "name": "IconProvider",
-          "slots": [
-            {
-              "description": "children",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "description": "Context object of the IconProvider, to be consumed by child components",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "iconSet",
-              "type": {
-                "text": "IconSet | undefined"
-              },
-              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
-              "default": "momentum-icons",
-              "attribute": "icon-set",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "url",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
-              "attribute": "url"
-            },
-            {
-              "kind": "field",
-              "name": "fileExtension",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
-              "default": "svg",
-              "attribute": "file-extension",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnit",
-              "type": {
-                "text": "string"
-              },
-              "description": "Length unit used for sizing of icons",
-              "default": "em",
-              "attribute": "length-unit",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
-              "default": "1",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "cacheStrategy",
-              "type": {
-                "text": "CacheStrategy | undefined"
-              },
-              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
-              "default": "undefined",
-              "attribute": "cache-strategy"
-            },
-            {
-              "kind": "field",
-              "name": "cacheName",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
-              "default": "undefined",
-              "attribute": "cache-name"
-            },
-            {
-              "kind": "method",
-              "name": "updateValuesInContext",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "icon-set",
-              "type": {
-                "text": "IconSet | undefined"
-              },
-              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
-              "default": "momentum-icons",
-              "fieldName": "iconSet"
-            },
-            {
-              "name": "url",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
-              "fieldName": "url"
-            },
-            {
-              "name": "file-extension",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
-              "default": "svg",
-              "fieldName": "fileExtension"
-            },
-            {
-              "name": "length-unit",
-              "type": {
-                "text": "string"
-              },
-              "description": "Length unit used for sizing of icons",
-              "default": "em",
-              "fieldName": "lengthUnit"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
-              "default": "1",
-              "fieldName": "size"
-            },
-            {
-              "name": "cache-strategy",
-              "type": {
-                "text": "CacheStrategy | undefined"
-              },
-              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
-              "default": "undefined",
-              "fieldName": "cacheStrategy"
-            },
-            {
-              "name": "cache-name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
-              "default": "undefined",
-              "fieldName": "cacheName"
-            }
-          ],
-          "superclass": {
-            "name": "Provider",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-iconprovider",
-          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "IconProvider",
-            "module": "components/iconprovider/iconprovider.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/inputchip/inputchip.component.js",
+      "path": "components/inputchip/inputchip.component.js",
       "declarations": [
         {
           "kind": "class",
@@ -13861,115 +13861,44 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/marker/marker.component.js",
+      "path": "components/listitem/listitem.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-          "name": "Marker",
+          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.\n\nBy providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.\nThe placement of the tooltip can be adjusted using the tooltip-placement attribute.\nThis will be helpful when the listitem text is truncated or\nwhen you want to display additional information about the listitem.",
+          "name": "ListItem",
           "cssProperties": [
             {
-              "description": "Allows customization of the default background color in solid variant.",
-              "name": "--mdc-marker-solid-background-color"
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-listitem-default-background-color"
             },
             {
-              "description": "Allows customization of the default stripes in striped variant.",
-              "name": "--mdc-marker-striped-color"
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-listitem-background-color-hover"
             },
             {
-              "description": "Allows customization of the default background color in striped variant.",
-              "name": "--mdc-marker-striped-background-color"
+              "description": "Allows customization of the background color when pressed.",
+              "name": "--mdc-listitem-background-color-active"
             },
             {
-              "description": "Allows customization of the default width.",
-              "name": "--mdc-marker-width"
-            }
-          ],
-          "members": [
+              "description": "Allows customization of the primary label, side header and subline text slot color.",
+              "name": "--mdc-listitem-primary-label-color"
+            },
             {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "MarkerVariants"
-              },
-              "privacy": "public",
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "description": "Allows customization of the secondary and tertiary label text slot color.",
+              "name": "--mdc-listitem-secondary-label-color"
+            },
             {
-              "name": "variant",
-              "type": {
-                "text": "MarkerVariants"
-              },
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-marker",
-          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Marker",
-            "module": "components/marker/marker.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/listitem/listitem.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.\n\nBy providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.\nThe placement of the tooltip can be adjusted using the tooltip-placement attribute.\nThis will be helpful when the listitem text is truncated or\nwhen you want to display additional information about the listitem.",
-          "name": "ListItem",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-listitem-default-background-color"
-            },
-            {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-listitem-background-color-hover"
-            },
-            {
-              "description": "Allows customization of the background color when pressed.",
-              "name": "--mdc-listitem-background-color-active"
-            },
-            {
-              "description": "Allows customization of the primary label, side header and subline text slot color.",
-              "name": "--mdc-listitem-primary-label-color"
-            },
-            {
-              "description": "Allows customization of the secondary and tertiary label text slot color.",
-              "name": "--mdc-listitem-secondary-label-color"
-            },
-            {
-              "description": "Allows customization of the disabled color.",
-              "name": "--mdc-listitem-disabled-color"
-            },
-            {
-              "description": "Allows customization of column gap.",
-              "name": "--mdc-listitem-column-gap"
-            },
-            {
-              "description": "Allows customization of padding left and right.",
-              "name": "--mdc-listitem-padding-left-and-right"
+              "description": "Allows customization of the disabled color.",
+              "name": "--mdc-listitem-disabled-color"
+            },
+            {
+              "description": "Allows customization of column gap.",
+              "name": "--mdc-listitem-column-gap"
+            },
+            {
+              "description": "Allows customization of padding left and right.",
+              "name": "--mdc-listitem-padding-left-and-right"
             }
           ],
           "slots": [
@@ -14099,14 +14028,17 @@
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
-                  }
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
                 }
-              ]
+              ],
+              "description": "Fires the click event when the enter or space key is pressed."
             },
             {
               "kind": "method",
               "name": "triggerClickEvent",
-              "privacy": "private"
+              "privacy": "private",
+              "description": "Triggers a click event on the list item."
             },
             {
               "kind": "method",
@@ -14116,7 +14048,8 @@
                 "type": {
                   "text": "void"
                 }
-              }
+              },
+              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first."
             },
             {
               "kind": "method",
@@ -14198,12 +14131,44 @@
             {
               "kind": "method",
               "name": "renderTrailingControls",
-              "privacy": "protected"
+              "privacy": "protected",
+              "description": "Renders the trailing controls slot.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
               "kind": "method",
               "name": "renderLeadingControls",
-              "privacy": "protected"
+              "privacy": "protected",
+              "description": "Renders the leading controls slot.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "stopEventPropagation",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The mouse event triggered when a click occurs."
+                }
+              ],
+              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself."
             },
             {
               "kind": "field",
@@ -14382,6 +14347,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/marker/marker.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+          "name": "Marker",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default background color in solid variant.",
+              "name": "--mdc-marker-solid-background-color"
+            },
+            {
+              "description": "Allows customization of the default stripes in striped variant.",
+              "name": "--mdc-marker-striped-color"
+            },
+            {
+              "description": "Allows customization of the default background color in striped variant.",
+              "name": "--mdc-marker-striped-background-color"
+            },
+            {
+              "description": "Allows customization of the default width.",
+              "name": "--mdc-marker-width"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "MarkerVariants"
+              },
+              "privacy": "public",
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "MarkerVariants"
+              },
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-marker",
+          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Marker",
+            "module": "components/marker/marker.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/menu/menu.component.js",
@@ -15311,6 +15347,11 @@
               "name": "renderTrailingControls",
               "privacy": "protected",
               "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -15321,6 +15362,11 @@
               "name": "renderLeadingControls",
               "privacy": "protected",
               "description": "Renders the leading controls slot and optionally the leading arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -15484,9 +15530,11 @@
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
-                  }
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
                 }
               ],
+              "description": "Fires the click event when the enter or space key is pressed.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -15496,6 +15544,7 @@
               "kind": "method",
               "name": "triggerClickEvent",
               "privacy": "private",
+              "description": "Triggers a click event on the list item.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -15510,6 +15559,7 @@
                   "text": "void"
                 }
               },
+              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -15607,6 +15657,30 @@
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "stopEventPropagation",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The mouse event triggered when a click occurs."
+                }
+              ],
+              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
             }
           ],
           "events": [
@@ -16097,6 +16171,11 @@
               "name": "renderTrailingControls",
               "privacy": "protected",
               "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16107,6 +16186,11 @@
               "name": "renderLeadingControls",
               "privacy": "protected",
               "description": "Renders the leading controls slot and optionally the leading arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16270,9 +16354,11 @@
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
-                  }
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
                 }
               ],
+              "description": "Fires the click event when the enter or space key is pressed.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16282,6 +16368,7 @@
               "kind": "method",
               "name": "triggerClickEvent",
               "privacy": "private",
+              "description": "Triggers a click event on the list item.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16296,6 +16383,7 @@
                   "text": "void"
                 }
               },
+              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16393,6 +16481,30 @@
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
               }
+            },
+            {
+              "kind": "method",
+              "name": "stopEventPropagation",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The mouse event triggered when a click occurs."
+                }
+              ],
+              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
             }
           ],
           "events": [
@@ -16737,6 +16849,11 @@
               "name": "renderTrailingControls",
               "privacy": "protected",
               "description": "Renders the trailing controls slot and optionally the trailing arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16747,6 +16864,11 @@
               "name": "renderLeadingControls",
               "privacy": "protected",
               "description": "Renders the leading controls slot and optionally the leading arrow icon,\nbased on `arrowPosition` and `arrowDirection`.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16910,9 +17032,11 @@
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
-                  }
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
                 }
               ],
+              "description": "Fires the click event when the enter or space key is pressed.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16922,6 +17046,7 @@
               "kind": "method",
               "name": "triggerClickEvent",
               "privacy": "private",
+              "description": "Triggers a click event on the list item.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -16936,6 +17061,7 @@
                   "text": "void"
                 }
               },
+              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -17033,13 +17159,37 @@
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
               }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onChange) This event is dispatched when the menuitemradio changes.",
-              "name": "change",
-              "reactName": "onChange"
+            },
+            {
+              "kind": "method",
+              "name": "stopEventPropagation",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The mouse event triggered when a click occurs."
+                }
+              ],
+              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself.",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onChange) This event is dispatched when the menuitemradio changes.",
+              "name": "change",
+              "reactName": "onChange"
             },
             {
               "description": "(React: onClick) This event is dispatched when the menuitemradio is clicked.",
@@ -20191,9 +20341,11 @@
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
-                  }
+                  },
+                  "description": "The keyboard event triggered when a key is pressed down."
                 }
               ],
+              "description": "Fires the click event when the enter or space key is pressed.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -20203,6 +20355,7 @@
               "kind": "method",
               "name": "triggerClickEvent",
               "privacy": "private",
+              "description": "Triggers a click event on the list item.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -20217,6 +20370,7 @@
                   "text": "void"
                 }
               },
+              "description": "Handles the click event on the list item.\nIf the tooltip is open, it has to be closed first.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -20319,6 +20473,12 @@
               "kind": "method",
               "name": "renderTrailingControls",
               "privacy": "protected",
+              "description": "Renders the trailing controls slot.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -20328,6 +20488,36 @@
               "kind": "method",
               "name": "renderLeadingControls",
               "privacy": "protected",
+              "description": "Renders the leading controls slot.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "components/listitem/listitem.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "stopEventPropagation",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The mouse event triggered when a click occurs."
+                }
+              ],
+              "description": "Stops the click event from propagating to parent elements. In case of keyboard events,\nit stops the propagation for Enter and Space keys.\nThis is useful when the list item contains controls that\nshould not trigger the click event on the list item itself.",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "components/listitem/listitem.component.js"
@@ -22536,334 +22726,222 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/radio/radio.component.js",
+      "path": "components/progressspinner/progressspinner.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",
+          "description": "`mdc-progressspinner` is a customizable, circular progress indicator component.\nIt visually represents the current completion state of a process, such as loading,\nsyncing, uploading, or any ongoing task that has a measurable percentage.\n\nThe spinner is built using SVG with two concentric `<circle>` elements:\n- The `progress` arc represents the portion of work completed.\n- The `track` arc represents the remaining part.\n\nA visual gap is maintained between the progress and track arcs to clearly\ndistinguish the two segments. The component smoothly animates arc length\nand respects accessibility best practices with ARIA attributes.\n\nThe component supports different states:\n- **Default**: Circular spinner shows the progress.\n- **Success**: Displays a checkmark icon when progress reaches 100%.\n- **Error**: Displays an error icon when in an error state.",
+          "name": "Progressspinner",
           "cssProperties": [
             {
-              "description": "color of the label when disabled",
-              "name": "--mdc-radio-text-disabled-color"
+              "description": "The size of the spinner.",
+              "name": "--mdc-spinner-size"
             },
             {
-              "description": "color of the radio button when inactive and hovered",
-              "name": "--mdc-radio-control-inactive-hover"
+              "description": "The color of the spinner track.",
+              "name": "--mdc-track-color"
             },
             {
-              "description": "color of the radio button when inactive and pressed",
-              "name": "--mdc-radio-control-inactive-pressed-color"
+              "description": "The color of the spinner progress.",
+              "name": "--mdc-progress-color"
             },
             {
-              "description": "color of the radio button when active and hovered",
-              "name": "--mdc-radio-control-active-hover-color"
+              "description": "The color of the spinner when in success state.",
+              "name": "--mdc-progress-success-color"
             },
             {
-              "description": "color of the radio button when active and pressed",
-              "name": "--mdc-radio-control-active-pressed-color"
+              "description": "The color of the spinner when in error state.",
+              "name": "--mdc-progress-error-color"
             },
             {
-              "description": "color of the radio button when disabled",
-              "name": "--mdc-radio-disabled-border-color"
+              "description": "Background color of the progressbar when inactive.",
+              "name": "--mdc-progressbar-default-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "description": "color of the radio button when active and disabled",
-              "name": "--mdc-radio-control-active-disabled-background"
+              "description": "Background color of the progressbar when active.",
+              "name": "--mdc-progressbar-default-active-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "description": "color of the radio button when inactive and disabled",
-              "name": "--mdc-radio-control-inactive-disabled-background"
-            }
-          ],
-          "members": [
+              "description": "Background color of the progressbar when in success state.",
+              "name": "--mdc-progressbar-success-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
             {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
-              "attribute": "checked",
-              "reflects": true
+              "description": "Background color of the progressbar when in error state.",
+              "name": "--mdc-progressbar-error-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "attribute": "readonly",
-              "reflects": true
+              "description": "The height of the progressbar.",
+              "name": "--mdc-progressbar-height",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
-              "attribute": "autofocus",
-              "reflects": true
+              "description": "The border radius of the progressbar.",
+              "name": "--mdc-progressbar-border-radius",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "Color of the progressbar label text.",
+              "name": "--mdc-progressbar-label-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "Line height of the label text.",
+              "name": "--mdc-progressbar-label-lineheight",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "Font size of the label text.",
+              "name": "--mdc-progressbar-label-fontsize",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "Font weight of the label text.",
+              "name": "--mdc-progressbar-label-fontweight",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
+            {
+              "description": "Color of the help text.",
+              "name": "--mdc-progressbar-help-text-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            }
+          ],
+          "members": [
             {
               "kind": "method",
-              "name": "getAllRadiosWithinSameGroup",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Radio[]"
-                }
-              },
-              "description": "Returns all radios within the same group (name)."
+              "name": "renderProgressSpinner",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "dispatchChangeEvent",
+              "name": "renderErrorState",
               "privacy": "private",
+              "description": "Renders the error state of the progress spinner.",
               "return": {
                 "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
+                  "text": ""
                 }
-              ],
-              "description": "The 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
+              }
             },
             {
               "kind": "method",
-              "name": "setGroupValidity",
+              "name": "renderSuccessState",
               "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": "Renders the success state of the progress spinner.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "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"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "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."
-                },
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "The event that triggered the update."
-                }
-              ],
-              "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": "renderLabelAndHelperText",
-              "privacy": "private"
+              }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "dataAriaLabel",
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
+              "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": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "Variant"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
+              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
+              "default": "default",
+              "attribute": "variant",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "validationMessage",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
-              "attribute": "validation-message",
+              "default": "'0'",
+              "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
+              "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "validity",
+              "name": "error",
               "type": {
-                "text": "ValidityState"
+                "text": "boolean"
               },
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
+              "default": "false",
+              "description": "Define error state of the progressbar\n- **true**\n- **false**",
+              "attribute": "error",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
+              "name": "getValidationVariant",
+              "privacy": "private",
+              "description": "Determines the validation state (success, error, or default) based on progress value and error state.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
               }
             },
             {
@@ -23036,100 +23114,64 @@
               }
             }
           ],
-          "events": [
+          "superclass": {
+            "name": "Progressbar",
+            "module": "/src/components/progressbar/progressbar.component"
+          },
+          "tagName": "mdc-progressspinner",
+          "jsDoc": "/**\n * `mdc-progressspinner` is a customizable, circular progress indicator component.\n * It visually represents the current completion state of a process, such as loading,\n * syncing, uploading, or any ongoing task that has a measurable percentage.\n *\n * The spinner is built using SVG with two concentric `<circle>` elements:\n * - The `progress` arc represents the portion of work completed.\n * - The `track` arc represents the remaining part.\n *\n * A visual gap is maintained between the progress and track arcs to clearly\n * distinguish the two segments. The component smoothly animates arc length\n * and respects accessibility best practices with ARIA attributes.\n *\n * The component supports different states:\n * - **Default**: Circular spinner shows the progress.\n * - **Success**: Displays a checkmark icon when progress reaches 100%.\n * - **Error**: Displays an error icon when in an error state.\n *\n * @tagname mdc-progressspinner\n *\n * @cssproperty --mdc-spinner-size - The size of the spinner.\n * @cssproperty --mdc-track-color - The color of the spinner track.\n * @cssproperty --mdc-progress-color - The color of the spinner progress.\n * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.\n * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.\n *\n */",
+          "customElement": true,
+          "attributes": [
             {
+              "name": "data-aria-label",
               "type": {
-                "text": "EventConstructor"
+                "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"
               }
             },
             {
-              "description": "(React: onChange) Event that gets dispatched when the radio state changes.",
-              "name": "change",
-              "reactName": "onChange"
-            },
-            {
-              "description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "checked",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "Variant"
               },
-              "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
-              "fieldName": "checked"
+              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
+              "default": "default",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "name": "readonly",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "fieldName": "readonly"
+              "default": "'0'",
+              "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "name": "autofocus",
+              "name": "error",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
-              "fieldName": "autofocus"
-            },
-            {
-              "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.",
-              "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",
+              "description": "Define error state of the progressbar\n- **true**\n- **false**",
+              "fieldName": "error",
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
               }
             },
             {
@@ -23207,23 +23249,6 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "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 * @dependency mdc-formfieldwrapper\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,
           "slots": [
             {
               "description": "slot to add the label info icon",
@@ -23241,230 +23266,342 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Radio",
-            "module": "components/radio/radio.component.js"
+            "name": "Progressspinner",
+            "module": "components/progressspinner/progressspinner.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/progressspinner/progressspinner.component.js",
+      "path": "components/radio/radio.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-progressspinner` is a customizable, circular progress indicator component.\nIt visually represents the current completion state of a process, such as loading,\nsyncing, uploading, or any ongoing task that has a measurable percentage.\n\nThe spinner is built using SVG with two concentric `<circle>` elements:\n- The `progress` arc represents the portion of work completed.\n- The `track` arc represents the remaining part.\n\nA visual gap is maintained between the progress and track arcs to clearly\ndistinguish the two segments. The component smoothly animates arc length\nand respects accessibility best practices with ARIA attributes.\n\nThe component supports different states:\n- **Default**: Circular spinner shows the progress.\n- **Success**: Displays a checkmark icon when progress reaches 100%.\n- **Error**: Displays an error icon when in an error state.",
-          "name": "Progressspinner",
+          "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": "The size of the spinner.",
-              "name": "--mdc-spinner-size"
+              "description": "color of the label when disabled",
+              "name": "--mdc-radio-text-disabled-color"
             },
             {
-              "description": "The color of the spinner track.",
-              "name": "--mdc-track-color"
+              "description": "color of the radio button when inactive and hovered",
+              "name": "--mdc-radio-control-inactive-hover"
             },
             {
-              "description": "The color of the spinner progress.",
-              "name": "--mdc-progress-color"
+              "description": "color of the radio button when inactive and pressed",
+              "name": "--mdc-radio-control-inactive-pressed-color"
             },
             {
-              "description": "The color of the spinner when in success state.",
-              "name": "--mdc-progress-success-color"
+              "description": "color of the radio button when active and hovered",
+              "name": "--mdc-radio-control-active-hover-color"
             },
             {
-              "description": "The color of the spinner when in error state.",
-              "name": "--mdc-progress-error-color"
+              "description": "color of the radio button when active and pressed",
+              "name": "--mdc-radio-control-active-pressed-color"
             },
             {
-              "description": "Background color of the progressbar when inactive.",
-              "name": "--mdc-progressbar-default-background-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "description": "color of the radio button when disabled",
+              "name": "--mdc-radio-disabled-border-color"
             },
             {
-              "description": "Background color of the progressbar when active.",
-              "name": "--mdc-progressbar-default-active-background-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "description": "color of the radio button when active and disabled",
+              "name": "--mdc-radio-control-active-disabled-background"
             },
             {
-              "description": "Background color of the progressbar when in success state.",
-              "name": "--mdc-progressbar-success-background-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "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
             },
             {
-              "description": "Background color of the progressbar when in error state.",
-              "name": "--mdc-progressbar-error-background-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "attribute": "readonly",
+              "reflects": true
             },
             {
-              "description": "The height of the progressbar.",
-              "name": "--mdc-progressbar-height",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "attribute": "autofocus",
+              "reflects": true
             },
             {
-              "description": "The border radius of the progressbar.",
-              "name": "--mdc-progressbar-border-radius",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "kind": "method",
+              "name": "getAllRadiosWithinSameGroup",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Radio[]"
+                }
+              },
+              "description": "Returns all radios within the same group (name)."
             },
             {
-              "description": "Color of the progressbar label text.",
-              "name": "--mdc-progressbar-label-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "kind": "method",
+              "name": "dispatchChangeEvent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "The 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
             },
             {
-              "description": "Line height of the label text.",
-              "name": "--mdc-progressbar-label-lineheight",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "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."
             },
             {
-              "description": "Font size of the label text.",
-              "name": "--mdc-progressbar-label-fontsize",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "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."
             },
             {
-              "description": "Font weight of the label text.",
-              "name": "--mdc-progressbar-label-fontweight",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
             },
             {
-              "description": "Color of the help text.",
-              "name": "--mdc-progressbar-help-text-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
-            }
-          ],
-          "members": [
+              "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": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event that triggered the update."
+                }
+              ],
+              "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": "renderProgressSpinner",
-              "privacy": "private"
+              "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": "renderErrorState",
+              "name": "updateTabIndex",
               "privacy": "private",
-              "description": "Renders the error state of the progress spinner.",
               "return": {
                 "type": {
-                  "text": ""
+                  "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": "method",
-              "name": "renderSuccessState",
-              "privacy": "private",
-              "description": "Renders the success state of the progress spinner.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
+              "kind": "field",
+              "name": "renderLabelAndHelperText",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "name",
               "type": {
-                "text": "string | null"
+                "text": "string"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "value",
               "type": {
-                "text": "Variant"
+                "text": "string"
               },
-              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
-              "default": "default",
-              "attribute": "variant",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "validationMessage",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'0'",
-              "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
-              "attribute": "value",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "attribute": "validation-message",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "error",
+              "name": "validity",
               "type": {
-                "text": "boolean"
+                "text": "ValidityState"
               },
-              "default": "false",
-              "description": "Define error state of the progressbar\n- **true**\n- **false**",
-              "attribute": "error",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "getValidationVariant",
-              "privacy": "private",
-              "description": "Determines the validation state (success, error, or default) based on progress value and error state.",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
             {
@@ -23637,38 +23774,62 @@
               }
             }
           ],
-          "superclass": {
-            "name": "Progressbar",
-            "module": "/src/components/progressbar/progressbar.component"
-          },
-          "tagName": "mdc-progressspinner",
-          "jsDoc": "/**\n * `mdc-progressspinner` is a customizable, circular progress indicator component.\n * It visually represents the current completion state of a process, such as loading,\n * syncing, uploading, or any ongoing task that has a measurable percentage.\n *\n * The spinner is built using SVG with two concentric `<circle>` elements:\n * - The `progress` arc represents the portion of work completed.\n * - The `track` arc represents the remaining part.\n *\n * A visual gap is maintained between the progress and track arcs to clearly\n * distinguish the two segments. The component smoothly animates arc length\n * and respects accessibility best practices with ARIA attributes.\n *\n * The component supports different states:\n * - **Default**: Circular spinner shows the progress.\n * - **Success**: Displays a checkmark icon when progress reaches 100%.\n * - **Error**: Displays an error icon when in an error state.\n *\n * @tagname mdc-progressspinner\n *\n * @cssproperty --mdc-spinner-size - The size of the spinner.\n * @cssproperty --mdc-track-color - The color of the spinner track.\n * @cssproperty --mdc-progress-color - The color of the spinner progress.\n * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.\n * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.\n *\n */",
-          "customElement": true,
+          "events": [
+            {
+              "type": {
+                "text": "EventConstructor"
+              }
+            },
+            {
+              "description": "(React: onChange) Event that gets dispatched when the radio state changes.",
+              "name": "change",
+              "reactName": "onChange"
+            },
+            {
+              "description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            }
+          ],
           "attributes": [
             {
-              "name": "data-aria-label",
+              "name": "checked",
               "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.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "fieldName": "checked"
             },
             {
-              "name": "variant",
+              "name": "readonly",
               "type": {
-                "text": "Variant"
+                "text": "boolean"
               },
-              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
-              "default": "default",
-              "fieldName": "variant",
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "fieldName": "autofocus"
+            },
+            {
+              "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": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
@@ -23676,25 +23837,37 @@
               "type": {
                 "text": "string"
               },
-              "default": "'0'",
-              "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
               "fieldName": "value",
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "error",
+              "name": "validation-message",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Define error state of the progressbar\n- **true**\n- **false**",
-              "fieldName": "error",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "fieldName": "validationMessage",
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
+                "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"
               }
             },
             {
@@ -23772,6 +23945,23 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "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 * @dependency mdc-formfieldwrapper\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,
           "slots": [
             {
               "description": "slot to add the label info icon",
@@ -23789,8 +23979,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Progressspinner",
-            "module": "components/progressspinner/progressspinner.component.js"
+            "name": "Radio",
+            "module": "components/radio/radio.component.js"
           }
         }
       ]