@momentum-design/components 0.75.2 → 0.75.4

package/dist/custom-elements.json

@@ -9059,7 +9059,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nDialog component have 2 variants: default and promotional.\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
+          "description": "Dialog component is a modal dialog that can be used to display information or prompt the user for input.\nIt can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\nThe dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.\nThe dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n\nThe dialog can be controlled solely through the `visible` property, no trigger element is required.\nIf a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\nremember the previously focused element before the dialog was opened.\n\nDialog component have 2 variants: default and promotional.\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n- Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n\n**Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n- Use `?visible=true/false` as an attribute instead of `visible=true/false`\n- Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions",
           "name": "Dialog",
           "cssProperties": [
             {
@@ -9088,6 +9088,10 @@
             }
           ],
           "slots": [
+            {
+              "description": "Slot for the dialog header content. This can be used to pass custom header content.",
+              "name": "header-prefix"
+            },
             {
               "description": "Slot for the dialog body content",
               "name": "dialog-body"
@@ -9964,7 +9968,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-dialog",
-          "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n *\n */",
+          "jsDoc": "/**\n * Dialog component is a modal dialog that can be used to display information or prompt the user for input.\n * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.\n * The dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.\n * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.\n *\n * The dialog can be controlled solely through the `visible` property, no trigger element is required.\n * If a `triggerId` is provided, the dialog will manage focus with that element, otherwise it will\n * remember the previously focused element before the dialog was opened.\n *\n * Dialog component have 2 variants: default and promotional.\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - The dialog should have an aria-label or aria-labelledby attribute to provide a label for screen readers.\n * - Use aria-labelledby to reference the ID of the element that labels the dialog when there is no visible title.\n *\n * **Note: Programmatic show/hide requires the ? prefix on the visible attribute**\n * - Use `?visible=true/false` as an attribute instead of `visible=true/false`\n * - Reference docs for more info: https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions\n *\n * @dependency mdc-button\n * @dependency mdc-text\n *\n * @tagname mdc-dialog\n *\n * @event shown - (React: onShown) Dispatched when the dialog is shown\n * @event hidden - (React: onHidden) Dispatched when the dialog is hidden\n * @event created - (React: onCreated) Dispatched when the dialog is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) Dispatched when the dialog is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-dialog-primary-background-color - primary background color of the dialog\n * @cssproperty --mdc-dialog-border-color - border color of the dialog\n * @cssproperty --mdc-dialog-header-text-color - text color of the header/title of the dialog\n * @cssproperty --mdc-dialog-description-text-color - text color of the below header description of the dialog\n * @cssproperty --mdc-dialog-elevation-3 - elevation of the dialog\n * @cssproperty --mdc-dialog-width - width of the dialog\n *\n * @slot header-prefix - Slot for the dialog header content. This can be used to pass custom header content.\n * @slot dialog-body - Slot for the dialog body content\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n *\n */",
           "customElement": true
         }
       ],
