@momentum-design/components 0.125.0 → 0.126.0

package/dist/custom-elements.json

@@ -1654,6 +1654,218 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/animation/animation.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
+          "name": "Animation",
+          "members": [
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "AnimationNames | undefined"
+              },
+              "description": "Name of the animation (= filename)",
+              "attribute": "name",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "loop",
+              "type": {
+                "text": "LoopType | undefined"
+              },
+              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "attribute": "loop",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autoplay",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Weather start the animation automatically",
+              "attribute": "autoplay",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "attribute": "aria-label"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "attribute": "aria-labelledby"
+            },
+            {
+              "kind": "field",
+              "name": "lottieInstance",
+              "type": {
+                "text": "AnimationItem | undefined"
+              },
+              "privacy": "private",
+              "description": "Lottie animation instance"
+            },
+            {
+              "kind": "field",
+              "name": "containerRef",
+              "type": {
+                "text": "Ref<HTMLDivElement>"
+              },
+              "privacy": "private",
+              "description": "Container for the animation"
+            },
+            {
+              "kind": "field",
+              "name": "animation",
+              "description": "Exposed API of the animation library (lottie)",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "getLoopValue",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "onLoadSuccessHandler",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "animationData",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ],
+              "description": "Create new lotty instance for the loaded data"
+            },
+            {
+              "kind": "method",
+              "name": "onLoadFailHandler",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "error",
+                  "type": {
+                    "text": "Error"
+                  }
+                }
+              ],
+              "description": "Error handler for animation loading"
+            },
+            {
+              "kind": "method",
+              "name": "getAnimationData",
+              "privacy": "private",
+              "description": "Import animation data dynamically"
+            },
+            {
+              "kind": "field",
+              "name": "onCompleteHandler",
+              "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
+            }
+          ],
+          "events": [
+            {
+              "name": "load",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onLoad) This event is dispatched when the animation is loaded",
+              "reactName": "onLoad"
+            },
+            {
+              "description": "(React: onComplete) This event is dispatched when all animation loops completed",
+              "name": "complete",
+              "reactName": "onComplete"
+            },
+            {
+              "description": "(React: onError) This event is dispatched when animation loading failed",
+              "name": "error",
+              "reactName": "onError"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "name",
+              "type": {
+                "text": "AnimationNames | undefined"
+              },
+              "description": "Name of the animation (= filename)",
+              "fieldName": "name"
+            },
+            {
+              "name": "loop",
+              "type": {
+                "text": "LoopType | undefined"
+              },
+              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
+              "fieldName": "loop"
+            },
+            {
+              "name": "autoplay",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Weather start the animation automatically",
+              "fieldName": "autoplay"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-label attribute to be set for accessibility",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "aria-labelledby",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Aria-labelledby attribute to be set for accessibility",
+              "fieldName": "ariaLabelledby"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-animation",
+          "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Animation",
+            "module": "components/animation/animation.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/announcementdialog/announcementdialog.component.js",
@@ -3078,218 +3290,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/animation/animation.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-animation` component is a wrapper around the Lottie animation library.\nIt fetches the animation data dynamically based on the provided name and renders it.\nThis is a display only component that does not have any interactive functionality.\nFrom accessibility perspective, (by default) it is a decorative image component.",
-          "name": "Animation",
-          "members": [
-            {
-              "kind": "field",
-              "name": "name",
-              "type": {
-                "text": "AnimationNames | undefined"
-              },
-              "description": "Name of the animation (= filename)",
-              "attribute": "name",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "loop",
-              "type": {
-                "text": "LoopType | undefined"
-              },
-              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
-              "attribute": "loop",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "autoplay",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Weather start the animation automatically",
-              "attribute": "autoplay",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "attribute": "aria-label"
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "attribute": "aria-labelledby"
-            },
-            {
-              "kind": "field",
-              "name": "lottieInstance",
-              "type": {
-                "text": "AnimationItem | undefined"
-              },
-              "privacy": "private",
-              "description": "Lottie animation instance"
-            },
-            {
-              "kind": "field",
-              "name": "containerRef",
-              "type": {
-                "text": "Ref<HTMLDivElement>"
-              },
-              "privacy": "private",
-              "description": "Container for the animation"
-            },
-            {
-              "kind": "field",
-              "name": "animation",
-              "description": "Exposed API of the animation library (lottie)",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "getLoopValue",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "onLoadSuccessHandler",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "animationData",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ],
-              "description": "Create new lotty instance for the loaded data"
-            },
-            {
-              "kind": "method",
-              "name": "onLoadFailHandler",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "error",
-                  "type": {
-                    "text": "Error"
-                  }
-                }
-              ],
-              "description": "Error handler for animation loading"
-            },
-            {
-              "kind": "method",
-              "name": "getAnimationData",
-              "privacy": "private",
-              "description": "Import animation data dynamically"
-            },
-            {
-              "kind": "field",
-              "name": "onCompleteHandler",
-              "description": "Re-dispatch the complete event from the animation library\n\nThis handler called with the animation instance instead of the component instance\nso we need to bind it to the component instance. The arrow function just does that."
-            }
-          ],
-          "events": [
-            {
-              "name": "load",
-              "type": {
-                "text": "CustomEvent"
-              },
-              "description": "(React: onLoad) This event is dispatched when the animation is loaded",
-              "reactName": "onLoad"
-            },
-            {
-              "description": "(React: onComplete) This event is dispatched when all animation loops completed",
-              "name": "complete",
-              "reactName": "onComplete"
-            },
-            {
-              "description": "(React: onError) This event is dispatched when animation loading failed",
-              "name": "error",
-              "reactName": "onError"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "name",
-              "type": {
-                "text": "AnimationNames | undefined"
-              },
-              "description": "Name of the animation (= filename)",
-              "fieldName": "name"
-            },
-            {
-              "name": "loop",
-              "type": {
-                "text": "LoopType | undefined"
-              },
-              "description": "How many times to loop the animation\n- \"true\" - infinite\n- \"false\" - no loop\n- number - number of times to loop",
-              "fieldName": "loop"
-            },
-            {
-              "name": "autoplay",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Weather start the animation automatically",
-              "fieldName": "autoplay"
-            },
-            {
-              "name": "aria-label",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-label attribute to be set for accessibility",
-              "fieldName": "ariaLabel"
-            },
-            {
-              "name": "aria-labelledby",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "description": "Aria-labelledby attribute to be set for accessibility",
-              "fieldName": "ariaLabelledby"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-animation",
-          "jsDoc": "/**\n * The `mdc-animation` component is a wrapper around the Lottie animation library.\n * It fetches the animation data dynamically based on the provided name and renders it.\n * This is a display only component that does not have any interactive functionality.\n * From accessibility perspective, (by default) it is a decorative image component.\n *\n * @tagname mdc-animation\n *\n * @event load - (React: onLoad) This event is dispatched when the animation is loaded\n * @event complete - (React: onComplete) This event is dispatched when all animation loops completed\n * @event error - (React: onError) This event is dispatched when animation loading failed\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Animation",
-            "module": "components/animation/animation.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/avatar/avatar.component.js",
@@ -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,901 +6309,971 @@
                 "name": "DisabledMixin",
                 "module": "utils/mixins/DisabledMixin.js"
               }
-            },
+            }
+          ],
+          "events": [
             {
-              "kind": "field",
-              "name": "inline",
+              "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"
+                "text": "boolean | undefined"
               },
-              "description": "The link can be inline or standalone.",
-              "default": "false",
-              "attribute": "inline",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
-              }
+              "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"
             },
             {
-              "kind": "field",
-              "name": "inverted",
+              "name": "soft-disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "The link color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "attribute": "inverted",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
-              }
+              "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"
             },
             {
-              "kind": "field",
-              "name": "href",
+              "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": "Href for navigation. The URL that the hyperlink points to",
-              "attribute": "href",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.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)",
+              "fieldName": "ariaStateKey"
             },
             {
-              "kind": "field",
-              "name": "target",
+              "name": "type",
               "type": {
-                "text": "string"
+                "text": "ButtonType"
               },
-              "default": "'_self'",
-              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
-              "attribute": "target",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.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",
+              "fieldName": "type"
             },
             {
-              "kind": "field",
-              "name": "rel",
+              "name": "name",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
-              "attribute": "rel",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.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.",
+              "fieldName": "name"
             },
             {
-              "kind": "field",
-              "name": "download",
+              "name": "value",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional download attribute to instruct browsers to download the linked resource.",
-              "attribute": "download",
-              "reflects": true,
+              "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": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
+                "name": "AutoFocusOnMountMixin",
+                "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "ping",
+              "name": "tabIndex",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "Optional ping attribute that defines a space-separated list of URLs to be notified if the link is followed.",
-              "attribute": "ping",
-              "reflects": true,
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "hreflang",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "Optional hreflang attribute specifying the language of the linked resource.",
-              "attribute": "hreflang",
-              "reflects": true,
+              "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": "components/linksimple/linksimple.component.js"
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional type attribute indicating the MIME type of the linked resource.",
-              "attribute": "type",
-              "reflects": true,
+              "description": "Color of the link’s child content in the active state.",
+              "name": "--mdc-link-color-active",
               "inheritedFrom": {
                 "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "referrerpolicy",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional referrerpolicy attribute specifying how much referrer information to send.",
-              "attribute": "referrerpolicy",
-              "reflects": true,
+              "description": "Color of the link’s child content in the disabled state.",
+              "name": "--mdc-link-color-disabled",
               "inheritedFrom": {
                 "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "handleNavigation",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent | KeyboardEvent"
-                  }
-                }
-              ],
+              "description": "Color of the link’s child content in the hover state.",
+              "name": "--mdc-link-color-hover",
               "inheritedFrom": {
                 "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "setDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Whether the element should be disabled"
-                }
-              ],
-              "description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored.",
+              "description": "Color of the link’s child content in the normal state.",
+              "name": "--mdc-link-color-normal",
               "inheritedFrom": {
                 "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
-            }
-          ],
-          "events": [
+            },
             {
-              "description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
-              "name": "click",
-              "reactName": "onClick",
+              "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": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
+              "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": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
-              "name": "focus",
-              "reactName": "onFocus",
+              "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": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
-              "name": "blur",
-              "reactName": "onBlur",
+              "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"
               }
             }
           ],
-          "attributes": [
+          "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",
-              "fieldName": "size"
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "name": "soft-disabled",
+              "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",
-              "fieldName": "softDisabled"
+              "attribute": "soft-disabled",
+              "reflects": true
             },
             {
-              "name": "prefix-icon",
+              "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.",
-              "fieldName": "prefixIcon",
+              "attribute": "prefix-icon",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
-                "module": "src/utils/mixins/ButtonComponentMixin.ts"
+                "module": "utils/mixins/ButtonComponentMixin.js"
               }
             },
             {
-              "name": "postfix-icon",
+              "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.",
-              "fieldName": "postfixIcon",
+              "attribute": "postfix-icon",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
-                "module": "src/utils/mixins/ButtonComponentMixin.ts"
+                "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",
-              "fieldName": "variant",
+              "attribute": "variant",
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
-                "module": "src/utils/mixins/ButtonComponentMixin.ts"
+                "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",
-              "fieldName": "color",
+              "attribute": "color",
               "inheritedFrom": {
                 "name": "ButtonComponentMixin",
-                "module": "src/utils/mixins/ButtonComponentMixin.ts"
+                "module": "utils/mixins/ButtonComponentMixin.js"
               }
             },
             {
-              "name": "data-aria-label",
+              "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.",
-              "fieldName": "dataAriaLabel",
+              "attribute": "data-aria-label",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "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",
-              "fieldName": "disabled",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
+              "kind": "field",
               "name": "inline",
               "type": {
                 "text": "boolean"
               },
               "description": "The link can be inline or standalone.",
               "default": "false",
-              "fieldName": "inline",
+              "attribute": "inline",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "module": "components/linksimple/linksimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "inverted",
               "type": {
                 "text": "boolean"
               },
               "description": "The link color can be inverted by setting the inverted attribute to true.",
               "default": "false",
-              "fieldName": "inverted",
+              "attribute": "inverted",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "module": "components/linksimple/linksimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "href",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Href for navigation. The URL that the hyperlink points to",
-              "fieldName": "href",
+              "attribute": "href",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "module": "components/linksimple/linksimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "target",
               "type": {
                 "text": "string"
               },
               "default": "'_self'",
               "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
-              "fieldName": "target",
+              "attribute": "target",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "module": "components/linksimple/linksimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "rel",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
-              "fieldName": "rel",
+              "attribute": "rel",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "module": "components/linksimple/linksimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "download",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Optional download attribute to instruct browsers to download the linked resource.",
-              "fieldName": "download",
+              "attribute": "download",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "module": "components/linksimple/linksimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "ping",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Optional ping attribute that defines a space-separated list of URLs to be notified if the link is followed.",
-              "fieldName": "ping",
+              "attribute": "ping",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "module": "components/linksimple/linksimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "hreflang",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Optional hreflang attribute specifying the language of the linked resource.",
-              "fieldName": "hreflang",
+              "attribute": "hreflang",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "module": "components/linksimple/linksimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "type",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Optional type attribute indicating the MIME type of the linked resource.",
-              "fieldName": "type",
+              "attribute": "type",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "module": "components/linksimple/linksimple.component.js"
               }
             },
             {
+              "kind": "field",
               "name": "referrerpolicy",
               "type": {
                 "text": "string | undefined"
               },
               "description": "Optional referrerpolicy attribute specifying how much referrer information to send.",
-              "fieldName": "referrerpolicy",
+              "attribute": "referrerpolicy",
+              "reflects": true,
               "inheritedFrom": {
                 "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "module": "components/linksimple/linksimple.component.js"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "ButtonComponentMixin",
-              "module": "/src/utils/mixins/ButtonComponentMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Linksimple",
-            "module": "/src/components/linksimple/linksimple.component"
-          },
-          "tagName": "mdc-buttonlink",
-          "jsDoc": "/**\n * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\n * features of `mdc-button`. This includes support for variants, sizing, and optional\n * prefix 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`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-buttonlink\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @csspart anchor - The anchor element that wraps the buttonlink content.\n * @csspart prefix-icon - The prefix icon element.\n * @csspart button-text - The slot containing the buttonlink text.\n * @csspart postfix-icon - The postfix icon element.\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 * @cssproperty --mdc-button-line-height - Line height of the button text\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ButtonLink",
-            "module": "components/buttonlink/buttonlink.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "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",
+              "name": "handleNavigation",
               "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"
+              "return": {
+                "type": {
+                  "text": "void"
                 }
-              ],
-              "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,
+                  "name": "e",
                   "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The soft-disabled state."
+                    "text": "MouseEvent | KeyboardEvent"
+                  }
                 }
               ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "components/linksimple/linksimple.component.js"
