@momentum-design/components 0.120.33 → 0.120.35

package/dist/custom-elements.json

@@ -477,6 +477,157 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/accordiongroup/accordiongroup.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
+          "name": "AccordionGroup",
+          "cssProperties": [
+            {
+              "description": "The border color of the entire accordiongroup",
+              "name": "--mdc-accordiongroup-border-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "allowMultiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "attribute": "allow-multiple",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleAccordionExpanded",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "The event object from the 'shown' event."
+                }
+              ],
+              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
+            },
+            {
+              "kind": "method",
+              "name": "setChildrenAccordionAttributes",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "attributeName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the attribute to set."
+                },
+                {
+                  "name": "attributeValue",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The value to set the attribute to."
+                }
+              ],
+              "description": "Sets the given attribute on all child accordion or accordionbutton components."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "The size of the accordion item.",
+              "default": "'small'",
+              "fieldName": "size"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "Variant"
+              },
+              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
+              "default": "'stacked'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "allow-multiple",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, multiple accordion items can be visible at the same time.",
+              "fieldName": "allowMultiple"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-accordiongroup",
+          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "AccordionGroup",
+            "module": "components/accordiongroup/accordiongroup.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/accordionbutton/accordionbutton.component.js",
@@ -819,258 +970,107 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/accordiongroup/accordiongroup.component.js",
+      "path": "components/alertchip/alertchip.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\nEach heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\nAccordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n\n- Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n\nThere are three types of variants:\n- Stacked - Each accordion will have a gap of 1.5rem (24px).\n- Borderless - Each accordion will not have any border and the group will also not have any border.\n- Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n\nThere are two types of sizes:\n- Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n- Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n\nThe variant and size will be applied to all accordions inside this accordion group.\nTo show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n\nIf you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n\nIf the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.",
-          "name": "AccordionGroup",
+          "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
+          "name": "AlertChip",
           "cssProperties": [
             {
-              "description": "The border color of the entire accordiongroup",
-              "name": "--mdc-accordiongroup-border-color"
+              "description": "The color of the label text",
+              "name": "--mdc-chip-color"
+            },
+            {
+              "description": "The color of the icon",
+              "name": "--mdc-chip-icon-color"
+            },
+            {
+              "description": "The border color of the alertchip",
+              "name": "--mdc-chip-border-color"
+            },
+            {
+              "description": "The background color of the alertchip",
+              "name": "--mdc-chip-background-color"
+            },
+            {
+              "description": "Height for button size",
+              "name": "--mdc-button-height",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "Background color of the button",
+              "name": "--mdc-button-background",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "Borer color of the button",
+              "name": "--mdc-button-border-color",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "description": "Text color of the button",
+              "name": "--mdc-button-text-color",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
-          "slots": [
+          "cssParts": [
             {
-              "description": "The default slot can contain the `accordion` or `accordionbutton` components.",
-              "name": "default"
+              "description": "The alert icon",
+              "name": "icon"
+            },
+            {
+              "description": "The text label of the alertchip",
+              "name": "label"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "size",
+              "name": "variant",
               "type": {
-                "text": "Size"
+                "text": "VariantType"
               },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "attribute": "size",
-              "reflects": true
+              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
+              "default": "neutral",
+              "attribute": "variant"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "label",
               "type": {
-                "text": "Variant"
+                "text": "string"
               },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "attribute": "variant",
-              "reflects": true
+              "default": "''",
+              "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "allowMultiple",
+              "name": "autoFocusOnMount",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "attribute": "allow-multiple",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleAccordionExpanded",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  },
-                  "description": "The event object from the 'shown' event."
-                }
-              ],
-              "description": "Handles the 'shown' event for accordion items.\nIf `allowMultiple` is false, ensures that only one accordion item\nremains expanded by collapsing all other expanded items when a new item is expanded."
-            },
-            {
-              "kind": "method",
-              "name": "setChildrenAccordionAttributes",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "attributeName",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The name of the attribute to set."
-                },
-                {
-                  "name": "attributeValue",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The value to set the attribute to."
-                }
-              ],
-              "description": "Sets the given attribute on all child accordion or accordionbutton components."
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "The size of the accordion item.",
-              "default": "'small'",
-              "fieldName": "size"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "Variant"
-              },
-              "description": "The variant of the accordion item. Based on the variant, the styling of the accordion gets changed.",
-              "default": "'stacked'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "allow-multiple",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "If true, multiple accordion items can be visible at the same time.",
-              "fieldName": "allowMultiple"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-accordiongroup",
-          "jsDoc": "/**\n * An accordion group is a vertically stacked set of interactive headings that each contain a header and body content.\n * Each heading of the accordion acts as a control that enable users to expand or hide their associated body sections of content.\n * Accordions are commonly used to reduce the need to scroll when presenting multiple sections of content on a single page.\n *\n * - Default Slot: The accordion group component only accepts, `accordion` and `accordionbutton` components as the children, rest are ignored.\n *\n * There are three types of variants:\n * - Stacked - Each accordion will have a gap of 1.5rem (24px).\n * - Borderless - Each accordion will not have any border and the group will also not have any border.\n * - Contained - Each accordion will have no gap in between them and the border of the entire accordiongroup will be continuous.\n *\n * There are two types of sizes:\n * - Small: Small size has a padding of 1rem (16px) for both heading and body sections.\n * - Large: Large size has a padding of 1.5rem (24px) for both heading and body sections.\n *\n * The variant and size will be applied to all accordions inside this accordion group.\n * To show/expand more than one accordion at any given time, then set `allow-multiple` to `true`. By default, it's `false`.\n *\n * If you don't need any controls on your accordion heading, then it's advised to use `accordionbutton` component.\n *\n * If the first accordion of the accordion group is expanded by default, then the screen reader might loose focus when toggling the visibilty of the first accordion.\n *\n * @tagname mdc-accordiongroup\n *\n * @slot default - The default slot can contain the `accordion` or `accordionbutton` components.\n *\n * @cssproperty --mdc-accordiongroup-border-color - The border color of the entire accordiongroup\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "AccordionGroup",
-            "module": "components/accordiongroup/accordiongroup.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/alertchip/alertchip.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
-          "name": "AlertChip",
-          "cssProperties": [
-            {
-              "description": "The color of the label text",
-              "name": "--mdc-chip-color"
-            },
-            {
-              "description": "The color of the icon",
-              "name": "--mdc-chip-icon-color"
-            },
-            {
-              "description": "The border color of the alertchip",
-              "name": "--mdc-chip-border-color"
-            },
-            {
-              "description": "The background color of the alertchip",
-              "name": "--mdc-chip-background-color"
-            },
-            {
-              "description": "Height for button size",
-              "name": "--mdc-button-height",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "Background color of the button",
-              "name": "--mdc-button-background",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "Borer color of the button",
-              "name": "--mdc-button-border-color",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "Text color of the button",
-              "name": "--mdc-button-text-color",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The alert icon",
-              "name": "icon"
-            },
-            {
-              "description": "The text label of the alertchip",
-              "name": "label"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "VariantType"
-              },
-              "description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
-              "default": "neutral",
-              "attribute": "variant"
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "autoFocusOnMount",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "attribute": "auto-focus-on-mount",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "utils/mixins/AutoFocusOnMountMixin.js"
-              }
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "attribute": "auto-focus-on-mount",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "AutoFocusOnMountMixin",
+                "module": "utils/mixins/AutoFocusOnMountMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -7214,48 +7214,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/cardbutton/cardbutton.component.js",
+      "path": "components/card/card.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "cardbutton component looks like a card and behaves as a button component.\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\nMake sure to pass only non-interactable elements within the slots.",
-          "name": "CardButton",
+          "description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n   - Icon\n   - Title\n   - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
+          "name": "Card",
           "cssProperties": [
             {
               "description": "The width of the card",
               "name": "--mdc-card-width"
-            },
-            {
-              "description": "Height for button size",
-              "name": "--mdc-button-height",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "Background color of the button",
-              "name": "--mdc-button-background",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "Borer color of the button",
-              "name": "--mdc-button-border-color",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "Text color of the button",
-              "name": "--mdc-button-text-color",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
             }
           ],
           "cssParts": [
@@ -7320,6 +7288,14 @@
             {
               "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
               "name": "footer-button-primary"
+            },
+            {
+              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-secondary"
+            },
+            {
+              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
+              "name": "footer"
             }
           ],
           "members": [
@@ -7514,928 +7490,815 @@
               }
             },
             {
-              "kind": "field",
-              "name": "autoFocusOnMount",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "renderFooter",
+              "privacy": "protected",
+              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "attribute": "auto-focus-on-mount",
-              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "FooterMixin",
+                "module": "utils/mixins/FooterMixin.js"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "CardComponentMixin",
+              "module": "/src/utils/mixins/CardComponentMixin"
             },
             {
-              "kind": "field",
-              "name": "tabIndex",
+              "name": "FooterMixin",
+              "module": "/src/utils/mixins/FooterMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-card",
+          "jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n *    - Icon\n *    - Title\n *    - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n */",
+          "customElement": true,
+          "attributes": [
+            {
+              "name": "card-title",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
+              "default": "''",
+              "description": "The title of the card - part of header section",
+              "fieldName": "cardTitle",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "subtitle",
               "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",
-              "reflects": true,
+              "default": "''",
+              "description": "The subtitle of the card - part of header section",
+              "fieldName": "subtitle",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "active",
+              "name": "image-src",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "attribute": "active",
-              "reflects": true,
+              "default": "''",
+              "description": "The image source URL to render on the card",
+              "fieldName": "imageSrc",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "softDisabled",
+              "name": "image-alt",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
-              "reflects": true,
+              "default": "''",
+              "description": "The image alt for accessibility support",
+              "fieldName": "imageAlt",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "size",
+              "name": "variant",
               "type": {
-                "text": "ButtonSize"
+                "text": "CardVariant"
               },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true,
+              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "default": "'border'",
+              "fieldName": "variant",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "role",
+              "name": "orientation",
               "type": {
-                "text": "RoleType"
+                "text": "CardOrientation"
               },
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "attribute": "role",
-              "reflects": true,
+              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "default": "'vertical'",
+              "fieldName": "orientation",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "ariaStateKey",
+              "name": "title-tag-name",
               "type": {
-                "text": "string | undefined"
+                "text": "TagNameType"
               },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "attribute": "ariaStateKey",
-              "reflects": true,
+              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "fieldName": "titleTagName",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "type",
+              "name": "subtitle-tag-name",
               "type": {
-                "text": "ButtonType"
+                "text": "TagNameType"
               },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "attribute": "type",
-              "reflects": true,
+              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "fieldName": "subtitleTagName",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "name",
+              "name": "icon-name",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
-              "attribute": "name",
-              "reflects": true,
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Card",
+            "module": "components/card/card.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/cardbutton/cardbutton.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "cardbutton component looks like a card and behaves as a button component.\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\nMake sure to pass only non-interactable elements within the slots.",
+          "name": "CardButton",
+          "cssProperties": [
+            {
+              "description": "The width of the card",
+              "name": "--mdc-card-width"
+            },
+            {
+              "description": "Height for button size",
+              "name": "--mdc-button-height",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
-              "attribute": "value",
-              "reflects": true,
+              "description": "Background color of the button",
+              "name": "--mdc-button-background",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
+              "description": "Borer color of the button",
+              "name": "--mdc-button-border-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setActive",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element"
-                },
-                {
-                  "name": "active",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state of the element"
-                }
-              ],
-              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
+              "description": "Text color of the button",
+              "name": "--mdc-button-text-color",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The header part of the card",
+              "name": "header"
             },
             {
-              "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "softDisabled",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
-                }
-              ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "The icon part of the card header",
+              "name": "icon"
             },
             {
-              "kind": "method",
-              "name": "setDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The disabled state."
-                }
-              ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "The body part of the card",
+              "name": "body"
             },
             {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "The image part of the card",
+              "name": "image"
             },
             {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "The footer part of the card",
+              "name": "footer"
             },
             {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "The link part of the card footer",
+              "name": "footer-link"
             },
             {
-              "kind": "method",
-              "name": "handleKeyUp",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "The primary button part of the card footer",
+              "name": "footer-button-primary"
+            },
+            {
+              "description": "The secondary button part of the card footer",
+              "name": "footer-button-secondary"
+            },
+            {
+              "description": "The icon button part of the card header",
+              "name": "icon-button"
+            },
+            {
+              "description": "The text part of the card",
+              "name": "text"
             }
           ],
