@momentum-design/components 0.106.6 → 0.106.7

package/dist/custom-elements.json

@@ -5295,287 +5295,100 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/cardcheckbox/cardcheckbox.component.js",
+      "path": "components/card/card.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\nThis card would have events for selected and unselected (similar to checkbox)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
-          "name": "CardCheckbox",
+          "description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n   - Icon\n   - Title\n   - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
+          "name": "Card",
           "cssProperties": [
             {
               "description": "The width of the card",
-              "name": "--mdc-card-width",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "--mdc-card-width"
             }
           ],
           "cssParts": [
             {
               "description": "The header part of the card",
-              "name": "header",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "header"
             },
             {
               "description": "The icon part of the card header",
-              "name": "icon",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "icon"
             },
             {
               "description": "The body part of the card",
-              "name": "body",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "body"
             },
             {
               "description": "The image part of the card",
-              "name": "image",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "image"
             },
             {
               "description": "The footer part of the card",
-              "name": "footer",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "footer"
             },
             {
               "description": "The link part of the card footer",
-              "name": "footer-link",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "footer-link"
             },
             {
               "description": "The primary button part of the card footer",
-              "name": "footer-button-primary",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "footer-button-primary"
             },
             {
               "description": "The secondary button part of the card footer",
-              "name": "footer-button-secondary",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "footer-button-secondary"
             },
             {
               "description": "The icon button part of the card header",
-              "name": "icon-button",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "icon-button"
             },
             {
               "description": "The text part of the card",
-              "name": "text",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
-            },
-            {
-              "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"
+              "name": "text"
             }
           ],
           "slots": [
             {
               "description": "This slot is for passing the content before the body",
-              "name": "before-body",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "before-body"
             },
             {
               "description": "This slot is for passing the text content for the card",
-              "name": "body",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "body"
             },
             {
               "description": "This slot is for passing the content after the body",
-              "name": "after-body",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "after-body"
             },
             {
               "description": "This slot is for passing `mdc-link` component within the footer section.",
-              "name": "footer-link",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "footer-link"
             },
             {
               "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-primary",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "footer-button-primary"
             },
             {
               "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"
-              }
+              "name": "footer-button-secondary"
             },
             {
               "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
-              "name": "footer",
-              "inheritedFrom": {
-                "name": "Card",
-                "module": "src/components/card/card.component.ts"
-              }
+              "name": "footer"
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The checked state of the card",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "selectionType",
-              "type": {
-                "text": "SelectionType"
-              },
-              "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
-              "default": "'check'",
-              "attribute": "selection-type",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "toggleChecked",
-              "privacy": "private",
-              "description": "Toggles the checked state"
-            },
-            {
-              "kind": "method",
-              "name": "toggleOnEnter",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event"
-                }
-              ],
-              "description": "Toggles the checked state when enter key is used"
-            },
-            {
-              "kind": "method",
-              "name": "toggleOnSpace",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event"
-                }
-              ],
-              "description": "Toggles the checked state when space key is used"
-            },
-            {
-              "kind": "method",
-              "name": "renderSelection",
-              "privacy": "private",
-              "description": "Renders the selection icon or checkbox based on the selection type",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
             {
               "kind": "method",
               "name": "renderHeader",
               "privacy": "protected",
-              "description": "Renders the header of the card",
+              "description": "Renders the header of the card if title is provided",
               "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"
               }
             },
             {
@@ -5773,81 +5586,24 @@
               }
             }
           ],