+              }
             },
             {
               "kind": "method",
               "name": "setDisabled",
               "privacy": "private",
               "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
                 {
                   "name": "disabled",
                   "type": {
                     "text": "boolean"
                   },
-                  "description": "The disabled state."
+                  "description": "Whether the element should be disabled"
                 }
               ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute."
+              "description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored.",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "components/linksimple/linksimple.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
+              "name": "click",
+              "reactName": "onClick",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            },
+            {
+              "description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
+              "name": "blur",
+              "reactName": "onBlur",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "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",
+              "fieldName": "size"
             },
             {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private"
+              "name": "soft-disabled",
+              "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",
+              "fieldName": "softDisabled"
             },
             {
-              "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."
+              "name": "prefix-icon",
+              "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.",
+              "fieldName": "prefixIcon",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "src/utils/mixins/ButtonComponentMixin.ts"
+              }
             },
             {
-              "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."
+              "name": "postfix-icon",
+              "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.",
+              "fieldName": "postfixIcon",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "src/utils/mixins/ButtonComponentMixin.ts"
+              }
             },
             {
-              "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."
+              "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",
+              "fieldName": "variant",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "src/utils/mixins/ButtonComponentMixin.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "autoFocusOnMount",
+              "name": "color",
               "type": {
-                "text": "boolean"
+                "text": "ButtonColor"
               },
-              "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,
+              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
+              "default": "default",
+              "fieldName": "color",
               "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "utils/mixins/AutoFocusOnMountMixin.js"
+                "name": "ButtonComponentMixin",
+                "module": "src/utils/mixins/ButtonComponentMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "tabIndex",
+              "name": "data-aria-label",
               "type": {
-                "text": "number"
+                "text": "string | null"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
               "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
-              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
+              "fieldName": "disabled",
               "inheritedFrom": {
                 "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
-            }
-          ],
-          "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",
+              "name": "inline",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "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"
+              "description": "The link can be inline or standalone.",
+              "default": "false",
+              "fieldName": "inline",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
             },
             {
-              "name": "soft-disabled",
+              "name": "inverted",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "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"
+              "description": "The link color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "fieldName": "inverted",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
             },
             {
-              "name": "size",
+              "name": "href",
               "type": {
-                "text": "ButtonSize"
+                "text": "string | undefined"
               },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
-              "fieldName": "size"
+              "description": "Href for navigation. The URL that the hyperlink points to",
+              "fieldName": "href",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
             },
             {
-              "name": "role",
+              "name": "target",
               "type": {
-                "text": "RoleType"
+                "text": "string"
               },
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "fieldName": "role"
+              "default": "'_self'",
+              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
+              "fieldName": "target",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
             },
             {
-              "name": "ariaStateKey",
+              "name": "rel",
               "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"
+              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
+              "fieldName": "rel",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
             },
             {
-              "name": "name",
+              "name": "download",
               "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"
+              "description": "Optional download attribute to instruct browsers to download the linked resource.",
+              "fieldName": "download",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
             },
             {
-              "name": "value",
+              "name": "ping",
               "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"
+              "description": "Optional ping attribute that defines a space-separated list of URLs to be notified if the link is followed.",
+              "fieldName": "ping",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
             },
             {
-              "name": "auto-focus-on-mount",
+              "name": "hreflang",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "fieldName": "autoFocusOnMount",
+              "description": "Optional hreflang attribute specifying the language of the linked resource.",
+              "fieldName": "hreflang",
               "inheritedFrom": {
-                "name": "AutoFocusOnMountMixin",
-                "module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "name": "tabIndex",
+              "name": "type",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
+              "description": "Optional type attribute indicating the MIME type of the linked resource.",
+              "fieldName": "type",
               "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "name": "disabled",
+              "name": "referrerpolicy",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
+              "description": "Optional referrerpolicy attribute specifying how much referrer information to send.",
+              "fieldName": "referrerpolicy",
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             }
           ],
           "mixins": [
             {
-              "name": "AutoFocusOnMountMixin",
-              "module": "/src/utils/mixins/AutoFocusOnMountMixin"
-            },
-            {
-              "name": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
-            },
-            {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
+              "name": "ButtonComponentMixin",
+              "module": "/src/utils/mixins/ButtonComponentMixin"
             }
           ],
           "superclass": {
-            "name": "Component",
-            "module": "/src/models"
+            "name": "Linksimple",
+            "module": "/src/components/linksimple/linksimple.component"
           },