@@ -11608,202 +11612,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/iconprovider/iconprovider.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
-          "name": "IconProvider",
-          "slots": [
-            {
-              "description": "children",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "description": "Context object of the IconProvider, to be consumed by child components",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "iconSet",
-              "type": {
-                "text": "IconSet | undefined"
-              },
-              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
-              "default": "momentum-icons",
-              "attribute": "icon-set",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "url",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
-              "attribute": "url"
-            },
-            {
-              "kind": "field",
-              "name": "fileExtension",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
-              "default": "svg",
-              "attribute": "file-extension",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnit",
-              "type": {
-                "text": "string"
-              },
-              "description": "Length unit used for sizing of icons",
-              "default": "em",
-              "attribute": "length-unit",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
-              "default": "1",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "cacheStrategy",
-              "type": {
-                "text": "CacheStrategy | undefined"
-              },
-              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
-              "default": "undefined",
-              "attribute": "cache-strategy"
-            },
-            {
-              "kind": "field",
-              "name": "cacheName",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
-              "default": "undefined",
-              "attribute": "cache-name"
-            },
-            {
-              "kind": "method",
-              "name": "updateValuesInContext",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "icon-set",
-              "type": {
-                "text": "IconSet | undefined"
-              },
-              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
-              "default": "momentum-icons",
-              "fieldName": "iconSet"
-            },
-            {
-              "name": "url",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
-              "fieldName": "url"
-            },
-            {
-              "name": "file-extension",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
-              "default": "svg",
-              "fieldName": "fileExtension"
-            },
-            {
-              "name": "length-unit",
-              "type": {
-                "text": "string"
-              },
-              "description": "Length unit used for sizing of icons",
-              "default": "em",
-              "fieldName": "lengthUnit"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
-              "default": "1",
-              "fieldName": "size"
-            },
-            {
-              "name": "cache-strategy",
-              "type": {
-                "text": "CacheStrategy | undefined"
-              },
-              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
-              "default": "undefined",
-              "fieldName": "cacheStrategy"
-            },
-            {
-              "name": "cache-name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
-              "default": "undefined",
-              "fieldName": "cacheName"
-            }
-          ],
-          "superclass": {
-            "name": "Provider",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-iconprovider",
-          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "IconProvider",
-            "module": "components/iconprovider/iconprovider.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/input/input.component.js",
@@ -12755,64 +12563,260 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/inputchip/inputchip.component.js",
+      "path": "components/iconprovider/iconprovider.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n\n- It supports a leading icon along with label.\n- It supports an error state for validation.\n- It supports a close button to remove the chip.",
-          "name": "InputChip",
-          "cssProperties": [
-            {
-              "description": "The color of the chip.",
-              "name": "--mdc-chip-color"
-            },
-            {
-              "description": "The border color of the chip.",
-              "name": "--mdc-chip-border-color"
-            },
+          "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
+          "name": "IconProvider",
+          "slots": [
             {
-              "description": "The background color of the chip.",
-              "name": "--mdc-chip-background-color"
+              "description": "children",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "attribute": "label"
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Context object of the IconProvider, to be consumed by child components",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "error",
+              "name": "iconSet",
               "type": {
-                "text": "boolean"
+                "text": "IconSet | undefined"
               },
-              "default": "false",
-              "description": "The error state of the inputchip.",
-              "attribute": "error"
+              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
+              "default": "momentum-icons",
+              "attribute": "icon-set",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "clearAriaLabel",
+              "name": "url",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "The aria-label of the close button.",
-              "attribute": "clear-aria-label"
+              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
+              "attribute": "url"
             },
             {
-              "kind": "method",
-              "name": "renderIcon",
-              "privacy": "private",
-              "description": "Renders the icon element if available.",
-              "return": {
-                "type": {
+              "kind": "field",
+              "name": "fileExtension",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
+              "default": "svg",
+              "attribute": "file-extension",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "lengthUnit",
+              "type": {
+                "text": "string"
+              },
+              "description": "Length unit used for sizing of icons",
+              "default": "em",
+              "attribute": "length-unit",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
+              "default": "1",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "cacheStrategy",
+              "type": {
+                "text": "CacheStrategy | undefined"
+              },
+              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
+              "default": "undefined",
+              "attribute": "cache-strategy"
+            },
+            {
+              "kind": "field",
+              "name": "cacheName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
+              "default": "undefined",
+              "attribute": "cache-name"
+            },
+            {
+              "kind": "method",
+              "name": "updateValuesInContext",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "icon-set",
+              "type": {
+                "text": "IconSet | undefined"
+              },
+              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
+              "default": "momentum-icons",
+              "fieldName": "iconSet"
+            },
+            {
+              "name": "url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
+              "fieldName": "url"
+            },
+            {
+              "name": "file-extension",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
+              "default": "svg",
+              "fieldName": "fileExtension"
+            },
+            {
+              "name": "length-unit",
+              "type": {
+                "text": "string"
+              },
+              "description": "Length unit used for sizing of icons",
+              "default": "em",
+              "fieldName": "lengthUnit"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
+              "default": "1",
+              "fieldName": "size"
+            },
+            {
+              "name": "cache-strategy",
+              "type": {
+                "text": "CacheStrategy | undefined"
+              },
+              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
+              "default": "undefined",
+              "fieldName": "cacheStrategy"
+            },
+            {
+              "name": "cache-name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
+              "default": "undefined",
+              "fieldName": "cacheName"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-iconprovider",
+          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "IconProvider",
+            "module": "components/iconprovider/iconprovider.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/inputchip/inputchip.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n\n- It supports a leading icon along with label.\n- It supports an error state for validation.\n- It supports a close button to remove the chip.",
+          "name": "InputChip",
+          "cssProperties": [
+            {
+              "description": "The color of the chip.",
+              "name": "--mdc-chip-color"
+            },
+            {
+              "description": "The border color of the chip.",
+              "name": "--mdc-chip-border-color"
+            },
+            {
+              "description": "The background color of the chip.",
+              "name": "--mdc-chip-background-color"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label of the inputchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "error",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The error state of the inputchip.",
+              "attribute": "error"
+            },
+            {
+              "kind": "field",
+              "name": "clearAriaLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The aria-label of the close button.",
+              "attribute": "clear-aria-label"
+            },
+            {
+              "kind": "method",
+              "name": "renderIcon",
+              "privacy": "private",
+              "description": "Renders the icon element if available.",
+              "return": {
+                "type": {
                   "text": ""
                 }
               }
@@ -13857,51 +13861,122 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/listitem/listitem.component.js",
+      "path": "components/marker/marker.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.\n\nBy providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.\nThe placement of the tooltip can be adjusted using the tooltip-placement attribute.\nThis will be helpful when the listitem text is truncated or\nwhen you want to display additional information about the listitem.",
-          "name": "ListItem",
+          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+          "name": "Marker",
           "cssProperties": [
             {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-listitem-default-background-color"
-            },
-            {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-listitem-background-color-hover"
-            },
-            {
-              "description": "Allows customization of the background color when pressed.",
-              "name": "--mdc-listitem-background-color-active"
-            },
-            {
-              "description": "Allows customization of the primary label, side header and subline text slot color.",
-              "name": "--mdc-listitem-primary-label-color"
-            },
-            {
-              "description": "Allows customization of the secondary and tertiary label text slot color.",
-              "name": "--mdc-listitem-secondary-label-color"
+              "description": "Allows customization of the default background color in solid variant.",
+              "name": "--mdc-marker-solid-background-color"
             },
             {
-              "description": "Allows customization of the disabled color.",
-              "name": "--mdc-listitem-disabled-color"
+              "description": "Allows customization of the default stripes in striped variant.",
+              "name": "--mdc-marker-striped-color"
             },
             {
-              "description": "Allows customization of column gap.",
-              "name": "--mdc-listitem-column-gap"
+              "description": "Allows customization of the default background color in striped variant.",
+              "name": "--mdc-marker-striped-background-color"
             },
             {
-              "description": "Allows customization of padding left and right.",
-              "name": "--mdc-listitem-padding-left-and-right"
+              "description": "Allows customization of the default width.",
+              "name": "--mdc-marker-width"
             }
           ],
-          "slots": [
-            {
-              "description": "slot for list item controls to appear of leading end.",
-              "name": "leading-controls"
-            },
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "MarkerVariants"
+              },
+              "privacy": "public",
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "attribute": "variant",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "MarkerVariants"
+              },
+              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
+              "default": "solid",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-marker",
+          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Marker",
+            "module": "components/marker/marker.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/listitem/listitem.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.\n\nBy providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.\nThe placement of the tooltip can be adjusted using the tooltip-placement attribute.\nThis will be helpful when the listitem text is truncated or\nwhen you want to display additional information about the listitem.",
+          "name": "ListItem",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-listitem-default-background-color"
+            },
+            {
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-listitem-background-color-hover"
+            },
+            {
+              "description": "Allows customization of the background color when pressed.",
+              "name": "--mdc-listitem-background-color-active"
+            },
+            {
+              "description": "Allows customization of the primary label, side header and subline text slot color.",
+              "name": "--mdc-listitem-primary-label-color"
+            },
+            {
+              "description": "Allows customization of the secondary and tertiary label text slot color.",
+              "name": "--mdc-listitem-secondary-label-color"
+            },
+            {
+              "description": "Allows customization of the disabled color.",
+              "name": "--mdc-listitem-disabled-color"
+            },
+            {
+              "description": "Allows customization of column gap.",
+              "name": "--mdc-listitem-column-gap"
+            },
+            {
+              "description": "Allows customization of padding left and right.",
+              "name": "--mdc-listitem-padding-left-and-right"
+            }
+          ],
+          "slots": [
+            {
+              "description": "slot for list item controls to appear of leading end.",
+              "name": "leading-controls"
+            },
             {
               "description": "slot for list item primary label.",
               "name": "leading-text-primary-label"
@@ -14307,77 +14382,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/marker/marker.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-marker`, which is a vertical line and\nused to draw attention to specific parts of\nthe content or to signify important information.\n\n**Marker Variants**:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-          "name": "Marker",
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default background color in solid variant.",
-              "name": "--mdc-marker-solid-background-color"
-            },
-            {
-              "description": "Allows customization of the default stripes in striped variant.",
-              "name": "--mdc-marker-striped-color"
-            },
-            {
-              "description": "Allows customization of the default background color in striped variant.",
-              "name": "--mdc-marker-striped-background-color"
-            },
-            {
-              "description": "Allows customization of the default width.",
-              "name": "--mdc-marker-width"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "MarkerVariants"
-              },
-              "privacy": "public",
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "attribute": "variant",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "MarkerVariants"
-              },
-              "description": "There are two variants of markers, each with a width of 0.25rem:\n- **solid**: Solid marker.\n- **striped**: Striped marker.",
-              "default": "solid",
-              "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-marker",
-          "jsDoc": "/**\n * `mdc-marker`, which is a vertical line and\n * used to draw attention to specific parts of\n * the content or to signify important information.\n *\n * **Marker Variants**:\n * - **solid**: Solid marker.\n * - **striped**: Striped marker.\n *\n * @tagname mdc-marker\n *\n * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color\n * in solid variant.\n * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.\n * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color\n * in striped variant.\n * @cssproperty --mdc-marker-width - Allows customization of the default width.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Marker",
-            "module": "components/marker/marker.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/menu/menu.component.js",
@@ -22532,244 +22536,356 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/progressspinner/progressspinner.component.js",
+      "path": "components/radio/radio.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-progressspinner` is a customizable, circular progress indicator component.\nIt visually represents the current completion state of a process, such as loading,\nsyncing, uploading, or any ongoing task that has a measurable percentage.\n\nThe spinner is built using SVG with two concentric `<circle>` elements:\n- The `progress` arc represents the portion of work completed.\n- The `track` arc represents the remaining part.\n\nA visual gap is maintained between the progress and track arcs to clearly\ndistinguish the two segments. The component smoothly animates arc length\nand respects accessibility best practices with ARIA attributes.\n\nThe component supports different states:\n- **Default**: Circular spinner shows the progress.\n- **Success**: Displays a checkmark icon when progress reaches 100%.\n- **Error**: Displays an error icon when in an error state.",
-          "name": "Progressspinner",
+          "description": "Radio allow users to select single options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selection in lists.\n\nA radio component contains an optional label, optional info icon and an optional helper text.",
+          "name": "Radio",
           "cssProperties": [
             {
-              "description": "The size of the spinner.",
-              "name": "--mdc-spinner-size"
+              "description": "color of the label when disabled",
+              "name": "--mdc-radio-text-disabled-color"
             },
             {
-              "description": "The color of the spinner track.",
-              "name": "--mdc-track-color"
+              "description": "color of the radio button when inactive and hovered",
+              "name": "--mdc-radio-control-inactive-hover"
             },
             {
-              "description": "The color of the spinner progress.",
-              "name": "--mdc-progress-color"
+              "description": "color of the radio button when inactive and pressed",
+              "name": "--mdc-radio-control-inactive-pressed-color"
             },
             {
-              "description": "The color of the spinner when in success state.",
-              "name": "--mdc-progress-success-color"
+              "description": "color of the radio button when active and hovered",
+              "name": "--mdc-radio-control-active-hover-color"
             },
             {
-              "description": "The color of the spinner when in error state.",
-              "name": "--mdc-progress-error-color"
+              "description": "color of the radio button when active and pressed",
+              "name": "--mdc-radio-control-active-pressed-color"
             },
             {
-              "description": "Background color of the progressbar when inactive.",
-              "name": "--mdc-progressbar-default-background-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "description": "color of the radio button when disabled",
+              "name": "--mdc-radio-disabled-border-color"
             },
             {
-              "description": "Background color of the progressbar when active.",
-              "name": "--mdc-progressbar-default-active-background-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "description": "color of the radio button when active and disabled",
+              "name": "--mdc-radio-control-active-disabled-background"
             },
             {
-              "description": "Background color of the progressbar when in success state.",
-              "name": "--mdc-progressbar-success-background-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "description": "color of the radio button when inactive and disabled",
+              "name": "--mdc-radio-control-inactive-disabled-background"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "attribute": "checked",
+              "reflects": true
             },
             {
-              "description": "Background color of the progressbar when in error state.",
-              "name": "--mdc-progressbar-error-background-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "attribute": "readonly",
+              "reflects": true
             },
             {
-              "description": "The height of the progressbar.",
-              "name": "--mdc-progressbar-height",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "attribute": "autofocus",
+              "reflects": true
             },
             {
-              "description": "The border radius of the progressbar.",
-              "name": "--mdc-progressbar-border-radius",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "kind": "method",
+              "name": "getAllRadiosWithinSameGroup",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Radio[]"
+                }
+              },
+              "description": "Returns all radios within the same group (name)."
             },
             {
-              "description": "Color of the progressbar label text.",
-              "name": "--mdc-progressbar-label-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "kind": "method",
+              "name": "dispatchChangeEvent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "The 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
             },
             {
-              "description": "Line height of the label text.",
-              "name": "--mdc-progressbar-label-lineheight",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "kind": "method",
+              "name": "setGroupValidity",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "radios",
+                  "type": {
+                    "text": "Radio[]"
+                  },
+                  "description": "Array of radios of the same group"
+                },
+                {
+                  "name": "isValid",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Boolean value to set the validity of the group"
+                }
+              ],
+              "description": "Sets the validity of the group of radios."
             },
             {
-              "description": "Font size of the label text.",
-              "name": "--mdc-progressbar-label-fontsize",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "kind": "method",
+              "name": "setActualFormValue",
+              "privacy": "private",
+              "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
             },
             {
-              "description": "Font weight of the label text.",
-              "name": "--mdc-progressbar-label-fontweight",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "kind": "method",
+              "name": "handleChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ],
+              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
             },
-            {
-              "description": "Color of the help text.",
-              "name": "--mdc-progressbar-help-text-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
-            }
-          ],
-          "members": [
             {
               "kind": "method",
-              "name": "renderProgressSpinner",
-              "privacy": "private"
+              "name": "updateRadio",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "enabledRadios",
+                  "type": {
+                    "text": "Radio[]"
+                  },
+                  "description": "An array of enabled radio buttons within the same group."
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the radio button to be updated within the enabled radios array."
+                },
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event that triggered the update."
+                }
+              ],
+              "description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
             },
             {
               "kind": "method",
-              "name": "renderErrorState",
+              "name": "handleKeyDown",
               "privacy": "private",
-              "description": "Renders the error 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": "renderSuccessState",
+              "name": "updateTabIndex",
               "privacy": "private",
-              "description": "Renders the success state of the progress spinner.",
               "return": {
                 "type": {
-                  "text": ""
+                  "text": "void"
                 }
-              }
+              },
+              "description": "Update tab index for all radios in the same group (name)\nIf any radio group is checked, it will have a tab index of 0\nIf no radio group is checked, the first enabled radio will have a tab index of 0"
             },
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "renderLabelAndHelperText",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "name",
               "type": {
-                "text": "string | null"
+                "text": "string"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "value",
               "type": {
-                "text": "Variant"
+                "text": "string"
               },
-              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
-              "default": "default",
-              "attribute": "variant",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "validationMessage",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'0'",
-              "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
-              "attribute": "value",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "attribute": "validation-message",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "error",
+              "name": "validity",
               "type": {
-                "text": "boolean"
+                "text": "ValidityState"
               },
-              "default": "false",
-              "description": "Define error state of the progressbar\n- **true**\n- **false**",
-              "attribute": "error",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "method",
-              "name": "getValidationVariant",
-              "privacy": "private",
-              "description": "Determines the validation state (success, error, or default) based on progress value and error state.",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
+              "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"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
               },
               "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
               "attribute": "label",
