@momentum-design/components 0.125.1 → 0.126.0

package/dist/custom-elements.json

@@ -5014,77 +5014,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bullet/bullet.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
-          "name": "Bullet",
-          "cssProperties": [
-            {
-              "description": "background color of the bullet",
-              "name": "--mdc-bullet-background-color"
-            },
-            {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
-            },
-            {
-              "description": "medium size value of the bullet",
-              "name": "--mdc-bullet-size-medium"
-            },
-            {
-              "description": "large size value of the bullet",
-              "name": "--mdc-bullet-size-large"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "privacy": "public",
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "attribute": "size",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-bullet",
-          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Bullet",
-            "module": "components/bullet/bullet.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",
@@ -5900,6 +5829,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bullet/bullet.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "name": "Bullet",
+          "cssProperties": [
+            {
+              "description": "background color of the bullet",
+              "name": "--mdc-bullet-background-color"
+            },
+            {
+              "description": "small size value of the bullet",
+              "name": "--mdc-bullet-size-small"
+            },
+            {
+              "description": "medium size value of the bullet",
+              "name": "--mdc-bullet-size-medium"
+            },
+            {
+              "description": "large size value of the bullet",
+              "name": "--mdc-bullet-size-large"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "privacy": "public",
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-bullet",
+          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Bullet",
+            "module": "components/bullet/bullet.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/buttongroup/buttongroup.component.js",
@@ -6040,12 +6040,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/buttonlink/buttonlink.component.js",
+      "path": "components/buttonsimple/buttonsimple.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix and postfix icons via slots.\n\n### Features:\n- Behaves like an link while visually resembling a button.\n- Supports slots for `prefix-icon` and `postfix-icon`.\n- Customizable size, color, and variant through attributes.\n- Inherits accessibility and keyboard interaction support from `mdc-linksimple`.",
-          "name": "ButtonLink",
+          "description": "`mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\nIt is used as an internal component and is not intended to be used directly by consumers.\nConsumers should use the `mdc-button` component instead.",
+          "name": "Buttonsimple",
           "cssProperties": [
             {
               "description": "Height for button size",
@@ -6062,124 +6062,18 @@
             {
               "description": "Text color of the button",
               "name": "--mdc-button-text-color"
-            },
-            {
-              "description": "Line height of the button text",
-              "name": "--mdc-button-line-height"
-            },
-            {
-              "description": "Size of the prefix icon",
-              "name": "--mdc-button-prefix-icon-size"
-            },
-            {
-              "description": "Size of the postfix icon",
-              "name": "--mdc-button-postfix-icon-size"
-            },
-            {
-              "description": "Border radius of the link.",
-              "name": "--mdc-link-border-radius",
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
-              }
-            },
-            {
-              "description": "Color of the link’s child content in the active state.",
-              "name": "--mdc-link-color-active",
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
-              }
-            },
-            {
-              "description": "Color of the link’s child content in the disabled state.",
-              "name": "--mdc-link-color-disabled",
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
-              }
-            },
-            {
-              "description": "Color of the link’s child content in the hover state.",
-              "name": "--mdc-link-color-hover",
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
-              }
-            },
-            {
-              "description": "Color of the link’s child content in the normal state.",
-              "name": "--mdc-link-color-normal",
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
-              }
-            },
-            {
-              "description": "Color of the inverted link’s child content in the active state.",
-              "name": "--mdc-link-inverted-color-active",
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
-              }
-            },
-            {
-              "description": "Color of the inverted link’s child content in the disabled state.",
-              "name": "--mdc-link-inverted-color-disabled",
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
-              }
-            },
-            {
-              "description": "Color of the inverted link’s child content in the hover state.",
-              "name": "--mdc-link-inverted-color-hover",
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
-              }
-            },
-            {
-              "description": "Color of the inverted link’s child content in the normal state.",
-              "name": "--mdc-link-inverted-color-normal",
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
-              }
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The anchor element that wraps the buttonlink content.",
-              "name": "anchor",
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
-              }
-            },
-            {
-              "description": "The prefix icon element.",
-              "name": "prefix-icon"
-            },
-            {
-              "description": "The slot containing the buttonlink text.",
-              "name": "button-text"
-            },
-            {
-              "description": "The postfix icon element.",
-              "name": "postfix-icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "size",
+              "name": "active",
               "type": {
-                "text": "PillButtonSize | IconButtonSize"
+                "text": "boolean | undefined"
               },
-              "description": "ButtonLink sizing is based on the buttonlink type.\n- **Pill buttonlink**: 40, 32, 28, 24.\n- **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon buttonlink can also be 20.",
-              "default": "32",
-              "attribute": "size",
+              "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
             },
             {
@@ -6188,181 +6082,217 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink 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 buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "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
             },
             {
-              "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The buttonlink element."
-                },
-                {
-                  "name": "softDisabled",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
-                }
-              ],
-              "description": "Sets the soft-disabled attribute for the buttonlink.\nWhen soft-disabled, the buttonlink looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
+              "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
             },
             {
-              "kind": "method",
-              "name": "renderAnchorContent",
-              "privacy": "protected"
+              "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
             },
             {
               "kind": "field",
-              "name": "prefixIcon",
+              "name": "ariaStateKey",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string | undefined"
               },
-              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
-              "attribute": "prefix-icon",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
+              "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
             },
             {
               "kind": "field",
-              "name": "postfixIcon",
+              "name": "type",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "ButtonType"
               },
-              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
-              "attribute": "postfix-icon",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
+              "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
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "name",
               "type": {
-                "text": "ButtonVariant"
+                "text": "string | undefined"
               },