-          "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 */",
+          "tagName": "mdc-buttonlink",
+          "jsDoc": "/**\n * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\n * features of `mdc-button`. This includes support for variants, sizing, and optional\n * prefix 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`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-buttonlink\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n * @csspart anchor - The anchor element that wraps the buttonlink content.\n * @csspart prefix-icon - The prefix icon element.\n * @csspart button-text - The slot containing the buttonlink text.\n * @csspart postfix-icon - The postfix icon element.\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 * @cssproperty --mdc-button-line-height - Line height of the button text\n * @cssproperty --mdc-button-prefix-icon-size - Size of the prefix icon\n * @cssproperty --mdc-button-postfix-icon-size - Size of the postfix icon\n */",
           "customElement": true
         }
       ],
@@ -7282,8 +7282,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Buttonsimple",
-            "module": "components/buttonsimple/buttonsimple.component.js"
+            "name": "ButtonLink",
+            "module": "components/buttonlink/buttonlink.component.js"
           }
         }
       ]
@@ -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,23 +24068,110 @@
               }
             },
             {
-              "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",
-                "module": "src/components/listitem/listitem.component.ts"
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            },
+            {
+              "description": "content slot can be used to override the content completely. Be aware that this will override the default content of the list item.",
+              "name": "content",
+              "inheritedFrom": {
+                "name": "ListItem",
+                "module": "src/components/listitem/listitem.component.ts"
+              }
+            }
+          ],
+          "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"
               }
             },
             {
-              "description": "content slot can be used to override the content completely. Be aware that this will override the default content of the list item.",
-              "name": "content",
+              "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": "ListItem",
-                "module": "src/components/listitem/listitem.component.ts"
+                "name": "ControlTypeMixin",
+                "module": "utils/mixins/ControlTypeMixin.js"
               }
-            }
-          ],
-          "members": [
+            },
             {
               "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"
           }
         }
       ]
@@ -31034,7 +31034,7 @@
                 {
                   "name": "iconName",
                   "type": {
-                    "text": "string"
+                    "text": "IconNames"
                   }
                 }
               ]
@@ -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",
@@ -44975,191 +45256,6 @@
         }
       ]
     },
-    {
-      "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/stepperitem/stepperitem.component.js",