@momentum-design/components 0.101.4 → 0.102.1

package/dist/custom-elements.json

@@ -968,218 +968,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/animation/animation.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
-          "name": "Animation",
-          "members": [
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "AnimationNames | undefined"
-              },
-              "description": "Name of the animation (= filename)",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "loop",
-              "type": {
-                "text": "LoopType | undefined"
-              },
-              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
-              "attribute": "loop",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "autoplay",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Weather start the animation automatically",
-              "attribute": "autoplay",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabelledBy",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "attribute": "aria-labelledby"
-            },
-            {
-              "kind": "field",
-              "name": "lottieInstance",
-              "type": {
-                "text": "AnimationItem | undefined"
-              },
-              "privacy": "private",
-              "description": "Lottie animation instance"
-            },
-            {
-              "kind": "field",
-              "name": "containerRef",
-              "type": {
-                "text": "Ref<HTMLDivElement>"
-              },
-              "privacy": "private",
-              "description": "Container for the animation"
-            },
-            {
-              "kind": "field",
-              "name": "animation",
-              "description": "Exposed API of the animation library (lottie)",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "getLoopValue",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "onLoadSuccessHandler",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "animationData",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ],
-              "description": "Create new lotty instance for the loaded data"
-            },
-            {
-              "kind": "method",
-              "name": "onLoadFailHandler",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "error",
-                  "type": {
-                    "text": "Error"
-                  }
-                }
-              ],
-              "description": "Error handler for animation loading"
-            },
-            {
-              "kind": "method",
-              "name": "getAnimationData",
-              "privacy": "private",
-              "description": "Import animation data dynamically"
-            },
-            {
-              "kind": "field",
-              "name": "onCompleteHandler",
-              "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
-            }
-          ],
-          "events": [
-            {
-              "name": "load",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onLoad) This event is dispatched when the animation is loaded",
-              "reactName": "onLoad"
-            },
-            {
-              "description": "(React: onComplete) This event is dispatched when all animation loops completed",
-              "name": "complete",
-              "reactName": "onComplete"
-            },
-            {
-              "description": "(React: onError) This event is dispatched when animation loading failed",
-              "name": "error",
-              "reactName": "onError"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "AnimationNames | undefined"
-              },
-              "description": "Name of the animation (= filename)",
-              "fieldName": "name"
-            },
-            {
-              "name": "loop",
-              "type": {
-                "text": "LoopType | undefined"
-              },
-              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
-              "fieldName": "loop"
-            },
-            {
-              "name": "autoplay",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Weather start the animation automatically",
-              "fieldName": "autoplay"
-            },
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            },
-            {
-              "name": "aria-labelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "fieldName": "ariaLabelledBy"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-animation",
-          "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Animation",
-            "module": "components/animation/animation.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/alertchip/alertchip.component.js",
@@ -1775,6 +1563,218 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/animation/animation.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
+          "name": "Animation",
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "AnimationNames | undefined"
+              },
+              "description": "Name of the animation (= filename)",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "loop",
+              "type": {
+                "text": "LoopType | undefined"
+              },
+              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "attribute": "loop",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autoplay",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Weather start the animation automatically",
+              "attribute": "autoplay",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabelledBy",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "attribute": "aria-labelledby"
+            },
+            {
+              "kind": "field",
+              "name": "lottieInstance",
+              "type": {
+                "text": "AnimationItem | undefined"
+              },
+              "privacy": "private",
+              "description": "Lottie animation instance"
+            },
+            {
+              "kind": "field",
+              "name": "containerRef",
+              "type": {
+                "text": "Ref<HTMLDivElement>"
+              },
+              "privacy": "private",
+              "description": "Container for the animation"
+            },
+            {
+              "kind": "field",
+              "name": "animation",
+              "description": "Exposed API of the animation library (lottie)",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "getLoopValue",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onLoadSuccessHandler",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "animationData",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "description": "Create new lotty instance for the loaded data"
+            },
+            {
+              "kind": "method",
+              "name": "onLoadFailHandler",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "Error"
+                  }
+                }
+              ],
+              "description": "Error handler for animation loading"
+            },
+            {
+              "kind": "method",
+              "name": "getAnimationData",
+              "privacy": "private",
+              "description": "Import animation data dynamically"
+            },
+            {
+              "kind": "field",
+              "name": "onCompleteHandler",
+              "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
+            }
+          ],
+          "events": [
+            {
+              "name": "load",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onLoad) This event is dispatched when the animation is loaded",
+              "reactName": "onLoad"
+            },
+            {
+              "description": "(React: onComplete) This event is dispatched when all animation loops completed",
+              "name": "complete",
+              "reactName": "onComplete"
+            },
+            {
+              "description": "(React: onError) This event is dispatched when animation loading failed",
+              "name": "error",
+              "reactName": "onError"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "AnimationNames | undefined"
+              },
+              "description": "Name of the animation (= filename)",
+              "fieldName": "name"
+            },
+            {
+              "name": "loop",
+              "type": {
+                "text": "LoopType | undefined"
+              },
+              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "fieldName": "loop"
+            },
+            {
+              "name": "autoplay",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Weather start the animation automatically",
+              "fieldName": "autoplay"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "aria-labelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "fieldName": "ariaLabelledBy"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-animation",
+          "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Animation",
+            "module": "components/animation/animation.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/avatar/avatar.component.js",
@@ -7071,32 +7071,172 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/checkbox/checkbox.component.js",
+      "path": "components/cardradio/cardradio.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.\n\nTo create a group of checkboxes, use the FormFieldGroup component.",
-          "name": "Checkbox",
+          "description": "cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\nThis card would have events for selected and unselected (similar to radio)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
+          "name": "CardRadio",
           "cssProperties": [
             {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-checkbox-background-color-hover"
+              "description": "The width of the card",
+              "name": "--mdc-card-width",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The header part of the card",
+              "name": "header",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
-              "description": "Background color for a selected checkbox when hovered.",
-              "name": "--mdc-checkbox-checked-background-color-hover"
+              "description": "The icon part of the card header",
+              "name": "icon",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
-              "description": "Background color for a selected checkbox when pressed.",
-              "name": "--mdc-checkbox-checked-pressed-icon-color"
+              "description": "The body part of the card",
+              "name": "body",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
-              "description": "Background color for a selected checkbox when pressed.",
-              "name": "--mdc-checkbox-pressed-icon-color"
+              "description": "The image part of the card",
+              "name": "image",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
-              "description": "Background color for a selected checkbox when disabled.",
-              "name": "--mdc-checkbox-disabled-checked-icon-color"
+              "description": "The footer part of the card",
+              "name": "footer",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The link part of the card footer",
+              "name": "footer-link",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The primary button part of the card footer",
+              "name": "footer-button-primary",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The secondary button part of the card footer",
+              "name": "footer-button-secondary",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The icon button part of the card header",
+              "name": "icon-button",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The text part of the card",
+              "name": "text",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The check part of the card",
+              "name": "check"
+            },
+            {
+              "description": "The check icon part of the card",
+              "name": "check-icon"
+            },
+            {
+              "description": "The check icon button part of the card",
+              "name": "check-icon-button"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This slot is for passing the content before the body",
+              "name": "before-body",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "This slot is for passing the text content for the card",
+              "name": "body",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "This slot is for passing the content after the body",
+              "name": "after-body",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "This slot is for passing `mdc-link` component within the footer section.",
+              "name": "footer-link",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-primary",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-secondary",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
+              "name": "footer",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             }
           ],
           "members": [
@@ -7107,59 +7247,45 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the checkbox is selected or unselected.",
+              "description": "The checked state of the card",
               "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "indeterminate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
-              "attribute": "indeterminate",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "autofocus",
+              "name": "name",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
-              "attribute": "autofocus",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "setFormValue",
-              "privacy": "private",
-              "description": "Updates the form value to reflect the current state of the checkbox.\nIf checked, the value is set to either the user-provided value or 'on' if no value is provided.\nIf unchecked, the value is set to null."
+              "default": "''",
+              "description": "The name of the radio.",
+              "attribute": "name"
             },
             {
               "kind": "method",
-              "name": "manageRequired",
+              "name": "getAllCardsWithinSameGroup",
               "privacy": "private",
-              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the required property is set, then the checkbox is invalid."
+              "return": {
+                "type": {
+                  "text": "CardRadio[]"
+                }
+              },
+              "description": "Returns all cards within the same group (name)."
             },
             {
               "kind": "method",
-              "name": "toggleState",
+              "name": "toggleChecked",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "description": "Toggles the state of the checkbox element.\nIf the element is not disabled, then\nthe checked property is toggled and the indeterminate property is set to false."
+              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
+              "name": "setDisabled",
               "return": {
                 "type": {
                   "text": "void"
@@ -7167,19 +7293,17 @@
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "disabled",
                   "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+                    "text": "boolean"
+                  }
                 }
-              ],
-              "description": "Handles the keydown event on the checkbox.\nWhen the user presses Enter, the form is submitted."
+              ]
             },
             {
               "kind": "method",
-              "name": "handleChange",
-              "privacy": "public",
+              "name": "updateCardRadio",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -7187,352 +7311,312 @@
               },
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "cards",
                   "type": {
-                    "text": "Event"
+                    "text": "CardRadio[]"
+                  }
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
                   }
                 }