-              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
-              "default": "primary",
-              "attribute": "variant",
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
+              "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
             },
             {
               "kind": "field",
-              "name": "color",
+              "name": "value",
               "type": {
-                "text": "ButtonColor"
+                "text": "string | undefined"
               },
-              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
-              "default": "default",
-              "attribute": "color",
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
+              "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
             },
             {
               "kind": "method",
-              "name": "setVariant",
+              "name": "executeAction",
+              "privacy": "protected"
+            },
+            {
+              "kind": "method",
+              "name": "setActive",
               "privacy": "protected",
               "parameters": [
                 {
-                  "name": "variant",
+                  "name": "element",
                   "type": {
-                    "text": "ButtonVariant"
+                    "text": "HTMLElement"
                   },
-                  "description": "The variant to set."
+                  "description": "The button element"
+                },
+                {
+                  "name": "active",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state of the element"
                 }
               ],
-              "description": "Sets the variant attribute for the button component.\nIf the provided variant is not included in the BUTTON_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT.",
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
+              "description": "Sets the ariaStateKey attributes based on the active state of the button."
             },
             {
               "kind": "method",
-              "name": "setColor",
-              "privacy": "protected",
+              "name": "setSoftDisabled",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "color",
+                  "name": "element",
                   "type": {
-                    "text": "ButtonColor"
+                    "text": "HTMLElement"
                   },
-                  "description": "The color to set."
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
                 }
               ],
