@momentum-design/components 0.120.37 → 0.120.38

package/dist/custom-elements.json

@@ -1586,218 +1586,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/animation/animation.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
-          "name": "Animation",
-          "members": [
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "AnimationNames | undefined"
-              },
-              "description": "Name of the animation (= filename)",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "loop",
-              "type": {
-                "text": "LoopType | undefined"
-              },
-              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
-              "attribute": "loop",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "autoplay",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Weather start the animation automatically",
-              "attribute": "autoplay",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabelledBy",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "attribute": "aria-labelledby"
-            },
-            {
-              "kind": "field",
-              "name": "lottieInstance",
-              "type": {
-                "text": "AnimationItem | undefined"
-              },
-              "privacy": "private",
-              "description": "Lottie animation instance"
-            },
-            {
-              "kind": "field",
-              "name": "containerRef",
-              "type": {
-                "text": "Ref<HTMLDivElement>"
-              },
-              "privacy": "private",
-              "description": "Container for the animation"
-            },
-            {
-              "kind": "field",
-              "name": "animation",
-              "description": "Exposed API of the animation library (lottie)",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "getLoopValue",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "onLoadSuccessHandler",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "animationData",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ],
-              "description": "Create new lotty instance for the loaded data"
-            },
-            {
-              "kind": "method",
-              "name": "onLoadFailHandler",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "error",
-                  "type": {
-                    "text": "Error"
-                  }
-                }
-              ],
-              "description": "Error handler for animation loading"
-            },
-            {
-              "kind": "method",
-              "name": "getAnimationData",
-              "privacy": "private",
-              "description": "Import animation data dynamically"
-            },
-            {
-              "kind": "field",
-              "name": "onCompleteHandler",
-              "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
-            }
-          ],
-          "events": [
-            {
-              "name": "load",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onLoad) This event is dispatched when the animation is loaded",
-              "reactName": "onLoad"
-            },
-            {
-              "description": "(React: onComplete) This event is dispatched when all animation loops completed",
-              "name": "complete",
-              "reactName": "onComplete"
-            },
-            {
-              "description": "(React: onError) This event is dispatched when animation loading failed",
-              "name": "error",
-              "reactName": "onError"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "AnimationNames | undefined"
-              },
-              "description": "Name of the animation (= filename)",
-              "fieldName": "name"
-            },
-            {
-              "name": "loop",
-              "type": {
-                "text": "LoopType | undefined"
-              },
-              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
-              "fieldName": "loop"
-            },
-            {
-              "name": "autoplay",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Weather start the animation automatically",
-              "fieldName": "autoplay"
-            },
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            },
-            {
-              "name": "aria-labelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "fieldName": "ariaLabelledBy"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-animation",
-          "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Animation",
-            "module": "components/animation/animation.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/announcementdialog/announcementdialog.component.js",
@@ -2690,7 +2478,7 @@
             },
             {
               "kind": "field",
-              "name": "ariaDescribedBy",
+              "name": "ariaDescribedby",
               "type": {
                 "text": "string | null"
               },
@@ -3034,7 +2822,7 @@
               },
               "default": "null",
               "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