-          "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"
-            },
+          "mixins": [
             {
-              "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"
+              "name": "CardComponentMixin",
+              "module": "/src/utils/mixins/CardComponentMixin"
             },
             {
-              "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
+              "name": "FooterMixin",
+              "module": "/src/utils/mixins/FooterMixin"
             }
           ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-card",
+          "jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n *    - Icon\n *    - Title\n *    - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n */",
+          "customElement": true,
           "attributes": [
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The checked state of the card",
-              "fieldName": "checked"
-            },
-            {
-              "name": "selection-type",
-              "type": {
-                "text": "SelectionType"
-              },
-              "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
-              "default": "'check'",
-              "fieldName": "selectionType"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
-              }
-            },
             {
               "name": "card-title",
               "type": {
@@ -5964,24 +5720,7 @@
                 "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             }
-          ],
-          "mixins": [
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            },
-            {
-              "name": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Card",
-            "module": "/src/components/card/card.component"
-          },
-          "tagName": "mdc-cardcheckbox",
-          "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n */",
-          "customElement": true
+          ]
         }
       ],
       "exports": [
@@ -5989,20 +5728,20 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CardCheckbox",
-            "module": "components/cardcheckbox/cardcheckbox.component.js"
+            "name": "Card",
+            "module": "components/card/card.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/card/card.component.js",
+      "path": "components/cardbutton/cardbutton.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n   - Icon\n   - Title\n   - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
-          "name": "Card",
+          "description": "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",
@@ -6071,14 +5810,6 @@
             {
               "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
               "name": "footer-button-primary"
-            },
-            {
-              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-secondary"
-            },
-            {
-              "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
-              "name": "footer"
             }
           ],
           "members": [
@@ -6273,712 +6004,840 @@
               }
             },
             {
-              "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": ""
-                }
+              "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": "FooterMixin",
-                "module": "utils/mixins/FooterMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "CardComponentMixin",
-              "module": "/src/utils/mixins/CardComponentMixin"
             },
             {
-              "name": "FooterMixin",
-              "module": "/src/utils/mixins/FooterMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-card",
-          "jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n *    - Icon\n *    - Title\n *    - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n * @slot footer -  This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n */",
-          "customElement": true,
-          "attributes": [
-            {
-              "name": "card-title",
+              "kind": "field",
+              "name": "tabIndex",
               "type": {
-                "text": "string"
+                "text": "number"
               },
-              "default": "''",
-              "description": "The title of the card - part of header section",
-              "fieldName": "cardTitle",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "subtitle",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The subtitle of the card - part of header section",
-              "fieldName": "subtitle",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "image-src",
+              "kind": "field",
+              "name": "active",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The image source URL to render on the card",
-              "fieldName": "imageSrc",
+              "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": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "image-alt",
+              "kind": "field",
+              "name": "softDisabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "''",
-              "description": "The image alt for accessibility support",
-              "fieldName": "imageAlt",
+              "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": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "CardVariant"
+                "text": "ButtonSize"
               },
-              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
-              "default": "'border'",
-              "fieldName": "variant",
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "orientation",
+              "kind": "field",
+              "name": "role",
               "type": {
-                "text": "CardOrientation"
+                "text": "RoleType"
               },
-              "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 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": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "title-tag-name",
+              "kind": "field",
+              "name": "ariaStateKey",
               "type": {
-                "text": "TagNameType"
+                "text": "string | undefined"
               },
-              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "fieldName": "titleTagName",
+              "description": "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": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "subtitle-tag-name",
+              "kind": "field",
+              "name": "type",
               "type": {
-                "text": "TagNameType"
+                "text": "ButtonType"
               },
-              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "fieldName": "subtitleTagName",
+              "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": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "name": "icon-name",
+              "kind": "field",
+              "name": "name",
               "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": "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": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Card",
-            "module": "components/card/card.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/cardbutton/cardbutton.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "cardbutton component looks like a card and behaves as a button component.\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\nMake sure to pass only non-interactable elements within the slots.",
-          "name": "CardButton",
-          "cssProperties": [
-            {
-              "description": "The width of the card",
-              "name": "--mdc-card-width"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The header part of the card",
-              "name": "header"
             },
             {
-              "description": "The icon part of the card header",
-              "name": "icon"
+              "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"
+              }
             },
             {
-              "description": "The body part of the card",
-              "name": "body"
+              "kind": "method",
+              "name": "executeAction",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "The image part of the card",
-              "name": "image"
+              "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"
+              }
             },
             {
-              "description": "The footer part of the card",
-              "name": "footer"
+              "kind": "method",
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
+                }
+              ],
+              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "The link part of the card footer",
-              "name": "footer-link"
+              "kind": "method",
+              "name": "setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state."
+                }
+              ],
+              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "The primary button part of the card footer",
-              "name": "footer-button-primary"
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "The secondary button part of the card footer",
-              "name": "footer-button-secondary"
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "The icon button part of the card header",
-              "name": "icon-button"
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "The text part of the card",
-              "name": "text"
+              "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"
+              }
             }
           ],
-          "slots": [
-            {
-              "description": "This slot is for passing the content before the body",
-              "name": "before-body"
-            },
+          "events": [
             {
-              "description": "This slot is for passing the text content for the card",
-              "name": "body"
+              "description": "(React: onClick) Event that gets dispatched when the card is clicked.",
+              "name": "click",
+              "reactName": "onClick",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "This slot is for passing the content after the body",
-              "name": "after-body"
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It fires the click event when enter key is used.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "This slot is for passing `mdc-link` component within the footer section.",
-              "name": "footer-link"
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It fires the click event when space key is used.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
-              "name": "footer-button-primary"
+              "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"
+              }
             }
           ],