-          "events": [
+          "slots": [
             {
-              "description": "(React: onClick) Event that gets dispatched when the card is clicked.",
-              "name": "click",
-              "reactName": "onClick",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "This slot is for passing the content before the body",
+              "name": "before-body"
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It fires the click event when enter key is used.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "This slot is for passing the text content for the card",
+              "name": "body"
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It fires the click event when space key is used.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "This slot is for passing the content after the body",
+              "name": "after-body"
             },
             {
-              "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ],
-          "mixins": [
+              "description": "This slot is for passing `mdc-link` component within the footer section.",
+              "name": "footer-link"
+            },
             {
-              "name": "CardComponentMixin",
-              "module": "/src/utils/mixins/CardComponentMixin"
+              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-primary"
             }
           ],
-          "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
-          },
-          "tagName": "mdc-cardbutton",
-          "jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
-          "customElement": true,
-          "attributes": [
+          "members": [
             {
-              "name": "card-title",
+              "kind": "method",
+              "name": "renderHeader",
+              "privacy": "protected",
+              "description": "Renders the header of the card if title is provided",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "cardTitle",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The title of the card - part of header section",
-              "fieldName": "cardTitle",
+              "attribute": "card-title",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
+              "kind": "field",
               "name": "subtitle",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The subtitle of the card - part of header section",
-              "fieldName": "subtitle",
+              "attribute": "subtitle",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
-              "name": "image-src",
+              "kind": "field",
+              "name": "imageSrc",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The image source URL to render on the card",
-              "fieldName": "imageSrc",
+              "attribute": "image-src",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
-              "name": "image-alt",
+              "kind": "field",
+              "name": "imageAlt",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The image alt for accessibility support",
-              "fieldName": "imageAlt",
+              "attribute": "image-alt",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
+              "kind": "field",
               "name": "variant",
               "type": {
                 "text": "CardVariant"
               },
               "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
               "default": "'border'",
-              "fieldName": "variant",
+              "attribute": "variant",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
+              "kind": "field",
               "name": "orientation",
               "type": {
                 "text": "CardOrientation"
               },
               "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
               "default": "'vertical'",
-              "fieldName": "orientation",
+              "attribute": "orientation",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
-              "name": "title-tag-name",
+              "kind": "field",
+              "name": "titleTagName",
               "type": {
                 "text": "TagNameType"
               },
               "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
               "default": "'span'",
-              "fieldName": "titleTagName",
+              "attribute": "title-tag-name",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
-              "name": "subtitle-tag-name",
+              "kind": "field",
+              "name": "subtitleTagName",
               "type": {
                 "text": "TagNameType"
               },
               "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
               "default": "'span'",
-              "fieldName": "subtitleTagName",
+              "attribute": "subtitle-tag-name",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
-              "name": "icon-name",
+              "kind": "field",
+              "name": "iconName",
               "type": {
                 "text": "IconNames | undefined"
               },
               "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
+              "attribute": "icon-name",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
-              "name": "auto-focus-on-mount",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "fieldName": "autoFocusOnMount",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              "kind": "method",
+              "name": "renderImage",
+              "privacy": "protected",
+              "description": "Renders the image on the card if image source is provided",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderIcon",
+              "privacy": "protected",
+              "description": "Renders the icon on the card if icon name is provided",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderTitle",
+              "privacy": "protected",
+              "description": "Renders the title and subtitle on the card",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "autoFocusOnMount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "attribute": "auto-focus-on-mount",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "tabIndex",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
+              "attribute": "tabIndex",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "default": "undefined",
-              "fieldName": "disabled",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "active",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
               "default": "undefined",
-              "fieldName": "active",
+              "attribute": "active",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "soft-disabled",
+              "kind": "field",
+              "name": "softDisabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
               "default": "undefined",
-              "fieldName": "softDisabled",
+              "attribute": "soft-disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "size",
               "type": {
                 "text": "ButtonSize"
               },
               "description": "Simplebutton size is a super set of all the sizes supported by children components.",
               "default": "32",
-              "fieldName": "size",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "role",
               "type": {
                 "text": "RoleType"
               },
               "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
               "default": "button",
-              "fieldName": "role",
+              "attribute": "role",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "ariaStateKey",
               "type": {
                 "text": "string | undefined"
               },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
               "default": "'aria-pressed' (when)",
-              "fieldName": "ariaStateKey",
+              "attribute": "ariaStateKey",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "type",
               "type": {
                 "text": "ButtonType"
               },
               "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
               "default": "button",
-              "fieldName": "type",
+              "attribute": "type",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "name",
               "type": {
                 "text": "string | undefined"
               },
               "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
-              "fieldName": "name",
+              "attribute": "name",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "value",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
-              "fieldName": "value",
+              "attribute": "value",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "CardButton",
-            "module": "components/cardbutton/cardbutton.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/card/card.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n   - Icon\n   - Title\n   - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
-          "name": "Card",
-          "cssProperties": [
-            {
-              "description": "The width of the card",
-              "name": "--mdc-card-width"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The header part of the card",
-              "name": "header"
-            },
-            {
-              "description": "The icon part of the card header",
-              "name": "icon"
-            },
-            {
-              "description": "The body part of the card",
-              "name": "body"
-            },
-            {
-              "description": "The image part of the card",
-              "name": "image"
-            },
-            {
-              "description": "The footer part of the card",
-              "name": "footer"
-            },
-            {
-              "description": "The link part of the card footer",
-              "name": "footer-link"
-            },
-            {
-              "description": "The primary button part of the card footer",
-              "name": "footer-button-primary"
-            },
-            {
-              "description": "The secondary button part of the card footer",
-              "name": "footer-button-secondary"
-            },
-            {
-              "description": "The icon button part of the card header",
-              "name": "icon-button"
-            },
-            {
-              "description": "The text part of the card",
-              "name": "text"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This slot is for passing the content before the body",
-              "name": "before-body"
-            },
-            {
-              "description": "This slot is for passing the text content for the card",
-              "name": "body"
             },
-            {
-              "description": "This slot is for passing the content after the body",
-              "name": "after-body"
-            },
-            {
-              "description": "This slot is for passing `mdc-link` component within the footer section.",
-              "name": "footer-link"
-            },
-            {
-              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-primary"
-            },
-            {
-              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-secondary"
-            },
-            {
-              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
-              "name": "footer"
-            }
-          ],
-          "members": [
             {
               "kind": "method",
-              "name": "renderHeader",
+              "name": "executeAction",
               "privacy": "protected",
-              "description": "Renders the header of the card if title is provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "field",
-              "name": "cardTitle",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The title of the card - part of header section",
-              "attribute": "card-title",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "subtitle",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The subtitle of the card - part of header section",
-              "attribute": "subtitle",
-              "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "imageSrc",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image source URL to render on the card",
-              "attribute": "image-src",
-              "reflects": true,
+              "kind": "method",
+              "name": "setActive",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element"
+                },
+                {
+                  "name": "active",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state of the element"
+                }
+              ],
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "imageAlt",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image alt for accessibility support",
-              "attribute": "image-alt",
-              "reflects": true,
+              "kind": "method",
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
+                }
+              ],
+              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "CardVariant"
-              },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
-              "default": "'border'",
-              "attribute": "variant",
-              "reflects": true,
+              "kind": "method",
+              "name": "setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state."
+                }
+              ],
+              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "CardOrientation"
-              },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
-              "default": "'vertical'",
-              "attribute": "orientation",
-              "reflects": true,
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "titleTagName",
-              "type": {
-                "text": "TagNameType"
-              },
-              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "attribute": "title-tag-name",
-              "reflects": true,
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "subtitleTagName",
-              "type": {
-                "text": "TagNameType"
-              },
-              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "attribute": "subtitle-tag-name",
-              "reflects": true,
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "reflects": true,
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "method",
-              "name": "renderImage",
-              "privacy": "protected",
-              "description": "Renders the image on the card if image source is provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "(React: onClick) Event that gets dispatched when the card is clicked.",
+              "name": "click",
+              "reactName": "onClick",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
-            {
-              "kind": "method",
-              "name": "renderIcon",
-              "privacy": "protected",
-              "description": "Renders the icon on the card if icon name is provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It fires the click event when enter key is used.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderTitle",
-              "privacy": "protected",
-              "description": "Renders the title and subtitle on the card",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It fires the click event when space key is used.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderFooter",
-              "privacy": "protected",
-              "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
               "inheritedFrom": {
-                "name": "FooterMixin",
-                "module": "utils/mixins/FooterMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             }
           ],
@@ -8443,18 +8306,14 @@
             {
               "name": "CardComponentMixin",
               "module": "/src/utils/mixins/CardComponentMixin"
-            },
-            {
-              "name": "FooterMixin",
-              "module": "/src/utils/mixins/FooterMixin"
             }
           ],
           "superclass": {
-            "name": "Component",
-            "module": "/src/models"
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.component"
           },