-              ],
-              "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
-            },
-            {
-              "kind": "field",
-              "name": "renderLabelAndHelperText",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "attribute": "name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "validationMessage",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "attribute": "validation-message",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "validity",
-              "type": {
-                "text": "ValidityState"
-              },
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              ]
             },
             {
-              "kind": "field",
-              "name": "willValidate",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              "kind": "method",
+              "name": "toggleOnEnter",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event"
+                }
+              ],
+              "description": "Toggles the checked state when enter key is used"
             },
             {
               "kind": "method",
-              "name": "setValidity",
-              "description": "Sets the validity of the input field based on the input field's validity.",
-              "return": {
-                "type": {
-                  "text": ""
+              "name": "toggleOnSpace",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event"
                 }
-              },
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
+              ],
+              "description": "Toggles the checked state when space key is used"
             },
             {
               "kind": "method",
-              "name": "checkValidity",
+              "name": "renderHeader",
+              "privacy": "protected",
+              "description": "Renders the header of the card",
               "return": {
                 "type": {
-                  "text": "boolean"
+                  "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
-              "kind": "method",
-              "name": "reportValidity",
+              "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": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "tabIndex",
               "type": {
-                "text": "string | null"
+                "text": "number"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "cardTitle",
               "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 title of the card - part of header section",
+              "attribute": "card-title",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "subtitle",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "attribute": "label",
+              "default": "''",
+              "description": "The subtitle of the card - part of header section",
+              "attribute": "subtitle",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "imageSrc",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "attribute": "required",
+              "default": "''",
+              "description": "The image source URL to render on the card",
+              "attribute": "image-src",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "id",
+              "name": "imageAlt",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "attribute": "id",
+              "description": "The image alt for accessibility support",
+              "attribute": "image-alt",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "helpTextType",
+              "name": "variant",
               "type": {
-                "text": "ValidationType"
+                "text": "CardVariant"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
+              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "default": "'border'",
+              "attribute": "variant",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "helpText",
+              "name": "orientation",
               "type": {
-                "text": "string | undefined"
+                "text": "CardOrientation"
               },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
+              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "default": "'vertical'",
+              "attribute": "orientation",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "toggletipText",
+              "name": "titleTagName",
               "type": {
-                "text": "string | undefined"
+                "text": "TagNameType"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "attribute": "toggletip-text",
+              "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": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "toggletipPlacement",
+              "name": "subtitleTagName",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "TagNameType"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "attribute": "toggletip-placement",
+              "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": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "infoIconAriaLabel",
+              "name": "iconName",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "attribute": "info-icon-aria-label",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderLabelElement",
+              "name": "renderImage",
               "privacy": "protected",
-              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "description": "Renders the image on the card if image source is provided",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderHelpTextIcon",
+              "name": "renderIcon",
               "privacy": "protected",
-              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
+              "description": "Renders the icon on the card if icon name is provided",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderHelpText",
-              "privacy": "protected",
-              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderLabel",
+              "name": "renderTitle",
               "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "description": "Renders the title and subtitle on the card",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderHelperText",
+              "name": "renderFooter",
               "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             }
           ],
           "events": [
             {
-              "type": {
-                "text": "EventConstructor"
-              }
+              "description": "(React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.",
+              "name": "click",
+              "reactName": "onClick"
             },
             {
-              "description": "(React: onChange) Event that gets dispatched when the checkbox state changes.",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It toggles the checked state when enter key is used.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It toggles the checked state when space key is used.",
+              "name": "keyup",
+              "reactName": "onKeyUp"
+            },
+            {
+              "description": "(React: onChange) Event that gets dispatched when the card state changes.",
               "name": "change",
               "reactName": "onChange"
             },
             {
-              "description": "(React: onFocus) Event that gets dispatched when the checkbox receives focus.",
+              "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
               "name": "focus",
               "reactName": "onFocus"
             }
@@ -7544,207 +7628,177 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Determines whether the checkbox is selected or unselected.",
+              "description": "The checked state of the card",
               "fieldName": "checked"
             },
-            {
-              "name": "indeterminate",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
-              "fieldName": "indeterminate"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
-              "fieldName": "autofocus"
-            },
             {
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
-              }
+              "description": "The name of the radio.",
+              "fieldName": "name"
             },
             {
-              "name": "validation-message",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
-              "fieldName": "validationMessage",
+              "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": "FormInternalsMixin",
-                "module": "src/utils/mixins/FormInternalsMixin.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
-              "name": "data-aria-label",
+              "name": "tabIndex",
               "type": {
-                "text": "string | null"
+                "text": "number"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             },
             {
-              "name": "disabled",
+              "name": "card-title",
               "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",
-              "fieldName": "disabled",
+              "default": "''",
+              "description": "The title of the card - part of header section",
+              "fieldName": "cardTitle",
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "label",
+              "name": "subtitle",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "fieldName": "label",
+              "default": "''",
+              "description": "The subtitle of the card - part of header section",
+              "fieldName": "subtitle",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "required",
+              "name": "image-src",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "fieldName": "required",
+              "default": "''",
+              "description": "The image source URL to render on the card",
+              "fieldName": "imageSrc",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "id",
+              "name": "image-alt",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "fieldName": "id",
+              "description": "The image alt for accessibility support",
+              "fieldName": "imageAlt",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "help-text-type",
+              "name": "variant",
               "type": {
-                "text": "ValidationType"
+                "text": "CardVariant"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType",
+              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "default": "'border'",
+              "fieldName": "variant",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "help-text",
+              "name": "orientation",
               "type": {
-                "text": "string | undefined"
+                "text": "CardOrientation"
               },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText",
+              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "default": "'vertical'",
+              "fieldName": "orientation",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "toggletip-text",
+              "name": "title-tag-name",
               "type": {
-                "text": "string | undefined"
+                "text": "TagNameType"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "fieldName": "toggletipText",
+              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "fieldName": "titleTagName",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "toggletip-placement",
+              "name": "subtitle-tag-name",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "TagNameType"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "fieldName": "toggletipPlacement",
+              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "fieldName": "subtitleTagName",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "info-icon-aria-label",
+              "name": "icon-name",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "fieldName": "infoIconAriaLabel",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             }
           ],
           "mixins": [
             {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
             },
             {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
             }
           ],
           "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
+            "name": "Card",
+            "module": "/src/components/card/card.component"
           },
-          "tagName": "mdc-checkbox",
-          "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * To create a group of checkboxes, use the FormFieldGroup component.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.\n */",
+          "tagName": "mdc-cardradio",
+          "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\n * This card would have events for selected and unselected (similar to radio)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @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 * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event change - (React: onChange) Event that gets dispatched when the card state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
           "customElement": true
         }
       ],
@@ -7753,180 +7807,40 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Checkbox",
-            "module": "components/checkbox/checkbox.component.js"
+            "name": "CardRadio",
+            "module": "components/cardradio/cardradio.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/cardradio/cardradio.component.js",
+      "path": "components/checkbox/checkbox.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\nThis card would have events for selected and unselected (similar to radio)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
-          "name": "CardRadio",
+          "description": "Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\nThese are often used in forms, settings, and selections in lists.\n\nA checkbox component contains an optional label and an optional helper text.\n\nTo create a group of checkboxes, use the FormFieldGroup component.",
+          "name": "Checkbox",
           "cssProperties": [
             {
-              "description": "The width of the card",
-              "name": "--mdc-card-width",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The header part of the card",
-              "name": "header",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
-            },
-            {
-              "description": "The icon part of the card header",
-              "name": "icon",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
-            },
-            {
-              "description": "The body part of the card",
-              "name": "body",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
-            },
-            {
-              "description": "The image part of the card",
-              "name": "image",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
-            },
-            {
-              "description": "The footer part of the card",
-              "name": "footer",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
-            },
-            {
-              "description": "The link part of the card footer",
-              "name": "footer-link",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
-            },
-            {
-              "description": "The primary button part of the card footer",
-              "name": "footer-button-primary",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
-            },
-            {
-              "description": "The secondary button part of the card footer",
-              "name": "footer-button-secondary",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
-            },
-            {
-              "description": "The icon button part of the card header",
-              "name": "icon-button",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
-            },
-            {
-              "description": "The text part of the card",
-              "name": "text",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
-            },
-            {
-              "description": "The check part of the card",
-              "name": "check"
-            },
-            {
-              "description": "The check icon part of the card",
-              "name": "check-icon"
-            },
-            {
-              "description": "The check icon button part of the card",
-              "name": "check-icon-button"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This slot is for passing the content before the body",
-              "name": "before-body",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
-            },
-            {
-              "description": "This slot is for passing the text content for the card",
-              "name": "body",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
-            },
-            {
-              "description": "This slot is for passing the content after the body",
-              "name": "after-body",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-checkbox-background-color-hover"
             },
             {
-              "description": "This slot is for passing `mdc-link` component within the footer section.",
-              "name": "footer-link",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "description": "Background color for a selected checkbox when hovered.",
+              "name": "--mdc-checkbox-checked-background-color-hover"
             },
             {
-              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-primary",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "description": "Background color for a selected checkbox when pressed.",
+              "name": "--mdc-checkbox-checked-pressed-icon-color"
             },
             {
-              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-secondary",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "description": "Background color for a selected checkbox when pressed.",
+              "name": "--mdc-checkbox-pressed-icon-color"
             },
             {
-              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
-              "name": "footer",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "description": "Background color for a selected checkbox when disabled.",
+              "name": "--mdc-checkbox-disabled-checked-icon-color"
             }
           ],
           "members": [
@@ -7937,376 +7851,432 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The checked state of the card",
+              "description": "Determines whether the checkbox is selected or unselected.",
               "attribute": "checked",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "indeterminate",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The name of the radio.",
-              "attribute": "name"
+              "default": "false",
+              "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
+              "attribute": "indeterminate",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "attribute": "autofocus",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "getAllCardsWithinSameGroup",
+              "name": "setFormValue",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "CardRadio[]"
-                }
-              },
-              "description": "Returns all cards within the same group (name)."
+              "description": "Updates the form value to reflect the current state of the checkbox.\nIf checked, the value is set to either the user-provided value or 'on' if no value is provided.\nIf unchecked, the value is set to null."
             },
             {
               "kind": "method",
-              "name": "toggleChecked",
+              "name": "manageRequired",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
+              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the required property is set, then the checkbox is invalid."
             },
             {
               "kind": "method",
-              "name": "setDisabled",
+              "name": "toggleState",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "parameters": [
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  }
-                }
-              ]
+              "description": "Toggles the state of the checkbox element.\nIf the element is not disabled, then\nthe checked property is toggled and the indeterminate property is set to false."
             },
             {
               "kind": "method",
-              "name": "updateCardRadio",
+              "name": "handleKeyDown",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
                 }
               },