-          "members": [
+          "mixins": [
             {
-              "kind": "method",
-              "name": "renderHeader",
-              "privacy": "protected",
-              "description": "Renders the header of the card if title is provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
+              "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": [
             {
-              "kind": "field",
-              "name": "cardTitle",
+              "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": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "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": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "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": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "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": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "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": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "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,
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "titleTagName",
-              "type": {
-                "text": "TagNameType"
-              },
-              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "attribute": "title-tag-name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "subtitleTagName",
-              "type": {
-                "text": "TagNameType"
-              },
-              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
-              "default": "'span'",
-              "attribute": "subtitle-tag-name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "reflects": true,
+                "text": "CardOrientation"
+              },
+              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "default": "'vertical'",
+              "fieldName": "orientation",
               "inheritedFrom": {
                 "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderImage",
-              "privacy": "protected",
-              "description": "Renders the image on the card if image source is provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "title-tag-name",
+              "type": {
+                "text": "TagNameType"
               },
+              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "fieldName": "titleTagName",
               "inheritedFrom": {
                 "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderIcon",
-              "privacy": "protected",
-              "description": "Renders the icon on the card if icon name is provided",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "subtitle-tag-name",
+              "type": {
+                "text": "TagNameType"
               },
+              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "fieldName": "subtitleTagName",
               "inheritedFrom": {
                 "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "renderTitle",
-              "privacy": "protected",
-              "description": "Renders the title and subtitle on the card",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
               },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
               "inheritedFrom": {
                 "name": "CardComponentMixin",
-                "module": "utils/mixins/CardComponentMixin.js"
+                "module": "src/utils/mixins/CardComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "autoFocusOnMount",
+              "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.",
-              "attribute": "auto-focus-on-mount",
-              "reflects": true,
+              "fieldName": "autoFocusOnMount",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "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,
+              "fieldName": "tabIndex",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "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,
+              "fieldName": "disabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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,
+              "fieldName": "active",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "softDisabled",
+              "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",
-              "attribute": "soft-disabled",
-              "reflects": true,
+              "fieldName": "softDisabled",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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,
+              "fieldName": "size",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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,
+              "fieldName": "role",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "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,
+              "fieldName": "ariaStateKey",
               "inheritedFrom": {
                 "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "ButtonType"
+              },
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "fieldName": "type",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "CardButton",
+            "module": "components/cardbutton/cardbutton.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/cardcheckbox/cardcheckbox.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\nThis card would have events for selected and unselected (similar to checkbox)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
+          "name": "CardCheckbox",
+          "cssProperties": [
+            {
+              "description": "The width of the card",
+              "name": "--mdc-card-width",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The header part of the card",
+              "name": "header",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The icon part of the card header",
+              "name": "icon",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The body part of the card",
+              "name": "body",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The image part of the card",
+              "name": "image",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The footer part of the card",
+              "name": "footer",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The link part of the card footer",
+              "name": "footer-link",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The primary button part of the card footer",
+              "name": "footer-button-primary",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The secondary button part of the card footer",
+              "name": "footer-button-secondary",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The icon button part of the card header",
+              "name": "icon-button",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
+              }
+            },
+            {
+              "description": "The text part of the card",
+              "name": "text",
+              "inheritedFrom": {
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "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"
-              }
+              "description": "The check part of the card",
+              "name": "check"
             },
             {
-              "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,
+              "description": "The check icon part of the card",
+              "name": "check-icon"
+            },
+            {
+              "description": "The check icon button part of the card",
+              "name": "check-icon-button"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This slot is for passing the content before the body",
+              "name": "before-body",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
-              "attribute": "value",
-              "reflects": true,
+              "description": "This slot is for passing the text content for the card",
+              "name": "body",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
+              "description": "This slot is for passing the content after the body",
+              "name": "after-body",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setActive",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element"
-                },
-                {
-                  "name": "active",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state of the element"
-                }
-              ],
-              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
+              "description": "This slot is for passing `mdc-link` component within the footer section.",
+              "name": "footer-link",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "softDisabled",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
-                }
-              ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
+              "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-primary",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The disabled state."
-                }
-              ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
+              "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
+              "name": "footer-button-secondary",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private",
+              "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": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The checked state of the card",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "selectionType",
+              "type": {
+                "text": "SelectionType"
+              },
+              "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
+              "default": "'check'",
+              "attribute": "selection-type",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "handleBlur",
+              "name": "toggleChecked",
               "privacy": "private",
-              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Toggles the checked state"
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
+              "name": "toggleOnEnter",
               "privacy": "private",
               "parameters": [
                 {
@@ -6986,18 +6845,14 @@
                   "type": {
                     "text": "KeyboardEvent"
                   },
-                  "description": "The keyboard event."
+                  "description": "The keyboard event"
                 }
               ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Toggles the checked state when enter key is used"
             },
             {
               "kind": "method",
-              "name": "handleKeyUp",
+              "name": "toggleOnSpace",
               "privacy": "private",
               "parameters": [
                 {
@@ -7005,195 +6860,322 @@
                   "type": {
                     "text": "KeyboardEvent"
                   },
-                  "description": "The keyboard event."
+                  "description": "The keyboard event"
                 }
               ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+              "description": "Toggles the checked state when space key is used"
+            },
+            {
+              "kind": "method",
+              "name": "renderSelection",
+              "privacy": "private",
+              "description": "Renders the selection icon or checkbox based on the selection type",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               }
-            }
-          ],
-          "events": [
+            },
             {
-              "description": "(React: onClick) Event that gets dispatched when the card is clicked.",
-              "name": "click",
-              "reactName": "onClick",
+              "kind": "method",
+              "name": "renderHeader",
+              "privacy": "protected",
+              "description": "Renders the header of the card",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
-              "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",
+              "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": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
-              "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",
+              "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": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
               }
             },
             {
-              "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",
+              "kind": "field",
+              "name": "cardTitle",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The title of the card - part of header section",
-              "fieldName": "cardTitle",
+              "attribute": "card-title",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "subtitle",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The subtitle of the card - part of header section",
-              "fieldName": "subtitle",
+              "attribute": "subtitle",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
-              "name": "image-src",
+              "kind": "field",
+              "name": "imageSrc",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The image source URL to render on the card",
-              "fieldName": "imageSrc",
+              "attribute": "image-src",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
-              "name": "image-alt",
+              "kind": "field",
+              "name": "imageAlt",
               "type": {
                 "text": "string"
               },
               "default": "''",
               "description": "The image alt for accessibility support",
-              "fieldName": "imageAlt",
+              "attribute": "image-alt",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "variant",
               "type": {
                 "text": "CardVariant"
               },
               "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
               "default": "'border'",
-              "fieldName": "variant",
+              "attribute": "variant",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "orientation",
               "type": {
                 "text": "CardOrientation"
               },
               "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
               "default": "'vertical'",
-              "fieldName": "orientation",
+              "attribute": "orientation",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
-              "name": "title-tag-name",
+              "kind": "field",
+              "name": "titleTagName",
               "type": {
                 "text": "TagNameType"
               },
               "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
               "default": "'span'",
-              "fieldName": "titleTagName",
+              "attribute": "title-tag-name",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
-              "name": "subtitle-tag-name",
+              "kind": "field",
+              "name": "subtitleTagName",
               "type": {
                 "text": "TagNameType"
               },
               "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
               "default": "'span'",
-              "fieldName": "subtitleTagName",
+              "attribute": "subtitle-tag-name",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
-              "name": "icon-name",
+              "kind": "field",
+              "name": "iconName",
               "type": {
                 "text": "IconNames | undefined"
               },
               "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
+              "attribute": "icon-name",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "CardComponentMixin",
-                "module": "src/utils/mixins/CardComponentMixin.ts"
+                "name": "Card",
+                "module": "components/card/card.component.js"
               }
             },
             {
-              "name": "auto-focus-on-mount",
+              "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": ""
+                }
+              },
+              "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.",
-              "fieldName": "autoFocusOnMount",
+              "description": "The checked state of the card",
+              "fieldName": "checked"
+            },
+            {
+              "name": "selection-type",
+              "type": {
+                "text": "SelectionType"
+              },
+              "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
+              "default": "'check'",
+              "fieldName": "selectionType"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
@@ -7205,126 +7187,144 @@
               "description": "This property specifies the tab order of the element.",
               "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             },
             {
-              "name": "disabled",
+              "name": "card-title",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
+              "default": "''",
+              "description": "The title of the card - part of header section",
+              "fieldName": "cardTitle",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "active",
+              "name": "subtitle",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "fieldName": "active",
+              "default": "''",
+              "description": "The subtitle of the card - part of header section",
+              "fieldName": "subtitle",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "soft-disabled",
+              "name": "image-src",
               "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",
-              "fieldName": "softDisabled",
+              "default": "''",
+              "description": "The image source URL to render on the card",
+              "fieldName": "imageSrc",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "size",
+              "name": "image-alt",
               "type": {
-                "text": "ButtonSize"
+                "text": "string"
               },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "fieldName": "size",
+              "default": "''",
+              "description": "The image alt for accessibility support",
+              "fieldName": "imageAlt",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "role",
+              "name": "variant",
               "type": {
-                "text": "RoleType"
+                "text": "CardVariant"
               },
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "fieldName": "role",
+              "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
+              "default": "'border'",
+              "fieldName": "variant",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "ariaStateKey",
+              "name": "orientation",
               "type": {
-                "text": "string | undefined"
+                "text": "CardOrientation"
               },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "fieldName": "ariaStateKey",
+              "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
+              "default": "'vertical'",
+              "fieldName": "orientation",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "type",
+              "name": "title-tag-name",
               "type": {
-                "text": "ButtonType"
+                "text": "TagNameType"
               },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "fieldName": "type",
+              "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "fieldName": "titleTagName",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "name",
+              "name": "subtitle-tag-name",
               "type": {
-                "text": "string | undefined"
+                "text": "TagNameType"
               },
-              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
-              "fieldName": "name",
+              "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
+              "default": "'span'",
+              "fieldName": "subtitleTagName",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.component.ts"
               }
             },
             {
-              "name": "value",
+              "name": "icon-name",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
-              "fieldName": "value",
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "Card",
+                "module": "src/components/card/card.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-cardcheckbox",
+          "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -7332,8 +7332,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "CardButton",
-            "module": "components/cardbutton/cardbutton.component.js"
+            "name": "CardCheckbox",
+            "module": "components/cardcheckbox/cardcheckbox.component.js"
           }
         }
       ]
