@momentum-design/components 0.104.13 → 0.104.15

package/dist/custom-elements.json

@@ -15715,476 +15715,447 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/list/list.component.js",
+      "path": "components/linkbutton/linkbutton.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
-          "name": "List",
-          "cssParts": [
-            {
-              "description": "The container slot around the list items",
-              "name": "container"
-            }
-          ],
-          "slots": [
+          "description": "`mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.\n\n### Features:\n- Looks like a link, behaves like a button.\n- Supports slots for a text label and an optional trailing icon.\n- Inherits accessibility and keyboard interaction behavior from `mdc-buttonsimple`.",
+          "name": "LinkButton",
+          "cssProperties": [
             {
-              "description": "This is a default/unnamed slot, where listitems can be placed.",
-              "name": "default"
+              "description": "Border radius of the linkbutton.",
+              "name": "--mdc-link-border-radius"
             },
             {
-              "description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
-              "name": "list-header"
-            }
-          ],
-          "members": [
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the list element.\nIf the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item\nand sets the active tabindex of the list item.\nPrevents the default event behavior."
+              "description": "Color of the linkbutton’s child content in the active state.",
+              "name": "--mdc-link-color-active"
             },
             {
-              "kind": "method",
-              "name": "getCurrentIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "target",
-                  "type": {
-                    "text": "EventTarget | null"
-                  },
-                  "description": "The target element to find the index of."
-                }
-              ],
-              "description": "Returns the index of the given target in the listItems array.\nIf the target is not a list item, but a child element of a list item,\nit returns the index of the parent list item."
+              "description": "Color of the linkbutton’s child content in the disabled state.",
+              "name": "--mdc-link-color-disabled"
             },
             {
-              "kind": "method",
-              "name": "getNewIndexBasedOnKey",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              },
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The key that was pressed."
-                },
-                {
-                  "name": "currentIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The current index of the focused list item."
-                },
-                {
-                  "name": "wrappedDivsCount",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The total number of list items."
-                }
-              ],
-              "description": "Calculates a new index based on the pressed keyboard key.\nSupports navigation keys for moving focus within a list."
+              "description": "Color of the linkbutton’s child content in the hover state.",
+              "name": "--mdc-link-color-hover"
             },
             {
-              "kind": "method",
-              "name": "handleMouseClick",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "The mouse event."
-                }
-              ],
-              "description": "Handles the mouse click event on the list element.\nFinds the index of the target element in the list items array and calls\n`resetTabIndexAndSetActiveTabIndex` with that index."
+              "description": "Color of the linkbutton’s child content in the normal state.",
+              "name": "--mdc-link-color-normal"
             },
             {
-              "kind": "method",
-              "name": "resetTabIndexAndSetActiveTabIndex",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "newIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the new active element in the list."
-                }
-              ],
-              "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-list",
-          "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "List",
-            "module": "components/list/list.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/listheader/listheader.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Listheader component is used to display a header in a list.\nIt can include icons before and after the header text, and allows for additional content via slots.",
-          "name": "Listheader",
-          "cssProperties": [
+              "description": "Color of the inverted linkbutton’s child content in the active state.",
+              "name": "--mdc-link-inverted-color-active"
+            },
             {
-              "description": "height of the header",
-              "name": "--mdc-listheader-height"
+              "description": "Color of the inverted linkbutton’s child content in the disabled state.",
+              "name": "--mdc-link-inverted-color-disabled"
             },
             {
-              "description": "padding around the header content",
-              "name": "--mdc-listheader-padding"
+              "description": "Color of the inverted linkbutton’s child content in the hover state.",
+              "name": "--mdc-link-inverted-color-hover"
             },
             {
-              "description": "gap between content",
-              "name": "--mdc-listheader-gap"
+              "description": "Color of the inverted linkbutton’s child content in the normal state.",
+              "name": "--mdc-link-inverted-color-normal"
             }
           ],
           "slots": [
             {
-              "description": "to pass in actionable content like buttons or links",
-              "name": "default"
+              "description": "Text label of the linkbutton.",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "prefixIcon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
-              "attribute": "prefix-icon"
-            },
-            {
-              "kind": "field",
-              "name": "postfixIcon",
+              "name": "size",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "ButtonSize"
               },
-              "description": "Name of the icon rendered after the slot & text\n\nIf not provided, no icon will be rendered and content will be aligned to the end.",
-              "attribute": "postfix-icon"
+              "description": "Sets the size of the linkbutton.\nAcceptable values: \n- 12\n- 14\n- 16",
+              "default": "16",
+              "attribute": "size",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "headerText",
+              "name": "inline",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Text to be rendered in the header",
-              "attribute": "header-text"
+              "description": "The linkbutton can be inline or standalone.",
+              "default": "false",
+              "attribute": "inline",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "inverted",
               "type": {
                 "text": "boolean"
               },
+              "description": "The linkbutton color can be inverted by setting the inverted attribute to true.",
               "default": "false",
-              "description": "Disables the header, making it visually styled as disabled.\n\nNOTE: slot content will still be interactive unless individually disabled.\nMake sure to handle the disabled state of any actionable elements inside the slot.",
-              "attribute": "disabled",
+              "attribute": "inverted",
               "reflects": true
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "prefix-icon",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
-              "fieldName": "prefixIcon"
+              "kind": "method",
+              "name": "setSize",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "size",
+                  "type": {
+                    "text": "LinkButtonSize"
+                  },
+                  "description": "The desired link size."
+                }
+              ],
+              "description": "Sets the `size` attribute for the linkbutton, falling back to the default if the value is invalid."
             },
             {
-              "name": "postfix-icon",
+              "kind": "field",
+              "name": "iconName",
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "Name of the icon rendered after the slot & text\n\nIf not provided, no icon will be rendered and content will be aligned to the end.",
-              "fieldName": "postfixIcon"
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "utils/mixins/IconNameMixin.js"
+              }
             },
             {
-              "name": "header-text",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Text to be rendered in the header",
-              "fieldName": "headerText"
-            },
-            {
-              "name": "disabled",
+              "kind": "field",
+              "name": "autofocus",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the header, making it visually styled as disabled.\n\nNOTE: slot content will still be interactive unless individually disabled.\nMake sure to handle the disabled state of any actionable elements inside the slot.",
-              "fieldName": "disabled"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-listheader",
-          "jsDoc": "/**\n * Listheader component is used to display a header in a list.\n * It can include icons before and after the header text, and allows for additional content via slots.\n *\n * @tagname mdc-listheader\n *\n * @slot default - to pass in actionable content like buttons or links\n *\n * @cssproperty --mdc-listheader-height - height of the header\n * @cssproperty --mdc-listheader-padding - padding around the header content\n * @cssproperty --mdc-listheader-gap - gap between content\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Listheader",
-            "module": "components/listheader/listheader.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/linksimple/linksimple.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "`mdc-linksimple` is a lightweight link component that can be used to navigate\nwithin the application or to an external URL. It does not have any predefined default size.\n\nThe `children` of the `mdc-linksimple` component can be customized to suit\ndifferent use cases, including text, icons, or other inline content. For the child to be an icon,\nthe `mdc-icon` component should be used to render.",
-          "name": "Linksimple",
-          "cssProperties": [
-            {
-              "description": "Border radius of the link.",
-              "name": "--mdc-link-border-radius"
-            },
-            {
-              "description": "Color of the link’s child content in the active state.",
-              "name": "--mdc-link-color-active"
-            },
-            {
-              "description": "Color of the link’s child content in the disabled state.",
-              "name": "--mdc-link-color-disabled"
-            },
-            {
-              "description": "Color of the link’s child content in the hover state.",
-              "name": "--mdc-link-color-hover"
-            },
-            {
-              "description": "Color of the link’s child content in the normal state.",
-              "name": "--mdc-link-color-normal"
+              "description": "This property indicates whether the element should receive focus automatically when it is rendered.",
+              "attribute": "autofocus",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "Color of the inverted link’s child content in the active state.",
-              "name": "--mdc-link-inverted-color-active"
+              "kind": "field",
+              "name": "tabIndex",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "Color of the inverted link’s child content in the disabled state.",
-              "name": "--mdc-link-inverted-color-disabled"
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "Color of the inverted link’s child content in the hover state.",
-              "name": "--mdc-link-inverted-color-hover"
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
+              "default": "undefined",
+              "attribute": "active",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
-            {
-              "description": "Color of the inverted link’s child content in the normal state.",
-              "name": "--mdc-link-inverted-color-normal"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "inline",
+              "name": "softDisabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "description": "The link can be inline or standalone.",
-              "default": "false",
-              "attribute": "inline",
-              "reflects": true
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "attribute": "soft-disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "inverted",
+              "name": "role",
               "type": {
-                "text": "boolean"
+                "text": "RoleType"
               },
-              "description": "The link color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "attribute": "inverted",
-              "reflects": true
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "attribute": "role",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "href",
+              "name": "ariaStateKey",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "'#'",
-              "description": "Href for navigation. The URL that the hyperlink points to",
-              "attribute": "href",
-              "reflects": true
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "attribute": "ariaStateKey",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "type",
               "type": {
-                "text": "string"
+                "text": "ButtonType"
               },
-              "default": "'_self'",
-              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
-              "attribute": "target",
-              "reflects": true
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "attribute": "type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "executeAction",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setActive",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element"
+                },
+                {
+                  "name": "active",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state of the element"
+                }
+              ],
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setSoftDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "softDisabled",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The soft-disabled state."
+                }
+              ],
+              "description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element."
+                },
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state."
+                }
+              ],
+              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "kind": "field",
-              "name": "rel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
-              "attribute": "rel",
-              "reflects": true
+              "kind": "method",
+              "name": "handleBlur",
+              "privacy": "private",
+              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "handleNavigation",
+              "name": "handleKeyDown",
               "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "event",
                   "type": {
-                    "text": "MouseEvent | KeyboardEvent"
-                  }
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
                 }
