@momentum-design/components 0.106.5 → 0.106.6

package/dist/custom-elements.json

@@ -5295,100 +5295,287 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/card/card.component.js",
+      "path": "components/cardcheckbox/cardcheckbox.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",
+          "description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\nThis card would have events for selected and unselected (similar to checkbox)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
+          "name": "CardCheckbox",
           "cssProperties": [
             {
               "description": "The width of the card",
-              "name": "--mdc-card-width"
+              "name": "--mdc-card-width",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             }
           ],
           "cssParts": [
             {
               "description": "The header part of the card",
-              "name": "header"
+              "name": "header",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": "The icon part of the card header",
-              "name": "icon"
+              "name": "icon",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": "The body part of the card",
-              "name": "body"
+              "name": "body",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": "The image part of the card",
-              "name": "image"
+              "name": "image",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": "The footer part of the card",
-              "name": "footer"
+              "name": "footer",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": "The link part of the card footer",
-              "name": "footer-link"
+              "name": "footer-link",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": "The primary button part of the card footer",
-              "name": "footer-button-primary"
+              "name": "footer-button-primary",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": "The secondary button part of the card footer",
-              "name": "footer-button-secondary"
+              "name": "footer-button-secondary",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": "The icon button part of the card header",
-              "name": "icon-button"
+              "name": "icon-button",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": "The text part of the card",
-              "name": "text"
+              "name": "text",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The check part of the card",
+              "name": "check"
+            },
+            {
+              "description": "The check icon part of the card",
+              "name": "check-icon"
+            },
+            {
+              "description": "The check icon button part of the card",
+              "name": "check-icon-button"
             }
           ],
           "slots": [
             {
               "description": "This slot is for passing the content before the body",
-              "name": "before-body"
+              "name": "before-body",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": "This slot is for passing the text content for the card",
-              "name": "body"
+              "name": "body",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": "This slot is for passing the content after the body",
-              "name": "after-body"
+              "name": "after-body",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": "This slot is for passing `mdc-link` component within the footer section.",
-              "name": "footer-link"
+              "name": "footer-link",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-primary"
+              "name": "footer-button-primary",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-secondary"
+              "name": "footer-button-secondary",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             },
             {
               "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
-              "name": "footer"
+              "name": "footer",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The checked state of the card",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "selectionType",
+              "type": {
+                "text": "SelectionType"
+              },
+              "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
+              "default": "'check'",
+              "attribute": "selection-type",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "toggleChecked",
+              "privacy": "private",
+              "description": "Toggles the checked state"
+            },
+            {
+              "kind": "method",
+              "name": "toggleOnEnter",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event"
+                }
+              ],
+              "description": "Toggles the checked state when enter key is used"
+            },
+            {
+              "kind": "method",
+              "name": "toggleOnSpace",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event"
+                }
+              ],
+              "description": "Toggles the checked state when space key is used"
+            },
+            {
+              "kind": "method",
+              "name": "renderSelection",
+              "privacy": "private",
+              "description": "Renders the selection icon or checkbox based on the selection type",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "renderHeader",
               "privacy": "protected",
-              "description": "Renders the header of the card if title is provided",
+              "description": "Renders the header of the card",
               "return": {
                 "type": {
                   "text": ""
                 }
+              },
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "components/card/card.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",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
               }
             },
             {
@@ -5586,31 +5773,88 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "CardComponentMixin",
-              "module": "/src/utils/mixins/CardComponentMixin"
-            },
-            {
-              "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": [
+          "events": [
             {
-              "name": "card-title",
+              "name": "change",
               "type": {
-                "text": "string"
+                "text": "Event"
               },
-              "default": "''",
-              "description": "The title of the card - part of header section",
+              "description": "(React: onChange) Event that gets dispatched when the card's checked state changes.",
+              "reactName": "onChange"
+            },
+            {
+              "description": "(React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.",
+              "name": "click",
+              "reactName": "onClick"
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It toggles the checked state when enter key is used.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It toggles the checked state when space key is used.",
+              "name": "keyup",
+              "reactName": "onKeyUp"
+            },
+            {
+              "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The checked state of the card",
+              "fieldName": "checked"
+            },
+            {
+              "name": "selection-type",
+              "type": {
+                "text": "SelectionType"
+              },
+              "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
+              "default": "'check'",
+              "fieldName": "selectionType"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
+              }
+            },
+            {
+              "name": "card-title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The title of the card - part of header section",
               "fieldName": "cardTitle",
               "inheritedFrom": {
                 "name": "CardComponentMixin",
@@ -5720,7 +5964,24 @@
                 "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            },
+            {
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Card",
+            "module": "/src/components/card/card.component"
+          },
+          "tagName": "mdc-cardcheckbox",
+          "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -5728,20 +5989,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Card",
-            "module": "components/card/card.component.js"
+            "name": "CardCheckbox",
+            "module": "components/cardcheckbox/cardcheckbox.component.js"
           }
         }
       ]
     },
     {
       "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",
@@ -5810,6 +6071,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": [
@@ -6004,622 +6273,153 @@
               }
             },
             {
-              "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,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "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",
-              "attribute": "type",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
-              "attribute": "name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
-              "attribute": "value",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "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": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyUp",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onClick) Event that gets dispatched when the card is clicked.",
-              "name": "click",
-              "reactName": "onClick",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It fires the click event when enter key is used.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It fires the click event when space key is used.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "CardComponentMixin",
-              "module": "/src/utils/mixins/CardComponentMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
-          },
-          "tagName": "mdc-cardbutton",
-          "jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "card-title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The title of the card - part of header section",
-              "fieldName": "cardTitle",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
-            },
-            {
-              "name": "subtitle",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The subtitle of the card - part of header section",
-              "fieldName": "subtitle",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
-            },
-            {
-              "name": "image-src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image source URL to render on the card",
-              "fieldName": "imageSrc",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
-            },
-            {
-              "name": "image-alt",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The image alt for accessibility support",
-              "fieldName": "imageAlt",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "CardVariant"
-              },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
-              "default": "'border'",
-              "fieldName": "variant",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
-            },
-            {
-              "name": "orientation",
-              "type": {
-                "text": "CardOrientation"
-              },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
-              "default": "'vertical'",
-              "fieldName": "orientation",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
-            },
-            {
-              "name": "title-tag-name",
-              "type": {
-                "text": "TagNameType"
-              },
-              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "fieldName": "titleTagName",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
-            },
-            {
-              "name": "subtitle-tag-name",
-              "type": {
-                "text": "TagNameType"
-              },
-              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "fieldName": "subtitleTagName",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
-            },
-            {
-              "name": "icon-name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
-              }
-            },
-            {
-              "name": "auto-focus-on-mount",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "fieldName": "autoFocusOnMount",
-              "inheritedFrom": {
-                "name": "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",
+              "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": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "name": "name",
+              "name": "subtitle-tag-name",
               "type": {
-                "text": "string | undefined"
+                "text": "TagNameType"
               },
-              "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",
+              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "fieldName": "subtitleTagName",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "name": "value",
+              "name": "icon-name",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | 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",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             }
           ]
@@ -6630,280 +6430,294 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CardButton",
-            "module": "components/cardbutton/cardbutton.component.js"
+            "name": "Card",
+            "module": "components/card/card.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/cardcheckbox/cardcheckbox.component.js",
+      "path": "components/cardbutton/cardbutton.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\nThis card would have events for selected and unselected (similar to checkbox)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
-          "name": "CardCheckbox",
+          "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",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "--mdc-card-width"
             }
           ],
           "cssParts": [
             {
               "description": "The header part of the card",
-              "name": "header",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "header"
             },
             {
               "description": "The icon part of the card header",
-              "name": "icon",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "icon"
             },
             {
               "description": "The body part of the card",
-              "name": "body",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "body"
             },
             {
               "description": "The image part of the card",
-              "name": "image",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "image"
             },
             {
               "description": "The footer part of the card",
-              "name": "footer",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "footer"
             },
             {
               "description": "The link part of the card footer",
-              "name": "footer-link",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "footer-link"
             },
             {
               "description": "The primary button part of the card footer",
-              "name": "footer-button-primary",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "footer-button-primary"
             },
             {
               "description": "The secondary button part of the card footer",
-              "name": "footer-button-secondary",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "footer-button-secondary"
             },
             {
               "description": "The icon button part of the card header",
-              "name": "icon-button",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "icon-button"
             },
             {
               "description": "The text part of the card",
-              "name": "text",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "text"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This slot is for passing the content before the body",
+              "name": "before-body"
             },
             {
-              "description": "The check part of the card",
-              "name": "check"
+              "description": "This slot is for passing the text content for the card",
+              "name": "body"
             },
             {
-              "description": "The check icon part of the card",
-              "name": "check-icon"
+              "description": "This slot is for passing the content after the body",
+              "name": "after-body"
             },
             {
-              "description": "The check icon button part of the card",
-              "name": "check-icon-button"
+              "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"
             }
           ],
