@momentum-design/components 0.92.3 → 0.92.4

package/dist/custom-elements.json

@@ -2263,189 +2263,75 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/buttongroup/buttongroup.component.js",
+      "path": "components/button/button.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
-          "name": "ButtonGroup",
-          "cssProperties": [
-            {
-              "description": "The border radius of the buttongroup",
-              "name": "--mdc-buttongroup-border-radius"
-            },
-            {
-              "description": "The border color of the buttongroup",
-              "name": "--mdc-buttongroup-border-color"
-            },
-            {
-              "description": "The color of the divider between buttons within the buttongroup",
-              "name": "--mdc-buttongroup-divider-color"
-            }
-          ],
+          "description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\nButton Variants:\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.\n\nButton Colors:\n- **Positive**: Green color.\n- **Negative**: Red color.\n- **Accent**: Blue color.\n- **Promotional**: Purple color.\n- **Default**: White color.\n\nButton Sizes (in REM units):\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- **Tertiary icon button**: 20.\n\nButton Types:\n- **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n- **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n- **Icon button**: A button represented by just an icon without any text.\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons.",
+          "name": "Button",
           "slots": [
             {
-              "description": "This is a default/unnamed slot, which contains the buttons",
-              "name": "default"
+              "description": "Text label of the button.",
+              "name": ""
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "ButtonGroupOrientation"
-              },
-              "description": "Orientation of the buttongroup.",
-              "default": "'horizontal'",
-              "attribute": "orientation",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "ButtonGroupVariant"
-              },
-              "description": "Variant of the buttons within the buttongroup.",
-              "default": "'primary'",
-              "attribute": "variant",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "ButtonGroupSize"
+                "text": "ButtonSize"
               },
-              "description": "Size of the buttons within the buttongroup.",
-              "default": "'28'",
+              "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
+              "default": "32",
               "attribute": "size",
-              "reflects": true
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "compact",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
-              "attribute": "compact",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "orientation",
-              "type": {
-                "text": "ButtonGroupOrientation"
-              },
-              "description": "Orientation of the buttongroup.",
-              "default": "'horizontal'",
-              "fieldName": "orientation"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "ButtonGroupVariant"
-              },
-              "description": "Variant of the buttons within the buttongroup.",
-              "default": "'primary'",
-              "fieldName": "variant"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "ButtonGroupSize"
-              },
-              "description": "Size of the buttons within the buttongroup.",
-              "default": "'28'",
-              "fieldName": "size"
-            },
-            {
-              "name": "compact",
+              "name": "inverted",
               "type": {
                 "text": "boolean"
               },
+              "description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
               "default": "false",
-              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
-              "fieldName": "compact"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-buttongroup",
-          "jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "ButtonGroup",
-            "module": "components/buttongroup/buttongroup.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",
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "PillButtonSize | IconButtonSize"
-              },
-              "description": "ButtonLink sizing is based on the buttonlink type.\n- **Pill buttonlink**: 40, 32, 28, 24.\n- **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon buttonlink can also be 20.",
-              "default": "32",
-              "attribute": "size",
+              "attribute": "inverted",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "softDisabled",
+              "name": "role",
+              "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,
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
-              "reflects": true
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "setSoftDisabled",
+              "name": "inferFilledIconName",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The buttonlink element."
-                },
-                {
-                  "name": "softDisabled",
+                  "name": "active",
                   "optional": true,
                   "type": {
                     "text": "boolean"
                   },
-                  "description": "The soft-disabled state."
+                  "description": "The active 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."
+              "description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
             },
             {
               "kind": "field",
@@ -2578,17 +2464,17 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "autofocus",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
+              "attribute": "autofocus",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "AutoFocusMixin",
+                "module": "utils/mixins/AutoFocusMixin.js"
               }
             },
             {
@@ -2608,85 +2494,140 @@
             },
             {
               "kind": "field",
-              "name": "inline",
+              "name": "disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "The link can be inline or standalone.",
-              "default": "false",
-              "attribute": "inline",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "inverted",
+              "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "The link color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "attribute": "inverted",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "attribute": "active",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "softDisabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "'#'",
-              "description": "Href for navigation. The URL that the hyperlink points to",
-              "attribute": "href",
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "ariaStateKey",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'_self'",
-              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
-              "attribute": "target",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "attribute": "ariaStateKey",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "rel",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "ButtonType"
               },