-              ]
+              ],
+              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "method",
-              "name": "setDisabled",
+              "name": "handleKeyUp",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "disabled",
+                  "name": "event",
                   "type": {
-                    "text": "boolean"
+                    "text": "KeyboardEvent"
                   },
-                  "description": "Whether the element should be disabled"
+                  "description": "The keyboard event."
                 }
               ],
-              "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."
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tabIndex",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
-              "reflects": true,
+              "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": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.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.",
+              "description": "(React: onClick) This event is dispatched when the linkbutton is clicked.",
               "name": "click",
-              "reactName": "onClick"
+              "reactName": "onClick",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.",
               "name": "keydown",
-              "reactName": "onKeyDown"
+              "reactName": "onKeyDown",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
-              "name": "focus",
-              "reactName": "onFocus"
+              "description": "(React: onKeyUp) This event is dispatched when a key is released on the linkbutton.",
+              "name": "keyup",
+              "reactName": "onKeyUp",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
-              "name": "blur",
-              "reactName": "onBlur"
+              "description": "(React: onFocus) This event is dispatched when the linkbutton receives focus.",
+              "name": "focus",
+              "reactName": "onFocus",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
           "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "ButtonSize"
+              },
+              "description": "Sets the size of the linkbutton.\nAcceptable values: \n- 12\n- 14\n- 16",
+              "default": "16",
+              "fieldName": "size",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
             {
               "name": "inline",
               "type": {
                 "text": "boolean"
               },
-              "description": "The link can be inline or standalone.",
+              "description": "The linkbutton can be inline or standalone.",
               "default": "false",
               "fieldName": "inline"
             },