-              "parameters": [
-                {
-                  "name": "cards",
-                  "type": {
-                    "text": "CardRadio[]"
-                  }
-                },
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "toggleOnEnter",
-              "privacy": "private",
               "parameters": [
                 {
                   "name": "event",
                   "type": {
                     "text": "KeyboardEvent"
                   },
-                  "description": "The keyboard event"
+                  "description": "The keyboard event."
                 }
               ],
-              "description": "Toggles the checked state when enter key is used"
+              "description": "Handles the keydown event on the checkbox.\nWhen the user presses Enter, the form is submitted."
             },
             {
               "kind": "method",
-              "name": "toggleOnSpace",
-              "privacy": "private",
+              "name": "handleChange",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event"
+                    "text": "Event"
+                  }
                 }
               ],
-              "description": "Toggles the checked state when space key is used"
+              "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
+            },
+            {
+              "kind": "field",
+              "name": "renderLabelAndHelperText",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "attribute": "validation-message",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "renderHeader",
-              "privacy": "protected",
-              "description": "Renders the header of the card",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "tabIndex",
+              "name": "dataAriaLabel",
               "type": {
-                "text": "number"
+                "text": "string | null"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
               "reflects": true,
               "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "cardTitle",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The title of the card - part of header section",
-              "attribute": "card-title",
+              "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": "Card",
-                "module": "components/card/card.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "subtitle",
+              "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "The subtitle of the card - part of header section",
-              "attribute": "subtitle",
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "imageSrc",
+              "name": "required",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "''",
-              "description": "The image source URL to render on the card",
-              "attribute": "image-src",
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "imageAlt",
+              "name": "id",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The image alt for accessibility support",
-              "attribute": "image-alt",
-              "reflects": true,
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "helpTextType",
               "type": {
-                "text": "CardVariant"
+                "text": "ValidationType"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
-              "default": "'border'",
-              "attribute": "variant",
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "helpText",
               "type": {
-                "text": "CardOrientation"
+                "text": "string | undefined"
               },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
-              "default": "'vertical'",
-              "attribute": "orientation",
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "titleTagName",
+              "name": "toggletipText",
               "type": {
-                "text": "TagNameType"
+                "text": "string | undefined"
               },
-              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "attribute": "title-tag-name",
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "attribute": "toggletip-text",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "subtitleTagName",
+              "name": "toggletipPlacement",
               "type": {
-                "text": "TagNameType"
+                "text": "PopoverPlacement"
               },
-              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "attribute": "subtitle-tag-name",
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "attribute": "toggletip-placement",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "iconName",
+              "name": "infoIconAriaLabel",
               "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.",
-              "attribute": "icon-name",
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "attribute": "info-icon-aria-label",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderImage",
+              "name": "renderLabelElement",
               "privacy": "protected",
-              "description": "Renders the image on the card if image source is provided",
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderIcon",
+              "name": "renderHelpTextIcon",
               "privacy": "protected",
-              "description": "Renders the icon on the card if icon name is provided",
+              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderTitle",
+              "name": "renderHelpText",
               "privacy": "protected",
-              "description": "Renders the title and subtitle on the card",
+              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderFooter",
+              "name": "renderLabel",
               "privacy": "protected",
-              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             }
           ],
           "events": [
             {
-              "description": "(React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.",
-              "name": "click",
-              "reactName": "onClick"
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It toggles the checked state when enter key is used.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
-            },
-            {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It toggles the checked state when space key is used.",
-              "name": "keyup",
-              "reactName": "onKeyUp"
+              "type": {
+                "text": "EventConstructor"
+              }
             },
             {
-              "description": "(React: onChange) Event that gets dispatched when the card state changes.",
+              "description": "(React: onChange) Event that gets dispatched when the checkbox state changes.",
               "name": "change",
               "reactName": "onChange"
             },
             {
-              "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
+              "description": "(React: onFocus) Event that gets dispatched when the checkbox receives focus.",
               "name": "focus",
               "reactName": "onFocus"
             }
@@ -8318,177 +8288,207 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The checked state of the card",
+              "description": "Determines whether the checkbox is selected or unselected.",
               "fieldName": "checked"
             },
+            {
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
+              "fieldName": "indeterminate"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "fieldName": "autofocus"
+            },
             {
               "name": "name",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The name of the radio.",
-              "fieldName": "name"
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
             },
             {
-              "name": "disabled",
+              "name": "value",
               "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",
-              "fieldName": "disabled",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "tabIndex",
+              "name": "validation-message",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.\n\nTo display custom validation messages, you must listen for input events (or other relevant events)\non your component and update the `validationMessage` property with the desired message string.\nUpdating this property will ensure that new validation messages are shown to the user.\n- The `validationMessage` property overrides the default browser validation message when set.\n- Consumers are responsible for updating `validationMessage` in response to input or validation state changes.",
+              "fieldName": "validationMessage",
               "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "card-title",
+              "name": "data-aria-label",
               "type": {
-                "text": "string"
+                "text": "string | null"
               },
-              "default": "''",
-              "description": "The title of the card - part of header section",
-              "fieldName": "cardTitle",
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
-              "name": "subtitle",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The subtitle of the card - part of header section",
-              "fieldName": "subtitle",
+              "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": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
-              "name": "image-src",
+              "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "The image source URL to render on the card",
-              "fieldName": "imageSrc",
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "image-alt",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "id",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The image alt for accessibility support",
-              "fieldName": "imageAlt",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "fieldName": "id",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "variant",
+              "name": "help-text-type",
               "type": {
-                "text": "CardVariant"
+                "text": "ValidationType"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
-              "default": "'border'",
-              "fieldName": "variant",
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "orientation",
+              "name": "help-text",
               "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",
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "title-tag-name",
+              "name": "toggletip-text",
               "type": {
-                "text": "TagNameType"
+                "text": "string | undefined"
               },
-              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "fieldName": "titleTagName",
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "fieldName": "toggletipText",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "subtitle-tag-name",
+              "name": "toggletip-placement",
               "type": {
-                "text": "TagNameType"
+                "text": "PopoverPlacement"
               },
-              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "fieldName": "subtitleTagName",
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "fieldName": "toggletipPlacement",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
             {
-              "name": "icon-name",
+              "name": "info-icon-aria-label",
               "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",
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "fieldName": "infoIconAriaLabel",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             }
           ],
           "mixins": [
             {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
             },
             {
-              "name": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
           ],
           "superclass": {
-            "name": "Card",
-            "module": "/src/components/card/card.component"
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
-          "tagName": "mdc-cardradio",
-          "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\n * This card would have events for selected and unselected (similar to radio)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @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 * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event change - (React: onChange) Event that gets dispatched when the card state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
+          "tagName": "mdc-checkbox",
+          "jsDoc": "/**\n * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.\n * These are often used in forms, settings, and selections in lists.\n *\n * A checkbox component contains an optional label and an optional helper text.\n *\n * To create a group of checkboxes, use the FormFieldGroup component.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-checkbox\n *\n * @event change - (React: onChange) Event that gets dispatched when the checkbox state changes.\n * @event focus - (React: onFocus) Event that gets dispatched when the checkbox receives focus.\n *\n * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.\n * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.\n * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a selected checkbox when disabled.\n */",
           "customElement": true
         }
       ],
@@ -8497,8 +8497,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CardRadio",
-            "module": "components/cardradio/cardradio.component.js"
+            "name": "Checkbox",
+            "module": "components/checkbox/checkbox.component.js"
           }
         }
       ]