-              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
-              "attribute": "rel",
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "attribute": "type",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
-              }
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "handleNavigation",
+              "kind": "method",
+              "name": "executeAction",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setActive",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element"
+                },
+                {
+                  "name": "active",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state of the element"
+                }
+              ],
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setSoftDisabled",
               "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
+                }
+              ],
+              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
@@ -2694,56 +2635,82 @@
               "name": "setDisabled",
               "privacy": "private",
               "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
                 {
                   "name": "disabled",
                   "type": {
                     "text": "boolean"
                   },
-                  "description": "Whether the element should be disabled"
+                  "description": "The disabled state."
                 }
               ],
-              "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": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "components/linksimple/linksimple.component.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
-            }
-          ],
-          "events": [
+            },
             {
-              "description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
-              "name": "click",
-              "reactName": "onClick",
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
-              "name": "focus",
-              "reactName": "onFocus",
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
-              "description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
-              "name": "blur",
-              "reactName": "onBlur",
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             }
           ],
@@ -2751,20 +2718,37 @@
             {
               "name": "size",
               "type": {
-                "text": "PillButtonSize | IconButtonSize"
+                "text": "ButtonSize"
               },
-              "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.",
+              "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
               "default": "32",
-              "fieldName": "size"
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "soft-disabled",
+              "name": "inverted",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "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"
+              "description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
+              "default": "false",
+              "fieldName": "inverted"
+            },
+            {
+              "name": "role",
+              "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",
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
               "name": "prefix-icon",
@@ -2817,16 +2801,16 @@
               }
             },
             {
-              "name": "disabled",
+              "name": "autofocus",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "fieldName": "disabled",
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
+              "fieldName": "autofocus",
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "name": "AutoFocusMixin",
+                "module": "src/utils/mixins/AutoFocusMixin.ts"
               }
             },
             {
@@ -2843,67 +2827,68 @@
               }
             },
             {
-              "name": "inline",
+              "name": "disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "The link can be inline or standalone.",
-              "default": "false",
-              "fieldName": "inline",
+              "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": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
-              "name": "inverted",
+              "name": "active",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "The link color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "fieldName": "inverted",
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "fieldName": "active",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "href",
+              "name": "soft-disabled",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "default": "'#'",
-              "description": "Href for navigation. The URL that the hyperlink points to",
-              "fieldName": "href",
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "target",
+              "name": "ariaStateKey",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'_self'",
-              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
-              "fieldName": "target",
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "fieldName": "ariaStateKey",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "rel",
+              "name": "type",
               "type": {
-                "text": "string | undefined"
+                "text": "ButtonType"
               },
-              "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"
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "fieldName": "type",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             }
           ],