@@ -16193,35 +16164,47 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "The link color can be inverted by setting the inverted attribute to true.",
+              "description": "The linkbutton color can be inverted by setting the inverted attribute to true.",
               "default": "false",
               "fieldName": "inverted"
             },
             {
-              "name": "href",
+              "name": "icon-name",
               "type": {
-                "text": "string"
+                "text": "IconNames | undefined"
               },
-              "default": "'#'",
-              "description": "Href for navigation. The URL that the hyperlink points to",
-              "fieldName": "href"
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
+              }
             },
             {
-              "name": "target",
+              "name": "autofocus",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'_self'",
-              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
-              "fieldName": "target"
+              "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": "rel",
+              "name": "tabIndex",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
-              "fieldName": "rel"
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
               "name": "disabled",
@@ -16232,40 +16215,88 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "name": "tabIndex",
+              "name": "active",
               "type": {
-                "text": "number"
+                "text": "boolean | undefined"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
+              "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": "TabIndexMixin",
-                "module": "src/utils/mixins/TabIndexMixin.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "soft-disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
+              "default": "undefined",
+              "fieldName": "softDisabled",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "RoleType"
+              },
+              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
+              "default": "button",
+              "fieldName": "role",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "ariaStateKey",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
+              "default": "'aria-pressed' (when)",
+              "fieldName": "ariaStateKey",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "ButtonType"
+              },
+              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
+              "default": "button",
+              "fieldName": "type",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             }
           ],
           "mixins": [
             {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            },
-            {
-              "name": "TabIndexMixin",
-              "module": "/src/utils/mixins/TabIndexMixin"
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
             }
           ],
           "superclass": {
-            "name": "Component",
-            "module": "/src/models"
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.component"
           },
-          "tagName": "mdc-linksimple",
-          "jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\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 * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n */",
+          "tagName": "mdc-linkbutton",
+          "jsDoc": "/**\n * `mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.\n *\n * ### Features:\n * - Looks like a link, behaves like a button.\n * - Supports slots for a text label and an optional trailing icon.\n * - Inherits accessibility and keyboard interaction behavior from `mdc-buttonsimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-linkbutton\n *\n * @slot - Text label of the linkbutton.\n *\n * @event click - (React: onClick) This event is dispatched when the linkbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the linkbutton.\n * @event focus - (React: onFocus) This event is dispatched when the linkbutton receives focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the linkbutton.\n * @cssproperty --mdc-link-color-active - Color of the linkbutton’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the linkbutton’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the linkbutton’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the linkbutton’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted linkbutton’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted linkbutton’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted linkbutton’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted linkbutton’s child content in the normal state.\n */",
           "customElement": true
         }
       ],