-          "slots": [
+          "members": [
             {
-              "description": "This slot is for passing the content before the body",
-              "name": "before-body",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+              "kind": "method",
+              "name": "renderHeader",
+              "privacy": "protected",
+              "description": "Renders the header of the card if title is provided",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               }
             },
             {
-              "description": "This slot is for passing the text content for the card",
-              "name": "body",
+              "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": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
-              "description": "This slot is for passing the content after the body",
-              "name": "after-body",
+              "kind": "field",
+              "name": "subtitle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The subtitle of the card - part of header section",
+              "attribute": "subtitle",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
-              "description": "This slot is for passing `mdc-link` component within the footer section.",
-              "name": "footer-link",
+              "kind": "field",
+              "name": "imageSrc",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The image source URL to render on the card",
+              "attribute": "image-src",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
-              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-primary",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+              "kind": "field",
+              "name": "imageAlt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The image alt for accessibility support",
+              "attribute": "image-alt",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
-              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-secondary",
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "CardVariant"
+              },
+              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "default": "'border'",
+              "attribute": "variant",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
-              "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",
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "CardOrientation"
+              },
+              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "default": "'vertical'",
+              "attribute": "orientation",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
               }
-            }
-          ],
-          "members": [
+            },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "titleTagName",
               "type": {
-                "text": "boolean"
+                "text": "TagNameType"
               },
