@momentum-design/components 0.105.4 → 0.106.1

package/dist/custom-elements.json

@@ -1160,6 +1160,34 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "executeAction",
@@ -1442,6 +1470,30 @@
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
           "superclass": {
@@ -2327,6 +2379,34 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "executeAction",
@@ -2711,6 +2791,30 @@
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
           "mixins": [
@@ -3567,6 +3671,34 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "executeAction",
@@ -3890,6 +4022,30 @@
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
           "mixins": [
@@ -4717,613 +4873,227 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/buttonsimple/buttonsimple.component.js",
+      "path": "components/card/card.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\nIt is used as an internal component and is not intended to be used directly by consumers.\nConsumers should use the `mdc-button` component instead.",
-          "name": "Buttonsimple",
-          "members": [
+          "description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n   - Icon\n   - Title\n   - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo 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 `mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
+          "name": "Card",
+          "cssProperties": [
             {
-              "kind": "field",
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "attribute": "active",
-              "reflects": true
+              "description": "The width of the card",
+              "name": "--mdc-card-width"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The header part of the card",
+              "name": "header"
             },
             {
-              "kind": "field",
-              "name": "softDisabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
-              "reflects": true
+              "description": "The icon part of the card header",
+              "name": "icon"
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true
+              "description": "The body part of the card",
+              "name": "body"
             },
             {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "RoleType"
-              },
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "attribute": "role",
-              "reflects": true
+              "description": "The image part of the card",
+              "name": "image"
             },
             {
-              "kind": "field",
-              "name": "ariaStateKey",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "attribute": "ariaStateKey",
-              "reflects": true
+              "description": "The footer part of the card",
+              "name": "footer"
             },
             {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "ButtonType"
-              },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "attribute": "type",
-              "reflects": true
+              "description": "The link part of the card footer",
+              "name": "footer-link"
             },
             {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected"
+              "description": "The primary button part of the card footer",
+              "name": "footer-button-primary"
             },
             {
-              "kind": "method",
-              "name": "setActive",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element"
-                },
-                {
-                  "name": "active",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state of the element"
-                }
-              ],
-              "description": "Sets the ariaStateKey attributes based on the active state of the button."
+              "description": "The secondary button part of the card footer",
+              "name": "footer-button-secondary"
             },
             {
-              "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "softDisabled",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
-                }
-              ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
+              "description": "The icon button part of the card header",
+              "name": "icon-button"
             },
             {
-              "kind": "method",
-              "name": "setDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The disabled state."
-                }
-              ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute."
+              "description": "The text part of the card",
+              "name": "text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This slot is for passing the content before the body",
+              "name": "before-body"
             },
             {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private"
+              "description": "This slot is for passing the text content for the card",
+              "name": "body"
             },
             {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed."
+              "description": "This slot is for passing the content after the body",
+              "name": "after-body"
             },
             {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application."
+              "description": "This slot is for passing `mdc-link` component within the footer section.",
+              "name": "footer-link"
+            },
+            {
+              "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 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"
+            }
+          ],
+          "members": [
             {
               "kind": "method",
-              "name": "handleKeyUp",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+              "name": "renderHeader",
+              "privacy": "protected",
+              "description": "Renders the header of the card if title is provided",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way."
+              }
             },
             {
               "kind": "field",
-              "name": "autoFocusOnMount",
+              "name": "cardTitle",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "attribute": "auto-focus-on-mount",
+              "default": "''",
+              "description": "The title of the card - part of header section",
+              "attribute": "card-title",
               "reflects": true,
               "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "utils/mixins/AutoFocusOnMountMixin.js"
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "tabIndex",
+              "name": "subtitle",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
+              "default": "''",
+              "description": "The subtitle of the card - part of header section",
+              "attribute": "subtitle",
               "reflects": true,
               "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "imageSrc",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "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",
+              "default": "''",
+              "description": "The image source URL to render on the card",
+              "attribute": "image-src",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
               }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the button is clicked.",
