@momentum-design/components 0.81.6 → 0.82.1

package/dist/custom-elements.json

@@ -4057,6 +4057,10 @@
               "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
               "name": "footer-button-secondary"
             },
+            {
+              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
+              "name": "footer"
+            },
             {
               "description": "This slot is for passing the content before the body",
               "name": "before-body"
@@ -4292,7 +4296,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-card",
-          "jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n *    - Icon\n *    - Title\n *    - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n *\n */",
+          "jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n *    - Icon\n *    - Title\n *    - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n *\n */",
           "customElement": true,
           "attributes": [
             {
@@ -5269,6 +5273,14 @@
                 "name": "Card",
                 "module": "src/components/card/card.component.ts"
               }
+            },
+            {
+              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
+              "name": "footer",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             }
           ],
           "members": [
@@ -5856,6 +5868,14 @@
                 "name": "Card",
                 "module": "src/components/card/card.component.ts"
               }
+            },
+            {
+              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
+              "name": "footer",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             }
           ],
           "members": [
@@ -9371,6 +9391,10 @@
             {
               "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
               "name": "footer-button-primary"
+            },
+            {
+              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred",
+              "name": "footer"
             }
           ],
           "members": [
@@ -10288,7 +10312,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 * 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 */",
+          "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 * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred\n */",
           "customElement": true
         }
       ],
@@ -24316,165 +24340,59 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/progressspinner/progressspinner.component.js",
+      "path": "components/progressbar/progressbar.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": "mdc-progressbar component visually represents a progress indicator, typically used to show\nthe completion state of an ongoing process (e.g., loading, file upload, etc.).\nIt contains an optional label and an optional helper text.\n\n- It supports mainly two types: Default and Inline\n- It supports three validation variants: Default, Success and Error.\n\nThis component is created by extending FormfieldWrapper.",
+          "name": "Progressbar",
           "cssProperties": [
-            {
-              "description": "The size of the spinner.",
-              "name": "--mdc-spinner-size"
-            },
-            {
-              "description": "The color of the spinner track.",
-              "name": "--mdc-track-color"
-            },
-            {
-              "description": "The color of the spinner progress.",
-              "name": "--mdc-progress-color"
-            },
-            {
-              "description": "The color of the spinner when in success state.",
-              "name": "--mdc-progress-success-color"
-            },
-            {
-              "description": "The color of the spinner when in error state.",
-              "name": "--mdc-progress-error-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"
-              }
+              "name": "--mdc-progressbar-default-background-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"
-              }
+              "name": "--mdc-progressbar-default-active-background-color"
             },
             {
               "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"
-              }
+              "name": "--mdc-progressbar-success-background-color"
             },
             {
               "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"
-              }
+              "name": "--mdc-progressbar-error-background-color"
             },
             {
               "description": "The height of the progressbar.",
-              "name": "--mdc-progressbar-height",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-height"
             },
             {
               "description": "The border radius of the progressbar.",
-              "name": "--mdc-progressbar-border-radius",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-border-radius"
             },
             {
               "description": "Color of the progressbar label text.",
-              "name": "--mdc-progressbar-label-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-label-color"
             },
             {
               "description": "Line height of the label text.",
-              "name": "--mdc-progressbar-label-lineheight",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-label-lineheight"
             },
             {
               "description": "Font size of the label text.",
-              "name": "--mdc-progressbar-label-fontsize",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-label-fontsize"
             },
             {
               "description": "Font weight of the label text.",
-              "name": "--mdc-progressbar-label-fontweight",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-label-fontweight"
             },
             {
               "description": "Color of the help text.",
-              "name": "--mdc-progressbar-help-text-color",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "name": "--mdc-progressbar-help-text-color"
             }
           ],
           "members": [
-            {
-              "kind": "method",
-              "name": "renderProgressSpinner",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "renderErrorState",
-              "privacy": "private",
-              "description": "Renders the error state of the progress spinner.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderSuccessState",
-              "privacy": "private",
-              "description": "Renders the success state of the progress spinner.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "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": "variant",
@@ -24484,11 +24402,7 @@
               "description": "Types of the progressbar\n- **Default**\n- **Inline**",
               "default": "default",
               "attribute": "variant",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
@@ -24499,11 +24413,7 @@
               "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": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
@@ -24513,11 +24423,7 @@
               },
               "default": "false",
               "description": "Define error state of the progressbar\n- **true**\n- **false**",
-              "attribute": "error",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
-              }
+              "attribute": "error"
             },
             {
               "kind": "method",
@@ -24528,10 +24434,21 @@
                 "type": {
                   "text": ""
                 }
+              }
+            },
+            {
+              "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": "Progressbar",
-                "module": "components/progressbar/progressbar.component.js"
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
             {
@@ -24739,27 +24656,7 @@
               }
             }
           ],