@@ -22920,38 +23036,62 @@
               }
             }
           ],
-          "superclass": {
-            "name": "Progressbar",
-            "module": "/src/components/progressbar/progressbar.component"
-          },
-          "tagName": "mdc-progressspinner",
-          "jsDoc": "/**\n * `mdc-progressspinner` is a customizable, circular progress indicator component.\n * It visually represents the current completion state of a process, such as loading,\n * syncing, uploading, or any ongoing task that has a measurable percentage.\n *\n * The spinner is built using SVG with two concentric `<circle>` elements:\n * - The `progress` arc represents the portion of work completed.\n * - The `track` arc represents the remaining part.\n *\n * A visual gap is maintained between the progress and track arcs to clearly\n * distinguish the two segments. The component smoothly animates arc length\n * and respects accessibility best practices with ARIA attributes.\n *\n * The component supports different states:\n * - **Default**: Circular spinner shows the progress.\n * - **Success**: Displays a checkmark icon when progress reaches 100%.\n * - **Error**: Displays an error icon when in an error state.\n *\n * @tagname mdc-progressspinner\n *\n * @cssproperty --mdc-spinner-size - The size of the spinner.\n * @cssproperty --mdc-track-color - The color of the spinner track.\n * @cssproperty --mdc-progress-color - The color of the spinner progress.\n * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.\n * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.\n *\n */",
-          "customElement": true,
+          "events": [
+            {
+              "type": {
+                "text": "EventConstructor"
+              }
+            },
+            {
+              "description": "(React: onChange) Event that gets dispatched when the radio state changes.",
+              "name": "change",
+              "reactName": "onChange"
+            },
+            {
+              "description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            }
+          ],
           "attributes": [
             {
-              "name": "data-aria-label",
+              "name": "checked",
               "type": {
-                "text": "string | null"
+                "text": "boolean"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
+              "default": "false",
+              "description": "Determines whether the radio is selected or unselected.",
+              "fieldName": "checked"
             },
             {
-              "name": "variant",
+              "name": "readonly",
               "type": {
-                "text": "Variant"
+                "text": "boolean"
               },
-              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
-              "default": "default",
-              "fieldName": "variant",
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "fieldName": "autofocus"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
@@ -22959,25 +23099,37 @@
               "type": {
                 "text": "string"
               },
-              "default": "'0'",
-              "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
               "fieldName": "value",
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "error",
+              "name": "validation-message",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Define error state of the progressbar\n- **true**\n- **false**",
-              "fieldName": "error",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "fieldName": "validationMessage",
               "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
@@ -23055,6 +23207,23 @@
               }
             }
           ],
+          "mixins": [
+            {
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            }
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
+          },
+          "tagName": "mdc-radio",
+          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n * @dependency mdc-formfieldwrapper\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled\n * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled\n * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled\n *\n */",
+          "customElement": true,
           "slots": [
             {
               "description": "slot to add the label info icon",
@@ -23072,342 +23241,230 @@
           "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": "color of the label when disabled",
-              "name": "--mdc-radio-text-disabled-color"
-            },
-            {
-              "description": "color of the radio button when inactive and hovered",
-              "name": "--mdc-radio-control-inactive-hover"
+              "description": "The size of the spinner.",
+              "name": "--mdc-spinner-size"
             },
             {
-              "description": "color of the radio button when inactive and pressed",
-              "name": "--mdc-radio-control-inactive-pressed-color"
+              "description": "The color of the spinner track.",
+              "name": "--mdc-track-color"
             },
             {
-              "description": "color of the radio button when active and hovered",
-              "name": "--mdc-radio-control-active-hover-color"
+              "description": "The color of the spinner progress.",
+              "name": "--mdc-progress-color"
             },
             {
-              "description": "color of the radio button when active and pressed",
-              "name": "--mdc-radio-control-active-pressed-color"
+              "description": "The color of the spinner when in success state.",
+              "name": "--mdc-progress-success-color"
             },
             {
-              "description": "color of the radio button when disabled",
-              "name": "--mdc-radio-disabled-border-color"
+              "description": "The color of the spinner when in error state.",
+              "name": "--mdc-progress-error-color"
             },
             {
-              "description": "color of the radio button when active and disabled",
-              "name": "--mdc-radio-control-active-disabled-background"
+              "description": "Background color of the progressbar when inactive.",
+              "name": "--mdc-progressbar-default-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "description": "color of the radio button when inactive and disabled",
-              "name": "--mdc-radio-control-inactive-disabled-background"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
-              "attribute": "checked",
-              "reflects": true
+              "description": "Background color of the progressbar when active.",
+              "name": "--mdc-progressbar-default-active-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "attribute": "readonly",
-              "reflects": true
+              "description": "Background color of the progressbar when in success state.",
+              "name": "--mdc-progressbar-success-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
-              "attribute": "autofocus",
-              "reflects": true
+              "description": "Background color of the progressbar when in error state.",
+              "name": "--mdc-progressbar-error-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "getAllRadiosWithinSameGroup",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "Radio[]"
-                }
-              },
-              "description": "Returns all radios within the same group (name)."
+              "description": "The height of the progressbar.",
+              "name": "--mdc-progressbar-height",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "dispatchChangeEvent",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "description": "The 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
+              "description": "The border radius of the progressbar.",
+              "name": "--mdc-progressbar-border-radius",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "setGroupValidity",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "radios",
-                  "type": {
-                    "text": "Radio[]"
-                  },
-                  "description": "Array of radios of the same group"
-                },
-                {
-                  "name": "isValid",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Boolean value to set the validity of the group"
-                }
-              ],
-              "description": "Sets the validity of the group of radios."
+              "description": "Color of the progressbar label text.",
+              "name": "--mdc-progressbar-label-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "setActualFormValue",
-              "privacy": "private",
-              "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
+              "description": "Line height of the label text.",
+              "name": "--mdc-progressbar-label-lineheight",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleChange",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ],
-              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
+              "description": "Font size of the label text.",
+              "name": "--mdc-progressbar-label-fontsize",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "updateRadio",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "enabledRadios",
-                  "type": {
-                    "text": "Radio[]"
-                  },
-                  "description": "An array of enabled radio buttons within the same group."
-                },
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the radio button to be updated within the enabled radios array."
-                },
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "The event that triggered the update."
-                }
-              ],
-              "description": "Updates the state of the radio button at the specified index within the enabled radios.\nFocuses the radio button and triggers the change event if the radio button is not read-only."
+              "description": "Font weight of the label text.",
+              "name": "--mdc-progressbar-label-fontweight",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  }
-                }
-              ],
-              "description": "Handles the keydown event (Arrow Up/Down/Left/Right) on the radio element."
+              "description": "Color of the help text.",
+              "name": "--mdc-progressbar-help-text-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "renderProgressSpinner",
+              "privacy": "private"
             },
             {
               "kind": "method",
-              "name": "updateTabIndex",
+              "name": "renderErrorState",
               "privacy": "private",
+              "description": "Renders the error 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": "method",
+              "name": "renderSuccessState",
+              "privacy": "private",
+              "description": "Renders the success state of the progress spinner.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "dataAriaLabel",
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "Variant"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
+              "description": "Types of the progressbar\n- **Default**\n- **Inline**",
+              "default": "default",
+              "attribute": "variant",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "validationMessage",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
-              "attribute": "validation-message",
+              "default": "'0'",
+              "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
+              "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "validity",
+              "name": "error",
               "type": {
-                "text": "ValidityState"
+                "text": "boolean"
               },
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
+              "default": "false",
+              "description": "Define error state of the progressbar\n- **true**\n- **false**",
+              "attribute": "error",
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
+              "name": "getValidationVariant",
+              "privacy": "private",
+              "description": "Determines the validation state (success, error, or default) based on progress value and error state.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
               }
             },
             {
@@ -23580,62 +23637,38 @@
               }
             }
           ],