@@ -16882,7 +16882,23 @@
             },
             {
               "description": "Allows customization of padding left and right.",
-              "name": "--mdc-listitem-padding-left-and-right"
+              "name": "--mdc-listitem-padding-left-right"
+            },
+            {
+              "description": "Allows customization of padding top and bottom.",
+              "name": "--mdc-listitem-padding-top-bottom"
+            },
+            {
+              "description": "Allows customization of the cursor.",
+              "name": "--mdc-listitem-cursor"
+            },
+            {
+              "description": "Allows customization of the width of the list item.",
+              "name": "--mdc-listitem-width"
+            },
+            {
+              "description": "Allows customization of the height of the list item.",
+              "name": "--mdc-listitem-height"
             }
           ],
           "slots": [
@@ -16913,6 +16929,10 @@
             {
               "description": "slot for list item controls to appear of trailing end.",
               "name": "trailing-controls"
+            },
+            {
+              "description": "content slot can be used to override the content completely. Be aware that this will override the default content of the list item.",
+              "name": "content"
             }
           ],
           "members": [
@@ -17357,7 +17377,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-listitem",
-          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.\n * The placement of the tooltip can be adjusted using the tooltip-placement attribute.\n * This will be helpful when the listitem text is truncated or\n * when you want to display additional information about the listitem.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n * @dependency mdc-tooltip\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n * @cssproperty --mdc-listitem-padding-left-and-right - Allows customization of padding left and right.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the listitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the listitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)\n */",
+          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * By providing the tooltip-text attribute, a tooltip will be displayed on hover of the listitem.\n * The placement of the tooltip can be adjusted using the tooltip-placement attribute.\n * This will be helpful when the listitem text is truncated or\n * when you want to display additional information about the listitem.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n * @dependency mdc-tooltip\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n * @slot content - content slot can be used to override the content completely. Be aware that\n * this will override the default content of the list item.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and tertiary label text slot color.\n * @cssproperty --mdc-listitem-disabled-color - Allows customization of the disabled color.\n * @cssproperty --mdc-listitem-column-gap - Allows customization of column gap.\n * @cssproperty --mdc-listitem-padding-left-right - Allows customization of padding left and right.\n * @cssproperty --mdc-listitem-padding-top-bottom - Allows customization of padding top and bottom.\n * @cssproperty --mdc-listitem-cursor - Allows customization of the cursor.\n * @cssproperty --mdc-listitem-width - Allows customization of the width of the list item.\n * @cssproperty --mdc-listitem-height - Allows customization of the height of the list item.\n *\n * @event click - (React: onClick) This event is dispatched when the listitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the listitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the listitem.\n * @event focus - (React: onFocus) This event is dispatched when the listitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the listitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the listitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the listitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the listitem is destroyed (removed from the DOM)\n */",
           "customElement": true
         }
       ],