@@ -11374,6 +11374,47 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/combobox/combobox.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "combobox component, which ...",
+          "name": "Combobox",
+          "cssProperties": [
+            {
+              "description": "Description of the CSS custom property",
+              "name": "--custom-property-name"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot",
+              "name": "default"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-combobox",
+          "jsDoc": "/**\n * combobox component, which ...\n *\n * @tagname mdc-combobox\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --custom-property-name - Description of the CSS custom property\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Combobox",
+            "module": "components/combobox/combobox.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/dialog/dialog.component.js",
@@ -17006,31 +17047,145 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/combobox/combobox.component.js",
+      "path": "components/list/list.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "combobox component, which ...",
-          "name": "Combobox",
-          "cssProperties": [
+          "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
+          "name": "List",
+          "cssParts": [
+            {
+              "description": "The container slot around the list items",
+              "name": "container"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, where listitems can be placed.",
+              "name": "default"
+            },
+            {
+              "description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
+              "name": "list-header"
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the list element.\nIf the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item\nand sets the active tabindex of the list item.\nPrevents the default event behavior."
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "EventTarget | null"
+                  },
+                  "description": "The target element to find the index of."
+                }
+              ],
+              "description": "Returns the index of the given target in the listItems array.\nIf the target is not a list item, but a child element of a list item,\nit returns the index of the parent list item."
+            },
+            {
+              "kind": "method",
+              "name": "getNewIndexBasedOnKey",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The key that was pressed."
+                },
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The current index of the focused list item."
+                },
+                {
+                  "name": "wrappedDivsCount",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The total number of list items."
+                }
+              ],
+              "description": "Calculates a new index based on the pressed keyboard key.\nSupports navigation keys for moving focus within a list."
+            },
             {
-              "description": "Description of the CSS custom property",
-              "name": "--custom-property-name"
-            }
-          ],
-          "slots": [
+              "kind": "method",
+              "name": "handleMouseClick",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  },
+                  "description": "The mouse event."
+                }
+              ],
+              "description": "Handles the mouse click event on the list element.\nFinds the index of the target element in the list items array and calls\n`resetTabIndexAndSetActiveTabIndex` with that index."
+            },
             {
-              "description": "This is a default/unnamed slot",
-              "name": "default"
+              "kind": "method",
+              "name": "resetTabIndexAndSetActiveTabIndex",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the new active element in the list."
+                }
+              ],
+              "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
             }
           ],