@@ -2914,83 +2899,47 @@
             }
           ],
           "superclass": {
-            "name": "Linksimple",
-            "module": "/src/components/linksimple/linksimple.component"
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.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 */",
+          "tagName": "mdc-button",
+          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\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.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n */",
           "customElement": true,
-          "cssProperties": [
-            {
-              "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"
-              }
-            },
+          "events": [
             {
-              "description": "Color of the inverted link’s child content in the active state.",
-              "name": "--mdc-link-inverted-color-active",
+              "description": "(React: onClick) This event is dispatched when the button is clicked.",
+              "name": "click",
+              "reactName": "onClick",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "description": "Color of the inverted link’s child content in the disabled state.",
-              "name": "--mdc-link-inverted-color-disabled",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
+              "name": "keydown",
+              "reactName": "onKeyDown",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "description": "Color of the inverted link’s child content in the hover state.",
-              "name": "--mdc-link-inverted-color-hover",
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "description": "Color of the inverted link’s child content in the normal state.",
-              "name": "--mdc-link-inverted-color-normal",
+              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
               "inheritedFrom": {
-                "name": "Linksimple",
-                "module": "src/components/linksimple/linksimple.component.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             }
           ]
@@ -3001,211 +2950,340 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "ButtonLink",
-            "module": "components/buttonlink/buttonlink.component.js"
+            "name": "Button",
+            "module": "components/button/button.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/buttonsimple/buttonsimple.component.js",
+      "path": "components/buttongroup/buttongroup.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",
+          "description": "buttongroup component, is a styled wrapper for multiple buttons.\nIt can support icon buttons, combination of icon and pill buttons, and text buttons.\nThey are available in horizontal and vertical orientation.",
+          "name": "ButtonGroup",
+          "cssProperties": [
+            {
+              "description": "The border radius of the buttongroup",
+              "name": "--mdc-buttongroup-border-radius"
+            },
+            {
+              "description": "The border color of the buttongroup",
+              "name": "--mdc-buttongroup-border-color"
+            },
+            {
+              "description": "The color of the divider between buttons within the buttongroup",
+              "name": "--mdc-buttongroup-divider-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, which contains the buttons",
+              "name": "default"
+            }
+          ],
           "members": [
             {
               "kind": "field",
-              "name": "active",
+              "name": "orientation",
               "type": {
-                "text": "boolean | undefined"
+                "text": "ButtonGroupOrientation"
               },
-              "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",
+              "description": "Orientation of the buttongroup.",
+              "default": "'horizontal'",
+              "attribute": "orientation",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "softDisabled",
+              "name": "variant",
               "type": {
-                "text": "boolean | undefined"
+                "text": "ButtonGroupVariant"
               },
-              "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",
+              "description": "Variant of the buttons within the buttongroup.",
+              "default": "'primary'",
+              "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "ButtonSize"
+                "text": "ButtonGroupSize"
               },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
-              "default": "32",
+              "description": "Size of the buttons within the buttongroup.",
+              "default": "'28'",
               "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "role",
-              "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",
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
+              "attribute": "compact",
               "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "orientation",
+              "type": {
+                "text": "ButtonGroupOrientation"
+              },
+              "description": "Orientation of the buttongroup.",
+              "default": "'horizontal'",
+              "fieldName": "orientation"
             },
             {
-              "kind": "field",
-              "name": "ariaStateKey",
+              "name": "variant",
               "type": {
-                "text": "string | undefined"
+                "text": "ButtonGroupVariant"
               },
-              "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
+              "description": "Variant of the buttons within the buttongroup.",
+              "default": "'primary'",
+              "fieldName": "variant"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ButtonGroupSize"
+              },
+              "description": "Size of the buttons within the buttongroup.",
+              "default": "'28'",
+              "fieldName": "size"
             },
+            {
+              "name": "compact",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When this is true, the buttons within the buttongroup will be compact.\ni.e. Irrespective of the size of the buttons, they will have a height of 24px.",
+              "fieldName": "compact"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-buttongroup",
+          "jsDoc": "/**\n * buttongroup component, is a styled wrapper for multiple buttons.\n * It can support icon buttons, combination of icon and pill buttons, and text buttons.\n * They are available in horizontal and vertical orientation.\n *\n * @tagname mdc-buttongroup\n *\n * @slot default - This is a default/unnamed slot, which contains the buttons\n *\n * @cssproperty --mdc-buttongroup-border-radius - The border radius of the buttongroup\n * @cssproperty --mdc-buttongroup-border-color - The border color of the buttongroup\n * @cssproperty --mdc-buttongroup-divider-color - The color of the divider between buttons within the buttongroup\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "ButtonGroup",
+            "module": "components/buttongroup/buttongroup.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",
+          "members": [
             {
               "kind": "field",
-              "name": "type",
+              "name": "size",
               "type": {
-                "text": "ButtonType"
+                "text": "PillButtonSize | IconButtonSize"
               },
-              "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",
+              "description": "ButtonLink sizing is based on the buttonlink type.\n- **Pill buttonlink**: 40, 32, 28, 24.\n- **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon buttonlink can also be 20.",
+              "default": "32",
+              "attribute": "size",
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected"
+              "kind": "field",
+              "name": "softDisabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "setActive",
-              "privacy": "protected",
-              "parameters": [
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
                 {
                   "name": "element",
                   "type": {
                     "text": "HTMLElement"
                   },
-                  "description": "The button element"
+                  "description": "The buttonlink element."
                 },
                 {
-                  "name": "active",
+                  "name": "softDisabled",
                   "optional": true,
                   "type": {
                     "text": "boolean"
                   },
-                  "description": "The active state of the element"
+                  "description": "The soft-disabled state."
                 }
               ],
-              "description": "Sets the ariaStateKey attributes based on the active state of the button."
+              "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": "prefixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The name of the icon to display as a prefix.\nThe icon is displayed on the left side of the button.",
+              "attribute": "prefix-icon",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "postfixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The name of the icon to display as a postfix.\nThe icon is displayed on the right side of the button.",
+              "attribute": "postfix-icon",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ButtonVariant"
+              },
+              "description": "There are 3 variants of button: primary, secondary, tertiary. They are styled differently.\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.",
+              "default": "primary",
+              "attribute": "variant",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "ButtonColor"
+              },
+              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
+              "default": "default",
+              "attribute": "color",
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
             },
             {
               "kind": "method",
-              "name": "setSoftDisabled",
-              "privacy": "private",
+              "name": "setVariant",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "softDisabled",
-                  "optional": true,
+                  "name": "variant",
                   "type": {
-                    "text": "boolean"
+                    "text": "ButtonVariant"
                   },
-                  "description": "The soft-disabled state."
+                  "description": "The variant to set."
                 }
               ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
+              "description": "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": "setDisabled",
-              "privacy": "private",
+              "name": "setColor",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "disabled",
+                  "name": "color",
                   "type": {
-                    "text": "boolean"
+                    "text": "ButtonColor"
                   },
-                  "description": "The disabled state."
+                  "description": "The color to set."
                 }
               ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute."
-            },
-            {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed."
+              "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": "handleKeyDown",
-              "privacy": "private",
+              "name": "setSize",
+              "privacy": "protected",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "size",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "PillButtonSize | IconButtonSize"
                   },