-              "fieldName": "ariaDescribedBy",
+              "fieldName": "ariaDescribedby",
               "inheritedFrom": {
                 "name": "Dialog",
                 "module": "src/components/dialog/dialog.component.ts"
@@ -3222,6 +3010,218 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/animation/animation.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
+          "name": "Animation",
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "AnimationNames | undefined"
+              },
+              "description": "Name of the animation (= filename)",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "loop",
+              "type": {
+                "text": "LoopType | undefined"
+              },
+              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "attribute": "loop",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autoplay",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Weather start the animation automatically",
+              "attribute": "autoplay",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "attribute": "aria-labelledby"
+            },
+            {
+              "kind": "field",
+              "name": "lottieInstance",
+              "type": {
+                "text": "AnimationItem | undefined"
+              },
+              "privacy": "private",
+              "description": "Lottie animation instance"
+            },
+            {
+              "kind": "field",
+              "name": "containerRef",
+              "type": {
+                "text": "Ref<HTMLDivElement>"
+              },
+              "privacy": "private",
+              "description": "Container for the animation"
+            },
+            {
+              "kind": "field",
+              "name": "animation",
+              "description": "Exposed API of the animation library (lottie)",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "getLoopValue",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onLoadSuccessHandler",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "animationData",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "description": "Create new lotty instance for the loaded data"
+            },
+            {
+              "kind": "method",
+              "name": "onLoadFailHandler",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "Error"
+                  }
+                }
+              ],
+              "description": "Error handler for animation loading"
+            },
+            {
+              "kind": "method",
+              "name": "getAnimationData",
+              "privacy": "private",
+              "description": "Import animation data dynamically"
+            },
+            {
+              "kind": "field",
+              "name": "onCompleteHandler",
+              "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
+            }
+          ],
+          "events": [
+            {
+              "name": "load",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onLoad) This event is dispatched when the animation is loaded",
+              "reactName": "onLoad"
+            },
+            {
+              "description": "(React: onComplete) This event is dispatched when all animation loops completed",
+              "name": "complete",
+              "reactName": "onComplete"
+            },
+            {
+              "description": "(React: onError) This event is dispatched when animation loading failed",
+              "name": "error",
+              "reactName": "onError"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "AnimationNames | undefined"
+              },
+              "description": "Name of the animation (= filename)",
+              "fieldName": "name"
+            },
+            {
+              "name": "loop",
+              "type": {
+                "text": "LoopType | undefined"
+              },
+              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "fieldName": "loop"
+            },
+            {
+              "name": "autoplay",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Weather start the animation automatically",
+              "fieldName": "autoplay"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "aria-labelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "fieldName": "ariaLabelledby"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-animation",
+          "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Animation",
+            "module": "components/animation/animation.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/avatar/avatar.component.js",
@@ -15280,7 +15280,7 @@
             },
             {
               "kind": "field",
-              "name": "ariaDescribedBy",
+              "name": "ariaDescribedby",
               "type": {
                 "text": "string | null"
               },
@@ -16052,7 +16052,7 @@
               },
               "default": "null",
               "description": "Defines a string value for the aria-describedby attribute that refers to the element\ndescribing the dialog for accessibility",
-              "fieldName": "ariaDescribedBy"
+              "fieldName": "ariaDescribedby"
             },
             {
               "name": "aria-description",
@@ -18254,7 +18254,7 @@
             },
             {
               "kind": "field",
-              "name": "ariaLabelledBy",
+              "name": "ariaLabelledby",
               "type": {
                 "text": "string | null"
               },
@@ -18386,7 +18386,7 @@
               },
               "default": "null",
               "description": "Aria-labelledby attribute to be set for accessibility",
