@momentum-design/components 0.122.0 → 0.122.2

package/dist/custom-elements.json

@@ -7691,124 +7691,332 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/cardbutton/cardbutton.component.js",
+      "path": "components/cardradio/cardradio.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": "cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\nThis card would have events for selected and unselected (similar to radio)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
+          "name": "CardRadio",
           "cssProperties": [
             {
               "description": "The width of the card",
-              "name": "--mdc-card-width"
-            },
-            {
-              "description": "Height for button size",
-              "name": "--mdc-button-height",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "Background color of the button",
-              "name": "--mdc-button-background",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "Borer color of the button",
-              "name": "--mdc-button-border-color",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "description": "Text color of the button",
-              "name": "--mdc-button-text-color",
+              "name": "--mdc-card-width",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "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",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
+              "name": "footer",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The checked state of the card",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the radio.",
+              "attribute": "name"
+            },
+            {
+              "kind": "method",
+              "name": "getAllCardsWithinSameGroup",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "CardRadio[]"
+                }
+              },
+              "description": "Returns all cards within the same group (name)."
+            },
+            {
+              "kind": "method",
+              "name": "toggleChecked",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
+            },
+            {
+              "kind": "method",
+              "name": "setDisabled",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "updateCardRadio",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "cards",
+                  "type": {
+                    "text": "CardRadio[]"
+                  }
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "toggleOnEnter",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event"
+                }
+              ],
+              "description": "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": "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"
               }
             },
             {
@@ -7822,8 +8030,8 @@
               "attribute": "card-title",
               "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
@@ -7837,8 +8045,8 @@
               "attribute": "subtitle",
               "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
@@ -7852,8 +8060,8 @@
               "attribute": "image-src",
               "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
@@ -7867,8 +8075,8 @@
               "attribute": "image-alt",
               "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
@@ -7882,8 +8090,8 @@
               "attribute": "variant",
               "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
@@ -7897,8 +8105,8 @@
               "attribute": "orientation",
               "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
@@ -7912,8 +8120,8 @@
               "attribute": "title-tag-name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
@@ -7927,8 +8135,8 @@
               "attribute": "subtitle-tag-name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
@@ -7941,8 +8149,8 @@
               "attribute": "icon-name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
@@ -7956,8 +8164,8 @@
                 }
               },
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
@@ -7971,8 +8179,8 @@
                 }
               },
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
@@ -7986,422 +8194,151 @@
                 }
               },
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
-              "kind": "field",
-              "name": "autoFocusOnMount",
+              "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": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "components/card/card.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"
+            },
+            {
+              "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": "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"
-              }
+              "description": "The checked state of the card",
+              "fieldName": "checked"
             },
             {
-              "kind": "field",
-              "name": "tabIndex",
+              "name": "name",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "default": "''",
+              "description": "The name of the radio.",
+              "fieldName": "name"
             },
             {
-              "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,
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "active",
+              "name": "tabIndex",
               "type": {
-                "text": "boolean | undefined"
+                "text": "number"
               },
-              "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": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "softDisabled",
+              "name": "card-title",
               "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 title of the card - part of header section",
+              "fieldName": "cardTitle",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "size",
+              "name": "subtitle",
               "type": {
-                "text": "ButtonSize"
+                "text": "string"
               },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "attribute": "size",
-              "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": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "role",
+              "name": "image-src",
               "type": {
-                "text": "RoleType"
+                "text": "string"
               },
-              "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,
+              "default": "''",
+              "description": "The image source URL to render on the card",
+              "fieldName": "imageSrc",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "ariaStateKey",
+              "name": "image-alt",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "attribute": "ariaStateKey",
-              "reflects": true,
-              "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"
+                "text": "string"
               },
               "default": "''",
               "description": "The image alt for accessibility support",
               "fieldName": "imageAlt",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
@@ -8413,8 +8350,8 @@
               "default": "'border'",
               "fieldName": "variant",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