-              "default": "false",
-              "description": "The checked state of the card",
-              "attribute": "checked",
-              "reflects": true
+              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "attribute": "title-tag-name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "selectionType",
+              "name": "subtitleTagName",
               "type": {
-                "text": "SelectionType"
+                "text": "TagNameType"
               },
-              "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
-              "default": "'check'",
-              "attribute": "selection-type",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "toggleChecked",
-              "privacy": "private",
-              "description": "Toggles the checked state"
+              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "attribute": "subtitle-tag-name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
             },
             {
-              "kind": "method",
-              "name": "toggleOnEnter",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event"
-                }
-              ],
-              "description": "Toggles the checked state when enter key is used"
+              "kind": "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,
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "toggleOnSpace",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event"
+              "name": "renderImage",
+              "privacy": "protected",
+              "description": "Renders the image on the card if image source is provided",
+              "return": {
+                "type": {
+                  "text": ""
                 }
-              ],
-              "description": "Toggles the checked state when space key is used"
+              },
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "renderSelection",
-              "privacy": "private",
-              "description": "Renders the selection icon or checkbox based on the selection type",
+              "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": "renderHeader",
+              "name": "renderTitle",
               "privacy": "protected",
-              "description": "Renders the header of the card",
+              "description": "Renders the title and subtitle on the card",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "autoFocusOnMount",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
+              "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": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
@@ -6917,280 +6731,342 @@
               "attribute": "tabIndex",
               "reflects": true,
               "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "cardTitle",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The title of the card - part of header section",
-              "attribute": "card-title",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "subtitle",
+              "name": "active",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The subtitle of the card - part of header section",
-              "attribute": "subtitle",
+              "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,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "imageSrc",
+              "name": "softDisabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The image source URL to render on the card",
-              "attribute": "image-src",
+              "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,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "imageAlt",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "ButtonSize"
               },