-              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary button.",
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
+              "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."
             },
             {
               "kind": "method",
-              "name": "setSize",
-              "privacy": "protected",
+              "name": "setDisabled",
+              "privacy": "private",
               "parameters": [
                 {
-                  "name": "size",
+                  "name": "element",
                   "type": {
-                    "text": "PillButtonSize | IconButtonSize"
+                    "text": "HTMLElement"
                   },
-                  "description": "The size to set."
+                  "description": "The button element."
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state."
                 }
               ],
-              "description": "Sets the size attribute for the button component.\nValidates the size based on the button type (icon, pill, or tertiary).\nDefaults to DEFAULTS.SIZE if invalid.",
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
-              }
+              "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."
             },
             {
               "kind": "method",
-              "name": "inferButtonType",
-              "privacy": "protected",
-              "description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
+              "name": "triggerClickEvent",
+              "privacy": "private"
+            },
+            {
+              "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."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
               "parameters": [
                 {
-                  "description": "default slot of button",
-                  "name": "slot"
+                  "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."
+            },
+            {
+              "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."
+            },
+            {
+              "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": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "name": "AutoFocusOnMountMixin",
+                "module": "utils/mixins/AutoFocusOnMountMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "tabIndex",
               "type": {
-                "text": "string | null"
+                "text": "number"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
               }
             },
             {
@@ -6379,7 +6309,517 @@
                 "name": "DisabledMixin",
                 "module": "utils/mixins/DisabledMixin.js"
               }
-            },
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the button is clicked.",
+              "name": "click",
+              "reactName": "onClick"
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
+            },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
+              "name": "keyup",
+              "reactName": "onKeyUp"
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "fieldName": "active"
+            },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "fieldName": "size"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "RoleType"
+              },
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "fieldName": "role"
+            },
+            {
+              "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "fieldName": "ariaStateKey"
+            },
+            {
+              "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"
+            },
+            {
+              "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"
+            },
+            {
+              "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"
+            },
+            {
+              "name": "auto-focus-on-mount",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "fieldName": "autoFocusOnMount",
+              "inheritedFrom": {
+                "name": "AutoFocusOnMountMixin",
+                "module": "src/utils/mixins/AutoFocusOnMountMixin.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": "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"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "AutoFocusOnMountMixin",
+              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
+            },
+            {
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
+            },
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-buttonsimple",
+          "jsDoc": "/**\n * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\n * It is used as an internal component and is not intended to be used directly by consumers.\n * Consumers should use the `mdc-button` component instead.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @tagname mdc-buttonsimple\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background color of the button\n * @cssproperty --mdc-button-border-color - Borer color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Buttonsimple",
+            "module": "components/buttonsimple/buttonsimple.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/buttonlink/buttonlink.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix and postfix icons via slots.\n\n### Features:\n- Behaves like an link while visually resembling a button.\n- Supports slots for `prefix-icon` and `postfix-icon`.\n- Customizable size, color, and variant through attributes.\n- Inherits accessibility and keyboard interaction support from `mdc-linksimple`.",
+          "name": "ButtonLink",
+          "cssProperties": [
+            {
+              "description": "Height for button size",
+              "name": "--mdc-button-height"
+            },
+            {
+              "description": "Background color of the button",
+              "name": "--mdc-button-background"
+            },
+            {
+              "description": "Borer color of the button",
+              "name": "--mdc-button-border-color"
+            },
+            {
+              "description": "Text color of the button",
+              "name": "--mdc-button-text-color"
+            },
+            {
+              "description": "Line height of the button text",
+              "name": "--mdc-button-line-height"
+            },
+            {
+              "description": "Size of the prefix icon",
+              "name": "--mdc-button-prefix-icon-size"
+            },
+            {
+              "description": "Size of the postfix icon",
+              "name": "--mdc-button-postfix-icon-size"
+            },
+            {
+              "description": "Border radius of the link.",
+              "name": "--mdc-link-border-radius",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the link’s child content in the active state.",
+              "name": "--mdc-link-color-active",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the link’s child content in the disabled state.",
+              "name": "--mdc-link-color-disabled",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the link’s child content in the hover state.",
+              "name": "--mdc-link-color-hover",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the link’s child content in the normal state.",
+              "name": "--mdc-link-color-normal",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the inverted link’s child content in the active state.",
+              "name": "--mdc-link-inverted-color-active",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the inverted link’s child content in the disabled state.",
+              "name": "--mdc-link-inverted-color-disabled",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the inverted link’s child content in the hover state.",
+              "name": "--mdc-link-inverted-color-hover",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "Color of the inverted link’s child content in the normal state.",
+              "name": "--mdc-link-inverted-color-normal",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The anchor element that wraps the buttonlink content.",
+              "name": "anchor",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "The prefix icon element.",
+              "name": "prefix-icon"
+            },
+            {
+              "description": "The slot containing the buttonlink text.",
+              "name": "button-text"
+            },
+            {
+              "description": "The postfix icon element.",
+              "name": "postfix-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "PillButtonSize | IconButtonSize"
+              },
+              "description": "ButtonLink sizing is based on the buttonlink type.\n- **Pill buttonlink**: 40, 32, 28, 24.\n- **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon buttonlink can also be 20.",
+              "default": "32",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink 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 buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The buttonlink element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
+                }
+              ],
+              "description": "Sets the soft-disabled attribute for the buttonlink.\nWhen soft-disabled, the buttonlink looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
+            },
+            {
+              "kind": "method",
+              "name": "renderAnchorContent",
+              "privacy": "protected"
+            },
+            {
+              "kind": "field",
+              "name": "prefixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
+              "attribute": "prefix-icon",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "postfixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
+              "attribute": "postfix-icon",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ButtonVariant"
+              },
+              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
+              "default": "primary",
+              "attribute": "variant",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "ButtonColor"
+              },
+              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
+              "default": "default",
+              "attribute": "color",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setVariant",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "variant",
+                  "type": {
+                    "text": "ButtonVariant"
+                  },
+                  "description": "The variant to set."
+                }
+              ],
+              "description": "Sets the variant attribute for the button component.\nIf the provided variant is not included in the BUTTON_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT.",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setColor",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "color",
+                  "type": {
+                    "text": "ButtonColor"
+                  },
+                  "description": "The color to set."
+                }
+              ],
+              "description": "Sets the color attribute for the button.\nDefaults to DEFAULTS.COLOR if invalid or for tertiary button.",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setSize",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "PillButtonSize | IconButtonSize"
+                  },
+                  "description": "The size to set."
+                }
+              ],
+              "description": "Sets the size attribute for the button component.\nValidates the size based on the button type (icon, pill, or tertiary).\nDefaults to DEFAULTS.SIZE if invalid.",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "inferButtonType",
+              "privacy": "protected",
+              "description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
+              "parameters": [
+                {
+                  "description": "default slot of button",
+                  "name": "slot"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.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": "inline",
@@ -6850,447 +7290,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/buttonsimple/buttonsimple.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\nIt is used as an internal component and is not intended to be used directly by consumers.\nConsumers should use the `mdc-button` component instead.",
-          "name": "Buttonsimple",
-          "cssProperties": [
-            {
-              "description": "Height for button size",
-              "name": "--mdc-button-height"
-            },
-            {
-              "description": "Background color of the button",
-              "name": "--mdc-button-background"
-            },
-            {
-              "description": "Borer color of the button",
-              "name": "--mdc-button-border-color"
-            },
-            {
-              "description": "Text color of the button",
-              "name": "--mdc-button-text-color"
-            }
-          ],
-          "members": [
-            {
-              "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
-            },
-            {
-              "kind": "field",
-              "name": "softDisabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
-              "reflects": true
-            },
-            {
-              "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
-            },
-            {
-              "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
-            },
-            {
-              "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
-            },
-            {
-              "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
-            },
-            {
-              "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
-            },
-            {
-              "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
-            },
-            {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected"
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private"
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "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."
-            },
-            {
-              "kind": "field",
-              "name": "autoFocusOnMount",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "attribute": "auto-focus-on-mount",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "utils/mixins/AutoFocusOnMountMixin.js"
-              }
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "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"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the button is clicked.",
-              "name": "click",
-              "reactName": "onClick"
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
-            },
-            {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
-              "name": "keyup",
-              "reactName": "onKeyUp"
-            },
-            {
-              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "fieldName": "active"
-            },
-            {
-              "name": "soft-disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "fieldName": "softDisabled"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "fieldName": "size"
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "RoleType"
-              },
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "fieldName": "role"
-            },
-            {
-              "name": "ariaStateKey",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "fieldName": "ariaStateKey"
-            },
-            {
-              "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"
-            },
-            {
-              "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"
-            },
-            {
-              "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"
-            },
-            {
-              "name": "auto-focus-on-mount",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "fieldName": "autoFocusOnMount",
-              "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "src/utils/mixins/AutoFocusOnMountMixin.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": "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"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "AutoFocusOnMountMixin",
-              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
-            },
-            {
-              "name": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
-            },
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-buttonsimple",
-          "jsDoc": "/**\n * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.\n * It is used as an internal component and is not intended to be used directly by consumers.\n * Consumers should use the `mdc-button` component instead.\n *\n * @event click - (React: onClick) This event is dispatched when the button is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the button.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the button.\n * @event focus - (React: onFocus) This event is dispatched when the button receives focus.\n *\n * @tagname mdc-buttonsimple\n *\n * @cssproperty --mdc-button-height - Height for button size\n * @cssproperty --mdc-button-background - Background color of the button\n * @cssproperty --mdc-button-border-color - Borer color of the button\n * @cssproperty --mdc-button-text-color - Text color of the button\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Buttonsimple",
-            "module": "components/buttonsimple/buttonsimple.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/card/card.component.js",
+      "path": "components/card/card.component.js",
       "declarations": [
         {
           "kind": "class",
@@ -23856,13 +23856,119 @@
     },
     {
       "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",
+          "cssProperties": [
+            {
+              "description": "Controls the padding on the left and right of the menuitemcheckbox.",
+              "name": "--mdc-listitem-padding-left-and-right"
+            },
+            {
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-listitem-default-background-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-listitem-background-color-hover",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the background color when pressed.",
+              "name": "--mdc-listitem-background-color-active",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the primary label, side header and subline text slot color.",
+              "name": "--mdc-listitem-primary-label-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the secondary and tertiary label text slot color.",
+              "name": "--mdc-listitem-secondary-label-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the disabled color.",
+              "name": "--mdc-listitem-disabled-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of column gap.",
+              "name": "--mdc-listitem-column-gap",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of padding left and right.",
+              "name": "--mdc-listitem-padding-left-right",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of padding top and bottom.",
+              "name": "--mdc-listitem-padding-top-bottom",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the cursor.",
+              "name": "--mdc-listitem-cursor",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the width of the list item.",
+              "name": "--mdc-listitem-width",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the height of the list item.",
+              "name": "--mdc-listitem-height",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            }
+          ],
           "cssParts": [
+            {
+              "description": "Allows customization of the checkmark icon.",
+              "name": "checkmark-icon"
+            },
             {
               "description": "Allows customization of the leading part.",
               "name": "leading",
@@ -23873,7 +23979,11 @@
             },
             {
               "description": "Allows customization of leading arrow icon.",
-              "name": "leading-arrow"
+              "name": "leading-arrow",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
             },
             {
               "description": "Allows customization of the leading text part.",
@@ -23893,7 +24003,11 @@
             },
             {
               "description": "Allows customization of trailing arrow icon.",
-              "name": "trailing-arrow"
+              "name": "trailing-arrow",
+              "inheritedFrom": {
+                "name": "MenuItem",
+                "module": "src/components/menuitem/menuitem.component.ts"
+              }
             },
             {
               "description": "Allows customization of the trailing text part.",
@@ -23906,7 +24020,7 @@
           ],
           "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",
@@ -23914,7 +24028,7 @@
               }
             },
             {
-              "description": "slot for menu item primary label.",
+              "description": "slot for menu item checkbox primary label.",
               "name": "leading-text-primary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -23922,7 +24036,7 @@
               }
             },
             {
-              "description": "slot for menu item secondary label.",
+              "description": "slot for menu item checkbox secondary label.",
               "name": "leading-text-secondary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -23930,7 +24044,7 @@
               }
             },
             {
-              "description": "slot for menu item tertiary label.",
+              "description": "slot for menu item checkbox tertiary label.",
               "name": "leading-text-tertiary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -23938,7 +24052,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",
@@ -23946,7 +24060,7 @@
               }
             },
             {
-              "description": "slot for menu item subline text.",
+              "description": "slot for menu item checkbox subline text.",
               "name": "trailing-text-subline",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -23954,7 +24068,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",
@@ -23971,6 +24085,93 @@
             }
           ],
           "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 or soft-disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles checked if uncontrolled, and dispatches the 'change' event."