-          "members": [],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-combobox",
-          "jsDoc": "/**\n * combobox component, which ...\n *\n * @tagname mdc-combobox\n *\n * @slot default - This is a default/unnamed slot\n *\n * @cssproperty --custom-property-name - Description of the CSS custom property\n */",
+          "tagName": "mdc-list",
+          "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
           "customElement": true
         }
       ],
@@ -17039,8 +17194,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Combobox",
-            "module": "components/combobox/combobox.component.js"
+            "name": "List",
+            "module": "components/list/list.component.js"
           }
         }
       ]
@@ -17198,278 +17353,123 @@
               "inheritedFrom": {
                 "name": "ListNavigationMixin",
                 "module": "utils/mixins/ListNavigationMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "resetTabIndexAndSetFocus",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "newIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the new item to focus."
-                },
-                {
-                  "name": "oldIndex",
-                  "optional": true,
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the currently focused item."
-                },
-                {
-                  "name": "focusNewItem",
-                  "default": "true",
-                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
-                }
-              ],
-              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "resolveDirectionKey",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The key pressed by the user."
-                },
-                {
-                  "name": "isRtl",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
-                }
-              ],
-              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "inheritedFrom": {
-                "name": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "name": "change",
-              "type": {
-                "text": "Event"
-              },
-              "description": "(React: onChange) This event is emitted when the selected item changed",
-              "reactName": "onChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "undefined | string | undefined"
-              },
-              "default": "undefined",
-              "description": "The name attribute is used to identify the listbox",
-              "fieldName": "name"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "undefined | string | undefined"
-              },
-              "default": "undefined",
-              "description": "The value attribute is used to represent the last selected option's value in the listbox.",
-              "fieldName": "value"
-            }
-          ],
-          "mixins": [
-            {
-              "name": "ListNavigationMixin",
-              "module": "/src/utils/mixins/ListNavigationMixin"
-            },
-            {
-              "name": "CaptureDestroyEventForChildElement",
-              "module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-listbox",
-          "jsDoc": "/**\n * listbox component presents a list of options and allows a user to select one of them.\n *\n * Notes:\n * - This is a standalone listbox component. Select has its own mdc-selectlistbox component.\n * - this component has name and value attributes and also emits change event,\n *   but it is not a form control (yet).\n *\n * @dependency mdc-list\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-option\n * @dependency mdc-optgroup\n *\n * @tagname mdc-listbox\n *\n * @cssproperty --mdc-listbox-max-height - max height of the listbox\n *\n * @slot default - This is a default/unnamed slot, where options and optgroups are placed\n *\n * @csspart container - The container of the listbox\n *\n * @event change - (React: onChange) This event is emitted when the selected item changed\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ListBox",
-            "module": "components/listbox/listbox.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/list/list.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
-          "name": "List",
-          "cssParts": [
-            {
-              "description": "The container slot around the list items",
-              "name": "container"
-            }
-          ],
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot, where listitems can be placed.",
-              "name": "default"
-            },
-            {
-              "description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
-              "name": "list-header"
-            }
-          ],
-          "members": [
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the list element.\nIf the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item\nand sets the active tabindex of the list item.\nPrevents the default event behavior."
-            },
-            {
-              "kind": "method",
-              "name": "getCurrentIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "target",
-                  "type": {
-                    "text": "EventTarget | null"
-                  },
-                  "description": "The target element to find the index of."
-                }
-              ],
-              "description": "Returns the index of the given target in the listItems array.\nIf the target is not a list item, but a child element of a list item,\nit returns the index of the parent list item."
+              }
             },
             {
               "kind": "method",
-              "name": "getNewIndexBasedOnKey",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
+              "name": "resetTabIndexAndSetFocus",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "key",
+                  "name": "newIndex",
                   "type": {
-                    "text": "string"
+                    "text": "number"
                   },
-                  "description": "The key that was pressed."
+                  "description": "The index of the new item to focus."
                 },
                 {
-                  "name": "currentIndex",
+                  "name": "oldIndex",
+                  "optional": true,
                   "type": {
                     "text": "number"
                   },
-                  "description": "The current index of the focused list item."
+                  "description": "The index of the currently focused item."
                 },
                 {
-                  "name": "wrappedDivsCount",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The total number of list items."
+                  "name": "focusNewItem",
+                  "default": "true",
+                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
                 }
               ],