-              "fieldName": "ariaLabelledBy"
+              "fieldName": "ariaLabelledby"
             }
           ],
           "superclass": {
@@ -22578,143 +22578,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/listheader/listheader.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Listheader component is used to display a header in a list.\nIt can include icons before and after the header text, and allows for additional content via slots.",
-          "name": "Listheader",
-          "cssProperties": [
-            {
-              "description": "height of the header",
-              "name": "--mdc-listheader-height"
-            },
-            {
-              "description": "padding around the header content",
-              "name": "--mdc-listheader-padding"
-            },
-            {
-              "description": "gap between content",
-              "name": "--mdc-listheader-gap"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The header text of list header",
-              "name": "header-text"
-            },
-            {
-              "description": "The postfix icon of list header",
-              "name": "postfix-icon"
-            },
-            {
-              "description": "The prefix icon of list header",
-              "name": "prefix-icon"
-            }
-          ],
-          "slots": [
-            {
-              "description": "to pass in actionable content like buttons or links",
-              "name": "default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "prefixIcon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
-              "attribute": "prefix-icon"
-            },
-            {
-              "kind": "field",
-              "name": "postfixIcon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon rendered after the slot & text\n\nIf not provided, no icon will be rendered and content will be aligned to the end.",
-              "attribute": "postfix-icon"
-            },
-            {
-              "kind": "field",
-              "name": "headerText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Text to be rendered in the header",
-              "attribute": "header-text"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the header, making it visually styled as disabled.\n\nNOTE: slot content will still be interactive unless individually disabled.\nMake sure to handle the disabled state of any actionable elements inside the slot.",
-              "attribute": "disabled",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "prefix-icon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
-              "fieldName": "prefixIcon"
-            },
-            {
-              "name": "postfix-icon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon rendered after the slot & text\n\nIf not provided, no icon will be rendered and content will be aligned to the end.",
-              "fieldName": "postfixIcon"
-            },
-            {
-              "name": "header-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Text to be rendered in the header",
-              "fieldName": "headerText"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the header, making it visually styled as disabled.\n\nNOTE: slot content will still be interactive unless individually disabled.\nMake sure to handle the disabled state of any actionable elements inside the slot.",
-              "fieldName": "disabled"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-listheader",
-          "jsDoc": "/**\n * Listheader component is used to display a header in a list.\n * It can include icons before and after the header text, and allows for additional content via slots.\n *\n * @tagname mdc-listheader\n *\n * @slot default - to pass in actionable content like buttons or links\n *\n * @cssproperty --mdc-listheader-height - height of the header\n * @cssproperty --mdc-listheader-padding - padding around the header content\n * @cssproperty --mdc-listheader-gap - gap between content\n *\n * @csspart header-text - The header text of list header\n * @csspart postfix-icon - The postfix icon of list header\n * @csspart prefix-icon - The prefix icon of list header\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Listheader",
-            "module": "components/listheader/listheader.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/listitem/listitem.component.js",
@@ -23678,6 +23541,143 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/listheader/listheader.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Listheader component is used to display a header in a list.\nIt can include icons before and after the header text, and allows for additional content via slots.",
+          "name": "Listheader",
+          "cssProperties": [
+            {
+              "description": "height of the header",
+              "name": "--mdc-listheader-height"
+            },
+            {
+              "description": "padding around the header content",
+              "name": "--mdc-listheader-padding"
+            },
+            {
+              "description": "gap between content",
+              "name": "--mdc-listheader-gap"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The header text of list header",
+              "name": "header-text"
+            },
+            {
+              "description": "The postfix icon of list header",
+              "name": "postfix-icon"
+            },
+            {
+              "description": "The prefix icon of list header",
+              "name": "prefix-icon"
+            }
+          ],
+          "slots": [
+            {
+              "description": "to pass in actionable content like buttons or links",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "prefixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
+              "attribute": "prefix-icon"
+            },
+            {
+              "kind": "field",
+              "name": "postfixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon rendered after the slot & text\n\nIf not provided, no icon will be rendered and content will be aligned to the end.",
+              "attribute": "postfix-icon"
+            },
+            {
+              "kind": "field",
+              "name": "headerText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Text to be rendered in the header",
+              "attribute": "header-text"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the header, making it visually styled as disabled.\n\nNOTE: slot content will still be interactive unless individually disabled.\nMake sure to handle the disabled state of any actionable elements inside the slot.",
+              "attribute": "disabled",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "prefix-icon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
+              "fieldName": "prefixIcon"
+            },
+            {
+              "name": "postfix-icon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon rendered after the slot & text\n\nIf not provided, no icon will be rendered and content will be aligned to the end.",
+              "fieldName": "postfixIcon"
+            },
+            {
+              "name": "header-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Text to be rendered in the header",
+              "fieldName": "headerText"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the header, making it visually styled as disabled.\n\nNOTE: slot content will still be interactive unless individually disabled.\nMake sure to handle the disabled state of any actionable elements inside the slot.",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-listheader",
+          "jsDoc": "/**\n * Listheader component is used to display a header in a list.\n * It can include icons before and after the header text, and allows for additional content via slots.\n *\n * @tagname mdc-listheader\n *\n * @slot default - to pass in actionable content like buttons or links\n *\n * @cssproperty --mdc-listheader-height - height of the header\n * @cssproperty --mdc-listheader-padding - padding around the header content\n * @cssproperty --mdc-listheader-gap - gap between content\n *\n * @csspart header-text - The header text of list header\n * @csspart postfix-icon - The postfix icon of list header\n * @csspart prefix-icon - The prefix icon of list header\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Listheader",
+            "module": "components/listheader/listheader.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/menuitem/menuitem.component.js",
@@ -35255,32 +35255,32 @@
     },
     {
       "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": "size of the inner circle",
+              "name": "--mdc-radio-inner-circle-size"
             },
             {
-              "description": "The color of the spinner track.",
-              "name": "--mdc-track-color"
+              "description": "size of the outer circle",
+              "name": "--mdc-radio-outer-circle-size"
             },
             {
-              "description": "The color of the spinner progress.",
-              "name": "--mdc-progress-color"
+              "description": "background color of the inner circle",
+              "name": "--mdc-radio-inner-circle-background-color"
             },
             {
-              "description": "The color of the spinner when in success state.",
-              "name": "--mdc-progress-success-color"
+              "description": "border color of the outer circle",
+              "name": "--mdc-radio-outer-circle-border-color"
             },
             {
-              "description": "The color of the spinner when in error state.",
-              "name": "--mdc-progress-error-color"
+              "description": "background color of the outer circle",
+              "name": "--mdc-radio-outer-circle-background-color"
             },
             {
               "description": "Font size for the label text.",
@@ -35353,65 +35353,9 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
-            },
-            {
-              "description": "Background color of the remaining progressbar portion.",
-              "name": "--mdc-progressbar-background-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
-            },
-            {
-              "description": "Background color of the elapsed progressbar portion.",
-              "name": "--mdc-progressbar-progress-background-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
-            },
-            {
-              "description": "The height of the progressbar.",
-              "name": "--mdc-progressbar-height",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
-            },
-            {
-              "description": "The border radius of the progressbar.",
-              "name": "--mdc-progressbar-border-radius",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
             }
           ],
           "cssParts": [
-            {
-              "description": "The error icon of the progressspinner.",
-              "name": "error-icon"
-            },
-            {
-              "description": "The base of the progressspinner.",
-              "name": "spinner-base"
-            },
-            {
-              "description": "The container of the progressspinner.",
-              "name": "spinner-container"
-            },
-            {
-              "description": "The progress of the progressspinner.",
-              "name": "spinner-progress"
-            },
-            {
-              "description": "The track of the progressspinner.",
-              "name": "spinner-track"
-            },
-            {
-              "description": "The success icon of the progressspinner.",
-              "name": "success-icon"
-            },
             {
               "description": "The label element.",
               "name": "label",
@@ -35429,110 +35373,209 @@
               }
             },
             {
-              "description": "The helper/validation text element.",
-              "name": "help-text",
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "The container for the helper/validation icon and text elements.",
-              "name": "help-text-container",
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
-              "name": "required-indicator",
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
-              "name": "info-icon-btn",
+              "description": "The helper/validation text element.",
+              "name": "help-text",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "The toggletip element that is displayed when the info icon button is clicked.",
-              "name": "label-toggletip",
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
-              "name": "helper-icon",
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            },
+            {
+              "description": "The native radio input element.",
+              "name": "radio-input"
+            },
+            {
+              "description": "The container for the label and helper text elements.",
+              "name": "text-container"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "attribute": "checked",
+              "reflects": true
+            },
             {
               "kind": "method",
-              "name": "renderProgressSpinner",
-              "privacy": "private"
+              "name": "getAllRadiosWithinSameGroup",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Radio[]"
+                }
+              },
+              "description": "Returns all radios within the same group (name)."
             },
             {
               "kind": "method",
-              "name": "renderErrorState",
+              "name": "setGroupValidity",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "radios",
+                  "type": {
+                    "text": "Radio[]"
+                  },
+                  "description": "Array of radios of the same group"
+                },
+                {
+                  "name": "isValid",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Boolean value to set the validity of the group"
+                }
+              ],
+              "description": "Sets the validity of the group of radios."
+            },
+            {
+              "kind": "method",
+              "name": "setActualFormValue",
+              "privacy": "private",
+              "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
+            },
+            {
+              "kind": "method",
+              "name": "handleChange",
               "privacy": "private",
-              "description": "Renders the error state of the progress spinner.",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
-              }
+              },
+              "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": "renderSuccessState",
+              "name": "updateRadio",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "enabledRadios",
+                  "type": {
+                    "text": "Radio[]"
+                  },
+                  "description": "An array of enabled radio buttons within the same group."
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the radio button to be updated within the enabled radios array."
+                }
+              ],
+              "description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
               "privacy": "private",