-          "superclass": {
-            "name": "Progressbar",
-            "module": "/src/components/progressbar/progressbar.component"
-          },
-          "tagName": "mdc-progressspinner",
-          "jsDoc": "/**\n * `mdc-progressspinner` is a customizable, circular progress indicator component.\n * It visually represents the current completion state of a process, such as loading,\n * syncing, uploading, or any ongoing task that has a measurable percentage.\n *\n * The spinner is built using SVG with two concentric `<circle>` elements:\n * - The `progress` arc represents the portion of work completed.\n * - The `track` arc represents the remaining part.\n *\n * A visual gap is maintained between the progress and track arcs to clearly\n * distinguish the two segments. The component smoothly animates arc length\n * and respects accessibility best practices with ARIA attributes.\n *\n * The component supports different states:\n * - **Default**: Circular spinner shows the progress.\n * - **Success**: Displays a checkmark icon when progress reaches 100%.\n * - **Error**: Displays an error icon when in an error state.\n *\n * @tagname mdc-progressspinner\n *\n * @cssproperty --mdc-spinner-size - The size of the spinner.\n * @cssproperty --mdc-track-color - The color of the spinner track.\n * @cssproperty --mdc-progress-color - The color of the spinner progress.\n * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.\n * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.\n *\n */",
-          "customElement": true,
           "attributes": [
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
-              "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
-              }
-            },
             {
               "name": "variant",
               "type": {
@@ -24767,11 +24664,7 @@
               },
               "description": "Types of the progressbar\n- **Default**\n- **Inline**",
               "default": "default",
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "fieldName": "variant"
             },
             {
               "name": "value",
@@ -24780,11 +24673,7 @@
               },
               "default": "'0'",
               "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
-              }
+              "fieldName": "value"
             },
             {
               "name": "error",
@@ -24793,10 +24682,19 @@
               },
               "default": "false",
               "description": "Define error state of the progressbar\n- **true**\n- **false**",