-              "description": "Calculates a new index based on the pressed keyboard key.\nSupports navigation keys for moving focus within a list."
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseClick",
-              "privacy": "protected",
+              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
                 }
               },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The mouse event."
-                }
-              ],
-              "description": "Handles the mouse click event on the list element.\nFinds the index of the target element in the list items array and calls\n`resetTabIndexAndSetActiveTabIndex` with that index."
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "resetTabIndexAndSetActiveTabIndex",
+              "name": "resolveDirectionKey",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "newIndex",
+                  "name": "key",
                   "type": {
-                    "text": "number"
+                    "text": "string"
                   },
-                  "description": "The index of the new active element in the list."
+                  "description": "The key pressed by the user."
+                },
+                {
+                  "name": "isRtl",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
                 }
               ],
-              "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
+              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "(React: onChange) This event is emitted when the selected item changed",
+              "reactName": "onChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "undefined | string | undefined"
+              },
+              "default": "undefined",
+              "description": "The name attribute is used to identify the listbox",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "undefined | string | undefined"
+              },
+              "default": "undefined",
+              "description": "The value attribute is used to represent the last selected option's value in the listbox.",
+              "fieldName": "value"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "ListNavigationMixin",
+              "module": "/src/utils/mixins/ListNavigationMixin"
+            },
+            {
+              "name": "CaptureDestroyEventForChildElement",
+              "module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-list",
-          "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
+          "tagName": "mdc-listbox",
+          "jsDoc": "/**\n * listbox component presents a list of options and allows a user to select one of them.\n *\n * Notes:\n * - This is a standalone listbox component. Select has its own mdc-selectlistbox component.\n * - this component has name and value attributes and also emits change event,\n *   but it is not a form control (yet).\n *\n * @dependency mdc-list\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-option\n * @dependency mdc-optgroup\n *\n * @tagname mdc-listbox\n *\n * @cssproperty --mdc-listbox-max-height - max height of the listbox\n *\n * @slot default - This is a default/unnamed slot, where options and optgroups are placed\n *\n * @csspart container - The container of the listbox\n *\n * @event change - (React: onChange) This event is emitted when the selected item changed\n */",
           "customElement": true
         }
       ],
@@ -17478,8 +17478,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "List",
-            "module": "components/list/list.component.js"
+            "name": "ListBox",
+            "module": "components/listbox/listbox.component.js"
           }
         }
       ]