-              "name": "click",
-              "reactName": "onClick"
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
-            },
-            {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
-              "name": "keyup",
-              "reactName": "onKeyUp"
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active",
+              "kind": "field",
+              "name": "imageAlt",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "fieldName": "active"
+              "default": "''",
+              "description": "The image alt for accessibility support",
+              "attribute": "image-alt",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
             },
             {
-              "name": "soft-disabled",
+              "kind": "field",
+              "name": "variant",
               "type": {
-                "text": "boolean | undefined"
+                "text": "CardVariant"
               },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "fieldName": "softDisabled"
+              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "default": "'border'",
+              "attribute": "variant",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "orientation",
               "type": {
-                "text": "ButtonSize"
+                "text": "CardOrientation"
               },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "fieldName": "size"
+              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "default": "'vertical'",
+              "attribute": "orientation",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
             },
             {
-              "name": "role",
+              "kind": "field",
+              "name": "titleTagName",
               "type": {
-                "text": "RoleType"
+                "text": "TagNameType"
               },
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "fieldName": "role"
+              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "attribute": "title-tag-name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
             },
             {
-              "name": "ariaStateKey",
+              "kind": "field",
+              "name": "subtitleTagName",
               "type": {
-                "text": "string | undefined"
+                "text": "TagNameType"
               },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "fieldName": "ariaStateKey"
+              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "attribute": "subtitle-tag-name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
             },
             {
-              "name": "type",
+              "kind": "field",
+              "name": "iconName",
               "type": {
-                "text": "ButtonType"
-              },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "fieldName": "type"
-            },
-            {
-              "name": "auto-focus-on-mount",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "fieldName": "autoFocusOnMount",
-              "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
-              }
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
-              }
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "AutoFocusOnMountMixin",
-              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
-            },
-            {
-              "name": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
-            },
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-buttonsimple",
-          "jsDoc": "/**\n * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\n * It is used as an internal component and is not intended to be used directly by consumers.\n * Consumers should use the `mdc-button` component instead.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @tagname mdc-buttonsimple\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Buttonsimple",
-            "module": "components/buttonsimple/buttonsimple.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/card/card.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n   - Icon\n   - Title\n   - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo 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 `mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
-          "name": "Card",
-          "cssProperties": [
-            {
-              "description": "The width of the card",
-              "name": "--mdc-card-width"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The header part of the card",
-              "name": "header"
-            },
-            {
-              "description": "The icon part of the card header",
-              "name": "icon"
-            },
-            {
-              "description": "The body part of the card",
-              "name": "body"
-            },
-            {
-              "description": "The image part of the card",
-              "name": "image"
-            },
-            {
-              "description": "The footer part of the card",
-              "name": "footer"
-            },
-            {
-              "description": "The link part of the card footer",
-              "name": "footer-link"
-            },
-            {
-              "description": "The primary button part of the card footer",
-              "name": "footer-button-primary"
-            },
-            {
-              "description": "The secondary button part of the card footer",
-              "name": "footer-button-secondary"
-            },
-            {
-              "description": "The icon button part of the card header",
-              "name": "icon-button"
-            },
-            {
-              "description": "The text part of the card",
-              "name": "text"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This slot is for passing the content before the body",
-              "name": "before-body"
-            },
-            {
-              "description": "This slot is for passing the text content for the card",
-              "name": "body"
-            },
-            {
-              "description": "This slot is for passing the content after the body",
-              "name": "after-body"
-            },
-            {
-              "description": "This slot is for passing `mdc-link` component within the footer section.",
-              "name": "footer-link"
-            },
-            {
-              "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 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"
-            }
-          ],
-          "members": [
-            {
-              "kind": "method",
-              "name": "renderHeader",
-              "privacy": "protected",
-              "description": "Renders the header of the card if title is provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "field",
-              "name": "cardTitle",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The title of the card - part of header section",
-              "attribute": "card-title",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "subtitle",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The subtitle of the card - part of header section",
-              "attribute": "subtitle",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "imageSrc",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image source URL to render on the card",
-              "attribute": "image-src",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "imageAlt",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image alt for accessibility support",
-              "attribute": "image-alt",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "CardVariant"
-              },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
-              "default": "'border'",
-              "attribute": "variant",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "CardOrientation"
-              },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
-              "default": "'vertical'",
-              "attribute": "orientation",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "titleTagName",
-              "type": {
-                "text": "TagNameType"
-              },
-              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "attribute": "title-tag-name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "subtitleTagName",
-              "type": {
-                "text": "TagNameType"
-              },
-              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "attribute": "subtitle-tag-name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
+                "text": "IconNames | undefined"
               },
               "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
               "attribute": "icon-name",
@@ -5822,8 +5592,8 @@
               "attribute": "auto-focus-on-mount",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "AutoFocusOnMountMixin",
+                "module": "utils/mixins/AutoFocusOnMountMixin.js"
               }
             },
             {
@@ -5837,8 +5607,8 @@
               "attribute": "tabIndex",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
               }
             },
             {
@@ -5852,8 +5622,8 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
@@ -5946,6 +5716,34 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "executeAction",
@@ -6029,30 +5827,571 @@
                   "description": "The disabled state."
                 }
               ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) Event that gets dispatched when the card is clicked.",