-              "default": "''",
-              "description": "The image alt for accessibility support",
-              "attribute": "image-alt",
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "attribute": "size",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "role",
               "type": {
-                "text": "CardVariant"
+                "text": "RoleType"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
-              "default": "'border'",
-              "attribute": "variant",
+              "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,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "orientation",
+              "name": "ariaStateKey",
               "type": {
-                "text": "CardOrientation"
+                "text": "string | undefined"
               },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
-              "default": "'vertical'",
-              "attribute": "orientation",
+              "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,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "titleTagName",
+              "name": "type",
               "type": {
-                "text": "TagNameType"
+                "text": "ButtonType"
               },
-              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "attribute": "title-tag-name",
+              "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,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "subtitleTagName",
+              "name": "name",
               "type": {
-                "text": "TagNameType"
+                "text": "string | undefined"
               },
-              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "attribute": "subtitle-tag-name",
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "attribute": "name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "iconName",
+              "name": "value",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string | undefined"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderImage",
+              "name": "executeAction",
               "privacy": "protected",
-              "description": "Renders the image on the card if image source is provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderIcon",
+              "name": "setActive",
               "privacy": "protected",
-              "description": "Renders the icon on the card if icon name is provided",
-              "return": {
-                "type": {
-                  "text": ""
+              "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": "Card",
-                "module": "components/card/card.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "method",
-              "name": "renderTitle",
-              "privacy": "protected",
-              "description": "Renders the title and subtitle on the card",
-              "return": {
-                "type": {
-                  "text": ""
+              "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": "Card",
-                "module": "components/card/card.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "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": ""
+              "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": "Card",
-                "module": "components/card/card.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
-            }
-          ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "Event"
-              },
-              "description": "(React: onChange) Event that gets dispatched when the card's checked state changes.",
-              "reactName": "onChange"
             },
             {
-              "description": "(React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.",
-              "name": "click",
-              "reactName": "onClick"
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It toggles the checked state when enter key is used.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
+              "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": "(React: onKeyUp) This event is dispatched when a key is released on the card. It toggles the checked state when space key is used.",
-              "name": "keyup",
-              "reactName": "onKeyUp"
+              "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": "(React: onFocus) Event that gets dispatched when the card receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
+              "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"
+              }
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The checked state of the card",
-              "fieldName": "checked"
+              "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"
+              }
             },
             {
-              "name": "selection-type",
-              "type": {
-                "text": "SelectionType"
-              },
-              "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
-              "default": "'check'",
-              "fieldName": "selectionType"
+              "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"
+              }
             },
             {
-              "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",
+              "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": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "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",
+              "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
               "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
-            },
+            }
+          ],
+          "mixins": [
+            {
+              "name": "CardComponentMixin",
+              "module": "/src/utils/mixins/CardComponentMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.component"
+          },
+          "tagName": "mdc-cardbutton",
+          "jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
+          "customElement": true,
+          "attributes": [
             {
               "name": "card-title",
               "type": {
@@ -7200,8 +7076,8 @@
               "description": "The title of the card - part of header section",
               "fieldName": "cardTitle",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
@@ -7213,8 +7089,8 @@
               "description": "The subtitle of the card - part of header section",
               "fieldName": "subtitle",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
@@ -7226,8 +7102,8 @@
               "description": "The image source URL to render on the card",
               "fieldName": "imageSrc",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
@@ -7239,8 +7115,8 @@
               "description": "The image alt for accessibility support",
               "fieldName": "imageAlt",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
@@ -7252,8 +7128,8 @@
               "default": "'border'",
               "fieldName": "variant",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
@@ -7265,8 +7141,8 @@
               "default": "'vertical'",
               "fieldName": "orientation",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
@@ -7278,8 +7154,8 @@
               "default": "'span'",
               "fieldName": "titleTagName",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
@@ -7291,8 +7167,8 @@
               "default": "'span'",
               "fieldName": "subtitleTagName",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
@@ -7303,28 +7179,152 @@
               "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
               "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
-            }
-          ],
-          "mixins": [
+            },
             {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
+              "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": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
+              "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"
+              }
             }
-          ],
-          "superclass": {
-            "name": "Card",
-            "module": "/src/components/card/card.component"
-          },
-          "tagName": "mdc-cardcheckbox",
-          "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -7332,8 +7332,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CardCheckbox",
-            "module": "components/cardcheckbox/cardcheckbox.component.js"
+            "name": "CardButton",
+            "module": "components/cardbutton/cardbutton.component.js"
           }
         }
       ]