@@ -16274,87 +16305,66 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Linksimple",
-            "module": "components/linksimple/linksimple.component.js"
+            "name": "LinkButton",
+            "module": "components/linkbutton/linkbutton.component.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/linkbutton/linkbutton.component.js",
+      "path": "components/linksimple/linksimple.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.\n\n### Features:\n- Looks like a link, behaves like a button.\n- Supports slots for a text label and an optional trailing icon.\n- Inherits accessibility and keyboard interaction behavior from `mdc-buttonsimple`.",
-          "name": "LinkButton",
+          "description": "`mdc-linksimple` is a lightweight link component that can be used to navigate\nwithin the application or to an external URL. It does not have any predefined default size.\n\nThe `children` of the `mdc-linksimple` component can be customized to suit\ndifferent use cases, including text, icons, or other inline content. For the child to be an icon,\nthe `mdc-icon` component should be used to render.",
+          "name": "Linksimple",
           "cssProperties": [
             {
-              "description": "Border radius of the linkbutton.",
+              "description": "Border radius of the link.",
               "name": "--mdc-link-border-radius"
             },
             {
-              "description": "Color of the linkbutton’s child content in the active state.",
+              "description": "Color of the link’s child content in the active state.",
               "name": "--mdc-link-color-active"
             },
             {
-              "description": "Color of the linkbutton’s child content in the disabled state.",
+              "description": "Color of the link’s child content in the disabled state.",
               "name": "--mdc-link-color-disabled"
             },
             {
-              "description": "Color of the linkbutton’s child content in the hover state.",
+              "description": "Color of the link’s child content in the hover state.",
               "name": "--mdc-link-color-hover"
             },
             {
-              "description": "Color of the linkbutton’s child content in the normal state.",
+              "description": "Color of the link’s child content in the normal state.",
               "name": "--mdc-link-color-normal"
             },
             {
-              "description": "Color of the inverted linkbutton’s child content in the active state.",
+              "description": "Color of the inverted link’s child content in the active state.",
               "name": "--mdc-link-inverted-color-active"
             },
             {
-              "description": "Color of the inverted linkbutton’s child content in the disabled state.",
+              "description": "Color of the inverted link’s child content in the disabled state.",
               "name": "--mdc-link-inverted-color-disabled"
             },
             {
-              "description": "Color of the inverted linkbutton’s child content in the hover state.",
+              "description": "Color of the inverted link’s child content in the hover state.",
               "name": "--mdc-link-inverted-color-hover"
             },
             {
-              "description": "Color of the inverted linkbutton’s child content in the normal state.",
+              "description": "Color of the inverted link’s child content in the normal state.",
               "name": "--mdc-link-inverted-color-normal"
             }
           ],
-          "slots": [
-            {
-              "description": "Text label of the linkbutton.",
-              "name": ""
-            }
-          ],
           "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Sets the size of the linkbutton.\nAcceptable values: \n- 12\n- 14\n- 16",
-              "default": "16",
-              "attribute": "size",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "inline",
               "type": {
                 "text": "boolean"
               },
-              "description": "The linkbutton can be inline or standalone.",
+              "description": "The link can be inline or standalone.",
               "default": "false",
               "attribute": "inline",
               "reflects": true
@@ -16365,52 +16375,89 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "The linkbutton color can be inverted by setting the inverted attribute to true.",
+              "description": "The link color can be inverted by setting the inverted attribute to true.",
               "default": "false",
               "attribute": "inverted",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "'#'",
+              "description": "Href for navigation. The URL that the hyperlink points to",
+              "attribute": "href",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "'_self'",
+              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
+              "attribute": "target",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "rel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
+              "attribute": "rel",
+              "reflects": true
+            },
             {
               "kind": "method",
-              "name": "setSize",
+              "name": "handleNavigation",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "size",
+                  "name": "e",
                   "type": {
-                    "text": "LinkButtonSize"
-                  },
-                  "description": "The desired link size."
+                    "text": "MouseEvent | KeyboardEvent"
+                  }
                 }
-              ],
-              "description": "Sets the `size` attribute for the linkbutton, falling back to the default if the value is invalid."
+              ]
             },
             {
-              "kind": "field",
-              "name": "iconName",
-              "type": {
-                "text": "IconNames | undefined"
-              },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.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."
             },
             {
               "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": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
@@ -16424,446 +16471,399 @@
               "attribute": "tabIndex",
               "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
               }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