-              "fieldName": "error",
+              "fieldName": "error"
+            },
+            {
+              "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": "Progressbar",
-                "module": "src/components/progressbar/progressbar.component.ts"
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
@@ -24911,7 +24809,20 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            }
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper"
+          },
+          "tagName": "mdc-progressbar",
+          "jsDoc": "/**\n * mdc-progressbar component visually represents a progress indicator, typically used to show\n * the completion state of an ongoing process (e.g., loading, file upload, etc.).\n * It contains an optional label and an optional helper text.\n *\n * - It supports mainly two types: Default and Inline\n * - It supports three validation variants: Default, Success and Error.\n *\n * This component is created by extending FormfieldWrapper.\n *\n * @tagname mdc-progressbar\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-progressbar-default-background-color - Background color of the progressbar when inactive.\n * @cssproperty --mdc-progressbar-default-active-background-color - Background color of the progressbar when active.\n * @cssproperty --mdc-progressbar-success-background-color - Background color of the progressbar when in success state.\n * @cssproperty --mdc-progressbar-error-background-color - Background color of the progressbar when in error state.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.\n * @cssproperty --mdc-progressbar-label-lineheight - Line height of the label text.\n * @cssproperty --mdc-progressbar-label-fontsize - Font size of the label text.\n * @cssproperty --mdc-progressbar-label-fontweight - Font weight of the label text.\n * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -24919,67 +24830,173 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Progressspinner",
-            "module": "components/progressspinner/progressspinner.component.js"
+            "name": "Progressbar",
+            "module": "components/progressbar/progressbar.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/progressbar/progressbar.component.js",
+      "path": "components/progressspinner/progressspinner.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-progressbar component visually represents a progress indicator, typically used to show\nthe completion state of an ongoing process (e.g., loading, file upload, etc.).\nIt contains an optional label and an optional helper text.\n\n- It supports mainly two types: Default and Inline\n- It supports three validation variants: Default, Success and Error.\n\nThis component is created by extending FormfieldWrapper.",
-          "name": "Progressbar",
+          "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": "The size of the spinner.",
+              "name": "--mdc-spinner-size"
+            },
+            {
+              "description": "The color of the spinner track.",
+              "name": "--mdc-track-color"
+            },
+            {
+              "description": "The color of the spinner progress.",
+              "name": "--mdc-progress-color"
+            },
+            {
+              "description": "The color of the spinner when in success state.",
+              "name": "--mdc-progress-success-color"
+            },
+            {
+              "description": "The color of the spinner when in error state.",
+              "name": "--mdc-progress-error-color"
+            },
             {
               "description": "Background color of the progressbar when inactive.",
-              "name": "--mdc-progressbar-default-background-color"
+              "name": "--mdc-progressbar-default-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Background color of the progressbar when active.",
-              "name": "--mdc-progressbar-default-active-background-color"
+              "name": "--mdc-progressbar-default-active-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Background color of the progressbar when in success state.",
-              "name": "--mdc-progressbar-success-background-color"
+              "name": "--mdc-progressbar-success-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Background color of the progressbar when in error state.",
-              "name": "--mdc-progressbar-error-background-color"
+              "name": "--mdc-progressbar-error-background-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "The height of the progressbar.",
-              "name": "--mdc-progressbar-height"
+              "name": "--mdc-progressbar-height",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "The border radius of the progressbar.",
-              "name": "--mdc-progressbar-border-radius"
+              "name": "--mdc-progressbar-border-radius",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Color of the progressbar label text.",
-              "name": "--mdc-progressbar-label-color"
+              "name": "--mdc-progressbar-label-color",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Line height of the label text.",
-              "name": "--mdc-progressbar-label-lineheight"
+              "name": "--mdc-progressbar-label-lineheight",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Font size of the label text.",
-              "name": "--mdc-progressbar-label-fontsize"
+              "name": "--mdc-progressbar-label-fontsize",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Font weight of the label text.",
-              "name": "--mdc-progressbar-label-fontweight"
+              "name": "--mdc-progressbar-label-fontweight",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "description": "Color of the help text.",
-              "name": "--mdc-progressbar-help-text-color"
+              "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": "renderErrorState",
+              "privacy": "private",
+              "description": "Renders the error state of the progress spinner.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderSuccessState",
+              "privacy": "private",
+              "description": "Renders the success state of the progress spinner.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "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": "variant",
@@ -24989,7 +25006,11 @@
               "description": "Types of the progressbar\n- **Default**\n- **Inline**",
               "default": "default",
               "attribute": "variant",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
+              }
             },
             {
               "kind": "field",
@@ -25000,7 +25021,11 @@
               "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
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
+              }
             },
             {
               "kind": "field",
@@ -25010,7 +25035,11 @@
               },
               "default": "false",
               "description": "Define error state of the progressbar\n- **true**\n- **false**",
-              "attribute": "error"
+              "attribute": "error",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "components/progressbar/progressbar.component.js"
+              }
             },
             {
               "kind": "method",
@@ -25021,21 +25050,10 @@
                 "type": {
                   "text": ""
                 }
-              }
-            },
-            {
-              "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"
               }
             },
             {
@@ -25243,7 +25261,27 @@
               }
             }
           ],