@@ -17865,6 +17885,14 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "description": "content slot can be used to override the content completely. Be aware that this will override the default content of the list item.",
+              "name": "content",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ],
           "members": [
@@ -18600,7 +18628,39 @@
             },
             {
               "description": "Allows customization of padding left and right.",
-              "name": "--mdc-listitem-padding-left-and-right",
+              "name": "--mdc-listitem-padding-left-right",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of padding top and bottom.",
+              "name": "--mdc-listitem-padding-top-bottom",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the cursor.",
+              "name": "--mdc-listitem-cursor",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the width of the list item.",
+              "name": "--mdc-listitem-width",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the height of the list item.",
+              "name": "--mdc-listitem-height",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
@@ -18684,6 +18744,14 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "description": "content slot can be used to override the content completely. Be aware that this will override the default content of the list item.",
+              "name": "content",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ],
           "members": [
@@ -19542,7 +19610,39 @@
             },
             {
               "description": "Allows customization of padding left and right.",
-              "name": "--mdc-listitem-padding-left-and-right",
+              "name": "--mdc-listitem-padding-left-right",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of padding top and bottom.",
+              "name": "--mdc-listitem-padding-top-bottom",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the cursor.",
+              "name": "--mdc-listitem-cursor",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the width of the list item.",
+              "name": "--mdc-listitem-width",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the height of the list item.",
+              "name": "--mdc-listitem-height",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
@@ -19626,6 +19726,14 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "description": "content slot can be used to override the content completely. Be aware that this will override the default content of the list item.",
+              "name": "content",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ],
           "members": [
@@ -20495,7 +20603,39 @@
             },
             {
               "description": "Allows customization of padding left and right.",
-              "name": "--mdc-listitem-padding-left-and-right",
+              "name": "--mdc-listitem-padding-left-right",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of padding top and bottom.",
+              "name": "--mdc-listitem-padding-top-bottom",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the cursor.",
+              "name": "--mdc-listitem-cursor",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the width of the list item.",
+              "name": "--mdc-listitem-width",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the height of the list item.",
+              "name": "--mdc-listitem-height",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
@@ -22911,7 +23051,39 @@
             },
             {
               "description": "Allows customization of padding left and right.",
-              "name": "--mdc-listitem-padding-left-and-right",
+              "name": "--mdc-listitem-padding-left-right",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of padding top and bottom.",
+              "name": "--mdc-listitem-padding-top-bottom",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the cursor.",
+              "name": "--mdc-listitem-cursor",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the width of the list item.",
+              "name": "--mdc-listitem-width",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the height of the list item.",
+              "name": "--mdc-listitem-height",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
@@ -23913,6 +24085,14 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "description": "content slot can be used to override the content completely. Be aware that this will override the default content of the list item.",
+              "name": "content",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ]
         }