+              "name": "click",
+              "reactName": "onClick"
             },
             {
-              "kind": "field",
-              "name": "disabled",
+              "description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
+              "name": "keydown",
+              "reactName": "onKeyDown"
+            },
+            {
+              "description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
+              "name": "focus",
+              "reactName": "onFocus"
+            },
+            {
+              "description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
+              "name": "blur",
+              "reactName": "onBlur"
+            }
+          ],
+          "attributes": [
+            {
+              "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",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "The link can be inline or standalone.",
+              "default": "false",
+              "fieldName": "inline"
             },
             {
-              "kind": "field",
-              "name": "active",
+              "name": "inverted",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "attribute": "active",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "The link color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "fieldName": "inverted"
             },
             {
-              "kind": "field",
-              "name": "softDisabled",
+              "name": "href",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "default": "'#'",
+              "description": "Href for navigation. The URL that the hyperlink points to",
+              "fieldName": "href"
             },
             {
-              "kind": "field",
-              "name": "role",
+              "name": "target",
               "type": {
-                "text": "RoleType"
+                "text": "string"
               },
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "attribute": "role",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "default": "'_self'",
+              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
+              "fieldName": "target"
             },
             {
-              "kind": "field",
-              "name": "ariaStateKey",
+              "name": "rel",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "attribute": "ariaStateKey",
-              "reflects": true,
+              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
+              "fieldName": "rel"
+            },
+            {
+              "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": "components/buttonsimple/buttonsimple.component.js"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
-              "kind": "field",
-              "name": "type",
+              "name": "tabIndex",
               "type": {
-                "text": "ButtonType"
+                "text": "number"
               },
-              "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,
+              "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"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
             },
             {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-linksimple",
+          "jsDoc": "/**\n * `mdc-linksimple` is a lightweight link component that can be used to navigate\n * within the application or to an external URL. It does not have any predefined default size.\n *\n * The `children` of the `mdc-linksimple` component can be customized to suit\n * different use cases, including text, icons, or other inline content. For the child to be an icon,\n * the `mdc-icon` component should be used to render.\n *\n * @tagname mdc-linksimple\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 * @cssproperty --mdc-link-border-radius - Border radius of the link.\n * @cssproperty --mdc-link-color-active - Color of the link’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the link’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the link’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the link’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted link’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted link’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted link’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted link’s child content in the normal state.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Linksimple",
+            "module": "components/linksimple/linksimple.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/list/list.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n\nTo add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n`mdc-listitem` components can be placed in the default slot.",
+          "name": "List",
+          "cssParts": [
+            {
+              "description": "The container slot around the list items",
+              "name": "container"
+            }
+          ],
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, where listitems can be placed.",
+              "name": "default"
             },
+            {
+              "description": "This slot is used to pass a header for the list, which can be a `mdc-listheader` component.",
+              "name": "list-header"
+            }
+          ],
+          "members": [
             {
               "kind": "method",
-              "name": "setActive",
-              "privacy": "protected",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element"
-                },
-                {
-                  "name": "active",
-                  "optional": true,
+                  "name": "event",
                   "type": {
-                    "text": "boolean"
+                    "text": "KeyboardEvent"
                   },
-                  "description": "The active state of the element"
+                  "description": "The keyboard event."
                 }
               ],
-              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Handles the keydown event on the list element.\nIf the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item\nand sets the active tabindex of the list item.\nPrevents the default event behavior."
             },
             {
               "kind": "method",
-              "name": "setSoftDisabled",
+              "name": "getCurrentIndex",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "parameters": [
                 {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element."
-                },
-                {
-                  "name": "softDisabled",
-                  "optional": true,
+                  "name": "target",
                   "type": {
-                    "text": "boolean"
+                    "text": "EventTarget | null"
                   },
-                  "description": "The soft-disabled state."
+                  "description": "The target element to find the index of."
                 }
               ],
-              "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": "Returns the index of the given target in the listItems array.\nIf the target is not a list item, but a child element of a list item,\nit returns the index of the parent list item."
             },
             {
               "kind": "method",
-              "name": "setDisabled",
+              "name": "getNewIndexBasedOnKey",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
               "parameters": [
                 {
-                  "name": "element",
+                  "name": "key",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "string"
                   },
-                  "description": "The button element."
+                  "description": "The key that was pressed."
                 },
                 {
-                  "name": "disabled",
+                  "name": "currentIndex",
                   "type": {
-                    "text": "boolean"
+                    "text": "number"
                   },
-                  "description": "The disabled state."
+                  "description": "The current index of the focused list item."
+                },
+                {
+                  "name": "wrappedDivsCount",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The total number of list items."
                 }
               ],