@@ -8426,8 +8363,8 @@
               "default": "'vertical'",
               "fieldName": "orientation",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
@@ -8439,8 +8376,8 @@
               "default": "'span'",
               "fieldName": "titleTagName",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
@@ -8452,8 +8389,8 @@
               "default": "'span'",
               "fieldName": "subtitleTagName",
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
@@ -8464,152 +8401,28 @@
               "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",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
-            },
+            }
+          ],
+          "mixins": [
             {
-              "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": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
             },
             {
-              "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"
-              }
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "Card",
+            "module": "/src/components/card/card.component"
+          },
+          "tagName": "mdc-cardradio",
+          "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\n * This card would have events for selected and unselected (similar to radio)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event 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": [
@@ -8617,8 +8430,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CardButton",
-            "module": "components/cardbutton/cardbutton.component.js"
+            "name": "CardRadio",
+            "module": "components/cardradio/cardradio.component.js"
           }
         }
       ]
@@ -9327,262 +9140,579 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/cardradio/cardradio.component.js",
+      "path": "components/cardbutton/cardbutton.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\nThis card would have events for selected and unselected (similar to radio)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
-          "name": "CardRadio",
+          "description": "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",
+              "name": "--mdc-card-width"
+            },
+            {
+              "description": "Height for button size",
+              "name": "--mdc-button-height",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
-            }
-          ],
-          "cssParts": [
+            },
             {
-              "description": "The header part of the card",
-              "name": "header",
+              "description": "Background color of the button",
+              "name": "--mdc-button-background",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "description": "The icon part of the card header",
-              "name": "icon",
+              "description": "Borer color of the button",
+              "name": "--mdc-button-border-color",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "description": "The body part of the card",
-              "name": "body",
+              "description": "Text color of the button",
+              "name": "--mdc-button-text-color",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The header part of the card",
+              "name": "header"
+            },
+            {
+              "description": "The icon part of the card header",
+              "name": "icon"
+            },
+            {
+              "description": "The body part of the card",
+              "name": "body"
             },
             {
               "description": "The image part of the card",
-              "name": "image",
-              "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",
+              "kind": "method",
+              "name": "renderHeader",
+              "privacy": "protected",
+              "description": "Renders the header of the card if title is provided",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "cardTitle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The title of the card - part of header section",
+              "attribute": "card-title",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
               }
             },
             {
-              "description": "This slot is for passing the text content for the card",
-              "name": "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 the content after the body",
-              "name": "after-body",
+              "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 `mdc-link` component within the footer section.",
-              "name": "footer-link",
+              "kind": "field",
+              "name": "imageAlt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The image alt for accessibility support",
+              "attribute": "image-alt",
+              "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",
+              "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 secondary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-secondary",
+              "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"
               }
             },
             {
-              "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": "titleTagName",
+              "type": {
+                "text": "TagNameType"
+              },
+              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "attribute": "title-tag-name",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
               }