@@ -24910,6 +25090,14 @@
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
+            },
+            {
+              "description": "content slot can be used to override the content completely. Be aware that this will override the default content of the list item.",
+              "name": "content",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
             }
           ],
           "cssProperties": [
@@ -24971,7 +25159,39 @@
             },
             {
               "description": "Allows customization of padding left and right.",
-              "name": "--mdc-listitem-padding-left-and-right",
+              "name": "--mdc-listitem-padding-left-right",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of padding top and bottom.",
+              "name": "--mdc-listitem-padding-top-bottom",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the cursor.",
+              "name": "--mdc-listitem-cursor",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the width of the list item.",
+              "name": "--mdc-listitem-width",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the height of the list item.",
+              "name": "--mdc-listitem-height",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
@@ -41036,6 +41256,342 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/typewriter/typewriter.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Typewriter component that creates a typewriter effect on text content.\nIt uses the Text component internally, adding a progressive typing effect.\n\nThe `type` attribute allows changing the text style (passed to the internal Text component).\nThe `tagname` attribute allows changing the tag name of the text element (passed to the internal Text component).\nThe default tag name is `p`.\n\nThe `speed` attribute controls typing speed in milliseconds per character:\n- 'very-slow' = 240ms per character\n- 'slow' = 120ms per character\n- 'normal' = 60ms per character (default)\n- 'fast' = 20ms per character\n- 'very-fast' = 1ms per character\n- Or any numeric string representing milliseconds\n\nAdvanced features:\n- Dynamic speed adjustment during typing\n- Chunked text addition via addTextChunk() method\n- Instant text addition via addInstantTextChunk() method or instant parameter\n- Mixed instant and animated chunks in queue\n- Continues typing in background tabs\n- Performance optimized for large text\n- maxQueueSize to limit memory usage from excessive queuing\n- event handling for typing completion and content changes\n\nThe component includes accessibility features:\n- Screen readers announce the complete text, not character by character\n- Uses aria-live=\"polite\" for dynamic content updates\n- Sets aria-busy during typing animation",
+          "name": "Typewriter",
+          "cssParts": [
+            {
+              "description": "Container for the text element",
+              "name": "container"
+            },
+            {
+              "description": "The text element (forwarded to mdc-text)",
+              "name": "text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for text content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "TextType"
+              },
+              "privacy": "public",
+              "description": "Specifies the text style to be applied to the internal text component.\nUses the same types as the Text component.",
+              "default": "body-large-regular",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tagname",
+              "type": {
+                "text": "TagName | undefined"
+              },
+              "privacy": "public",
+              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the internal text element.\n\nAcceptable values include all valid tag names from the Text component.",
+              "attribute": "tagname",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "speed",
+              "type": {
+                "text": "TypewriterSpeed"
+              },
+              "privacy": "public",
+              "description": "Speed of the typewriter effect in milliseconds per character.\nCan be a string preset or a numeric string in milliseconds.\n- 'very-slow' = 240ms per character\n- 'slow' = 120ms per character\n- 'normal' = 60ms per character (default)\n- 'fast' = 20ms per character\n- 'very-fast' = 1ms per character\n- Or any numeric string representing milliseconds (e.g., '100')",
+              "default": "'normal' (60ms per character)",
+              "attribute": "speed",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "maxQueueSize",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "public",
+              "description": "Maximum number of text chunks that can be queued before oldest chunks are dropped.\nSet to prevent memory accumulation from excessive queuing.",
+              "default": "Number.MAX_SAFE_INTEGER (effectively unlimited)",
+              "attribute": "max-queue-size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "createTimeout",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "callback",
+                  "type": {
+                    "text": "() => void"
+                  }
+                },
+                {
+                  "name": "delay",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Helper to create tracked setTimeout that will be cleaned up on disconnect"
+            },
+            {
+              "kind": "method",
+              "name": "clearAllTimeouts",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Clear all pending timeouts"
+            },
+            {
+              "kind": "method",
+              "name": "clearQueue",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Clears the text chunk queue and stops processing\nUseful for resetting the component state"
+            },
+            {
+              "kind": "method",
+              "name": "addTextChunk",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text to add"
+                },
+                {
+                  "name": "speed",
+                  "optional": true,
+                  "type": {
+                    "text": "TypewriterSpeed"
+                  },
+                  "description": "Optional speed override for this chunk"
+                },
+                {
+                  "name": "instant",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "If true, text appears instantly without animation"
+                }
+              ],
+              "description": "Adds a chunk of text to be typed out, optionally with a different speed"
+            },
+            {
+              "kind": "method",
+              "name": "addInstantTextChunk",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text to add instantly"
+                }
+              ],
+              "description": "Adds a chunk of text instantly without typing animation"
+            },
+            {
+              "kind": "method",
+              "name": "processChunkQueue",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Processes all chunks in the queue"
+            },
+            {
+              "kind": "method",
+              "name": "processNextChunk",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Processes the next chunk in the queue"
+            },
+            {
+              "kind": "method",
+              "name": "getTypingDelayMs",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "description": "Gets the typing delay in milliseconds per character"
+            },
+            {
+              "kind": "method",
+              "name": "captureAndProcessContent",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Captures slot content and starts typewriter animation"
+            },
+            {
+              "kind": "method",
+              "name": "startTypingAnimation",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "onComplete",
+                  "optional": true,
+                  "type": {
+                    "text": "() => void"
+                  }
+                }
+              ],
+              "description": "Starts the typewriter animation"
+            },
+            {
+              "kind": "method",
+              "name": "clearTypingAnimation",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Clears the typing animation timeout"
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handler for slotchange event"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              }
+            },
+            {
+              "description": "(React: onTypingComplete) Fired when the typewriter finishes typing all content. Detail: \\{ finalContent: string \\}",
+              "name": "typing-complete",
+              "reactName": "onTypingComplete"
+            },
+            {
+              "description": "(React: onChange) Fired when the content of the typewriter changes. Detail: \\{ content: string, isTyping: boolean \\}",
+              "name": "change",
+              "reactName": "onChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "TextType"
+              },
+              "description": "Specifies the text style to be applied to the internal text component.\nUses the same types as the Text component.",
+              "default": "body-large-regular",
+              "fieldName": "type"
+            },
+            {
+              "name": "tagname",
+              "type": {
+                "text": "TagName | undefined"
+              },
+              "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the internal text element.\n\nAcceptable values include all valid tag names from the Text component.",
+              "fieldName": "tagname"
+            },
+            {
+              "name": "speed",
+              "type": {
+                "text": "TypewriterSpeed"
+              },
+              "description": "Speed of the typewriter effect in milliseconds per character.\nCan be a string preset or a numeric string in milliseconds.\n- 'very-slow' = 240ms per character\n- 'slow' = 120ms per character\n- 'normal' = 60ms per character (default)\n- 'fast' = 20ms per character\n- 'very-fast' = 1ms per character\n- Or any numeric string representing milliseconds (e.g., '100')",
+              "default": "'normal' (60ms per character)",
+              "fieldName": "speed"
+            },
+            {
+              "name": "max-queue-size",
+              "type": {
+                "text": "number"
+              },
+              "description": "Maximum number of text chunks that can be queued before oldest chunks are dropped.\nSet to prevent memory accumulation from excessive queuing.",
+              "default": "Number.MAX_SAFE_INTEGER (effectively unlimited)",
+              "fieldName": "maxQueueSize"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-typewriter",
+          "jsDoc": "/**\n * Typewriter component that creates a typewriter effect on text content.\n * It uses the Text component internally, adding a progressive typing effect.\n *\n * The `type` attribute allows changing the text style (passed to the internal Text component).\n * The `tagname` attribute allows changing the tag name of the text element (passed to the internal Text component).\n * The default tag name is `p`.\n *\n * The `speed` attribute controls typing speed in milliseconds per character:\n * - 'very-slow' = 240ms per character\n * - 'slow' = 120ms per character\n * - 'normal' = 60ms per character (default)\n * - 'fast' = 20ms per character\n * - 'very-fast' = 1ms per character\n * - Or any numeric string representing milliseconds\n *\n * Advanced features:\n * - Dynamic speed adjustment during typing\n * - Chunked text addition via addTextChunk() method\n * - Instant text addition via addInstantTextChunk() method or instant parameter\n * - Mixed instant and animated chunks in queue\n * - Continues typing in background tabs\n * - Performance optimized for large text\n * - maxQueueSize to limit memory usage from excessive queuing\n * - event handling for typing completion and content changes\n *\n * The component includes accessibility features:\n * - Screen readers announce the complete text, not character by character\n * - Uses aria-live=\"polite\" for dynamic content updates\n * - Sets aria-busy during typing animation\n *\n * @dependency mdc-text\n *\n * @tagname mdc-typewriter\n * @slot - Default slot for text content\n *\n * @csspart container - Container for the text element\n * @csspart text - The text element (forwarded to mdc-text)\n *\n * @event typing-complete - (React: onTypingComplete) Fired when the typewriter finishes typing all content.\n *   Detail: \\{ finalContent: string \\}\n * @event change - (React: onChange) Fired when the content of the typewriter changes.\n *   Detail: \\{ content: string, isTyping: boolean \\}\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Typewriter",
+            "module": "components/typewriter/typewriter.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/virtualizedlist/virtualizedlist.component.js",