-              "description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "triggerClickEvent",
-              "privacy": "private",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleBlur",
-              "privacy": "private",
-              "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Calculates a new index based on the pressed keyboard key.\nSupports navigation keys for moving focus within a list."
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
+              "name": "handleMouseClick",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
                   "name": "event",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "MouseEvent"
                   },
-                  "description": "The keyboard event."
+                  "description": "The mouse 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 mouse click event on the list element.\nFinds the index of the target element in the list items array and calls\n`resetTabIndexAndSetActiveTabIndex` with that index."
             },
             {
               "kind": "method",
-              "name": "handleKeyUp",
+              "name": "resetTabIndexAndSetActiveTabIndex",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "newIndex",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "number"
                   },
-                  "description": "The keyboard event."
+                  "description": "The index of the new active element in the list."
                 }
               ],
-              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
             }
           ],
-          "events": [
-            {
-              "description": "(React: onClick) This event is dispatched when the linkbutton is clicked.",
-              "name": "click",
-              "reactName": "onClick",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-list",
+          "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "List",
+            "module": "components/list/list.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/listheader/listheader.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Listheader component is used to display a header in a list.\nIt can include icons before and after the header text, and allows for additional content via slots.",
+          "name": "Listheader",
+          "cssProperties": [
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.",
-              "name": "keydown",
-              "reactName": "onKeyDown",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "height of the header",
+              "name": "--mdc-listheader-height"
             },
             {
-              "description": "(React: onKeyUp) This event is dispatched when a key is released on the linkbutton.",
-              "name": "keyup",
-              "reactName": "onKeyUp",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "padding around the header content",
+              "name": "--mdc-listheader-padding"
             },
             {
-              "description": "(React: onFocus) This event is dispatched when the linkbutton receives focus.",
-              "name": "focus",
-              "reactName": "onFocus",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "gap between content",
+              "name": "--mdc-listheader-gap"
             }
           ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "ButtonSize"
-              },
-              "description": "Sets the size of the linkbutton.\nAcceptable values: \n- 12\n- 14\n- 16",
-              "default": "16",
-              "fieldName": "size",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "name": "inline",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The linkbutton can be inline or standalone.",
-              "default": "false",
-              "fieldName": "inline"
-            },
+          "slots": [
             {
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The linkbutton color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "fieldName": "inverted"
-            },
+              "description": "to pass in actionable content like buttons or links",
+              "name": "default"
+            }
+          ],
+          "members": [
             {
-              "name": "icon-name",
+              "kind": "field",
+              "name": "prefixIcon",
               "type": {
                 "text": "IconNames | undefined"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
-              "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
-              }
+              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
+              "attribute": "prefix-icon"
             },
             {
-              "name": "autofocus",
+              "kind": "field",
+              "name": "postfixIcon",
               "type": {
-                "text": "boolean"
+                "text": "IconNames | undefined"
               },
-              "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"
-              }
+              "description": "Name of the icon rendered after the slot & text\n\nIf not provided, no icon will be rendered and content will be aligned to the end.",
+              "attribute": "postfix-icon"
             },
             {
-              "name": "tabIndex",
+              "kind": "field",
+              "name": "headerText",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Text to be rendered in the header",
+              "attribute": "header-text"
             },
             {
+              "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",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
-            {
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "fieldName": "active",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
-            },
+              "default": "false",
+              "description": "Disables the header, making it visually styled as disabled.\n\nNOTE: slot content will still be interactive unless individually disabled.\nMake sure to handle the disabled state of any actionable elements inside the slot.",
+              "attribute": "disabled",
+              "reflects": true
+            }
+          ],
+          "attributes": [
             {
-              "name": "soft-disabled",
+              "name": "prefix-icon",
               "type": {
-                "text": "boolean | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "fieldName": "softDisabled",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Name of the icon rendered before the text\n\nIf not provided, no icon will be rendered and text will be aligned to the start.",
+              "fieldName": "prefixIcon"
             },
             {
-              "name": "role",
+              "name": "postfix-icon",
               "type": {
-                "text": "RoleType"
+                "text": "IconNames | undefined"
               },
-              "description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
-              "default": "button",
-              "fieldName": "role",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Name of the icon rendered after the slot & text\n\nIf not provided, no icon will be rendered and content will be aligned to the end.",
+              "fieldName": "postfixIcon"
             },
             {
-              "name": "ariaStateKey",
+              "name": "header-text",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
-              "default": "'aria-pressed' (when)",
-              "fieldName": "ariaStateKey",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Text to be rendered in the header",
+              "fieldName": "headerText"
             },
             {
-              "name": "type",
+              "name": "disabled",
               "type": {
-                "text": "ButtonType"
+                "text": "boolean"
               },
-              "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": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
+              "default": "false",
+              "description": "Disables the header, making it visually styled as disabled.\n\nNOTE: slot content will still be interactive unless individually disabled.\nMake sure to handle the disabled state of any actionable elements inside the slot.",
+              "fieldName": "disabled"
             }
           ],
           "superclass": {
-            "name": "Buttonsimple",
-            "module": "/src/components/buttonsimple/buttonsimple.component"
+            "name": "Component",
+            "module": "/src/models"
           },
-          "tagName": "mdc-linkbutton",
-          "jsDoc": "/**\n * `mdc-linkbutton` visually mimics a hyperlink while functioning as a button. It blends the appearance of `mdc-link` with the accessibility and interaction capabilities of `mdc-button`.\n *\n * ### Features:\n * - Looks like a link, behaves like a button.\n * - Supports slots for a text label and an optional trailing icon.\n * - Inherits accessibility and keyboard interaction behavior from `mdc-buttonsimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-linkbutton\n *\n * @slot - Text label of the linkbutton.\n *\n * @event click - (React: onClick) This event is dispatched when the linkbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the linkbutton.\n * @event focus - (React: onFocus) This event is dispatched when the linkbutton receives focus.\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the linkbutton.\n * @cssproperty --mdc-link-color-active - Color of the linkbutton’s child content in the active state.\n * @cssproperty --mdc-link-color-disabled - Color of the linkbutton’s child content in the disabled state.\n * @cssproperty --mdc-link-color-hover - Color of the linkbutton’s child content in the hover state.\n * @cssproperty --mdc-link-color-normal - Color of the linkbutton’s child content in the normal state.\n * @cssproperty --mdc-link-inverted-color-active - Color of the inverted linkbutton’s child content in the active state.\n * @cssproperty --mdc-link-inverted-color-disabled - Color of the inverted linkbutton’s child content in the disabled state.\n * @cssproperty --mdc-link-inverted-color-hover - Color of the inverted linkbutton’s child content in the hover state.\n * @cssproperty --mdc-link-inverted-color-normal - Color of the inverted linkbutton’s child content in the normal state.\n */",
+          "tagName": "mdc-listheader",
+          "jsDoc": "/**\n * Listheader component is used to display a header in a list.\n * It can include icons before and after the header text, and allows for additional content via slots.\n *\n * @tagname mdc-listheader\n *\n * @slot default - to pass in actionable content like buttons or links\n *\n * @cssproperty --mdc-listheader-height - height of the header\n * @cssproperty --mdc-listheader-padding - padding around the header content\n * @cssproperty --mdc-listheader-gap - gap between content\n */",
           "customElement": true
         }
       ],