-                  "description": "The keyboard event."
+                  "description": "The size to set."
                 }
               ],
-              "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."
+              "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": "handleKeyUp",
-              "privacy": "private",
+              "name": "inferButtonType",
+              "privacy": "protected",
+              "description": "Infers the type of button based on the presence of slot and/or prefix and postfix icons.",
               "parameters": [
                 {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+                  "description": "default slot of button",
+                  "name": "slot"
                 }
               ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way."
+              "inheritedFrom": {
+                "name": "ButtonComponentMixin",
+                "module": "utils/mixins/ButtonComponentMixin.js"
+              }
             },
             {
               "kind": "field",
-              "name": "autofocus",
+              "name": "disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
-              "attribute": "autofocus",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "AutoFocusMixin",
-                "module": "utils/mixins/AutoFocusMixin.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
@@ -3225,118 +3303,212 @@
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "inline",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
+              "description": "The link can be inline or standalone.",
+              "default": "false",
+              "attribute": "inline",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "Linksimple",
+                "module": "components/linksimple/linksimple.component.js"
               }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the button is clicked.",
-              "name": "click",
-              "reactName": "onClick"
-            },
-            {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
-              "name": "keyup",
-              "reactName": "onKeyUp"
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "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": "(React: onFocus) This event is dispatched when the button receives focus.",
-              "name": "focus",
-              "reactName": "onFocus"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active",
+              "kind": "field",
+              "name": "href",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "fieldName": "active"
+              "default": "'#'",
+              "description": "Href for navigation. The URL that the hyperlink points to",
+              "attribute": "href",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "components/linksimple/linksimple.component.js"
+              }
             },
             {
-              "name": "soft-disabled",
+              "kind": "field",
+              "name": "target",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "fieldName": "softDisabled"
+              "default": "'_self'",
+              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
+              "attribute": "target",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "components/linksimple/linksimple.component.js"
+              }
             },
             {
-              "name": "size",
+              "kind": "field",
+              "name": "rel",
               "type": {
-                "text": "ButtonSize"
+                "text": "string | undefined"
               },
-              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "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"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleNavigation",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "components/linksimple/linksimple.component.js"
+              }
+            },
+            {
+              "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.",
+              "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"
             },
             {
-              "name": "role",
-              "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": "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"
             },
             {
-              "name": "ariaStateKey",
+              "name": "prefix-icon",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | 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"
+              "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"
+              }
             },
             {
-              "name": "type",
+              "name": "postfix-icon",
               "type": {
-                "text": "ButtonType"
+                "text": "IconNames | undefined"
               },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "fieldName": "type"
+              "description": "The 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"
+              }
             },
             {
-              "name": "autofocus",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "ButtonVariant"
               },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