+              "name": "click",
+              "reactName": "onClick",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It fires the click event when enter key is used.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It fires the click event when space key is used.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "CardComponentMixin",
+              "module": "/src/utils/mixins/CardComponentMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.component"
+          },
+          "tagName": "mdc-cardbutton",
+          "jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\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 `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "card-title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The title of the card - part of header section",
+              "fieldName": "cardTitle",
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
+              }
+            },
+            {
+              "name": "subtitle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The subtitle of the card - part of header section",
+              "fieldName": "subtitle",
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
+              }
+            },
+            {
+              "name": "image-src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The image source URL to render on the card",
+              "fieldName": "imageSrc",
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
+              }
+            },
+            {
+              "name": "image-alt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The image alt for accessibility support",
+              "fieldName": "imageAlt",
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
+              }
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "CardVariant"
+              },
+              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "default": "'border'",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
+              }
+            },
+            {
+              "name": "orientation",
+              "type": {
+                "text": "CardOrientation"
+              },
+              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "default": "'vertical'",
+              "fieldName": "orientation",
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
+              }
+            },
+            {
+              "name": "title-tag-name",
+              "type": {
+                "text": "TagNameType"
+              },
+              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "fieldName": "titleTagName",
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
+              }
+            },
+            {
+              "name": "subtitle-tag-name",
+              "type": {
+                "text": "TagNameType"
+              },
+              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "fieldName": "subtitleTagName",
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
+              }
+            },
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
+              }
+            },
+            {
+              "name": "auto-focus-on-mount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "fieldName": "autoFocusOnMount",
+              "inheritedFrom": {
+                "name": "AutoFocusOnMountMixin",
+                "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
+              }
+            },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "fieldName": "active",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "RoleType"
+              },
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "fieldName": "role",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "fieldName": "ariaStateKey",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "ButtonType"
+              },
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "fieldName": "type",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "CardButton",
+            "module": "components/cardbutton/cardbutton.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/buttonsimple/buttonsimple.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\nIt is used as an internal component and is not intended to be used directly by consumers.\nConsumers should use the `mdc-button` component instead.",
+          "name": "Buttonsimple",
+          "members": [
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "RoleType"
+              },
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "attribute": "role",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "attribute": "ariaStateKey",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "ButtonType"
+              },
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "executeAction",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "setActive",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element"
+                },
+                {
+                  "name": "active",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state of the element"
+                }
+              ],
+              "description": "Sets the ariaStateKey attributes based on the active state of the button."
+            },
+            {
+              "kind": "method",
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
+                }
+              ],
+              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
+            },
+            {
+              "kind": "method",
+              "name": "setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state."
+                }
+              ],
+              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute."
             },
             {
               "kind": "method",
               "name": "triggerClickEvent",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "privacy": "private"
             },
             {
               "kind": "method",
               "name": "handleBlur",
               "privacy": "private",
-              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed."
             },
             {
               "kind": "method",
@@ -6067,11 +6406,7 @@
                   "description": "The keyboard event."
                 }
               ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application."
             },
             {
               "kind": "method",
@@ -6086,180 +6421,146 @@
                   "description": "The keyboard event."
                 }
               ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
+              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way."
+            },
+            {
+              "kind": "field",
+              "name": "autoFocusOnMount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "attribute": "auto-focus-on-mount",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "AutoFocusOnMountMixin",
+                "module": "utils/mixins/AutoFocusOnMountMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             }
           ],
           "events": [
             {
-              "description": "(React: onClick) Event that gets dispatched when the card is clicked.",
+              "description": "(React: onClick) This event is dispatched when the button is clicked.",
               "name": "click",
-              "reactName": "onClick",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "reactName": "onClick"
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It fires the click event when enter key is used.",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
               "name": "keydown",
-              "reactName": "onKeyDown",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "reactName": "onKeyDown"
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It fires the click event when space key is used.",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
               "name": "keyup",
-              "reactName": "onKeyUp",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "reactName": "onKeyUp"
             },
             {
-              "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
+              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
               "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "CardComponentMixin",
-              "module": "/src/utils/mixins/CardComponentMixin"
+              "reactName": "onFocus"
             }
           ],
-          "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
-          },
-          "tagName": "mdc-cardbutton",
-          "jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\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 `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
-          "customElement": true,
           "attributes": [
             {
-              "name": "card-title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The title of the card - part of header section",
-              "fieldName": "cardTitle",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
-            },
-            {
-              "name": "subtitle",
+              "name": "active",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The subtitle of the card - part of header section",
-              "fieldName": "subtitle",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "fieldName": "active"
             },
             {
-              "name": "image-src",
+              "name": "soft-disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The image source URL to render on the card",
-              "fieldName": "imageSrc",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled"
             },
             {
-              "name": "image-alt",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "ButtonSize"
               },
-              "default": "''",
-              "description": "The image alt for accessibility support",
-              "fieldName": "imageAlt",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "fieldName": "size"
             },
             {
-              "name": "variant",
+              "name": "role",
               "type": {
-                "text": "CardVariant"
+                "text": "RoleType"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
-              "default": "'border'",
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "fieldName": "role"
             },
             {
-              "name": "orientation",
+              "name": "ariaStateKey",
               "type": {
-                "text": "CardOrientation"
+                "text": "string | undefined"
               },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
-              "default": "'vertical'",
-              "fieldName": "orientation",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "fieldName": "ariaStateKey"
             },
             {
-              "name": "title-tag-name",
+              "name": "type",
               "type": {
-                "text": "TagNameType"
+                "text": "ButtonType"
               },
-              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "fieldName": "titleTagName",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "fieldName": "type"
             },
             {
-              "name": "subtitle-tag-name",
+              "name": "name",
               "type": {
-                "text": "TagNameType"
+                "text": "string | undefined"
               },
-              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "fieldName": "subtitleTagName",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "fieldName": "name"
             },
             {
-              "name": "icon-name",
+              "name": "value",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string | undefined"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "fieldName": "value"
             },
             {
               "name": "auto-focus-on-mount",
@@ -6270,8 +6571,8 @@
               "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
               "fieldName": "autoFocusOnMount",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "AutoFocusOnMountMixin",
+                "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
               }
             },
             {
@@ -6283,8 +6584,8 @@
               "description": "This property specifies the tab order of the element.",
               "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             },
             {
@@ -6296,89 +6597,32 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "fieldName": "active",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "name": "soft-disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "fieldName": "softDisabled",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
-            },
+            }
+          ],
+          "mixins": [
             {
-              "name": "role",
-              "type": {
-                "text": "RoleType"
-              },
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "fieldName": "role",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "name": "AutoFocusOnMountMixin",
+              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
             },
             {
-              "name": "ariaStateKey",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "fieldName": "ariaStateKey",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
             },
             {
-              "name": "type",
-              "type": {
-                "text": "ButtonType"
-              },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "fieldName": "type",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-buttonsimple",
+          "jsDoc": "/**\n * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\n * It is used as an internal component and is not intended to be used directly by consumers.\n * Consumers should use the `mdc-button` component instead.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @tagname mdc-buttonsimple\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -6386,8 +6630,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CardButton",
-            "module": "components/cardbutton/cardbutton.component.js"
+            "name": "Buttonsimple",
+            "module": "components/buttonsimple/buttonsimple.component.js"
           }
         }
       ]