+            },
+            {
+              "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": "controlTypeProviderContext",
+              "privacy": "private",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "utils/mixins/ControlTypeMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "controlType",
+              "type": {
+                "text": "ControlType | undefined"
+              },
+              "privacy": "public",
+              "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
+              "default": "undefined",
+              "attribute": "control-type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "utils/mixins/ControlTypeMixin.js"
+              }
+            },
             {
               "kind": "field",
               "name": "arrowPosition",
@@ -23979,7 +24180,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",
@@ -23989,7 +24194,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",
@@ -23999,7 +24208,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",
@@ -24009,7 +24222,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",
@@ -24053,7 +24270,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",
@@ -24384,7 +24605,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": {
@@ -24393,27 +24622,27 @@
               }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
+              "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: onKeyUp) This event is dispatched when a key is released on the menuitem.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
               }
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the menuitem.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
               "inheritedFrom": {
                 "name": "ListItem",
                 "module": "src/components/listitem/listitem.component.ts"
@@ -24457,13 +24686,48 @@
             }
           ],
           "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": "control-type",
+              "type": {
+                "text": "ControlType | undefined"
+              },
+              "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
+              "default": "undefined",
+              "fieldName": "controlType",
+              "inheritedFrom": {
+                "name": "ControlTypeMixin",
+                "module": "src/utils/mixins/ControlTypeMixin.ts"
+              }
+            },
             {
               "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",
@@ -24471,7 +24735,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",
@@ -24479,7 +24747,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",
@@ -24487,7 +24759,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",
@@ -24628,111 +24904,19 @@
               }
             }
           ],