+          "superclass": {
+            "name": "Progressbar",
+            "module": "/src/components/progressbar/progressbar.component"
+          },
+          "tagName": "mdc-progressspinner",
+          "jsDoc": "/**\n * `mdc-progressspinner` is a customizable, circular progress indicator component.\n * It visually represents the current completion state of a process, such as loading,\n * syncing, uploading, or any ongoing task that has a measurable percentage.\n *\n * The spinner is built using SVG with two concentric `<circle>` elements:\n * - The `progress` arc represents the portion of work completed.\n * - The `track` arc represents the remaining part.\n *\n * A visual gap is maintained between the progress and track arcs to clearly\n * distinguish the two segments. The component smoothly animates arc length\n * and respects accessibility best practices with ARIA attributes.\n *\n * The component supports different states:\n * - **Default**: Circular spinner shows the progress.\n * - **Success**: Displays a checkmark icon when progress reaches 100%.\n * - **Error**: Displays an error icon when in an error state.\n *\n * @tagname mdc-progressspinner\n *\n * @cssproperty --mdc-spinner-size - The size of the spinner.\n * @cssproperty --mdc-track-color - The color of the spinner track.\n * @cssproperty --mdc-progress-color - The color of the spinner progress.\n * @cssproperty --mdc-progress-success-color - The color of the spinner when in success state.\n * @cssproperty --mdc-progress-error-color - The color of the spinner when in error state.\n *\n */",
+          "customElement": true,
           "attributes": [
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
+            },
             {
               "name": "variant",
               "type": {
@@ -25251,7 +25289,11 @@
               },
               "description": "Types of the progressbar\n- **Default**\n- **Inline**",
               "default": "default",
-              "fieldName": "variant"
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "name": "value",
@@ -25260,7 +25302,11 @@
               },
               "default": "'0'",
               "description": "The current progress as a percentage, 0 to 100.\nThe value will be clamped between 0 and 100.",
-              "fieldName": "value"
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
+              }
             },
             {
               "name": "error",
@@ -25269,19 +25315,10 @@
               },
               "default": "false",
               "description": "Define error state of the progressbar\n- **true**\n- **false**",
-              "fieldName": "error"
-            },
-            {
-              "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",
+              "fieldName": "error",
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "name": "Progressbar",
+                "module": "src/components/progressbar/progressbar.component.ts"
               }
             },
             {
@@ -25396,20 +25433,7 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             }
-          ],
-          "mixins": [
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            }
-          ],
-          "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper"
-          },
-          "tagName": "mdc-progressbar",
-          "jsDoc": "/**\n * mdc-progressbar component visually represents a progress indicator, typically used to show\n * the completion state of an ongoing process (e.g., loading, file upload, etc.).\n * It contains an optional label and an optional helper text.\n *\n * - It supports mainly two types: Default and Inline\n * - It supports three validation variants: Default, Success and Error.\n *\n * This component is created by extending FormfieldWrapper.\n *\n * @tagname mdc-progressbar\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-progressbar-default-background-color - Background color of the progressbar when inactive.\n * @cssproperty --mdc-progressbar-default-active-background-color - Background color of the progressbar when active.\n * @cssproperty --mdc-progressbar-success-background-color - Background color of the progressbar when in success state.\n * @cssproperty --mdc-progressbar-error-background-color - Background color of the progressbar when in error state.\n * @cssproperty --mdc-progressbar-height - The height of the progressbar.\n * @cssproperty --mdc-progressbar-border-radius - The border radius of the progressbar.\n * @cssproperty --mdc-progressbar-label-color - Color of the progressbar label text.\n * @cssproperty --mdc-progressbar-label-lineheight - Line height of the label text.\n * @cssproperty --mdc-progressbar-label-fontsize - Font size of the label text.\n * @cssproperty --mdc-progressbar-label-fontweight - Font weight of the label text.\n * @cssproperty --mdc-progressbar-help-text-color - Color of the help text.\n */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -25417,8 +25441,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Progressbar",
-            "module": "components/progressbar/progressbar.component.js"
+            "name": "Progressspinner",
+            "module": "components/progressspinner/progressspinner.component.js"
           }
         }
       ]