@@ -16872,8 +16872,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LinkButton",
-            "module": "components/linkbutton/linkbutton.component.js"
+            "name": "Listheader",
+            "module": "components/listheader/listheader.component.js"
           }
         }
       ]
@@ -33010,8 +33010,46 @@
               "name": "--mdc-sidenavigation-expanded-width"
             },
             {
-              "description": "width of the sideNavigation when collpased",
+              "description": "width of the sideNavigation when collapsed",
               "name": "--mdc-sidenavigation-collapsed-width"
+            },
+            {
+              "description": "z-index of the vertical divider button",
+              "name": "--mdc-sidenavigation-vertical-divider-button-z-index"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The main container wrapping the entire side navigation.",
+              "name": "side-navigation-container"
+            },
+            {
+              "description": "The scrollable section of the side navigation.",
+              "name": "scrollable-section"
+            },
+            {
+              "description": "The fixed section of the side navigation.",
+              "name": "fixed-section"
+            },
+            {
+              "description": "The divider between the scrollable and fixed sections.",
+              "name": "separator"
+            },
+            {
+              "description": "The container wrapping the brand logo and footer text.",
+              "name": "brand-logo-container"
+            },
+            {
+              "description": "The footer text label in the fixed section.",
+              "name": "footer-text"
+            },
+            {
+              "description": "The vertical divider between the scrollable and fixed sections.",
+              "name": "vertical-divider"
+            },
+            {
+              "description": "The button inside the vertical divider used to toggle expand/collapse.",
+              "name": "vertical-divider-button"
             }
           ],
           "slots": [
@@ -33029,13 +33067,6 @@
             }
           ],
           "members": [
-            {
-              "kind": "field",
-              "name": "Context",
-              "privacy": "public",
-              "static": true,
-              "readonly": true
-            },
             {
               "kind": "field",
               "name": "variant",
@@ -33079,6 +33110,13 @@
               "attribute": "parent-nav-tooltip-text",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "updateContext",
@@ -33090,16 +33128,6 @@
               },
               "description": "Update all observing components of this\nprovider to update the values\n\nIs called on every re-render, see Provider class"
             },