-              "fieldName": "autofocus",
+              "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": "AutoFocusMixin",
-                "module": "src/utils/mixins/AutoFocusMixin.ts"
+                "name": "ButtonComponentMixin",
+                "module": "src/utils/mixins/ButtonComponentMixin.ts"
               }
             },
             {
-              "name": "tabIndex",
+              "name": "color",
               "type": {
-                "text": "number"
+                "text": "ButtonColor"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
+              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
+              "default": "default",
+              "fieldName": "color",
               "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
+                "name": "ButtonComponentMixin",
+                "module": "src/utils/mixins/ButtonComponentMixin.ts"
               }
             },
             {
@@ -3351,288 +3523,194 @@
                 "name": "DisabledMixin",
                 "module": "src/utils/mixins/DisabledMixin.ts"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "AutoFocusMixin",
-              "module": "/src/utils/mixins/AutoFocusMixin"
-            },
-            {
-              "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 */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Buttonsimple",
-            "module": "components/buttonsimple/buttonsimple.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/button/button.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\nButton Variants:\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.\n\nButton Colors:\n- **Positive**: Green color.\n- **Negative**: Red color.\n- **Accent**: Blue color.\n- **Promotional**: Purple color.\n- **Default**: White color.\n\nButton Sizes (in REM units):\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- **Tertiary icon button**: 20.\n\nButton Types:\n- **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n- **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n- **Icon button**: A button represented by just an icon without any text.\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons.",
-          "name": "Button",
-          "slots": [
-            {
-              "description": "Text label of the button.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
+              "name": "tabIndex",
               "type": {
-                "text": "ButtonSize"
+                "text": "number"
               },
-              "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
-              "default": "32",
-              "attribute": "size",
-              "reflects": true,
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "inverted",
+              "name": "inline",
               "type": {
                 "text": "boolean"
               },
-              "description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
+              "description": "The link can be inline or standalone.",
               "default": "false",
-              "attribute": "inverted",
-              "reflects": true
+              "fieldName": "inline",
+              "inheritedFrom": {
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
+              }
             },
             {
-              "kind": "field",
-              "name": "role",
-              "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,
+              "name": "inverted",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
+              "description": "The link color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "fieldName": "inverted",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "inferFilledIconName",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "active",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state."
-                }
-              ],
-              "description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
-            },
-            {
-              "kind": "field",
-              "name": "prefixIcon",
+              "name": "href",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string"
               },
-              "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,
+              "default": "'#'",
+              "description": "Href for navigation. The URL that the hyperlink points to",
+              "fieldName": "href",
               "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "postfixIcon",
+              "name": "target",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string"
               },
-              "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,
+              "default": "'_self'",
+              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
+              "fieldName": "target",
               "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "variant",
+              "name": "rel",
               "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",
+              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
+              "fieldName": "rel",
               "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