-              "description": "Renders the success state of the progress spinner.",
               "return": {
                 "type": {
-                  "text": ""
+                  "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": "dataAriaLabel",
+              "name": "renderLabelAndHelperText",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "autoFocusOnMount",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "attribute": "auto-focus-on-mount",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "AutoFocusOnMountMixin",
+                "module": "utils/mixins/AutoFocusOnMountMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "name",
               "type": {
-                "text": "Variant"
+                "text": "string"
               },
-              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
-              "default": "default",
-              "attribute": "variant",
+              "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": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
@@ -35541,42 +35584,98 @@
               "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...)",
               "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "error",
+              "name": "validationMessage",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Define error state of the progressbar\n- **true**\n- **false**",
-              "attribute": "error",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "attribute": "validation-message",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "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"
               }
             },
             {
@@ -35813,38 +35912,55 @@
               }
             }
           ],
-          "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 * @csspart error-icon - The error icon of the progressspinner.\n * @csspart spinner-base - The base of the progressspinner.\n * @csspart spinner-container - The container of the progressspinner.\n * @csspart spinner-progress - The progress of the progressspinner.\n * @csspart spinner-track - The track of the progressspinner.\n * @csspart success-icon - The success icon of the progressspinner.\n */",
-          "customElement": true,
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "(React: onChange) Event that gets dispatched when the radio state changes.",
+              "reactName": "onChange"
+            },
+            {
+              "description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            }
+          ],
           "attributes": [
             {
-              "name": "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",
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "auto-focus-on-mount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "fieldName": "autoFocusOnMount",
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "name": "AutoFocusOnMountMixin",
+                "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
               }
             },
             {
-              "name": "variant",
+              "name": "name",
               "type": {
-                "text": "Variant"
+                "text": "string"
               },
-              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
-              "default": "default",
-              "fieldName": "variant",
+              "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"
               }
             },
             {
@@ -35852,25 +35968,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.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "fieldName": "validationMessage",
               "inheritedFrom": {
-                "name": "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"
               }
             },
             {
@@ -36010,6 +36138,27 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "AutoFocusOnMountMixin",
+              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
+            },
+            {
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            }
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
+          },
+          "tagName": "mdc-radio",
+          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle\n * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle\n * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle\n * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart radio-input - The native radio input element.\n * @csspart text-container - The container for the label and helper text elements.\n */",
+          "customElement": true,
           "slots": [
             {
               "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
@@ -36020,16 +36169,16 @@
               }
             },
             {
-              "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
-              "name": "help-icon",
+              "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
+              "name": "toggletip",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
-              "name": "toggletip",
+              "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
+              "name": "help-icon",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -36051,40 +36200,40 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Progressspinner",
-            "module": "components/progressspinner/progressspinner.component.js"
+            "name": "Radio",
+            "module": "components/radio/radio.component.js"
           }
         }
       ]
     },
     {
       "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": "size of the inner circle",
-              "name": "--mdc-radio-inner-circle-size"
+              "description": "The size of the spinner.",
+              "name": "--mdc-spinner-size"
             },
             {
-              "description": "size of the outer circle",
-              "name": "--mdc-radio-outer-circle-size"
+              "description": "The color of the spinner track.",
+              "name": "--mdc-track-color"
             },
             {
-              "description": "background color of the inner circle",
-              "name": "--mdc-radio-inner-circle-background-color"
+              "description": "The color of the spinner progress.",
+              "name": "--mdc-progress-color"
             },
             {
-              "description": "border color of the outer circle",
-              "name": "--mdc-radio-outer-circle-border-color"
+              "description": "The color of the spinner when in success state.",
+              "name": "--mdc-progress-success-color"
             },
             {
-              "description": "background color of the outer circle",
-              "name": "--mdc-radio-outer-circle-background-color"
+              "description": "The color of the spinner when in error state.",
+              "name": "--mdc-progress-error-color"
             },
             {
               "description": "Font size for the label text.",
@@ -36157,9 +36306,65 @@
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
+            },
+            {
+              "description": "Background color of the remaining progressbar portion.",
+              "name": "--mdc-progressbar-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "Background color of the elapsed progressbar portion.",
+              "name": "--mdc-progressbar-progress-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "The height of the progressbar.",
+              "name": "--mdc-progressbar-height",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            },
+            {
+              "description": "The border radius of the progressbar.",
+              "name": "--mdc-progressbar-border-radius",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             }
           ],
           "cssParts": [
+            {
+              "description": "The error icon of the progressspinner.",
+              "name": "error-icon"
+            },
+            {
+              "description": "The base of the progressspinner.",
+              "name": "spinner-base"
+            },
+            {
+              "description": "The container of the progressspinner.",
+              "name": "spinner-container"
+            },
+            {
+              "description": "The progress of the progressspinner.",
+              "name": "spinner-progress"
+            },
+            {
+              "description": "The track of the progressspinner.",
+              "name": "spinner-track"
+            },
+            {
+              "description": "The success icon of the progressspinner.",
+              "name": "success-icon"
+            },
             {
               "description": "The label element.",
               "name": "label",
@@ -36177,209 +36382,110 @@
               }
             },
             {
-              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
-              "name": "required-indicator",
+              "description": "The helper/validation text element.",
+              "name": "help-text",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
-              "name": "info-icon-btn",
+              "description": "The container for the helper/validation icon and text elements.",
+              "name": "help-text-container",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "The toggletip element that is displayed when the info icon button is clicked.",
-              "name": "label-toggletip",
+              "description": "The required indicator element that is displayed next to the label when the `required` property is set to true.",
+              "name": "required-indicator",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "The helper/validation text element.",
-              "name": "help-text",
+              "description": "The info icon button element that is displayed next to the label when the `toggletip-text` property is set.",
+              "name": "info-icon-btn",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
-              "name": "helper-icon",
+              "description": "The toggletip element that is displayed when the info icon button is clicked.",
+              "name": "label-toggletip",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "The container for the helper/validation icon and text elements.",
-              "name": "help-text-container",
+              "description": "The helper/validation icon element that is displayed next to the helper/validation text.",
+              "name": "helper-icon",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
-            },
-            {
-              "description": "The native radio input element.",
-              "name": "radio-input"
-            },
-            {
-              "description": "The container for the label and helper text elements.",
-              "name": "text-container"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "getAllRadiosWithinSameGroup",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Radio[]"
-                }
-              },
-              "description": "Returns all radios within the same group (name)."
-            },
             {
               "kind": "method",
-              "name": "setGroupValidity",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "radios",
-                  "type": {
-                    "text": "Radio[]"
-                  },
-                  "description": "Array of radios of the same group"
-                },
-                {
-                  "name": "isValid",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Boolean value to set the validity of the group"
-                }
-              ],
-              "description": "Sets the validity of the group of radios."
-            },
-            {
-              "kind": "method",
-              "name": "setActualFormValue",
-              "privacy": "private",
-              "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
-            },
-            {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
-            },
-            {
-              "kind": "method",
-              "name": "updateRadio",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "enabledRadios",
-                  "type": {
-                    "text": "Radio[]"
-                  },
-                  "description": "An array of enabled radio buttons within the same group."
-                },
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the radio button to be updated within the enabled radios array."
-                }
-              ],
-              "description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
+              "name": "renderProgressSpinner",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
+              "name": "renderErrorState",
               "privacy": "private",