-          "tagName": "mdc-card",
-          "jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n *    - Icon\n *    - Title\n *    - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n */",
+          "tagName": "mdc-cardbutton",
+          "jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
           "customElement": true,
           "attributes": [
             {
@@ -8572,6 +8431,147 @@
                 "name": "CardComponentMixin",
                 "module": "src/utils/mixins/CardComponentMixin.ts"
               }
+            },
+            {
+              "name": "auto-focus-on-mount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "fieldName": "autoFocusOnMount",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "fieldName": "active",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "RoleType"
+              },
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "fieldName": "role",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "fieldName": "ariaStateKey",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "ButtonType"
+              },
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "fieldName": "type",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ]
         }
@@ -8581,8 +8581,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Card",
-            "module": "components/card/card.component.js"
+            "name": "CardButton",
+            "module": "components/cardbutton/cardbutton.component.js"
           }
         }
       ]
@@ -10284,6 +10284,21 @@
               "attribute": "autofocus",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "helpTextType",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text/validation. It can be 'default' or 'error'.",
+              "attribute": "help-text-type",
+              "reflects": true,
+              "default": "'default'",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
             {
               "kind": "method",
               "name": "setFormValue",
@@ -10525,20 +10540,6 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "helpTextType",
-              "type": {
-                "text": "ValidationType"
-              },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "attribute": "help-text-type",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "helpText",
@@ -10760,6 +10761,19 @@
               "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": "help-text-type",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text/validation. It can be 'default' or 'error'.",
+              "fieldName": "helpTextType",
+              "default": "'default'",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -10862,18 +10876,6 @@
                 "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
               }
             },