@@ -11342,65 +11342,24 @@
               }
             },
             {
-              "name": "keep-connected-tooltip-closed",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "If a tooltip is connected to the same trigger element,\nthis property will keep the connected tooltip closed if this popover is open.\nThis is useful when you want to show a popover with a tooltip\nbut you don't want the tooltip to be shown at the same time.",
-              "fieldName": "keepConnectedTooltipClosed",
-              "inheritedFrom": {
-                "name": "Popover",
-                "module": "src/components/popover/popover.component.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "Popover",
-            "module": "/src/components/popover/popover.component"
-          },
-          "tagName": "mdc-coachmark",
-          "jsDoc": "/**\n * Coachmark component based on top of the popover component,\n * with the default value of certain properties changed.\n *\n * @dependency mdc-popover\n *\n * @tagname mdc-coachmark\n *\n * @event shown - (React: onShown) This event is dispatched when the coachmark is shown\n * @event hidden - (React: onHidden) This event is dispatched when the coachmark is hidden\n * @event created - (React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the coachmark is\n * destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n *\n * @slot - Default slot for modal container\n *\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Coachmark",
-            "module": "components/coachmark/coachmark.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/combobox/combobox.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "combobox component, which ...",
-          "name": "Combobox",
-          "cssProperties": [
-            {
-              "description": "Description of the CSS custom property",
-              "name": "--custom-property-name"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot",
-              "name": "default"
+              "name": "keep-connected-tooltip-closed",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "If a tooltip is connected to the same trigger element,\nthis property will keep the connected tooltip closed if this popover is open.\nThis is useful when you want to show a popover with a tooltip\nbut you don't want the tooltip to be shown at the same time.",
+              "fieldName": "keepConnectedTooltipClosed",
+              "inheritedFrom": {
+                "name": "Popover",
+                "module": "src/components/popover/popover.component.ts"
+              }
             }
           ],
-          "members": [],
           "superclass": {
-            "name": "Component",
-            "module": "/src/models"
+            "name": "Popover",
+            "module": "/src/components/popover/popover.component"
           },
-          "tagName": "mdc-combobox",
-          "jsDoc": "/**\n * combobox component, which ...\n *\n * @tagname mdc-combobox\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --custom-property-name - Description of the CSS custom property\n */",
+          "tagName": "mdc-coachmark",
+          "jsDoc": "/**\n * Coachmark component based on top of the popover component,\n * with the default value of certain properties changed.\n *\n * @dependency mdc-popover\n *\n * @tagname mdc-coachmark\n *\n * @event shown - (React: onShown) This event is dispatched when the coachmark is shown\n * @event hidden - (React: onHidden) This event is dispatched when the coachmark is hidden\n * @event created - (React: onCreated) This event is dispatched when the coachmark is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the coachmark is\n * destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n *\n * @slot - Default slot for modal container\n *\n */",
           "customElement": true
         }
       ],
@@ -11409,8 +11368,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Combobox",
-            "module": "components/combobox/combobox.component.js"
+            "name": "Coachmark",
+            "module": "components/coachmark/coachmark.component.js"
           }
         }
       ]
@@ -13743,11 +13702,240 @@
               },
               "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
               "default": "'top'",
-              "fieldName": "toggletipPlacement",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
-              }
+              "fieldName": "toggletipPlacement",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "info-icon-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "fieldName": "infoIconAriaLabel",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FormfieldGroup",
+            "module": "components/formfieldgroup/formfieldgroup.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/formfieldwrapper/formfieldwrapper.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
+          "name": "FormfieldWrapper",
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "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
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "toggletipText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "attribute": "toggletip-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "toggletipPlacement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "attribute": "toggletip-placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "infoIconAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "attribute": "info-icon-aria-label",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "renderLabelElement",
+              "privacy": "protected",
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpTextIcon",
+              "privacy": "protected",
+              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpText",
+              "privacy": "protected",
+              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
+              "fieldName": "required"
+            },
+            {
+              "name": "help-text-type",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType"
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "toggletip-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "fieldName": "toggletipText"
+            },
+            {
+              "name": "toggletip-placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "fieldName": "toggletipPlacement"
             },
             {
               "name": "info-icon-aria-label",
@@ -13755,13 +13943,35 @@
                 "text": "string | undefined"
               },
               "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "fieldName": "infoIconAriaLabel",