-            }
-          ],
-          "members": [
+            },
             {
               "kind": "field",
-              "name": "checked",
+              "name": "subtitleTagName",
               "type": {
-                "text": "boolean"
+                "text": "TagNameType"
               },
-              "default": "false",
-              "description": "The checked state of the card",
-              "attribute": "checked",
-              "reflects": true
+              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "attribute": "subtitle-tag-name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "iconName",
               "type": {
-                "text": "string"
+                "text": "IconNames | undefined"
               },
-              "default": "''",
-              "description": "The name of the radio.",
-              "attribute": "name"
+              "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": "getAllCardsWithinSameGroup",
-              "privacy": "private",
+              "name": "renderImage",
+              "privacy": "protected",
+              "description": "Renders the image on the card if image source is provided",
               "return": {
                 "type": {
-                  "text": "CardRadio[]"
+                  "text": ""
                 }
               },
-              "description": "Returns all cards within the same group (name)."
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "toggleChecked",
-              "privacy": "private",
+              "name": "renderIcon",
+              "privacy": "protected",
+              "description": "Renders the icon on the card if icon name is provided",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
-              "description": "Handles the change event on the radio element.\nThis will toggle the state of the radio element.\nDispatches the change event."
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "setDisabled",
+              "name": "renderTitle",
+              "privacy": "protected",
+              "description": "Renders the title and subtitle on the card",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
+              "inheritedFrom": {
+                "name": "CardComponentMixin",
+                "module": "utils/mixins/CardComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "autoFocusOnMount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "attribute": "auto-focus-on-mount",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "attribute": "active",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "RoleType"
+              },
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "attribute": "role",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "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": "disabled",
+                  "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": "updateCardRadio",
+              "name": "setDisabled",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
               "parameters": [
                 {
-                  "name": "cards",
+                  "name": "element",
                   "type": {
-                    "text": "CardRadio[]"
-                  }
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
                 },
                 {
-                  "name": "index",
+                  "name": "disabled",
                   "type": {
-                    "text": "number"
-                  }
+                    "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": "toggleOnEnter",
+              "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": [
                 {
@@ -9590,14 +9720,18 @@
                   "type": {
                     "text": "KeyboardEvent"
                   },
-                  "description": "The keyboard event"
+                  "description": "The keyboard event."
                 }
               ],
-              "description": "Toggles the checked state when enter key is used"
+              "description": "Handles the keydown event on the 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": "toggleOnSpace",
+              "name": "handleKeyUp",
               "privacy": "private",
               "parameters": [
                 {
@@ -9605,311 +9739,195 @@
                   "type": {
                     "text": "KeyboardEvent"
                   },
-                  "description": "The keyboard event"
+                  "description": "The keyboard event."
                 }
               ],
-              "description": "Toggles the checked state when space key is used"
-            },
+              "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": [
             {
-              "kind": "method",
-              "name": "renderHeader",
-              "privacy": "protected",
-              "description": "Renders the header of the card",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "description": "(React: onClick) Event that gets dispatched when the card is clicked.",
+              "name": "click",
+              "reactName": "onClick",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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,
+              "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": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
+              "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": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "cardTitle",
+              "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",
-              "attribute": "card-title",
-              "reflects": true,
+              "fieldName": "cardTitle",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "subtitle",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The subtitle of the card - part of header section",
-              "attribute": "subtitle",
-              "reflects": true,
+              "fieldName": "subtitle",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "imageSrc",
+              "name": "image-src",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The image source URL to render on the card",
-              "attribute": "image-src",
-              "reflects": true,
+              "fieldName": "imageSrc",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "imageAlt",
+              "name": "image-alt",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The image alt for accessibility support",
-              "attribute": "image-alt",
-              "reflects": true,
+              "fieldName": "imageAlt",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "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,
+              "fieldName": "variant",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "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,
+              "fieldName": "orientation",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "titleTagName",
+              "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'",
-              "attribute": "title-tag-name",
-              "reflects": true,
+              "fieldName": "titleTagName",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "subtitleTagName",
+              "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'",
-              "attribute": "subtitle-tag-name",
-              "reflects": true,
+              "fieldName": "subtitleTagName",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "iconName",
+              "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.",
-              "attribute": "icon-name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderImage",
-              "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"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderIcon",
-              "privacy": "protected",
-              "description": "Renders the icon on the card if icon name is provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderTitle",
-              "privacy": "protected",
-              "description": "Renders the title and subtitle on the card",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.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": ""
-                }
-              },
+              "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "components/card/card.component.js"
+                "name": "CardComponentMixin",
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
-            }
-          ],
-          "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"
-            },
-            {
-              "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",
+              "name": "auto-focus-on-mount",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "The checked state of the card",
-              "fieldName": "checked"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the radio.",
-              "fieldName": "name"
-            },
-            {
-              "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": "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": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
@@ -9921,144 +9939,126 @@
               "description": "This property specifies the tab order of the element.",
               "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "card-title",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The title of the card - part of header section",
-              "fieldName": "cardTitle",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "subtitle",
+              "name": "active",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The subtitle of the card - part of header section",
-              "fieldName": "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",
+              "fieldName": "active",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "image-src",
+              "name": "soft-disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The image source URL to render on the card",
-              "fieldName": "imageSrc",
+              "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": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "image-alt",
+              "name": "size",
               "type": {
-                "text": "string"
+                "text": "ButtonSize"
               },
-              "default": "''",
-              "description": "The image alt for accessibility support",
-              "fieldName": "imageAlt",
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "fieldName": "size",
               "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "variant",
+              "name": "role",
               "type": {
-                "text": "CardVariant"
+                "text": "RoleType"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
-              "default": "'border'",
-              "fieldName": "variant",
+              "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": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "orientation",
+              "name": "ariaStateKey",
               "type": {
-                "text": "CardOrientation"
+                "text": "string | undefined"
               },
-              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
-              "default": "'vertical'",
-              "fieldName": "orientation",
+              "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": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "title-tag-name",
+              "name": "type",
               "type": {
-                "text": "TagNameType"
+                "text": "ButtonType"
               },
-              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "fieldName": "titleTagName",
+              "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": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "subtitle-tag-name",
+              "name": "name",
               "type": {
-                "text": "TagNameType"
+                "text": "string | undefined"
               },
-              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "fieldName": "subtitleTagName",
+              "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": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "icon-name",
+              "name": "value",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string | undefined"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
+              "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": "Card",
-                "module": "src/components/card/card.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.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-cardradio",
-          "jsDoc": "/**\n * cardradio component extends `mdc-card` and supports radio selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"radio-group\".\n * This card would have events for selected and unselected (similar to radio)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardradio\n *\n * @dependency mdc-icon\n * @dependency mdc-staticradio\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event 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": [
@@ -10066,8 +10066,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CardRadio",
-            "module": "components/cardradio/cardradio.component.js"
+            "name": "CardButton",
+            "module": "components/cardbutton/cardbutton.component.js"
           }
         }
       ]