+              "description": "Renders the error state of the progress spinner.",
               "return": {
                 "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
+                  "text": ""
                 }
-              ],
-              "description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
+              }
             },
             {
               "kind": "method",
-              "name": "updateTabIndex",
+              "name": "renderSuccessState",
               "privacy": "private",
+              "description": "Renders the success state of the progress spinner.",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
-              },
-              "description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
-            },
-            {
-              "kind": "field",
-              "name": "renderLabelAndHelperText",
-              "privacy": "private"
+              }
             },
             {
               "kind": "field",
-              "name": "autoFocusOnMount",
+              "name": "dataAriaLabel",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "attribute": "auto-focus-on-mount",
+              "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": "AutoFocusOnMountMixin",
-                "module": "utils/mixins/AutoFocusOnMountMixin.js"
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "Variant"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
+              "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"
               }
             },
             {
@@ -36388,98 +36494,42 @@
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "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"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "validationMessage",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "attribute": "validation-message",
-              "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"
               }
             },
             {
@@ -36716,55 +36766,38 @@
               }
             }
           ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "Event"
-              },
-              "description": "(React: onChange) Event that gets dispatched when the radio state changes.",
-              "reactName": "onChange"
-            },
-            {
-              "description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
+          "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 * @csspart error-icon - The error icon of the progressspinner.\n * @csspart spinner-base - The base of the progressspinner.\n * @csspart spinner-container - The container of the progressspinner.\n * @csspart spinner-progress - The progress of the progressspinner.\n * @csspart spinner-track - The track of the progressspinner.\n * @csspart success-icon - The success icon of the progressspinner.\n */",
+          "customElement": true,
           "attributes": [
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "auto-focus-on-mount",
+              "name": "data-aria-label",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "fieldName": "autoFocusOnMount",
+              "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": "AutoFocusOnMountMixin",
-                "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
-              "name": "name",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "Variant"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "fieldName": "name",
+              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
+              "default": "default",
+              "fieldName": "variant",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
               }
             },
             {
@@ -36772,37 +36805,25 @@
               "type": {
                 "text": "string"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "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": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
-            },
-            {
-              "name": "validation-message",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "fieldName": "validationMessage",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
               }
             },
             {
-              "name": "data-aria-label",
+              "name": "error",
               "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",
+              "default": "false",
+              "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"
               }
             },
             {
@@ -36942,27 +36963,6 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "AutoFocusOnMountMixin",
-              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
-            },
-            {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
-            },
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            }
-          ],
-          "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
-          },
-          "tagName": "mdc-radio",
-          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-staticradio\n * @dependency mdc-toggletip\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-radio-outer-circle-size - size of the outer circle\n * @cssproperty --mdc-radio-inner-circle-background-color - background color of the inner circle\n * @cssproperty --mdc-radio-outer-circle-border-color - border color of the outer circle\n * @cssproperty --mdc-radio-outer-circle-background-color - background color of the outer circle\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart radio-input - The native radio input element.\n * @csspart text-container - The container for the label and helper text elements.\n */",
-          "customElement": true,
           "slots": [
             {
               "description": "Slot for the label element. If not provided, the `label` property will be used to render the label.",
@@ -36973,16 +36973,16 @@
               }
             },
             {
-              "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
-              "name": "toggletip",
+              "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
+              "name": "help-icon",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "description": "Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.",
-              "name": "help-icon",
+              "description": "Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.",
+              "name": "toggletip",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
@@ -37004,8 +37004,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Radio",
-            "module": "components/radio/radio.component.js"
+            "name": "Progressspinner",
+            "module": "components/progressspinner/progressspinner.component.js"
           }
         }
       ]