@@ -18540,15 +18540,15 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/menuitem/menuitem.component.js",
+      "path": "components/menuitemcheckbox/menuitemcheckbox.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\n**Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.\nConsumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.",
-          "name": "MenuItem",
+          "description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nMenu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.",
+          "name": "MenuItemCheckbox",
           "slots": [
             {
-              "description": "slot for menu item controls to appear of leading end.",
+              "description": "slot for menu item checkbox controls to appear of leading end.",
               "name": "leading-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -18556,7 +18556,7 @@
               }
             },
             {
-              "description": "slot for menu item primary label.",
+              "description": "slot for menu item checkbox primary label.",
               "name": "leading-text-primary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -18564,7 +18564,7 @@
               }
             },
             {
-              "description": "slot for menu item secondary label.",
+              "description": "slot for menu item checkbox secondary label.",
               "name": "leading-text-secondary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -18572,7 +18572,7 @@
               }
             },
             {
-              "description": "slot for menu item tertiary label.",
+              "description": "slot for menu item checkbox tertiary label.",
               "name": "leading-text-tertiary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -18580,7 +18580,7 @@
               }
             },
             {
-              "description": "slot for menu item side header text.",
+              "description": "slot for menu item checkbox side header text.",
               "name": "trailing-text-side-header",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -18588,7 +18588,7 @@
               }
             },
             {
-              "description": "slot for menu item subline text.",
+              "description": "slot for menu item checkbox subline text.",
               "name": "trailing-text-subline",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -18596,7 +18596,7 @@
               }
             },
             {
-              "description": "slot for menu item controls to appear of trailing end.",
+              "description": "slot for menu item checkbox controls to appear of trailing end.",
               "name": "trailing-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -18613,6 +18613,67 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "indicator",
+              "type": {
+                "text": "Indicator"
+              },
+              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
+              "default": "'checkbox'",
+              "attribute": "indicator",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseClick",
+              "privacy": "private",
+              "description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`."
+            },
+            {
+              "kind": "method",
+              "name": "staticCheckbox",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
+            },
+            {
+              "kind": "method",
+              "name": "staticToggle",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Returns a static toggle element if the indicator is set to toggle.\nIf the indicator is not set to toggle, it returns nothing.\n\nThe toggle will always be positioned on the trailing side of the menuitem label."
+            },
+            {
+              "kind": "method",
+              "name": "getCheckmarkIcon",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
+            },
             {
               "kind": "field",
               "name": "arrowPosition",
@@ -18621,7 +18682,11 @@
               },
               "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
               "attribute": "arrow-position",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
             },
             {
               "kind": "field",
@@ -18631,7 +18696,11 @@
               },
               "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
               "attribute": "arrow-direction",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
             },
             {
               "kind": "field",
@@ -18641,7 +18710,11 @@
               },
               "description": "The name attribute is used to identify the menu item when it is selected.",
               "attribute": "name",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
             },
             {
               "kind": "field",
@@ -18651,7 +18724,11 @@
               },
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
               "attribute": "value",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
             },
             {
               "kind": "method",
@@ -18695,7 +18772,11 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event."
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "components/menuitem/menuitem.component.js"
+              }
             },
             {
               "kind": "method",
@@ -18982,7 +19063,15 @@
           ],
           "events": [
             {
-              "description": "(React: onClick) This event is dispatched when the menuitem is clicked.",
+              "name": "change",
+              "type": {
+                "text": "Event"
+              },
+              "description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
+              "reactName": "onChange"
+            },
+            {
+              "description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -18990,6 +19079,15 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
+            {
+              "description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
             {
               "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
               "name": "keydown",
@@ -19008,15 +19106,6 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
-            {
-              "description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
             {
               "description": "(React: onEnabled) This event is dispatched after the menuitem is enabled",
               "name": "enabled",
@@ -19055,13 +19144,35 @@
             }
           ],
           "attributes": [
+            {
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
+              "fieldName": "checked"
+            },
+            {
+              "name": "indicator",
+              "type": {
+                "text": "Indicator"
+              },
+              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
+              "default": "'checkbox'",
+              "fieldName": "indicator"
+            },
             {
               "name": "arrow-position",
               "type": {
                 "text": "ArrowPositions | undefined"
               },
               "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
-              "fieldName": "arrowPosition"
+              "fieldName": "arrowPosition",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
             },
             {
               "name": "arrow-direction",
@@ -19069,7 +19180,11 @@
                 "text": "ArrowDirections | undefined"
               },
               "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
-              "fieldName": "arrowDirection"
+              "fieldName": "arrowDirection",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
             },
             {
               "name": "name",
@@ -19077,7 +19192,11 @@
                 "text": "string | undefined"
               },
               "description": "The name attribute is used to identify the menu item when it is selected.",
-              "fieldName": "name"
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
             },
             {
               "name": "value",
@@ -19085,7 +19204,11 @@
                 "text": "string | undefined"
               },
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
-              "fieldName": "value"
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
             },
             {
               "name": "disabled",
@@ -19201,11 +19324,11 @@
             }
           ],
           "superclass": {
-            "name": "ListItem",
-            "module": "/src/components/listitem/listitem.component"
+            "name": "MenuItem",
+            "module": "/src/components/menuitem/menuitem.component"
           },
-          "tagName": "mdc-menuitem",
-          "jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * **Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.\n * Consumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the menuitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)\n */",
+          "tagName": "mdc-menuitemcheckbox",
+          "jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item checkbox primary label.\n * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.\n * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.\n * @slot trailing-text-side-header - slot for menu item checkbox side header text.\n * @slot trailing-text-subline - slot for menu item checkbox subline text.\n * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n */",
           "customElement": true,
           "cssProperties": [
             {
@@ -19312,23 +19435,23 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "MenuItem",
-            "module": "components/menuitem/menuitem.component.js"
+            "name": "MenuItemCheckbox",
+            "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/menuitemcheckbox/menuitemcheckbox.component.js",
+      "path": "components/menuitem/menuitem.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nMenu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.",
-          "name": "MenuItemCheckbox",
+          "description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\n**Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.\nConsumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.",
+          "name": "MenuItem",
           "slots": [
             {
-              "description": "slot for menu item checkbox controls to appear of leading end.",
+              "description": "slot for menu item controls to appear of leading end.",
               "name": "leading-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -19336,7 +19459,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox primary label.",
+              "description": "slot for menu item primary label.",
               "name": "leading-text-primary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -19344,7 +19467,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox secondary label.",
+              "description": "slot for menu item secondary label.",
               "name": "leading-text-secondary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -19352,7 +19475,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox tertiary label.",
+              "description": "slot for menu item tertiary label.",
               "name": "leading-text-tertiary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -19360,7 +19483,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox side header text.",
+              "description": "slot for menu item side header text.",
               "name": "trailing-text-side-header",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -19368,7 +19491,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox subline text.",
+              "description": "slot for menu item subline text.",
               "name": "trailing-text-subline",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -19376,7 +19499,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox controls to appear of trailing end.",
+              "description": "slot for menu item controls to appear of trailing end.",
               "name": "trailing-controls",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -19393,67 +19516,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
-              "attribute": "checked",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "indicator",
-              "type": {
-                "text": "Indicator"
-              },
-              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
-              "default": "'checkbox'",
-              "attribute": "indicator",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleMouseClick",
-              "privacy": "private",
-              "description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`."
-            },
-            {
-              "kind": "method",
-              "name": "staticCheckbox",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
-            },
-            {
-              "kind": "method",
-              "name": "staticToggle",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Returns a static toggle element if the indicator is set to toggle.\nIf the indicator is not set to toggle, it returns nothing.\n\nThe toggle will always be positioned on the trailing side of the menuitem label."
-            },
-            {
-              "kind": "method",
-              "name": "getCheckmarkIcon",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
-            },
             {
               "kind": "field",
               "name": "arrowPosition",
@@ -19462,11 +19524,7 @@
               },
               "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
               "attribute": "arrow-position",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
@@ -19476,11 +19534,7 @@
               },
               "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
               "attribute": "arrow-direction",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
@@ -19490,11 +19544,7 @@
               },
               "description": "The name attribute is used to identify the menu item when it is selected.",
               "attribute": "name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
@@ -19504,11 +19554,7 @@
               },
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
               "attribute": "value",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "method",
@@ -19552,11 +19598,7 @@
                   "description": "The keyboard event that triggered the action."
                 }
               ],