-            },
+            }
+          ],
+          "mixins": [
             {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "ButtonColor"
-              },
-              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
-              "default": "default",
-              "attribute": "color",
+              "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 */",
+          "customElement": true,
+          "cssProperties": [
+            {
+              "description": "Border radius of the link.",
+              "name": "--mdc-link-border-radius",
               "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "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.",
+              "description": "Color of the link’s child content in the active state.",
+              "name": "--mdc-link-color-active",
               "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "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.",
+              "description": "Color of the link’s child content in the disabled state.",
+              "name": "--mdc-link-color-disabled",
               "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "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.",
+              "description": "Color of the link’s child content in the hover state.",
+              "name": "--mdc-link-color-hover",
               "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "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"
-                }
-              ],
+              "description": "Color of the link’s child content in the normal state.",
+              "name": "--mdc-link-color-normal",
               "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "utils/mixins/ButtonComponentMixin.js"
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
-              "attribute": "autofocus",
-              "reflects": true,
+              "description": "Color of the inverted link’s child content in the active state.",
+              "name": "--mdc-link-inverted-color-active",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
+              "description": "Color of the inverted link’s child content in the disabled state.",
+              "name": "--mdc-link-inverted-color-disabled",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "Linksimple",
+                "module": "src/components/linksimple/linksimple.component.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
+              "description": "Color of the inverted link’s child content in the hover state.",
+              "name": "--mdc-link-inverted-color-hover",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "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"
+              }
+            }
+          ]
+        }
+      ],
+      "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",
+          "members": [
             {
               "kind": "field",
               "name": "active",
@@ -3642,11 +3720,7 @@
               "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
               "default": "undefined",
               "attribute": "active",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
@@ -3657,11 +3731,26 @@
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
               "default": "undefined",
               "attribute": "soft-disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "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",
+              "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",
@@ -3672,35 +3761,23 @@
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
               "default": "'aria-pressed' (when)",
               "attribute": "ariaStateKey",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "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,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.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",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "method",
               "name": "executeAction",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "privacy": "protected"
             },
             {
               "kind": "method",
@@ -3723,11 +3800,7 @@
                   "description": "The active state of the element"
                 }
               ],
-              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Sets the ariaStateKey attributes based on the active state of the button."
             },
             {
               "kind": "method",
@@ -3750,11 +3823,7 @@
                   "description": "The soft-disabled state."
                 }
               ],
-              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "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",
@@ -3776,30 +3845,18 @@
                   "description": "The disabled state."
                 }
               ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute."
             },
             {
               "kind": "method",
               "name": "triggerClickEvent",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "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.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed."
             },
             {
               "kind": "method",
@@ -3814,11 +3871,7 @@
                   "description": "The keyboard event."
                 }
               ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "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",
@@ -3833,138 +3886,77 @@
                   "description": "The keyboard event."
                 }
               ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
-              "default": "32",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
-              "default": "false",
-              "fieldName": "inverted"
-            },
-            {
-              "name": "role",
-              "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",
-              "type": {
-                "text": "string"
-              },
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "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"
-              }
-            },
-            {
-              "name": "color",
-              "type": {
-                "text": "ButtonColor"
-              },
-              "description": "There are 5 colors for button: positive, negative, accent, promotional, default.",
-              "default": "default",
-              "fieldName": "color",
-              "inheritedFrom": {
-                "name": "ButtonComponentMixin",
-                "module": "src/utils/mixins/ButtonComponentMixin.ts"
-              }
+              "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": "autofocus",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
               "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
-              "fieldName": "autofocus",
+              "attribute": "autofocus",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "AutoFocusMixin",
+                "module": "utils/mixins/AutoFocusMixin.js"
               }
             },
             {
+              "kind": "field",
               "name": "tabIndex",
               "type": {
                 "text": "number"
               },
               "default": "0",
               "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
+              "attribute": "tabIndex",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
               }
             },
             {
+              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
               "default": "undefined",
-              "fieldName": "disabled",
+              "attribute": "disabled",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the button is clicked.",
+              "name": "click",
+              "reactName": "onClick"
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
             },