+              "fieldName": "infoIconAriaLabel"
+            },
+            {
+              "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": "FormfieldWrapper",
-                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             }
-          ]
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-formfieldwrapper",
+          "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n *  that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n *\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -13769,8 +13979,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FormfieldGroup",
-            "module": "components/formfieldgroup/formfieldgroup.component.js"
+            "name": "FormfieldWrapper",
+            "module": "components/formfieldwrapper/formfieldwrapper.component.js"
           }
         }
       ]
@@ -13943,323 +14153,72 @@
                     "text": "unknown"
                   }
                 }
-              ],
-              "description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
-            },
-            {
-              "kind": "method",
-              "name": "updateSize",
-              "privacy": "private",
-              "description": "Updates the size by setting the width and height"
-            },
-            {
-              "kind": "field",
-              "name": "computedIconSize",
-              "privacy": "private",
-              "readonly": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename)",
-              "fieldName": "name"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "Size of the icon (works in combination with length unit)",
-              "fieldName": "size"
-            },
-            {
-              "name": "length-unit",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
-              "fieldName": "lengthUnit"
-            },
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            },
-            {
-              "name": "aria-labelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "fieldName": "ariaLabelledBy"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-icon",
-          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n *\n * @csspart icon - The svg inside the icon element.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Icon",
-            "module": "components/icon/icon.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/formfieldwrapper/formfieldwrapper.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
-          "name": "FormfieldWrapper",
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "attribute": "required",
-              "reflects": true
-            },
-            {
-              "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
-            },
-            {
-              "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The help text that is displayed below the input field.",
-              "attribute": "help-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "toggletipText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "attribute": "toggletip-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "toggletipPlacement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "attribute": "toggletip-placement",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "infoIconAriaLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "attribute": "info-icon-aria-label",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "renderLabelElement",
-              "privacy": "protected",
-              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderHelpTextIcon",
-              "privacy": "protected",
-              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderHelpText",
-              "privacy": "protected",
-              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "privacy": "protected",
-              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderHelperText",
-              "privacy": "protected",
-              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
+              ],
+              "description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
+            },
+            {
+              "kind": "method",
+              "name": "updateSize",
+              "privacy": "private",
+              "description": "Updates the size by setting the width and height"
             },
             {
               "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
+              "name": "computedIconSize",
+              "privacy": "private",
+              "readonly": true
             }
           ],
           "attributes": [
             {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
-              "fieldName": "label"
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
-              "fieldName": "required"
-            },
-            {
-              "name": "help-text-type",
+              "name": "name",
               "type": {
-                "text": "ValidationType"
+                "text": "IconNames | undefined"
               },
-              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
-              "fieldName": "helpTextType"
+              "description": "Name of the icon (= filename)",
+              "fieldName": "name"
             },
             {
-              "name": "help-text",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "number | undefined"
               },
-              "description": "The help text that is displayed below the input field.",
-              "fieldName": "helpText"
+              "description": "Size of the icon (works in combination with length unit)",
+              "fieldName": "size"
             },
             {
-              "name": "toggletip-text",
+              "name": "length-unit",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "fieldName": "toggletipText"
-            },
-            {
-              "name": "toggletip-placement",
-              "type": {
-                "text": "PopoverPlacement"
-              },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "fieldName": "toggletipPlacement"
+              "description": "Length unit attribute for overriding length-unit from `IconProvider`",
+              "fieldName": "lengthUnit"
             },
             {
-              "name": "info-icon-aria-label",
+              "name": "aria-label",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "fieldName": "infoIconAriaLabel"
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
             },
             {
-              "name": "disabled",
+              "name": "aria-labelledby",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | null"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "fieldName": "ariaLabelledBy"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-formfieldwrapper",
-          "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n *  that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n *\n */",
+          "tagName": "mdc-icon",
+          "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n *   by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n *   the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n *\n * @csspart icon - The svg inside the icon element.\n */",
           "customElement": true
         }
       ],
@@ -14268,8 +14227,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FormfieldWrapper",
-            "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+            "name": "Icon",
+            "module": "components/icon/icon.component.js"
           }
         }
       ]