-          "events": [
-            {
-              "type": {
-                "text": "EventConstructor"
-              }
-            },
-            {
-              "description": "(React: onChange) Event that gets dispatched when the radio state changes.",
-              "name": "change",
-              "reactName": "onChange"
-            },
-            {
-              "description": "(React: onFocus) Event that gets dispatched when the radio receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
+          "superclass": {
+            "name": "Progressbar",
+            "module": "/src/components/progressbar/progressbar.component"
+          },
+          "tagName": "mdc-progressspinner",
+          "jsDoc": "/**\n * `mdc-progressspinner` is a customizable, circular progress indicator component.\n * It visually represents the current completion state of a process, such as loading,\n * syncing, uploading, or any ongoing task that has a measurable percentage.\n *\n * The spinner is built using SVG with two concentric `<circle>` elements:\n * - The `progress` arc represents the portion of work completed.\n * - The `track` arc represents the remaining part.\n *\n * A visual gap is maintained between the progress and track arcs to clearly\n * distinguish the two segments. The component smoothly animates arc length\n * and respects accessibility best practices with ARIA attributes.\n *\n * The component supports different states:\n * - **Default**: Circular spinner shows the progress.\n * - **Success**: Displays a checkmark icon when progress reaches 100%.\n * - **Error**: Displays an error icon when in an error state.\n *\n * @tagname mdc-progressspinner\n *\n * @cssproperty --mdc-spinner-size - The size of the spinner.\n * @cssproperty --mdc-track-color - The color of the spinner track.\n * @cssproperty --mdc-progress-color - The color of the spinner progress.\n * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.\n * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.\n *\n */",
+          "customElement": true,
           "attributes": [
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "fieldName": "readonly"
-            },
-            {
-              "name": "autofocus",
+              "name": "data-aria-label",
               "type": {
-                "text": "boolean"
+                "text": "string | null"
               },
-              "default": "false",
-              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
-              "fieldName": "autofocus"
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
             },
             {
-              "name": "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"
               }
             },
             {
@@ -23643,37 +23676,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.",
-              "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"
               }
             },
             {
@@ -23751,23 +23772,6 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
-            },
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            }
-          ],
-          "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
-          },
-          "tagName": "mdc-radio",
-          "jsDoc": "/**\n * Radio allow users to select single options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selection in lists.\n *\n * A radio component contains an optional label, optional info icon and an optional helper text.\n * @dependency mdc-formfieldwrapper\n *\n * @tagname mdc-radio\n *\n * @event change - (React: onChange) Event that gets dispatched when the radio state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the radio receives focus.\n *\n * @cssproperty --mdc-radio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-radio-control-inactive-hover - color of the radio button when inactive and hovered\n * @cssproperty --mdc-radio-control-inactive-pressed-color - color of the radio button when inactive and pressed\n * @cssproperty --mdc-radio-control-active-hover-color - color of the radio button when active and hovered\n * @cssproperty --mdc-radio-control-active-pressed-color - color of the radio button when active and pressed\n * @cssproperty --mdc-radio-disabled-border-color - color of the radio button when disabled\n * @cssproperty --mdc-radio-control-active-disabled-background - color of the radio button when active and disabled\n * @cssproperty --mdc-radio-control-inactive-disabled-background - color of the radio button when inactive and disabled\n *\n */",
-          "customElement": true,
           "slots": [
             {
               "description": "slot to add the label info icon",
@@ -23785,8 +23789,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Radio",
-            "module": "components/radio/radio.component.js"
+            "name": "Progressspinner",
+            "module": "components/progressspinner/progressspinner.component.js"
           }
         }
       ]