-            {
-              "name": "help-text-type",
-              "type": {
-                "text": "ValidationType"
-              },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
-            },
             {
               "name": "help-text",
               "type": {
@@ -20172,7 +20174,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n\n- It supports a leading icon along with label.\n- It supports an error state for validation.\n- It supports a close button to remove the chip.",
+          "description": "mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n\n- It supports a leading icon along with label.\n- It supports a prefix slot for avatars (takes precedence over icon-name).\n- It supports an error state for validation.\n- It supports a close button to remove the chip.",
           "name": "InputChip",
           "cssProperties": [
             {
@@ -20202,6 +20204,12 @@
               "name": "close-icon"
             }
           ],
+          "slots": [
+            {
+              "description": "A slot for prefix content such as avatars.",
+              "name": "prefix"
+            }
+          ],
           "members": [
             {
               "kind": "field",
@@ -20235,9 +20243,9 @@
             },
             {
               "kind": "method",
-              "name": "renderIcon",
+              "name": "renderPrefix",
               "privacy": "private",
-              "description": "Renders the icon element if available.",
+              "description": "Renders the prefix content, supporting both icons and slot content.",
               "return": {
                 "type": {
                   "text": ""
@@ -20364,7 +20372,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-inputchip",
-          "jsDoc": "/**\n * mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n *\n * - It supports a leading icon along with label.\n * - It supports an error state for validation.\n * - It supports a close button to remove the chip.\n *\n * @tagname mdc-inputchip\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.\n *\n * @csspart label - The label part of the chip.\n * @csspart icon - The icon part of the chip.\n * @csspart close-icon - The close icon part of the chip.\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
+          "jsDoc": "/**\n * mdc-inputchip component is an interactive chip that consumers can use to represent an input.\n *\n * - It supports a leading icon along with label.\n * - It supports a prefix slot for avatars (takes precedence over icon-name).\n * - It supports an error state for validation.\n * - It supports a close button to remove the chip.\n *\n * @tagname mdc-inputchip\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event remove - This event is dispatched when the close button is activated. It bubbles and is composed.\n *\n * @slot prefix - A slot for prefix content such as avatars.\n *\n * @csspart label - The label part of the chip.\n * @csspart icon - The icon part of the chip.\n * @csspart close-icon - The close icon part of the chip.\n *\n * @cssproperty --mdc-chip-color - The color of the chip.\n * @cssproperty --mdc-chip-border-color - The border color of the chip.\n * @cssproperty --mdc-chip-background-color - The background color of the chip.\n *\n */",
           "customElement": true
         }
       ],