-            {
-              "kind": "field",
-              "name": "navMenuItems",
-              "type": {
-                "text": "NavMenuItem[]"
-              },
-              "privacy": "private",
-              "description": "Returns all nested, non-disabled mdc-navmenuitem elements inside this component.",
-              "readonly": true
-            },
             {
               "kind": "method",
               "name": "preventScrollOnSpace",
@@ -33121,7 +33149,15 @@
           ],
           "events": [
             {
-              "description": "(React: onActiveChange) Dispatched when the active state of the navmenuitem changes.",
+              "name": "toggle",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "(React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.",
+              "reactName": "onToggle"
+            },
+            {
+              "description": "(React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.",
               "name": "activechange",
               "reactName": "onActiveChange"
             }
@@ -33168,7 +33204,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-sidenavigation",
-          "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n *    - Provide an `id` on the `mdc-navmenuitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collpased\n */",
+          "jsDoc": "/**\n * The `mdc-sidenavigation` component provides a vertically stacked navigation experience,\n * typically used in layouts with persistent or collapsible sidebars.\n *\n * ## Features:\n * - Supports four layout variants: `fixed-collapsed`, `fixed-expanded`, `flexible`, and `hidden`\n * - Toggleable expand/collapse behavior\n * - Displays brand logo and customer name\n * - Serves as a context provider for descendant components - `mdc-menubar` and `mdc-navmenuitem`\n *\n * ### Usage:\n * In a sidenavigation, navmenuitems can be used in the following ways:\n *\n * 1. **Simple navmenuitem** – No submenu or interaction beyond selection.\n *\n * 2. **NavMenuItem with submenu**:\n *    - Provide an `id` on the `mdc-navmenuitem`\n *    - Set the `triggerId` on the corresponding `mdc-menupopover` to match the navmenuitem's `id`\n *    - Set `parent-nav-tooltip-text` with appropriate text that will display when a child menu item\n *      inside the nested menupopover is active, conveying which submenu item is currently selected\n *\n * 3. **Actionable navmenuitem (no submenu)**:\n *    - Performs an action such as navigation or alert trigger\n *    - Set `disable-aria-current=\"true\"` to maintain visual active state without navigation behavior\n *\n * ### Recommendations:\n * - Use `mdc-text` for section headers\n * - Use `mdc-divider` with the attribute `variant=\"gradient\"` for section dividers\n * - For the brand logo, use an informative icon. Refer to `Momentum Informative Icons`\n *\n * #### Accessibility Notes:\n * - Always provide meaningful `aria-label` attributes for both `mdc-navmenuitem` and `mdc-menubar`\n * to ensure screen reader support\n * - Set `grabber-btn-aria-label` to provide accessible labels for the expand/collapse grabber button\n *\n * @dependency mdc-text\n * @dependency mdc-button\n * @dependency mdc-divider\n * @dependency mdc-menubar\n *\n * @event activechange - (React: onActiveChange) Dispatched when the active state of the navmenuitem changes.\n *\n * @tagname mdc-sidenavigation\n *\n * @slot scrollable-section - Slot for the scrollable content area of the side navigation.\n * @slot fixed-section - Slot for the fixed content area of the side navigation.\n * @slot brand-logo - Slot for the brand logo (e.g., icon or img).\n *\n * @csspart side-navigation-container - The main container wrapping the entire side navigation.\n * @csspart scrollable-section - The scrollable section of the side navigation.\n * @csspart fixed-section - The fixed section of the side navigation.\n * @csspart separator - The divider between the scrollable and fixed sections.\n * @csspart brand-logo-container - The container wrapping the brand logo and footer text.\n * @csspart footer-text - The footer text label in the fixed section.\n * @csspart vertical-divider - The vertical divider between the scrollable and fixed sections.\n * @csspart vertical-divider-button - The button inside the vertical divider used to toggle expand/collapse.\n *\n * @event toggle - (React: onToggle) Dispatched when the grabber button is clicked to expand/collapse the sidenavigation.\n * @event activechange - (React: onActiveChange) Dispatched when the active state of a nested navmenuitem changes.\n *\n * @cssproperty --mdc-sidenavigation-expanded-width - width of the sideNavigation when expanded\n * @cssproperty --mdc-sidenavigation-collapsed-width - width of the sideNavigation when collapsed\n * @cssproperty --mdc-sidenavigation-vertical-divider-button-z-index - z-index of the vertical divider button\n */",
           "customElement": true
         }
       ],