@@ -8739,6 +8983,34 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "executeAction",
@@ -9033,6 +9305,30 @@
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
           "mixins": [
@@ -12678,6 +12974,34 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setActive",
@@ -12980,6 +13304,30 @@
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
           "superclass": {
@@ -15996,6 +16344,34 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "executeAction",
@@ -16328,6 +16704,30 @@
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
           "mixins": [
@@ -18296,9 +18696,8 @@
               "kind": "field",
               "name": "name",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The name attribute is used to identify the menu item when it is selected.",
               "attribute": "name",
               "reflects": true
@@ -18307,9 +18706,8 @@
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
               "attribute": "value",
               "reflects": true
@@ -18793,18 +19191,16 @@
             {
               "name": "name",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The name attribute is used to identify the menu item when it is selected.",
               "fieldName": "name"
             },
             {
               "name": "value",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
               "fieldName": "value"
             },
@@ -19232,9 +19628,8 @@
               "kind": "field",
               "name": "name",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The name attribute is used to identify the menu item when it is selected.",
               "attribute": "name",
               "reflects": true,
@@ -19247,9 +19642,8 @@
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
               "attribute": "value",
               "reflects": true,
@@ -19775,9 +20169,8 @@
             {
               "name": "name",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The name attribute is used to identify the menu item when it is selected.",
               "fieldName": "name",
               "inheritedFrom": {
@@ -19788,9 +20181,8 @@
             {
               "name": "value",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
               "fieldName": "value",
               "inheritedFrom": {
@@ -20233,9 +20625,8 @@
               "kind": "field",
               "name": "name",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The name attribute is used to identify the menu item when it is selected.",
               "attribute": "name",
               "reflects": true,
@@ -20248,9 +20639,8 @@
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
               "attribute": "value",
               "reflects": true,
@@ -20776,9 +21166,8 @@
             {
               "name": "name",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The name attribute is used to identify the menu item when it is selected.",
               "fieldName": "name",
               "inheritedFrom": {
@@ -20789,9 +21178,8 @@
             {
               "name": "value",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
               "fieldName": "value",
               "inheritedFrom": {
@@ -23768,9 +24156,8 @@
               "kind": "field",
               "name": "name",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The name attribute is used to identify the menu item when it is selected.",
               "attribute": "name",
               "reflects": true,
@@ -23783,9 +24170,8 @@
               "kind": "field",
               "name": "value",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
               "attribute": "value",
               "reflects": true,
@@ -24362,9 +24748,8 @@
             {
               "name": "name",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The name attribute is used to identify the menu item when it is selected.",
               "fieldName": "name",
               "inheritedFrom": {
@@ -24375,9 +24760,8 @@
             {
               "name": "value",
               "type": {
-                "text": "undefined | string | undefined"
+                "text": "string | undefined"
               },
-              "default": "undefined",
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
               "fieldName": "value",
               "inheritedFrom": {
@@ -34194,134 +34578,129 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/staticcheckbox/staticcheckbox.component.js",
+      "path": "components/spinner/spinner.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "This is a decorative component that is styled to look as a checkbox.\n\nIt has 3 properties - checked, indeterminate and disabled.\n\nWe are using the same styling that has been created for the `mdc-checkbox` component.",
-          "name": "StaticCheckbox",
+          "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the  progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
+          "name": "Spinner",
           "cssProperties": [
             {
-              "description": "Border color in high contrast.",
-              "name": "--mdc-staticcheckbox-border-color"
-            },
-            {
-              "description": "Background color for a selected checkbox.",
-              "name": "--mdc-staticcheckbox-checked-background-color"
-            },
-            {
-              "description": "Background color for a disabled checkbox.",
-              "name": "--mdc-staticcheckbox-disabled-background-color"
-            },
-            {
-              "description": "Border color for a disabled checkbox.",
-              "name": "--mdc-checkbox-disabled-border-color"
+              "description": "Allows customization of the default spinner color.",
+              "name": "--mdc-spinner-default-color"
             },
             {
-              "description": "Background color for a disabled, selected checkbox.",
-              "name": "--mdc-checkbox-disabled-checked-icon-color"
+              "description": "Allows customization of the inverted spinner color.",
+              "name": "--mdc-spinner-inverted-color"
             },
             {
-              "description": "Icon color for a disabled checkbox.",
-              "name": "--mdc-staticcheckbox-disabled-icon-color"
+              "description": "Allows customization of the spinner Button variant color.",
+              "name": "--mdc-spinner-button-variant-color"
             },
             {
-              "description": "Background color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-background-color"
-            },
+              "description": "Allows customization of the spinner size.",
+              "name": "--mdc-spinner-size"
+            }
+          ],
+          "cssParts": [
             {
-              "description": "Default background color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-border-color"
+              "description": "The svg which contains the circle spinner.",
+              "name": "container"
             },
             {
-              "description": "Icon color for an unselected checkbox.",
-              "name": "--mdc-staticcheckbox-icon-color"
+              "description": "The circle of the spinner.",
+              "name": "circle"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "checked",
+              "name": "inverted",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
+              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
               "default": "false",
-              "description": "Determines whether the checkbox is selected or unselected.",
-              "attribute": "checked",
+              "attribute": "inverted",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "indeterminate",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "SpinnerSize | undefined"
               },
-              "default": "false",
-              "description": "Determines whether the checkbox is in an indeterminate state.",
-              "attribute": "indeterminate",
+              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
+              "default": "midsize",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "ariaLabel",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | null"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "SpinnerVariant"
+              },
+              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
+              "default": "standalone",
+              "attribute": "variant",
+              "reflects": true
             }
           ],
           "attributes": [
             {
-              "name": "checked",
+              "name": "inverted",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
+              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
               "default": "false",
-              "description": "Determines whether the checkbox is selected or unselected.",
-              "fieldName": "checked"
+              "fieldName": "inverted"
             },
             {
-              "name": "indeterminate",
+              "name": "size",
               "type": {
-                "text": "boolean"
+                "text": "SpinnerSize | undefined"
               },
-              "default": "false",
-              "description": "Determines whether the checkbox is in an indeterminate state.",
-              "fieldName": "indeterminate"
+              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
+              "default": "midsize",
+              "fieldName": "size"
             },
             {
-              "name": "disabled",
+              "name": "aria-label",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | null"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
             {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
+              "name": "variant",
+              "type": {
+                "text": "SpinnerVariant"
+              },
+              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
+              "default": "standalone",
+              "fieldName": "variant"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-staticcheckbox",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a checkbox.\n *\n * It has 3 properties - checked, indeterminate and disabled.\n *\n * We are using the same styling that has been created for the `mdc-checkbox` component.\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.\n *\n */",
+          "tagName": "mdc-spinner",
+          "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the  progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
           "customElement": true
         }
       ],
@@ -34330,60 +34709,56 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "StaticCheckbox",
-            "module": "components/staticcheckbox/staticcheckbox.component.js"
+            "name": "Spinner",
+            "module": "components/spinner/spinner.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/staticradio/staticradio.component.js",
+      "path": "components/staticcheckbox/staticcheckbox.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "This is a decorative component that is styled to look as a radio.\nIt has 2 properties - checked and disabled.\n\nWe are using the same styling that has been created for the `mdc-radio` component.",
-          "name": "StaticRadio",
+          "description": "This is a decorative component that is styled to look as a checkbox.\n\nIt has 3 properties - checked, indeterminate and disabled.\n\nWe are using the same styling that has been created for the `mdc-checkbox` component.",
+          "name": "StaticCheckbox",
           "cssProperties": [
             {
-              "description": "size of the inner circle",
-              "name": "--mdc-staticradio-inner-circle-size"
-            },
-            {
-              "description": "color of the label when disabled",
-              "name": "--mdc-staticradio-text-disabled-color"
+              "description": "Border color in high contrast.",
+              "name": "--mdc-staticcheckbox-border-color"
             },
             {
-              "description": "color of the radio button border when normal",
-              "name": "--mdc-staticradio-normal-border-color"
+              "description": "Background color for a selected checkbox.",
+              "name": "--mdc-staticcheckbox-checked-background-color"
             },
             {
-              "description": "color of the radio button border when disabled",
-              "name": "--mdc-staticradio-disabled-border-color"
+              "description": "Background color for a disabled checkbox.",
+              "name": "--mdc-staticcheckbox-disabled-background-color"
             },
             {
-              "description": "background color of the inner circle when normal",
-              "name": "--mdc-staticradio-inner-circle-normal-background"
+              "description": "Border color for a disabled checkbox.",
+              "name": "--mdc-checkbox-disabled-border-color"
             },
             {
-              "description": "background color of the inner circle when disabled",
-              "name": "--mdc-staticradio-inner-circle-disabled-background"
+              "description": "Background color for a disabled, selected checkbox.",
+              "name": "--mdc-checkbox-disabled-checked-icon-color"
             },
             {
-              "description": "color of the radio button when inactive",
-              "name": "--mdc-staticradio-control-inactive-color"
+              "description": "Icon color for a disabled checkbox.",
+              "name": "--mdc-staticcheckbox-disabled-icon-color"
             },
             {
-              "description": "background color of the radio button when inactive and disabled",
-              "name": "--mdc-staticradio-control-inactive-disabled-background"
+              "description": "Background color for an unselected checkbox.",
+              "name": "--mdc-staticcheckbox-icon-background-color"
             },
             {
-              "description": "color of the radio button when active",
-              "name": "--mdc-staticradio-control-active-color"
+              "description": "Default background color for an unselected checkbox.",
+              "name": "--mdc-staticcheckbox-icon-border-color"
             },
             {
-              "description": "background color of the radio button when active and disabled",
-              "name": "--mdc-staticradio-control-active-disabled-background"
+              "description": "Icon color for an unselected checkbox.",
+              "name": "--mdc-staticcheckbox-icon-color"
             }
           ],
           "members": [
@@ -34394,19 +34769,19 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
+              "description": "Determines whether the checkbox is selected or unselected.",
               "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "readonly",
+              "name": "indeterminate",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "attribute": "readonly",
+              "description": "Determines whether the checkbox is in an indeterminate state.",
+              "attribute": "indeterminate",
               "reflects": true
             },
             {
@@ -34432,17 +34807,17 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is selected or unselected.",
+              "description": "Determines whether the checkbox is selected or unselected.",
               "fieldName": "checked"
             },
             {
-              "name": "readonly",
+              "name": "indeterminate",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the radio is read-only.",
-              "fieldName": "readonly"
+              "description": "Determines whether the checkbox is in an indeterminate state.",
+              "fieldName": "indeterminate"
             },
             {
               "name": "disabled",
@@ -34468,8 +34843,8 @@
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-staticradio",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a radio.\n * It has 2 properties - checked and disabled.\n *\n * We are using the same styling that has been created for the `mdc-radio` component.\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when\n *  inactive and disabled\n * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button\n *  when active and disabled\n */",
+          "tagName": "mdc-staticcheckbox",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a checkbox.\n *\n * It has 3 properties - checked, indeterminate and disabled.\n *\n * We are using the same styling that has been created for the `mdc-checkbox` component.\n *\n * @tagname mdc-staticcheckbox\n *\n * @dependency mdc-icon\n *\n * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.\n * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.\n * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.\n * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.\n *\n */",
           "customElement": true
         }
       ],
@@ -34478,86 +34853,60 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "StaticRadio",
-            "module": "components/staticradio/staticradio.component.js"
+            "name": "StaticCheckbox",
+            "module": "components/staticcheckbox/staticcheckbox.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/statictoggle/statictoggle.component.js",
+      "path": "components/staticradio/staticradio.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "This is a decorative component that is styled to look as a toggle. <br/>\nIt has 3 properties - checked, size and disabled. <br/>\nWe are using the same styling that has been created for the `mdc-toggle` component.",
-          "name": "StaticToggle",
+          "description": "This is a decorative component that is styled to look as a radio.\nIt has 2 properties - checked and disabled.\n\nWe are using the same styling that has been created for the `mdc-radio` component.",
+          "name": "StaticRadio",
           "cssProperties": [
             {
-              "description": "Width of the toggle",
-              "name": "--mdc-statictoggle-width"
-            },
-            {
-              "description": "Height of the toggle",
-              "name": "--mdc-statictoggle-height"
-            },
-            {
-              "description": "Width of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-width-compact"
-            },
-            {
-              "description": "Height of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-height-compact"
-            },
-            {
-              "description": "Border radius of the toggle",
-              "name": "--mdc-statictoggle-border-radius"
-            },
-            {
-              "description": "Border radius of the toggle when it's size is compact",
-              "name": "--mdc-statictoggle-border-radius-compact"
+              "description": "size of the inner circle",
+              "name": "--mdc-staticradio-inner-circle-size"
             },
             {
-              "description": "Border of the toggle",
-              "name": "--mdc-statictoggle-border"
+              "description": "color of the label when disabled",
+              "name": "--mdc-staticradio-text-disabled-color"
             },
             {
-              "description": "Background color of the inactive toggle in rest state",
-              "name": "--mdc-statictoggle-inactive-rest-color"
+              "description": "color of the radio button border when normal",
+              "name": "--mdc-staticradio-normal-border-color"
             },
             {
-              "description": "Background color of the inactive toggle in disabled state",
-              "name": "--mdc-statictoggle-inactive-disabled-color"
+              "description": "color of the radio button border when disabled",
+              "name": "--mdc-staticradio-disabled-border-color"
             },
             {
-              "description": "Background color of the active toggle in rest state",
-              "name": "--mdc-statictoggle-active-rest-color"
+              "description": "background color of the inner circle when normal",
+              "name": "--mdc-staticradio-inner-circle-normal-background"
             },
             {
-              "description": "Background color of the active toggle in disabled state",
-              "name": "--mdc-statictoggle-active-disabled-color"
+              "description": "background color of the inner circle when disabled",
+              "name": "--mdc-staticradio-inner-circle-disabled-background"
             },
             {
-              "description": "Color of the icon in normal state",
-              "name": "--mdc-statictoggle-icon-color-normal"
+              "description": "color of the radio button when inactive",
+              "name": "--mdc-staticradio-control-inactive-color"
             },
             {
-              "description": "Color of the icon in disabled state",
-              "name": "--mdc-statictoggle-icon-color-disabled"
+              "description": "background color of the radio button when inactive and disabled",
+              "name": "--mdc-staticradio-control-inactive-disabled-background"
             },
             {
-              "description": "Background color of the icon in normal state",
-              "name": "--mdc-statictoggle-icon-background-color-normal"
+              "description": "color of the radio button when active",
+              "name": "--mdc-staticradio-control-active-color"
             },
             {
-              "description": "Background color of the icon in disabled state",
-              "name": "--mdc-statictoggle-icon-background-color-disabled"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot",
-              "name": "default"
+              "description": "background color of the radio button when active and disabled",
+              "name": "--mdc-staticradio-control-active-disabled-background"
             }
           ],
           "members": [
@@ -34568,19 +34917,19 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
+              "description": "Determines whether the radio is selected or unselected.",
               "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "readonly",
               "type": {
-                "text": "ToggleSize"
+                "text": "boolean"
               },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "attribute": "size",
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "attribute": "readonly",
               "reflects": true
             },
             {
@@ -34606,17 +34955,17 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the toggle is active or inactive.",
+              "description": "Determines whether the radio is selected or unselected.",
               "fieldName": "checked"
             },
             {
-              "name": "size",
+              "name": "readonly",
               "type": {
-                "text": "ToggleSize"
+                "text": "boolean"
               },
-              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
-              "default": "default",
-              "fieldName": "size"
+              "default": "false",
+              "description": "Determines whether the radio is read-only.",
+              "fieldName": "readonly"
             },
             {
               "name": "disabled",
@@ -34642,8 +34991,8 @@
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-statictoggle",
-          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 3 properties - checked, size and disabled. <br/>\n * We are using the same styling that has been created for the `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --mdc-statictoggle-width - Width of the toggle\n * @cssproperty --mdc-statictoggle-height - Height of the toggle\n * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle\n * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border - Border of the toggle\n * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state\n * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state\n * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state\n * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state\n * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state\n * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state\n */",
+          "tagName": "mdc-staticradio",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a radio.\n * It has 2 properties - checked and disabled.\n *\n * We are using the same styling that has been created for the `mdc-radio` component.\n *\n * @tagname mdc-staticradio\n *\n * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle\n * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled\n * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal\n * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled\n * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal\n * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled\n * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive\n * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when\n *  inactive and disabled\n * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active\n * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button\n *  when active and disabled\n */",
           "customElement": true
         }
       ],
@@ -34652,137 +35001,172 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "StaticToggle",
-            "module": "components/statictoggle/statictoggle.component.js"
+            "name": "StaticRadio",
+            "module": "components/staticradio/staticradio.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/spinner/spinner.component.js",
+      "path": "components/statictoggle/statictoggle.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the  progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
-          "name": "Spinner",
+          "description": "This is a decorative component that is styled to look as a toggle. <br/>\nIt has 3 properties - checked, size and disabled. <br/>\nWe are using the same styling that has been created for the `mdc-toggle` component.",
+          "name": "StaticToggle",
           "cssProperties": [
             {
-              "description": "Allows customization of the default spinner color.",
-              "name": "--mdc-spinner-default-color"
+              "description": "Width of the toggle",
+              "name": "--mdc-statictoggle-width"
             },
             {
-              "description": "Allows customization of the inverted spinner color.",
-              "name": "--mdc-spinner-inverted-color"
+              "description": "Height of the toggle",
+              "name": "--mdc-statictoggle-height"
             },
             {
-              "description": "Allows customization of the spinner Button variant color.",
-              "name": "--mdc-spinner-button-variant-color"
+              "description": "Width of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-width-compact"
             },
             {
-              "description": "Allows customization of the spinner size.",
-              "name": "--mdc-spinner-size"
-            }
-          ],
-          "cssParts": [
+              "description": "Height of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-height-compact"
+            },
             {
-              "description": "The svg which contains the circle spinner.",
-              "name": "container"
+              "description": "Border radius of the toggle",
+              "name": "--mdc-statictoggle-border-radius"
             },
             {
-              "description": "The circle of the spinner.",
-              "name": "circle"
+              "description": "Border radius of the toggle when it's size is compact",
+              "name": "--mdc-statictoggle-border-radius-compact"
+            },
+            {
+              "description": "Border of the toggle",
+              "name": "--mdc-statictoggle-border"
+            },
+            {
+              "description": "Background color of the inactive toggle in rest state",
+              "name": "--mdc-statictoggle-inactive-rest-color"
+            },
+            {
+              "description": "Background color of the inactive toggle in disabled state",
+              "name": "--mdc-statictoggle-inactive-disabled-color"
+            },
+            {
+              "description": "Background color of the active toggle in rest state",
+              "name": "--mdc-statictoggle-active-rest-color"
+            },
+            {
+              "description": "Background color of the active toggle in disabled state",
+              "name": "--mdc-statictoggle-active-disabled-color"
+            },
+            {
+              "description": "Color of the icon in normal state",
+              "name": "--mdc-statictoggle-icon-color-normal"
+            },
+            {
+              "description": "Color of the icon in disabled state",
+              "name": "--mdc-statictoggle-icon-color-disabled"
+            },
+            {
+              "description": "Background color of the icon in normal state",
+              "name": "--mdc-statictoggle-icon-background-color-normal"
+            },
+            {
+              "description": "Background color of the icon in disabled state",
+              "name": "--mdc-statictoggle-icon-background-color-disabled"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot",
+              "name": "default"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "inverted",
+              "name": "checked",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
               "default": "false",
-              "attribute": "inverted",
+              "description": "Determines whether the toggle is active or inactive.",
+              "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "SpinnerSize | undefined"
+                "text": "ToggleSize"
               },
-              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
-              "default": "midsize",
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
               "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "field",
-              "name": "variant",
+              "name": "disabled",
               "type": {
-                "text": "SpinnerVariant"
+                "text": "boolean | undefined"
               },
-              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
-              "default": "standalone",
-              "attribute": "variant",
-              "reflects": true
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
             }
           ],
           "attributes": [
             {
-              "name": "inverted",
+              "name": "checked",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "The spinner color can be inverted by setting the inverted attribute to true.",
               "default": "false",
-              "fieldName": "inverted"
+              "description": "Determines whether the toggle is active or inactive.",
+              "fieldName": "checked"
             },
             {
               "name": "size",
               "type": {
-                "text": "SpinnerSize | undefined"
+                "text": "ToggleSize"
               },
-              "description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
-              "default": "midsize",
+              "description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
+              "default": "default",
               "fieldName": "size"
             },
             {
-              "name": "aria-label",
+              "name": "disabled",
               "type": {
-                "text": "string | null"
+                "text": "boolean | undefined"
               },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
             {
-              "name": "variant",
-              "type": {
-                "text": "SpinnerVariant"
-              },
-              "description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
-              "default": "standalone",
-              "fieldName": "variant"
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-spinner",
-          "jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the  progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
+          "tagName": "mdc-statictoggle",
+          "jsDoc": "/**\n * This is a decorative component that is styled to look as a toggle. <br/>\n * It has 3 properties - checked, size and disabled. <br/>\n * We are using the same styling that has been created for the `mdc-toggle` component.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-statictoggle\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --mdc-statictoggle-width - Width of the toggle\n * @cssproperty --mdc-statictoggle-height - Height of the toggle\n * @cssproperty --mdc-statictoggle-width-compact - Width of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-height-compact - Height of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border-radius - Border radius of the toggle\n * @cssproperty --mdc-statictoggle-border-radius-compact - Border radius of the toggle when it's size is compact\n * @cssproperty --mdc-statictoggle-border - Border of the toggle\n * @cssproperty --mdc-statictoggle-inactive-rest-color - Background color of the inactive toggle in rest state\n * @cssproperty --mdc-statictoggle-inactive-disabled-color - Background color of the inactive toggle in disabled state\n * @cssproperty --mdc-statictoggle-active-rest-color - Background color of the active toggle in rest state\n * @cssproperty --mdc-statictoggle-active-disabled-color - Background color of the active toggle in disabled state\n * @cssproperty --mdc-statictoggle-icon-color-normal - Color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-color-disabled - Color of the icon in disabled state\n * @cssproperty --mdc-statictoggle-icon-background-color-normal - Background color of the icon in normal state\n * @cssproperty --mdc-statictoggle-icon-background-color-disabled - Background color of the icon in disabled state\n */",
           "customElement": true
         }
       ],
@@ -34791,8 +35175,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Spinner",
-            "module": "components/spinner/spinner.component.js"
+            "name": "StaticToggle",
+            "module": "components/statictoggle/statictoggle.component.js"
           }
         }
       ]
@@ -35757,6 +36141,34 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setSoftDisabled",
@@ -36066,6 +36478,30 @@
                 "name": "Buttonsimple",
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
           "mixins": [