-          "superclass": {
-            "name": "ListItem",
-            "module": "/src/components/listitem/listitem.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 *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-arrow - Allows customization of leading arrow icon.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-arrow - Allows customization of trailing arrow icon.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
-          "customElement": true,
-          "cssProperties": [
-            {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-listitem-default-background-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-listitem-background-color-hover",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the background color when pressed.",
-              "name": "--mdc-listitem-background-color-active",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the primary label, side header and subline text slot color.",
-              "name": "--mdc-listitem-primary-label-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the secondary and tertiary label text slot color.",
-              "name": "--mdc-listitem-secondary-label-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the disabled color.",
-              "name": "--mdc-listitem-disabled-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of column gap.",
-              "name": "--mdc-listitem-column-gap",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of padding left and right.",
-              "name": "--mdc-listitem-padding-left-right",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of padding top and bottom.",
-              "name": "--mdc-listitem-padding-top-bottom",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the cursor.",
-              "name": "--mdc-listitem-cursor",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the width of the list item.",
-              "name": "--mdc-listitem-width",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
+          "mixins": [
             {
-              "description": "Allows customization of the height of the list item.",
-              "name": "--mdc-listitem-height",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
+              "name": "ControlTypeMixin",
+              "module": "/src/utils/mixins/ControlTypeMixin"
             }
-          ]
+          ],
+          "superclass": {
+            "name": "MenuItem",
+            "module": "/src/components/menuitem/menuitem.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 *\n * @cssproperty --mdc-listitem-padding-left-and-right - Controls the padding on the left and right of the menuitemcheckbox.\n *\n * @csspart checkmark-icon - Allows customization of the checkmark icon.\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-arrow - Allows customization of leading arrow icon.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-arrow - Allows customization of trailing arrow icon.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -24740,127 +24924,21 @@
           "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",
-          "cssProperties": [
-            {
-              "description": "Controls the padding on the left and right of the menuitemcheckbox.",
-              "name": "--mdc-listitem-padding-left-and-right"
-            },
-            {
-              "description": "Allows customization of the default background color.",
-              "name": "--mdc-listitem-default-background-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the background color on hover.",
-              "name": "--mdc-listitem-background-color-hover",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the background color when pressed.",
-              "name": "--mdc-listitem-background-color-active",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the primary label, side header and subline text slot color.",
-              "name": "--mdc-listitem-primary-label-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the secondary and tertiary label text slot color.",
-              "name": "--mdc-listitem-secondary-label-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the disabled color.",
-              "name": "--mdc-listitem-disabled-color",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of column gap.",
-              "name": "--mdc-listitem-column-gap",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of padding left and right.",
-              "name": "--mdc-listitem-padding-left-right",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of padding top and bottom.",
-              "name": "--mdc-listitem-padding-top-bottom",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the cursor.",
-              "name": "--mdc-listitem-cursor",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the width of the list item.",
-              "name": "--mdc-listitem-width",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            },
-            {
-              "description": "Allows customization of the height of the list item.",
-              "name": "--mdc-listitem-height",
-              "inheritedFrom": {
-                "name": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
-              }
-            }
-          ],
+          "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",
           "cssParts": [
-            {
-              "description": "Allows customization of the checkmark icon.",
-              "name": "checkmark-icon"
-            },
             {
               "description": "Allows customization of the leading part.",
               "name": "leading",
@@ -24871,11 +24949,7 @@
             },
             {
               "description": "Allows customization of leading arrow icon.",
-              "name": "leading-arrow",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
+              "name": "leading-arrow"
             },
             {
               "description": "Allows customization of the leading text part.",
@@ -24895,11 +24969,7 @@
             },
             {
               "description": "Allows customization of trailing arrow icon.",
-              "name": "trailing-arrow",
-              "inheritedFrom": {
-                "name": "MenuItem",
-                "module": "src/components/menuitem/menuitem.component.ts"
-              }
+              "name": "trailing-arrow"
             },
             {
               "description": "Allows customization of the trailing text part.",
@@ -24912,7 +24982,7 @@
           ],
           "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",
@@ -24920,7 +24990,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox primary label.",
+              "description": "slot for menu item primary label.",
               "name": "leading-text-primary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -24928,7 +24998,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox secondary label.",
+              "description": "slot for menu item secondary label.",
               "name": "leading-text-secondary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -24936,7 +25006,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox tertiary label.",
+              "description": "slot for menu item tertiary label.",
               "name": "leading-text-tertiary-label",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -24944,7 +25014,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",
@@ -24952,7 +25022,7 @@
               }
             },
             {
-              "description": "slot for menu item checkbox subline text.",
+              "description": "slot for menu item subline text.",
               "name": "trailing-text-subline",
               "inheritedFrom": {
                 "name": "ListItem",
@@ -24960,7 +25030,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",
@@ -24977,93 +25047,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 or soft-disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles checked if uncontrolled, and dispatches the 'change' event."
-            },
-            {
-              "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": "controlTypeProviderContext",
-              "privacy": "private",
-              "readonly": true,
-              "inheritedFrom": {
-                "name": "ControlTypeMixin",
-                "module": "utils/mixins/ControlTypeMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "controlType",
-              "type": {
-                "text": "ControlType | undefined"
-              },
-              "privacy": "public",
-              "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
-              "default": "undefined",
-              "attribute": "control-type",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "ControlTypeMixin",
-                "module": "utils/mixins/ControlTypeMixin.js"
-              }
-            },
             {
               "kind": "field",
               "name": "arrowPosition",
@@ -25072,11 +25055,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",
@@ -25086,11 +25065,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",
@@ -25100,11 +25075,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",
@@ -25114,11 +25085,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",
@@ -25162,11 +25129,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",
@@ -25497,15 +25460,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": {
@@ -25513,15 +25468,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",
@@ -25540,6 +25486,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",
@@ -25578,48 +25533,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": "control-type",
-              "type": {
-                "text": "ControlType | undefined"
-              },
-              "description": "Indicates whether the component is controlled or uncontrolled.\n- 'controlled' it will not handle any interaction itself, e.g. toggling a checkbox.\n- 'uncontrolled' it will handle interactions\n- undefined it will get the value from controltypeprovider, or default to 'uncontrolled'",
-              "default": "undefined",
-              "fieldName": "controlType",
-              "inheritedFrom": {
-                "name": "ControlTypeMixin",
-                "module": "src/utils/mixins/ControlTypeMixin.ts"
-              }
-            },
             {
               "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",
@@ -25627,11 +25547,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",
@@ -25639,11 +25555,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",
@@ -25651,11 +25563,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",
@@ -25796,19 +25704,111 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "ControlTypeMixin",
-              "module": "/src/utils/mixins/ControlTypeMixin"
-            }
-          ],
           "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 *\n * @cssproperty --mdc-listitem-padding-left-and-right - Controls the padding on the left and right of the menuitemcheckbox.\n *\n * @csspart checkmark-icon - Allows customization of the checkmark icon.\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-arrow - Allows customization of leading arrow icon.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-arrow - Allows customization of trailing arrow icon.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
-          "customElement": true
+          "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 *\n * @csspart leading - Allows customization of the leading part.\n * @csspart leading-arrow - Allows customization of leading arrow icon.\n * @csspart leading-text - Allows customization of the leading text part.\n * @csspart trailing - Allows customization of the trailing part.\n * @csspart trailing-arrow - Allows customization of trailing arrow icon.\n * @csspart trailing-text - Allows customization of the trailing text part.\n */",
+          "customElement": true,
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-listitem-default-background-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-listitem-background-color-hover",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the background color when pressed.",
+              "name": "--mdc-listitem-background-color-active",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the primary label, side header and subline text slot color.",
+              "name": "--mdc-listitem-primary-label-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the secondary and tertiary label text slot color.",
+              "name": "--mdc-listitem-secondary-label-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the disabled color.",
+              "name": "--mdc-listitem-disabled-color",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of column gap.",
+              "name": "--mdc-listitem-column-gap",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of padding left and right.",
+              "name": "--mdc-listitem-padding-left-right",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of padding top and bottom.",
+              "name": "--mdc-listitem-padding-top-bottom",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the cursor.",
+              "name": "--mdc-listitem-cursor",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the width of the list item.",
+              "name": "--mdc-listitem-width",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "Allows customization of the height of the list item.",
+              "name": "--mdc-listitem-height",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            }
+          ]
         }
       ],
       "exports": [
@@ -25816,8 +25816,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "MenuItemCheckbox",
-            "module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
+            "name": "MenuItem",
+            "module": "components/menuitem/menuitem.component.js"
           }
         }
       ]