+            {
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
+              "name": "keyup",
+              "reactName": "onKeyUp"
+            },
+            {
+              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            }
+          ],
+          "attributes": [
             {
               "name": "active",
               "type": {
@@ -3972,11 +3964,7 @@
               },
               "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
               "default": "undefined",
-              "fieldName": "active",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "fieldName": "active"
             },
             {
               "name": "soft-disabled",
@@ -3985,11 +3973,22 @@
               },
               "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
               "default": "undefined",
-              "fieldName": "softDisabled",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "fieldName": "softDisabled"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Simplebutton size is a super set of all the sizes supported by children components.",
+              "default": "32",
+              "fieldName": "size"
+            },
+            {
+              "name": "role",
+              "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",
@@ -3998,11 +3997,7 @@
               },
               "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
               "default": "'aria-pressed' (when)",
-              "fieldName": "ariaStateKey",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "fieldName": "ariaStateKey"
             },
             {
               "name": "type",
@@ -4011,64 +4006,69 @@
               },
               "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
               "default": "button",
-              "fieldName": "type",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "ButtonComponentMixin",
-              "module": "/src/utils/mixins/ButtonComponentMixin"
-            }
-          ],
-          "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
-          },
-          "tagName": "mdc-button",
-          "jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\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.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n */",
-          "customElement": true,
-          "events": [
+              "fieldName": "type"
+            },
             {
-              "description": "(React: onClick) This event is dispatched when the button is clicked.",
-              "name": "click",
-              "reactName": "onClick",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
+              "fieldName": "autofocus",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "AutoFocusMixin",
+                "module": "src/utils/mixins/AutoFocusMixin.ts"
               }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "AutoFocusMixin",
+              "module": "/src/utils/mixins/AutoFocusMixin"
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the button receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "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 */",
+          "customElement": true
         }
       ],
       "exports": [
@@ -4076,8 +4076,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Button",
-            "module": "components/button/button.component.js"
+            "name": "Buttonsimple",
+            "module": "components/buttonsimple/buttonsimple.component.js"
           }
         }
       ]
@@ -12118,52 +12118,248 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
-              "fieldName": "toggletipText"
+              "description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
+              "fieldName": "toggletipText"
+            },
+            {
+              "name": "toggletip-placement",
+              "type": {
+                "text": "PopoverPlacement"
+              },
+              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
+              "default": "'top'",
+              "fieldName": "toggletipPlacement"
+            },
+            {
+              "name": "info-icon-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
+              "fieldName": "infoIconAriaLabel"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-formfieldwrapper",
+          "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n *  that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n *\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "FormfieldWrapper",
+            "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/iconprovider/iconprovider.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
+          "name": "IconProvider",
+          "slots": [
+            {
+              "description": "children",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Context object of the IconProvider, to be consumed by child components",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "iconSet",
+              "type": {
+                "text": "IconSet | undefined"
+              },
+              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
+              "default": "momentum-icons",
+              "attribute": "icon-set",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
+              "attribute": "url"
+            },
+            {
+              "kind": "field",
+              "name": "fileExtension",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
+              "default": "svg",
+              "attribute": "file-extension",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "lengthUnit",
+              "type": {
+                "text": "string"
+              },
+              "description": "Length unit used for sizing of icons",
+              "default": "em",
+              "attribute": "length-unit",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
+              "default": "1",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "cacheStrategy",
+              "type": {
+                "text": "CacheStrategy | undefined"
+              },
+              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
+              "default": "undefined",
+              "attribute": "cache-strategy"
+            },
+            {
+              "kind": "field",
+              "name": "cacheName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
+              "default": "undefined",
+              "attribute": "cache-name"
+            },
+            {
+              "kind": "method",
+              "name": "updateValuesInContext",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "icon-set",
+              "type": {
+                "text": "IconSet | undefined"
+              },
+              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
+              "default": "momentum-icons",
+              "fieldName": "iconSet"
+            },
+            {
+              "name": "url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
+              "fieldName": "url"
+            },
+            {
+              "name": "file-extension",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
+              "default": "svg",
+              "fieldName": "fileExtension"
             },
             {
-              "name": "toggletip-placement",
+              "name": "length-unit",
               "type": {
-                "text": "PopoverPlacement"
+                "text": "string"
               },
-              "description": "The placement of the toggletip that is displayed when the info icon is hovered.",
-              "default": "'top'",
-              "fieldName": "toggletipPlacement"
+              "description": "Length unit used for sizing of icons",
+              "default": "em",
+              "fieldName": "lengthUnit"
             },
             {
-              "name": "info-icon-aria-label",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "number | undefined"
               },
-              "description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
-              "fieldName": "infoIconAriaLabel"
+              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
+              "default": "1",
+              "fieldName": "size"
             },
             {
-              "name": "disabled",
+              "name": "cache-strategy",
               "type": {
-                "text": "boolean | undefined"
+                "text": "CacheStrategy | undefined"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
               "default": "undefined",
-              "fieldName": "disabled",
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
-              }
-            }
-          ],
-          "mixins": [
+              "fieldName": "cacheStrategy"
+            },
             {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
+              "name": "cache-name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
+              "default": "undefined",
+              "fieldName": "cacheName"
             }
           ],
           "superclass": {
-            "name": "Component",
+            "name": "Provider",
             "module": "/src/models"
           },