-              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "components/menuitem/menuitem.component.js"
-              }
+              "description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event."
             },
             {
               "kind": "method",
@@ -19843,15 +19885,7 @@
           ],
           "events": [
             {
-              "name": "change",
-              "type": {
-                "text": "Event"
-              },
-              "description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
-              "reactName": "onChange"
-            },
-            {
-              "description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
+              "description": "(React: onClick) This event is dispatched when the menuitem is clicked.",
               "name": "click",
               "reactName": "onClick",
               "inheritedFrom": {
@@ -19859,15 +19893,6 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
-            {
-              "description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
             {
               "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
               "name": "keydown",
@@ -19886,6 +19911,15 @@
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
+            {
+              "description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
             {
               "description": "(React: onEnabled) This event is dispatched after the menuitem is enabled",
               "name": "enabled",
@@ -19924,35 +19958,13 @@
             }
           ],
           "attributes": [
-            {
-              "name": "checked",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
-              "fieldName": "checked"
-            },
-            {
-              "name": "indicator",
-              "type": {
-                "text": "Indicator"
-              },
-              "description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
-              "default": "'checkbox'",
-              "fieldName": "indicator"
-            },
             {
               "name": "arrow-position",
               "type": {
                 "text": "ArrowPositions | undefined"
               },
               "description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
-              "fieldName": "arrowPosition",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
+              "fieldName": "arrowPosition"
             },
             {
               "name": "arrow-direction",
@@ -19960,11 +19972,7 @@
                 "text": "ArrowDirections | undefined"
               },
               "description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
-              "fieldName": "arrowDirection",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
+              "fieldName": "arrowDirection"
             },
             {
               "name": "name",
@@ -19972,11 +19980,7 @@
                 "text": "string | undefined"
               },
               "description": "The name attribute is used to identify the menu item when it is selected.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
+              "fieldName": "name"
             },
             {
               "name": "value",
@@ -19984,11 +19988,7 @@
                 "text": "string | undefined"
               },
               "description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
+              "fieldName": "value"
             },
             {
               "name": "disabled",
@@ -20104,11 +20104,11 @@
             }
           ],
           "superclass": {
-            "name": "MenuItem",
-            "module": "/src/components/menuitem/menuitem.component"
+            "name": "ListItem",
+            "module": "/src/components/listitem/listitem.component"
           },
-          "tagName": "mdc-menuitemcheckbox",
-          "jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item checkbox primary label.\n * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.\n * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.\n * @slot trailing-text-side-header - slot for menu item checkbox side header text.\n * @slot trailing-text-subline - slot for menu item checkbox subline text.\n * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n */",
+          "tagName": "mdc-menuitem",
+          "jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * **Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.\n * Consumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the menuitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)\n */",
           "customElement": true,
           "cssProperties": [
             {
@@ -20215,8 +20215,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "MenuItemCheckbox",
-            "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
+            "name": "MenuItem",
+            "module": "components/menuitem/menuitem.component.js"
           }
         }
       ]