@@ -38311,6 +38311,102 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/responsivesettingsprovider/responsivesettingsprovider.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-responsivesettingsprovider` is a provider component that supplies responsive settings\ncontext to its child components.\n\nThis component does not make any assumptions about how the values are determined. Values can be set\nbased on media queries or other device detection mechanisms.This way consumer can mix and match\ndifferent settings depending on their target devices and use cases.\n\nFor example, when the device has table screen size/resolution, but because it is fixed dialog like\npopovers provide better user experience.\n\n## Responsive settings\n\n### Media\n\nGeneric media type to enforce responsive behavior in child components.\nConsumer component can use the media type from the context or\njust use CSS selector like [media=\"mobile\"] to apply responsive styles.\n\nIt is \"unknown\" by default so components can fall back to there default behavior.\n\n### Popover Positioning\n\nBy default, popovers are positioned close to the trigger element. But on small screens (e.g.: mobile devices),\nit is often better to show popovers/menus at the center of the screen like dialogs.\n\n### Force Fullscreen Dialog\n\nSome components like dialogs can be shown in fullscreen mode on small screens for better user experience.",
+          "name": "ResponsiveSettingsProvider",
+          "members": [
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Context object of the ResponsiveSettingsProvider, to be consumed by child components",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "forceFullscreenDialog",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether dialogs should be forced to fullscreen mode.",
+              "attribute": "force-fullscreen-dialog",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "popoverPositioning",
+              "description": "The popover positioning for responsive settings.",
+              "default": "'float'",
+              "attribute": "popover-positioning",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "media",
+              "description": "The media type for responsive settings.",
+              "default": "'unknown'",
+              "attribute": "media",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "force-fullscreen-dialog",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Determines whether dialogs should be forced to fullscreen mode.",
+              "fieldName": "forceFullscreenDialog"
+            },
+            {
+              "name": "popover-positioning",
+              "description": "The popover positioning for responsive settings.",
+              "default": "'float'",
+              "fieldName": "popoverPositioning"
+            },
+            {
+              "name": "media",
+              "description": "The media type for responsive settings.",
+              "default": "'unknown'",
+              "fieldName": "media"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-responsivesettingsprovider",
+          "jsDoc": "/**\n * `mdc-responsivesettingsprovider` is a provider component that supplies responsive settings\n * context to its child components.\n *\n * This component does not make any assumptions about how the values are determined. Values can be set\n * based on media queries or other device detection mechanisms.This way consumer can mix and match\n * different settings depending on their target devices and use cases.\n *\n * For example, when the device has table screen size/resolution, but because it is fixed dialog like\n * popovers provide better user experience.\n *\n * ## Responsive settings\n *\n * ### Media\n *\n * Generic media type to enforce responsive behavior in child components.\n * Consumer component can use the media type from the context or\n * just use CSS selector like [media=\"mobile\"] to apply responsive styles.\n *\n * It is \"unknown\" by default so components can fall back to there default behavior.\n *\n * ### Popover Positioning\n *\n * By default, popovers are positioned close to the trigger element. But on small screens (e.g.: mobile devices),\n * it is often better to show popovers/menus at the center of the screen like dialogs.\n *\n * ### Force Fullscreen Dialog\n *\n * Some components like dialogs can be shown in fullscreen mode on small screens for better user experience.\n *\n * @tagname mdc-responsivesettingsprovider\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ResponsiveSettingsProvider",
+            "module": "components/responsivesettingsprovider/responsivesettingsprovider.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/screenreaderannouncer/screenreaderannouncer.component.js",
@@ -44779,6 +44875,191 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/stepper/stepper.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.\nIt provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.",
+          "name": "Stepper",
+          "slots": [
+            {
+              "description": "Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "OrientationType"
+              },
+              "description": "The orientation of the stepperconnector (vertical or horizontal)",
+              "default": "\"horizontal\"",
+              "attribute": "orientation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "VariantType"
+              },
+              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
+              "default": "'inline'",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Get the context for the stepper component.\nThis context provides the orientation and variant for the stepper items and connectors.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "orientation",
+              "type": {
+                "text": "OrientationType"
+              },
+              "description": "The orientation of the stepperconnector (vertical or horizontal)",
+              "default": "\"horizontal\"",
+              "fieldName": "orientation"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "VariantType"
+              },
+              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
+              "default": "'inline'",
+              "fieldName": "variant"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-stepper",
+          "jsDoc": "/**\n * Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.\n * It provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.\n *\n * @tagname mdc-stepper\n *\n * @slot default - Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.\n *\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Stepper",
+            "module": "components/stepper/stepper.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/stepperconnector/stepperconnector.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "StepperConnector component visually represents the connection between two stepper items.\nIndicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\nThey are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.",
+          "name": "StepperConnector",
+          "cssProperties": [
+            {
+              "description": "Background color for the complete connector",
+              "name": "--mdc-stepperconnector-complete-background"
+            },
+            {
+              "description": "Background color for the incomplete connector",
+              "name": "--mdc-stepperconnector-incomplete-background"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The main connector line between steps",
+              "name": "connector"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "status",
+              "type": {
+                "text": "StatusType"
+              },
+              "description": "The status of the connector (complete or incomplete)",
+              "default": "\"incomplete\"",
+              "attribute": "status",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "OrientationType"
+              },
+              "description": "The orientation of the connector (vertical or horizontal)",
+              "default": "\"horizontal\"",
+              "attribute": "orientation",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "status",
+              "type": {
+                "text": "StatusType"
+              },
+              "description": "The status of the connector (complete or incomplete)",
+              "default": "\"incomplete\"",
+              "fieldName": "status"
+            },
+            {
+              "name": "orientation",
+              "type": {
+                "text": "OrientationType"
+              },
+              "description": "The orientation of the connector (vertical or horizontal)",
+              "default": "\"horizontal\"",
+              "fieldName": "orientation"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-stepperconnector",
+          "jsDoc": "/**\n * StepperConnector component visually represents the connection between two stepper items.\n * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\n * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.\n *\n * @tagname mdc-stepperconnector\n *\n * @csspart connector - The main connector line between steps\n *\n * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector\n * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "StepperConnector",
+            "module": "components/stepperconnector/stepperconnector.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/statictoggle/statictoggle.component.js",
@@ -44977,30 +45258,69 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/stepper/stepper.component.js",
+      "path": "components/stepperitem/stepperitem.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.\nIt provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.",
-          "name": "Stepper",
-          "slots": [
+          "description": "stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\nIt can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\nThe component supports various visual styles and can be customized with labels, help text, and step numbers.\n\nThis is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\nMake sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n\nAdditionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.",
+          "name": "StepperItem",
+          "cssProperties": [
             {
-              "description": "Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.",
-              "name": "default"
+              "description": "The background color of the status container.",
+              "name": "--mdc-stepperitem-status-container-background"
+            },
+            {
+              "description": "The border color of the status container.",
+              "name": "--mdc-stepperitem-status-container-border-color"
+            },
+            {
+              "description": "The color of the label text.",
+              "name": "--mdc-stepperitem-label-color"
+            },
+            {
+              "description": "The color of the optional label text.",
+              "name": "--mdc-stepperitem-help-text-color"
+            },
+            {
+              "description": "The background color of the label container.",
+              "name": "--mdc-stepperitem-label-container-background"
             }
           ],
-          "members": [
+          "cssParts": [
             {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "OrientationType"
-              },
-              "description": "The orientation of the stepperconnector (vertical or horizontal)",
-              "default": "\"horizontal\"",
-              "attribute": "orientation",
-              "reflects": true
+              "description": "The container for the status icon or step number.",
+              "name": "status-container"
             },
+            {
+              "description": "The container for the label and help text.",
+              "name": "label-container"
+            },
+            {
+              "description": "The container for the help text and error icon when applicable.",
+              "name": "help-text-container"
+            },
+            {
+              "description": "The icon representing the status of the stepper item.",
+              "name": "status-icon"
+            },
+            {
+              "description": "The text representing the step number.",
+              "name": "step-number"
+            },
+            {
+              "description": "The text representing the label of the stepper item.",
+              "name": "label"
+            },
+            {
+              "description": "The text providing additional information about the stepper item.",
+              "name": "help-text"
+            },
+            {
+              "description": "The icon representing an error in the stepper item.",
+              "name": "help-icon"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
               "name": "variant",
@@ -45014,34 +45334,140 @@
             },
             {
               "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "description": "Get the context for the stepper component.\nThis context provides the orientation and variant for the stepper items and connectors.",
-              "readonly": true
+              "name": "status",
+              "type": {
+                "text": "StatusType"
+              },
+              "description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
+              "default": "'not-started'",
+              "attribute": "status",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
+              "default": "''",
+              "attribute": "help-text",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "stepNumber",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
+              "default": "''",
+              "attribute": "step-number",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is pressed.\nIf the key is 'Enter', the stepperitem is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the stepperitem's default is prevent to avoid scrolling etc in the host application."
+            },
+            {
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "description": "Triggers a click event on the stepper item."
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keyup event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is clicked.\nIf the key is 'Space', the stepperitem is pressed. The native HTML button works in the same way."
+            },
+            {
+              "kind": "method",
+              "name": "renderStatusIcon",
+              "privacy": "private",
+              "description": "Renders the status icon based on the current status of the stepper item.\n- If the status is `completed`, it renders a check icon.\n- If the status is `current` or `error-current`, it renders a pencil icon.\n- If the status is `not-started` or `error-incomplete`, it renders the step number.\n- If the status is anything else, it renders nothing.",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpText",
+              "privacy": "private",
+              "description": "Renders the help text for the stepper item.\nIf the `helpText` property is not set, it returns nothing.",
+              "return": {
+                "type": {
+                  "text": ""
                 }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
               },
-              "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
+              }
             }
           ],
-          "attributes": [
+          "events": [
             {
-              "name": "orientation",
-              "type": {
-                "text": "OrientationType"
-              },
-              "description": "The orientation of the stepperconnector (vertical or horizontal)",
-              "default": "\"horizontal\"",
-              "fieldName": "orientation"
+              "description": "(React: onClick) This event is dispatched when the stepperitem is clicked.",
+              "name": "click",
+              "reactName": "onClick"
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
             },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the stepperitem.",
+              "name": "keyup",
+              "reactName": "onKeyUp"
+            }
+          ],
+          "attributes": [
             {
               "name": "variant",
               "type": {
@@ -45050,102 +45476,69 @@
               "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
               "default": "'inline'",
               "fieldName": "variant"
-            }
-          ],
-          "superclass": {
-            "name": "Provider",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-stepper",
-          "jsDoc": "/**\n * Stepper component, which orchestrates stepperitem and stepperconnector components, is a wrapper for the stepper functionality.\n * It provides the context for the stepper items and connectors, allowing them to adapt to the stepper's orientation and variant.\n *\n * @tagname mdc-stepper\n *\n * @slot default - Pass the list of `mdc-stepperitem` and `mdc-stepperconnector` elements to be rendered inside the stepper.\n *\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Stepper",
-            "module": "components/stepper/stepper.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/stepperconnector/stepperconnector.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "StepperConnector component visually represents the connection between two stepper items.\nIndicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\nThey are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.",
-          "name": "StepperConnector",
-          "cssProperties": [
-            {
-              "description": "Background color for the complete connector",
-              "name": "--mdc-stepperconnector-complete-background"
             },
             {
-              "description": "Background color for the incomplete connector",
-              "name": "--mdc-stepperconnector-incomplete-background"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The main connector line between steps",
-              "name": "connector"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
               "name": "status",
               "type": {
                 "text": "StatusType"
               },
-              "description": "The status of the connector (complete or incomplete)",
-              "default": "\"incomplete\"",
-              "attribute": "status",
-              "reflects": true
+              "description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
+              "default": "'not-started'",
+              "fieldName": "status"
             },
             {
-              "kind": "field",
-              "name": "orientation",
+              "name": "label",
               "type": {
-                "text": "OrientationType"
+                "text": "string"
               },
-              "description": "The orientation of the connector (vertical or horizontal)",
-              "default": "\"horizontal\"",
-              "attribute": "orientation",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "default": "''",
+              "description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
+              "fieldName": "label"
+            },
             {
-              "name": "status",
+              "name": "help-text",
               "type": {
-                "text": "StatusType"
+                "text": "string | undefined"
               },
-              "description": "The status of the connector (complete or incomplete)",
-              "default": "\"incomplete\"",
-              "fieldName": "status"
+              "description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
+              "default": "''",
+              "fieldName": "helpText"
             },
             {
-              "name": "orientation",
+              "name": "step-number",
               "type": {
-                "text": "OrientationType"
+                "text": "number | undefined"
               },
-              "description": "The orientation of the connector (vertical or horizontal)",
-              "default": "\"horizontal\"",
-              "fieldName": "orientation"
+              "description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
+              "default": "''",
+              "fieldName": "stepNumber"
+            },
+            {
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-stepperconnector",
-          "jsDoc": "/**\n * StepperConnector component visually represents the connection between two stepper items.\n * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\n * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.\n *\n * @tagname mdc-stepperconnector\n *\n * @csspart connector - The main connector line between steps\n *\n * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector\n * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector\n */",
+          "tagName": "mdc-stepperitem",
+          "jsDoc": "/**\n * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\n * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\n * The component supports various visual styles and can be customized with labels, help text, and step numbers.\n *\n * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\n * Make sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n *\n * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-stepperitem\n *\n * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.\n *\n * @csspart status-container - The container for the status icon or step number.\n * @csspart label-container - The container for the label and help text.\n * @csspart help-text-container - The container for the help text and error icon when applicable.\n * @csspart status-icon - The icon representing the status of the stepper item.\n * @csspart step-number - The text representing the step number.\n * @csspart label - The text representing the label of the stepper item.\n * @csspart help-text - The text providing additional information about the stepper item.\n * @csspart help-icon - The icon representing an error in the stepper item.\n *\n * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.\n * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.\n * @cssproperty --mdc-stepperitem-label-color - The color of the label text.\n * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.\n * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.\n */",
           "customElement": true
         }
       ],
@@ -45154,8 +45547,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "StepperConnector",
-            "module": "components/stepperconnector/stepperconnector.component.js"
+            "name": "StepperItem",
+            "module": "components/stepperitem/stepperitem.component.js"
           }
         }
       ]
@@ -46177,303 +46570,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/stepperitem/stepperitem.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\nIt can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\nThe component supports various visual styles and can be customized with labels, help text, and step numbers.\n\nThis is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\nMake sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n\nAdditionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.",
-          "name": "StepperItem",
-          "cssProperties": [
-            {
-              "description": "The background color of the status container.",
-              "name": "--mdc-stepperitem-status-container-background"
-            },
-            {
-              "description": "The border color of the status container.",
-              "name": "--mdc-stepperitem-status-container-border-color"
-            },
-            {
-              "description": "The color of the label text.",
-              "name": "--mdc-stepperitem-label-color"
-            },
-            {
-              "description": "The color of the optional label text.",
-              "name": "--mdc-stepperitem-help-text-color"
-            },
-            {
-              "description": "The background color of the label container.",
-              "name": "--mdc-stepperitem-label-container-background"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The container for the status icon or step number.",
-              "name": "status-container"
-            },
-            {
-              "description": "The container for the label and help text.",
-              "name": "label-container"
-            },
-            {
-              "description": "The container for the help text and error icon when applicable.",
-              "name": "help-text-container"
-            },
-            {
-              "description": "The icon representing the status of the stepper item.",
-              "name": "status-icon"
-            },
-            {
-              "description": "The text representing the step number.",
-              "name": "step-number"
-            },
-            {
-              "description": "The text representing the label of the stepper item.",
-              "name": "label"
-            },
-            {
-              "description": "The text providing additional information about the stepper item.",
-              "name": "help-text"
-            },
-            {
-              "description": "The icon representing an error in the stepper item.",
-              "name": "help-icon"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "VariantType"
-              },
-              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
-              "default": "'inline'",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "status",
-              "type": {
-                "text": "StatusType"
-              },
-              "description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
-              "default": "'not-started'",
-              "attribute": "status",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
-              "attribute": "label",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "helpText",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
-              "default": "''",
-              "attribute": "help-text",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "stepNumber",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
-              "default": "''",
-              "attribute": "step-number",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is pressed.\nIf the key is 'Enter', the stepperitem is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the stepperitem's default is prevent to avoid scrolling etc in the host application."
-            },
-            {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private",
-              "description": "Triggers a click event on the stepper item."
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyUp",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keyup event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is clicked.\nIf the key is 'Space', the stepperitem is pressed. The native HTML button works in the same way."
-            },
-            {
-              "kind": "method",
-              "name": "renderStatusIcon",
-              "privacy": "private",
-              "description": "Renders the status icon based on the current status of the stepper item.\n- If the status is `completed`, it renders a check icon.\n- If the status is `current` or `error-current`, it renders a pencil icon.\n- If the status is `not-started` or `error-incomplete`, it renders the step number.\n- If the status is anything else, it renders nothing.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "renderHelpText",
-              "privacy": "private",
-              "description": "Renders the help text for the stepper item.\nIf the `helpText` property is not set, it returns nothing.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "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"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the stepperitem is clicked.",
-              "name": "click",
-              "reactName": "onClick"
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
-            },
-            {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the stepperitem.",
-              "name": "keyup",
-              "reactName": "onKeyUp"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "VariantType"
-              },
-              "description": "The variant of the stepper item, which can be `inline` or `stacked`.",
-              "default": "'inline'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "status",
-              "type": {
-                "text": "StatusType"
-              },
-              "description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
-              "default": "'not-started'",
-              "fieldName": "status"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
-              "fieldName": "label"
-            },
-            {
-              "name": "help-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
-              "default": "''",
-              "fieldName": "helpText"
-            },
-            {
-              "name": "step-number",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
-              "default": "''",
-              "fieldName": "stepNumber"
-            },
-            {
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
-              "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-stepperitem",
-          "jsDoc": "/**\n * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\n * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\n * The component supports various visual styles and can be customized with labels, help text, and step numbers.\n *\n * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\n * Make sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n *\n * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-stepperitem\n *\n * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.\n *\n * @csspart status-container - The container for the status icon or step number.\n * @csspart label-container - The container for the label and help text.\n * @csspart help-text-container - The container for the help text and error icon when applicable.\n * @csspart status-icon - The icon representing the status of the stepper item.\n * @csspart step-number - The text representing the step number.\n * @csspart label - The text representing the label of the stepper item.\n * @csspart help-text - The text providing additional information about the stepper item.\n * @csspart help-icon - The icon representing an error in the stepper item.\n *\n * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.\n * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.\n * @cssproperty --mdc-stepperitem-label-color - The color of the label text.\n * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.\n * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "StepperItem",
-            "module": "components/stepperitem/stepperitem.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/text/text.component.js",