@@ -39380,7 +39380,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure\nproper accessibility. This component should be used when search results or suggestions need to be displayed\nin a popover below the search input field, where the search results hold individual actions like navigating to a\na different url etc.\n\n- Don't use this when search results are displayed inline on the page -> use Searchfield component instead.\n- Don't use this when a list of options is filtered based on the search input -> use Combobox component instead.\n\nIt supports `mdc-inputchip` as filters.\n\nThis component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.",
+          "description": "`mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure\nproper accessibility. This component should be used when search results or suggestions need to be displayed\nin a popover below the search input field, where the search results hold individual actions like navigating to a\na different url etc.\n\n- Don't use this when search results are displayed inline on the page -\\> use Searchfield component instead.\n- Don't use this when a list of options is filtered based on the search input -\\> use Combobox component instead.\n\nIt supports `mdc-inputchip` as filters.\n\nThis component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.",
           "name": "Searchpopover",
           "cssProperties": [
             {
@@ -39746,6 +39746,16 @@
               "attribute": "popover-z-index",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "popoverAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The aria-label for the popover within Searchpopover.\nUse to provide an accessible name for the popover i.e. \"Search results\".",
+              "attribute": "popover-aria-label",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "renderInputElement",
@@ -40533,6 +40543,14 @@
               "default": "1000",
               "fieldName": "popoverZIndex"
             },
+            {
+              "name": "popover-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The aria-label for the popover within Searchpopover.\nUse to provide an accessible name for the popover i.e. \"Search results\".",
+              "fieldName": "popoverAriaLabel"
+            },
             {
               "name": "auto-focus-on-mount",
               "type": {
@@ -40914,7 +40932,7 @@
             "module": "/src/components/searchfield/searchfield.component"
           },
           "tagName": "mdc-searchpopover",
-          "jsDoc": "/**\n * `mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure\n * proper accessibility. This component should be used when search results or suggestions need to be displayed\n * in a popover below the search input field, where the search results hold individual actions like navigating to a\n * a different url etc.\n *\n * - Don't use this when search results are displayed inline on the page -> use Searchfield component instead.\n * - Don't use this when a list of options is filtered based on the search input -> use Combobox component instead.\n *\n * It supports `mdc-inputchip` as filters.\n *\n * This component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.\n *\n * @tagname mdc-searchpopover\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n *\n * @slot default - Default slot (=children) for the popover content\n * @slot filters - Slot for input chips\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-searchpopover-width - Width of the searchpopover component\n * @cssproperty --mdc-searchpopover-popover-width - Width of the popover within the searchpopover component\n * @cssproperty --mdc-searchpopover-popover-height - Height of the popover within the searchpopover component\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n * @csspart popover-content - The popover content element.\n */",
+          "jsDoc": "/**\n * `mdc-searchpopover` widget is a combination of the Searchfield and Popover components, connected to ensure\n * proper accessibility. This component should be used when search results or suggestions need to be displayed\n * in a popover below the search input field, where the search results hold individual actions like navigating to a\n * a different url etc.\n *\n * - Don't use this when search results are displayed inline on the page -\\> use Searchfield component instead.\n * - Don't use this when a list of options is filtered based on the search input -\\> use Combobox component instead.\n *\n * It supports `mdc-inputchip` as filters.\n *\n * This component is built by extending the `mdc-searchfield` component & rendering the mdc-popover component inside.\n *\n * @tagname mdc-searchpopover\n *\n * @event input - (React: onInput) This event is dispatched when the value of the input field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the input field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the input receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the input loses focus.\n * @event clear - (React: onClear) This event is dispatched when the input text is cleared.\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n *\n * @slot default - Default slot (=children) for the popover content\n * @slot filters - Slot for input chips\n * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.\n * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.\n * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.\n * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.\n * @slot input - Slot for the input element. If not provided, the input field will be rendered.\n * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.\n * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.\n * @slot trailing-button - Slot for the trailing button to clear the input field. If not provided, the clear button will be rendered when `trailingButton` property is set to true.\n *\n * @cssproperty --mdc-label-font-size - Font size for the label text.\n * @cssproperty --mdc-label-font-weight - Font weight for the label text.\n * @cssproperty --mdc-label-line-height - Line height for the label text.\n * @cssproperty --mdc-label-color - Color for the label text.\n * @cssproperty --mdc-help-text-font-size - Font size for the help text.\n * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.\n * @cssproperty --mdc-help-text-line-height - Line height for the help text.\n * @cssproperty --mdc-help-text-color - Color for the help text.\n * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-searchpopover-width - Width of the searchpopover component\n * @cssproperty --mdc-searchpopover-popover-width - Width of the popover within the searchpopover component\n * @cssproperty --mdc-searchpopover-popover-height - Height of the popover within the searchpopover component\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element that is displayed next to the label when the `required` property is set to true.\n * @csspart info-icon-btn - The info icon button element that is displayed next to the label when the `toggletip-text` property is set.\n * @csspart label-toggletip - The toggletip element that is displayed when the info icon button is clicked.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element that is displayed next to the helper/validation text.\n * @csspart help-text-container - The container for the helper/validation icon and text elements.\n * @csspart leading-icon - The leading icon element that is displayed before the input field.\n * @csspart prefix-text - The prefix text element that is displayed before the input field.\n * @csspart input-container - The container for the input field, leading icon, prefix text, and trailing button elements.\n * @csspart input-section - The container for the input field, leading icon, and prefix text elements.\n * @csspart input-text - The input field element.\n * @csspart trailing-button - The trailing button element that is displayed to clear the input field when the `trailingButton` property is set to true.\n * @csspart popover-content - The popover content element.\n */",
           "customElement": true
         }
       ],