@@ -16996,196 +16955,41 @@
               "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "default": "undefined",
               "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            },
-            {
-              "name": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-linksimple",
-          "jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Linksimple",
-            "module": "components/linksimple/linksimple.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/list/list.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
-          "name": "List",
-          "cssParts": [
-            {
-              "description": "The container slot around the list items",
-              "name": "container"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot, where listitems can be placed.",
-              "name": "default"
-            },
-            {
-              "description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
-              "name": "list-header"
-            }
-          ],
-          "members": [
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the list element.\nIf the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item\nand sets the active tabindex of the list item.\nPrevents the default event behavior."
-            },
-            {
-              "kind": "method",
-              "name": "getCurrentIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "target",
-                  "type": {
-                    "text": "EventTarget | null"
-                  },
-                  "description": "The target element to find the index of."
-                }
-              ],
-              "description": "Returns the index of the given target in the listItems array.\nIf the target is not a list item, but a child element of a list item,\nit returns the index of the parent list item."
-            },
-            {
-              "kind": "method",
-              "name": "getNewIndexBasedOnKey",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The key that was pressed."
-                },
-                {
-                  "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The current index of the focused list item."
-                },
-                {
-                  "name": "wrappedDivsCount",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The total number of list items."
-                }
-              ],
-              "description": "Calculates a new index based on the pressed keyboard key.\nSupports navigation keys for moving focus within a list."
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
             },
             {
-              "kind": "method",
-              "name": "handleMouseClick",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The mouse event."
-                }
-              ],
-              "description": "Handles the mouse click event on the list element.\nFinds the index of the target element in the list items array and calls\n`resetTabIndexAndSetActiveTabIndex` with that index."
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
             },
             {
-              "kind": "method",
-              "name": "resetTabIndexAndSetActiveTabIndex",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "newIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the new active element in the list."
-                }
-              ],
-              "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-list",
-          "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
+          "tagName": "mdc-linksimple",
+          "jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n */",
           "customElement": true
         }
       ],
@@ -17194,8 +16998,49 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "List",
-            "module": "components/list/list.component.js"
+            "name": "Linksimple",
+            "module": "components/linksimple/linksimple.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/combobox/combobox.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "combobox component, which ...",
+          "name": "Combobox",
+          "cssProperties": [
+            {
+              "description": "Description of the CSS custom property",
+              "name": "--custom-property-name"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot",
+              "name": "default"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-combobox",
+          "jsDoc": "/**\n * combobox component, which ...\n *\n * @tagname mdc-combobox\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --custom-property-name - Description of the CSS custom property\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Combobox",
+            "module": "components/combobox/combobox.component.js"
           }
         }
       ]
@@ -17484,6 +17329,161 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/list/list.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
+          "name": "List",
+          "cssParts": [
+            {
+              "description": "The container slot around the list items",
+              "name": "container"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, where listitems can be placed.",
+              "name": "default"
+            },
+            {
+              "description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
+              "name": "list-header"
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the list element.\nIf the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item\nand sets the active tabindex of the list item.\nPrevents the default event behavior."
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "EventTarget | null"
+                  },
+                  "description": "The target element to find the index of."
+                }
+              ],
+              "description": "Returns the index of the given target in the listItems array.\nIf the target is not a list item, but a child element of a list item,\nit returns the index of the parent list item."
+            },
+            {
+              "kind": "method",
+              "name": "getNewIndexBasedOnKey",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The key that was pressed."
+                },
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The current index of the focused list item."
+                },
+                {
+                  "name": "wrappedDivsCount",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The total number of list items."
+                }
+              ],
+              "description": "Calculates a new index based on the pressed keyboard key.\nSupports navigation keys for moving focus within a list."
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseClick",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  },
+                  "description": "The mouse event."
+                }
+              ],
+              "description": "Handles the mouse click event on the list element.\nFinds the index of the target element in the list items array and calls\n`resetTabIndexAndSetActiveTabIndex` with that index."
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexAndSetActiveTabIndex",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the new active element in the list."
+                }
+              ],
+              "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-list",
+          "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "List",
+            "module": "components/list/list.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/listheader/listheader.component.js",