-          "tagName": "mdc-formfieldwrapper",
-          "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n *  that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n *\n */",
+          "tagName": "mdc-iconprovider",
+          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
           "customElement": true
         }
       ],
@@ -12172,8 +12368,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "FormfieldWrapper",
-            "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+            "name": "IconProvider",
+            "module": "components/iconprovider/iconprovider.component.js"
           }
         }
       ]
@@ -12426,202 +12622,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/iconprovider/iconprovider.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
-          "name": "IconProvider",
-          "slots": [
-            {
-              "description": "children",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "description": "Context object of the IconProvider, to be consumed by child components",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "iconSet",
-              "type": {
-                "text": "IconSet | undefined"
-              },
-              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
-              "default": "momentum-icons",
-              "attribute": "icon-set",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "url",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
-              "attribute": "url"
-            },
-            {
-              "kind": "field",
-              "name": "fileExtension",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
-              "default": "svg",
-              "attribute": "file-extension",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "lengthUnit",
-              "type": {
-                "text": "string"
-              },
-              "description": "Length unit used for sizing of icons",
-              "default": "em",
-              "attribute": "length-unit",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
-              "default": "1",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "cacheStrategy",
-              "type": {
-                "text": "CacheStrategy | undefined"
-              },
-              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
-              "default": "undefined",
-              "attribute": "cache-strategy"
-            },
-            {
-              "kind": "field",
-              "name": "cacheName",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
-              "default": "undefined",
-              "attribute": "cache-name"
-            },
-            {
-              "kind": "method",
-              "name": "updateValuesInContext",
-              "privacy": "private"
-            },
-            {
-              "kind": "method",
-              "name": "updateContext",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "icon-set",
-              "type": {
-                "text": "IconSet | undefined"
-              },
-              "description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
-              "default": "momentum-icons",
-              "fieldName": "iconSet"
-            },
-            {
-              "name": "url",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
-              "fieldName": "url"
-            },
-            {
-              "name": "file-extension",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
-              "default": "svg",
-              "fieldName": "fileExtension"
-            },
-            {
-              "name": "length-unit",
-              "type": {
-                "text": "string"
-              },
-              "description": "Length unit used for sizing of icons",
-              "default": "em",
-              "fieldName": "lengthUnit"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
-              "default": "1",
-              "fieldName": "size"
-            },
-            {
-              "name": "cache-strategy",
-              "type": {
-                "text": "CacheStrategy | undefined"
-              },
-              "description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
-              "default": "undefined",
-              "fieldName": "cacheStrategy"
-            },
-            {
-              "name": "cache-name",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
-              "default": "undefined",
-              "fieldName": "cacheName"
-            }
-          ],
-          "superclass": {
-            "name": "Provider",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-iconprovider",
-          "jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "IconProvider",
-            "module": "components/iconprovider/iconprovider.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/input/input.component.js",