@momentum-design/components 0.120.0 → 0.120.2

package/dist/custom-elements.json

@@ -19846,64 +19846,79 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/linksimple/linksimple.component.js",
+      "path": "components/linkbutton/linkbutton.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",
+          "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": "Border radius of the link.",
+              "description": "Border radius of the linkbutton.",
               "name": "--mdc-link-border-radius"
             },
             {
-              "description": "Color of the link’s child content in the active state.",
+              "description": "Color of the linkbutton’s child content in the active state.",
               "name": "--mdc-link-color-active"
             },
             {
-              "description": "Color of the link’s child content in the disabled state.",
+              "description": "Color of the linkbutton’s child content in the disabled state.",
               "name": "--mdc-link-color-disabled"
             },
             {
-              "description": "Color of the link’s child content in the hover state.",
+              "description": "Color of the linkbutton’s child content in the hover state.",
               "name": "--mdc-link-color-hover"
             },
             {
-              "description": "Color of the link’s child content in the normal state.",
+              "description": "Color of the linkbutton’s child content in the normal state.",
               "name": "--mdc-link-color-normal"
             },
             {
-              "description": "Color of the inverted link’s child content in the active state.",
+              "description": "Color of the inverted linkbutton’s child content in the active state.",
               "name": "--mdc-link-inverted-color-active"
             },
             {
-              "description": "Color of the inverted link’s child content in the disabled state.",
+              "description": "Color of the inverted linkbutton’s child content in the disabled state.",
               "name": "--mdc-link-inverted-color-disabled"
             },
             {
-              "description": "Color of the inverted link’s child content in the hover state.",
+              "description": "Color of the inverted linkbutton’s child content in the hover state.",
               "name": "--mdc-link-inverted-color-hover"
             },
             {
-              "description": "Color of the inverted link’s child content in the normal state.",
+              "description": "Color of the inverted linkbutton’s child content in the normal state.",
               "name": "--mdc-link-inverted-color-normal"
             }
           ],
-          "cssParts": [
+          "slots": [
             {
-              "description": "The anchor element that wraps the linksimple content.",
-              "name": "anchor"
+              "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 link can be inline or standalone.",
+              "description": "The linkbutton can be inline or standalone.",
               "default": "false",
               "attribute": "inline",
               "reflects": true
@@ -19914,273 +19929,440 @@
               "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",
               "attribute": "inverted",
               "reflects": true
             },
+            {
+              "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."
+            },
             {
               "kind": "field",
-              "name": "href",
+              "name": "iconName",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "Href for navigation. The URL that the hyperlink points to",
-              "attribute": "href",
-              "reflects": true
+              "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": "field",
-              "name": "target",
+              "name": "autoFocusOnMount",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "'_self'",
-              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
-              "attribute": "target",
-              "reflects": true
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "attribute": "auto-focus-on-mount",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "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.",
-              "attribute": "rel",
-              "reflects": true
+              "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"
+              }
             },
             {
               "kind": "field",
-              "name": "download",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "Optional download attribute to instruct browsers to download the linked resource.",
-              "attribute": "download",
-              "reflects": true
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
               "kind": "field",
-              "name": "ping",
+              "name": "active",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "Optional ping attribute that defines a space-separated list of URLs to be notified if the link is followed.",
-              "attribute": "ping",
-              "reflects": true
+              "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"
+              }
             },
             {
               "kind": "field",
-              "name": "hreflang",
+              "name": "softDisabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "Optional hreflang attribute specifying the language of the linked resource.",
-              "attribute": "hreflang",
-              "reflects": true
+              "description": "Indicates whether the 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": "type",
+              "name": "role",
               "type": {
-                "text": "string | undefined"
+                "text": "RoleType"
               },
-              "description": "Optional type attribute indicating the MIME type of the linked resource.",
-              "attribute": "type",
-              "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": "referrerpolicy",
+              "name": "ariaStateKey",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Optional referrerpolicy attribute specifying how much referrer information to send.",
-              "attribute": "referrerpolicy",
-              "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": "method",
-              "name": "handleNavigation",
-              "privacy": "protected",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "ButtonType"
               },
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent | KeyboardEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "setDisabled",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "disabled",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "Whether the element should be disabled"
-                }
-              ],
-              "description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored."
+              "description": "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": "field",
-              "name": "dataAriaLabel",
+              "name": "name",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "attribute": "name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "value",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
               }
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
-              "name": "click",
-              "reactName": "onClick"
             },
             {
-              "description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
-              "name": "keydown",
-              "reactName": "onKeyDown"
+              "kind": "method",
+              "name": "executeAction",
+              "privacy": "protected",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
-              "name": "focus",
-              "reactName": "onFocus"
+              "kind": "method",
+              "name": "setActive",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "The button element"
+                },
+                {
+                  "name": "active",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The active state of the element"
+                }
+              ],
+              "description": "Sets the ariaStateKey attributes based on the active state of the button.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
-              "name": "blur",
-              "reactName": "onBlur"
-            }
-          ],
-          "attributes": [
+              "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"
+              }
+            },
             {
-              "name": "inline",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The link can be inline or standalone.",
-              "default": "false",
-              "fieldName": "inline"
+              "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"
+              }
             },
             {
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The link color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "fieldName": "inverted"
+              "kind": "method",
+              "name": "triggerClickEvent",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "name": "href",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Href for navigation. The URL that the hyperlink points to",
-              "fieldName": "href"
+              "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"
+              }
             },
             {
-              "name": "target",
-              "type": {
-                "text": "string"
-              },
-              "default": "'_self'",
-              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
-              "fieldName": "target"
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
             },
             {
-              "name": "rel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
-              "fieldName": "rel"
+              "kind": "method",
+              "name": "handleKeyUp",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            }
+          ],
+          "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"
+              }
             },
             {
-              "name": "download",
+              "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": "(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: 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": "string | undefined"
+                "text": "ButtonSize"
               },
-              "description": "Optional download attribute to instruct browsers to download the linked resource.",
-              "fieldName": "download"
+              "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": "ping",
+              "name": "inline",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Optional ping attribute that defines a space-separated list of URLs to be notified if the link is followed.",
-              "fieldName": "ping"
+              "description": "The linkbutton can be inline or standalone.",
+              "default": "false",
+              "fieldName": "inline"
             },
             {
-              "name": "hreflang",
+              "name": "inverted",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Optional hreflang attribute specifying the language of the linked resource.",
-              "fieldName": "hreflang"
+              "description": "The linkbutton color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "fieldName": "inverted"
             },
             {
-              "name": "type",
+              "name": "icon-name",
               "type": {
-                "text": "string | undefined"
+                "text": "IconNames | undefined"
               },
-              "description": "Optional type attribute indicating the MIME type of the linked resource.",
-              "fieldName": "type"
+              "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": "referrerpolicy",
+              "name": "auto-focus-on-mount",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Optional referrerpolicy attribute specifying how much referrer information to send.",
-              "fieldName": "referrerpolicy"
+              "default": "false",
+              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
+              "fieldName": "autoFocusOnMount",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "data-aria-label",
+              "name": "tabIndex",
               "type": {
-                "text": "string | null"
+                "text": "number"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
@@ -20192,252 +20374,112 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "src/utils/mixins/DisabledMixin.ts"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
-            }
-          ],
-          "mixins": [
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
             },
             {
-              "name": "DisabledMixin",
-              "module": "/src/utils/mixins/DisabledMixin"
-            }
-          ],
-          "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 *\n * @csspart anchor - The anchor element that wraps the linksimple content.\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": "field",
-              "name": "loop",
-              "type": {
-                "text": "'true' | 'false'"
-              },
-              "privacy": "public",
-              "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
-              "default": "''",
-              "attribute": "loop",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "initialFocus",
+              "name": "active",
               "type": {
-                "text": "number"
-              },
-              "privacy": "public",
-              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
-              "default": "0",
-              "attribute": "initial-focus",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "itemsStore",
-              "default": "new ElementStore<ListItem>(this, { isValidItem: this.isValidItem, })"
-            },
-            {
-              "kind": "method",
-              "name": "getCurrentIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+                "text": "boolean | undefined"
               },
-              "parameters": [
-                {
-                  "name": "target",
-                  "type": {
-                    "text": "EventTarget | null"
-                  },
-                  "description": "The target element that triggered the event."
-                }
-              ],
-              "description": "Retrieves the current index of the item that triggered the event.",
+              "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": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "resetTabIndexes",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the currently focused item."
-                }
-              ],
-              "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
+                "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": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "resetTabIndexAndSetFocus",
-              "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "newIndex",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the new item to focus."
-                },
-                {
-                  "name": "oldIndex",
-                  "optional": true,
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "The index of the currently focused item."
-                },
-                {
-                  "name": "focusNewItem",
-                  "default": "true",
-                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
-                }
-              ],
-              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "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": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "resolveDirectionKey",
-              "privacy": "private",
-              "parameters": [
-                {
-                  "name": "key",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "The key pressed by the user."
-                },
-                {
-                  "name": "isRtl",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
-                }
-              ],
-              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "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": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
             {
-              "kind": "method",
-              "name": "shouldLoop",
-              "privacy": "private",
+              "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": "ListNavigationMixin",
-                "module": "utils/mixins/ListNavigationMixin.js"
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "loop",
+              "name": "name",
               "type": {
-                "text": "'true' | 'false'"
+                "text": "string | undefined"
               },
-              "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
-              "default": "''",
-              "fieldName": "loop"
+              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             },
             {
-              "name": "initial-focus",
+              "name": "value",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
-              "default": "0",
-              "fieldName": "initialFocus"
+              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
             }
           ],
           "mixins": [
             {
-              "name": "ListNavigationMixin",
-              "module": "/src/utils/mixins/ListNavigationMixin"
-            },
-            {
-              "name": "CaptureDestroyEventForChildElement",
-              "module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
             }
           ],
           "superclass": {
-            "name": "Component",
-            "module": "/src/models"
+            "name": "Buttonsimple",
+            "module": "/src/components/buttonsimple/buttonsimple.component"
           },
-          "tagName": "mdc-list",
-          "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * To add a header to the list, use the `mdc-listheader` component and place it in the `list-header` slot.\n * `mdc-listitem` components can be placed in the default slot.\n *\n * @tagname mdc-list\n *\n * @slot default - This is a default/unnamed slot, where listitems can be placed.\n * @slot list-header - This slot is used to pass a header for the list, which can be a `mdc-listheader` component.\n *\n * @csspart container - The container slot around the list items\n */",
+          "tagName": "mdc-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
         }
       ],
@@ -20446,483 +20488,261 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "List",
-            "module": "components/list/list.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": [
+          "cssParts": [
             {
-              "description": "Text label of the linkbutton.",
-              "name": ""
+              "description": "The anchor element that wraps the linksimple content.",
+              "name": "anchor"
             }
           ],
           "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
-            },
-            {
-              "kind": "field",
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "The linkbutton color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "attribute": "inverted",
-              "reflects": true
-            },
-            {
-              "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."
-            },
-            {
-              "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": "field",
-              "name": "autoFocusOnMount",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "attribute": "auto-focus-on-mount",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "tabIndex",
+              "name": "inverted",
               "type": {
-                "text": "number"
+                "text": "boolean"
               },
-              "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": "The link color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "href",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
-              "default": "undefined",
-              "attribute": "disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Href for navigation. The URL that the hyperlink points to",
+              "attribute": "href",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "active",
+              "name": "target",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
-              "default": "undefined",
-              "attribute": "active",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "default": "'_self'",
+              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
+              "attribute": "target",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "softDisabled",
+              "name": "rel",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
-              "default": "undefined",
-              "attribute": "soft-disabled",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
+              "attribute": "rel",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "role",
+              "name": "download",
               "type": {
-                "text": "RoleType"
+                "text": "string | 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",
-              "attribute": "role",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Optional download attribute to instruct browsers to download the linked resource.",
+              "attribute": "download",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "ariaStateKey",
+              "name": "ping",
               "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,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Optional ping attribute that defines a space-separated list of URLs to be notified if the link is followed.",
+              "attribute": "ping",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "hreflang",
               "type": {
-                "text": "ButtonType"
+                "text": "string | undefined"
               },
-              "description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
-              "default": "button",
-              "attribute": "type",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Optional hreflang attribute specifying the language of the linked resource.",
+              "attribute": "hreflang",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "type",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
-              "attribute": "name",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Optional type attribute indicating the MIME type of the linked resource.",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "referrerpolicy",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
-              "attribute": "value",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "executeAction",
-              "privacy": "protected",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+              "description": "Optional referrerpolicy attribute specifying how much referrer information to send.",
+              "attribute": "referrerpolicy",
+              "reflects": true
             },
             {
               "kind": "method",
-              "name": "setActive",
+              "name": "handleNavigation",
               "privacy": "protected",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "The button element"
-                },
-                {
-                  "name": "active",
-                  "optional": true,
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "The active state of the element"
-                }
-              ],
-              "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."
+              "return": {
+                "type": {
+                  "text": "void"
                 }
-              ],
-              "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"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
+              },
               "parameters": [
                 {
-                  "name": "event",
-                  "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
-                }
-              ],
-              "description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent | KeyboardEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "handleKeyUp",
+              "name": "setDisabled",
               "privacy": "private",
               "parameters": [
                 {
-                  "name": "event",
+                  "name": "disabled",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "boolean"
                   },
-                  "description": "The keyboard event."
+                  "description": "Whether the element should be disabled"
                 }
               ],
-              "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.",
+              "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": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             }
           ],
           "events": [
             {
-              "description": "(React: onClick) This event is dispatched when the linkbutton is clicked.",
+              "description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
               "name": "click",
-              "reactName": "onClick",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "reactName": "onClick"
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the linkbutton.",
+              "description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
               "name": "keydown",
-              "reactName": "onKeyDown",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "reactName": "onKeyDown"
             },
             {
-              "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: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
+              "name": "focus",
+              "reactName": "onFocus"
             },
             {
-              "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": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
+              "name": "blur",
+              "reactName": "onBlur"
             }
           ],
           "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.",
+              "description": "The link can be inline or standalone.",
               "default": "false",
               "fieldName": "inline"
             },
@@ -20931,163 +20751,343 @@
               "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",
               "fieldName": "inverted"
             },
             {
-              "name": "icon-name",
+              "name": "href",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string | undefined"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
+              "description": "Href for navigation. The URL that the hyperlink points to",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "'_self'",
+              "description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
+              "fieldName": "target"
+            },
+            {
+              "name": "rel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
+              "fieldName": "rel"
+            },
+            {
+              "name": "download",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional download attribute to instruct browsers to download the linked resource.",
+              "fieldName": "download"
+            },
+            {
+              "name": "ping",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional ping attribute that defines a space-separated list of URLs to be notified if the link is followed.",
+              "fieldName": "ping"
+            },
+            {
+              "name": "hreflang",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional hreflang attribute specifying the language of the linked resource.",
+              "fieldName": "hreflang"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional type attribute indicating the MIME type of the linked resource.",
+              "fieldName": "type"
+            },
+            {
+              "name": "referrerpolicy",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional referrerpolicy attribute specifying how much referrer information to send.",
+              "fieldName": "referrerpolicy"
+            },
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "fieldName": "dataAriaLabel",
               "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
-              "name": "auto-focus-on-mount",
+              "name": "disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
-              "fieldName": "autoFocusOnMount",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "default": "undefined",
+              "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            },
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            }
+          ],
+          "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 *\n * @csspart anchor - The anchor element that wraps the linksimple content.\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": "field",
+              "name": "loop",
+              "type": {
+                "text": "'true' | 'false'"
+              },
+              "privacy": "public",
+              "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
+              "default": "''",
+              "attribute": "loop",
+              "reflects": true
             },
             {
-              "name": "tabIndex",
+              "kind": "field",
+              "name": "initialFocus",
               "type": {
                 "text": "number"
               },
+              "privacy": "public",
+              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
               "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "fieldName": "tabIndex",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "attribute": "initial-focus",
+              "reflects": true
             },
             {
-              "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"
-              }
+              "kind": "field",
+              "name": "itemsStore",
+              "default": "new ElementStore<ListItem>(this, { isValidItem: this.isValidItem, })"
             },
             {
-              "name": "active",
-              "type": {
-                "text": "boolean | undefined"
+              "kind": "method",
+              "name": "getCurrentIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "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",
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "EventTarget | null"
+                  },
+                  "description": "The target element that triggered the event."
+                }
+              ],
+              "description": "Retrieves the current index of the item that triggered the event.",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
               }
             },
             {
-              "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",
+              "kind": "method",
+              "name": "resetTabIndexes",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                }
+              ],
+              "description": "Reset all tabindex to -1 and set the tabindex of the current item to 0",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
               }
             },
             {
-              "name": "role",
-              "type": {
-                "text": "RoleType"
+              "kind": "method",
+              "name": "resetTabIndexAndSetFocus",
+              "privacy": "protected",
+              "parameters": [
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the new item to focus."
+                },
+                {
+                  "name": "oldIndex",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the currently focused item."
+                },
+                {
+                  "name": "focusNewItem",
+                  "default": "true",
+                  "description": "Call focus() on the new item or not. It should be false during firstUpdate"
+                }
+              ],
+              "description": "Resets the tabindex of the currently focused item and sets focus to a new item.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "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": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
               }
             },
             {
-              "name": "ariaStateKey",
-              "type": {
-                "text": "string | undefined"
+              "kind": "method",
+              "name": "resolveDirectionKey",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The key pressed by the user."
+                },
+                {
+                  "name": "isRtl",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "A boolean indicating if the layout is right-to-left (RTL)."
+                }
+              ],
+              "description": "Resolves the key pressed by the user based on the direction of the layout.\nThis method is used to handle keyboard navigation in a right-to-left (RTL) layout.\nIt checks if the layout is RTL and adjusts the arrow keys accordingly.\nFor example, in RTL, the left arrow key behaves like the right arrow key and vice versa.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
               },
-              "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": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
               }
             },
             {
-              "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",
+              "kind": "method",
+              "name": "shouldLoop",
+              "privacy": "private",
               "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+                "name": "ListNavigationMixin",
+                "module": "utils/mixins/ListNavigationMixin.js"
               }
-            },
+            }
+          ],
+          "attributes": [
             {
-              "name": "name",
+              "name": "loop",
               "type": {
-                "text": "string | undefined"
+                "text": "'true' | 'false'"
               },
-              "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
-              "fieldName": "name",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "Whether to loop navigation when reaching the end of the list.\nIf 'true', pressing the down arrow on the last item will focus the first item,\nand pressing the up arrow on the first item will focus the last item.\nIf 'false', navigation will stop at the first or last item.",
+              "default": "''",
+              "fieldName": "loop"
             },
             {
-              "name": "value",
+              "name": "initial-focus",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
-              "fieldName": "value",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "src/components/buttonsimple/buttonsimple.component.ts"
-              }
+              "description": "The index of the item that should receive focus when the list is first rendered.\nIf the index is out of bounds, the first item (index 0) will receive focus.",
+              "default": "0",
+              "fieldName": "initialFocus"
             }
           ],
           "mixins": [
             {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
+              "name": "ListNavigationMixin",
+              "module": "/src/utils/mixins/ListNavigationMixin"
+            },
+            {
+              "name": "CaptureDestroyEventForChildElement",
+              "module": "/src/utils/mixins/lifecycle/CaptureDestroyEventForChildElement"
             }
           ],
           "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-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
         }
       ],
@@ -21096,8 +21096,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "LinkButton",
-            "module": "components/linkbutton/linkbutton.component.js"
+            "name": "List",
+            "module": "components/list/list.component.js"
           }
         }
       ]
@@ -38182,55 +38182,20 @@
               "module": "/src/utils/mixins/AutoFocusOnMountMixin"
             },
             {
-              "name": "FormInternalsMixin",
-              "module": "/src/utils/mixins/FormInternalsMixin"
-            },
-            {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            }
-          ],
-          "superclass": {
-            "name": "FormfieldWrapper",
-            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
-          },
-          "tagName": "mdc-select",
-          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n * You can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.\n * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.\n * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.\n * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.\n * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.\n * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.\n * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Select",
-            "module": "components/select/select.component.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/selectlistbox/selectlistbox.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Selectlistbox component as Light DOM component to act as a simple wrapper\nfor mdc-option components to ensure accessibility and proper role assignment.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\nand mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them.",
-          "name": "Selectlistbox",
-          "slots": [
-            {
-              "description": "This is a default/unnamed slot, which can be used to insert mdc-option components.",
-              "name": "default"
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
+            },
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
           ],
-          "members": [],
           "superclass": {
-            "name": "Component",
-            "module": "/src/models"
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
-          "tagName": "mdc-selectlistbox",
-          "jsDoc": "/**\n * Selectlistbox component as Light DOM component to act as a simple wrapper\n * for mdc-option components to ensure accessibility and proper role assignment.\n *\n * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\n * and mdc-option can be used directly in the select component with a listbox in a different\n * shadow root and aria-owns attribute to connect them.\n *\n * @tagname mdc-selectlistbox\n *\n * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.\n */",
+          "tagName": "mdc-select",
+          "jsDoc": "/**\n * The mdc-select component is a dropdown selection control that allows users to pick an option from a predefined list.\n * It is designed to work with `mdc-option` for individual options and `mdc-optgroup` for grouping related options.\n *\n * Every mdc-option should have a `value` attribute set to ensure proper form submission.\n *\n * To set a default option, use the `selected` attribute on the `mdc-option` element.\n * You can also set the `value` attribute on the `mdc-select` element to match the value of the desired option. The component will select the corresponding option automatically.\n *\n * **Note:** Make sure to add `mdc-selectlistbox` as a child of `mdc-select` and wrap options/optgroup in it to ensure proper accessibility functionality. Read more about it in SelectListBox documentation.\n *\n * If you need to use `mdc-tooltip` with any options, make sure to place the tooltip component outside the `mdc-select` element.\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @tagname mdc-select\n *\n * @slot default - This is a default/unnamed slot for Selectlistbox including options and/or option group.\n *\n * @event click - (React: onClick) This event is dispatched when the select is clicked.\n * @event change - (React: onChange) This event is dispatched when the select is changed.\n * @event input - (React: onInput) This event is dispatched when the select is changed.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the select.\n * @event focus - (React: onFocus) This event is dispatched when the select receives focus.\n *\n * @cssproperty --mdc-select-background-color - The background color of the combobox of select.\n * @cssproperty --mdc-select-background-color-hover - The background color of the combobox of select when hovered.\n * @cssproperty --mdc-select-background-color-active - The background color of the combobox of select when active.\n * @cssproperty --mdc-select-background-color-disabled - The background color of the combobox of select when disabled.\n * @cssproperty --mdc-select-text-color - The text color of the select.\n * @cssproperty --mdc-select-text-color-selected - The text color of the selected option in the select.\n * @cssproperty --mdc-select-text-color-disabled - The text color of the select when disabled.\n * @cssproperty --mdc-select-border-color - The border color of the select.\n * @cssproperty --mdc-select-border-color-disabled - The border color of the select when disabled.\n * @cssproperty --mdc-select-border-color-success - The border color of the select when in success state.\n * @cssproperty --mdc-select-border-color-warning - The border color of the select when in warning state.\n * @cssproperty --mdc-select-border-color-error - The border color of the select when in error state.\n * @cssproperty --mdc-select-width - The width of the select.\n * @cssproperty --mdc-select-listbox-height - The height of the listbox inside the select.\n * @cssproperty --mdc-select-listbox-width - The width of the listbox inside the select (default: `--mdc-select-width`).\n */",
           "customElement": true
         }
       ],
@@ -38239,8 +38204,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Selectlistbox",
-            "module": "components/selectlistbox/selectlistbox.component.js"
+            "name": "Select",
+            "module": "components/select/select.component.js"
           }
         }
       ]
@@ -39331,6 +39296,41 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/selectlistbox/selectlistbox.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Selectlistbox component as Light DOM component to act as a simple wrapper\nfor mdc-option components to ensure accessibility and proper role assignment.\n\nOnce [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\nand mdc-option can be used directly in the select component with a listbox in a different\nshadow root and aria-owns attribute to connect them.",
+          "name": "Selectlistbox",
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot, which can be used to insert mdc-option components.",
+              "name": "default"
+            }
+          ],
+          "members": [],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-selectlistbox",
+          "jsDoc": "/**\n * Selectlistbox component as Light DOM component to act as a simple wrapper\n * for mdc-option components to ensure accessibility and proper role assignment.\n *\n * Once [ariaOwnsElements](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaOwnsElements) is supported in browsers, this component can be removed\n * and mdc-option can be used directly in the select component with a listbox in a different\n * shadow root and aria-owns attribute to connect them.\n *\n * @tagname mdc-selectlistbox\n *\n * @slot default - This is a default/unnamed slot, which can be used to insert mdc-option components.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Selectlistbox",
+            "module": "components/selectlistbox/selectlistbox.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/spinner/spinner.component.js",
@@ -41442,106 +41442,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/tablist/tablist.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n  and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
-          "name": "TabList",
-          "cssProperties": [
-            {
-              "description": "Gap between tabs",
-              "name": "--mdc-tablist-gap"
-            },
-            {
-              "description": "Width of the tablist",
-              "name": "--mdc-tablist-width"
-            },
-            {
-              "description": "Margin value for the arrow button",
-              "name": "--mdc-tablist-arrow-button-margin"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The tablist container.",
-              "name": "container"
-            }
-          ],
-          "slots": [
-            {
-              "description": "slot for mdc-tab elements.",
-              "name": "Default"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "activeTabId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "ID of the active tab, defaults to the first tab if not provided",
-              "attribute": "active-tab-id",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dataAriaLabel",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
-              "attribute": "data-aria-label"
-            }
-          ],
-          "events": [
-            {
-              "description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
-              "name": "change",
-              "reactName": "onChange"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "active-tab-id",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "ID of the active tab, defaults to the first tab if not provided",
-              "fieldName": "activeTabId"
-            },
-            {
-              "name": "data-aria-label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
-              "fieldName": "dataAriaLabel"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-tablist",
-          "jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n *  or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n *   and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n *  that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n *     The function sent as the argument will receive the fired event\n *      and the new tab id can be fetched from event.detail.tabId.\n *\n *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n *\n * @csspart container - The tablist container.\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "TabList",
-            "module": "components/tablist/tablist.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/text/text.component.js",
@@ -42712,6 +42612,106 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/tablist/tablist.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n  and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
+          "name": "TabList",
+          "cssProperties": [
+            {
+              "description": "Gap between tabs",
+              "name": "--mdc-tablist-gap"
+            },
+            {
+              "description": "Width of the tablist",
+              "name": "--mdc-tablist-width"
+            },
+            {
+              "description": "Margin value for the arrow button",
+              "name": "--mdc-tablist-arrow-button-margin"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The tablist container.",
+              "name": "container"
+            }
+          ],
+          "slots": [
+            {
+              "description": "slot for mdc-tab elements.",
+              "name": "Default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "activeTabId",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ID of the active tab, defaults to the first tab if not provided",
+              "attribute": "active-tab-id",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
+              "attribute": "data-aria-label"
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
+              "name": "change",
+              "reactName": "onChange"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "active-tab-id",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "ID of the active tab, defaults to the first tab if not provided",
+              "fieldName": "activeTabId"
+            },
+            {
+              "name": "data-aria-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
+              "fieldName": "dataAriaLabel"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-tablist",
+          "jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n *  or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n *   and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n *  that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n *     The function sent as the argument will receive the fired event\n *      and the new tab id can be fetched from event.detail.tabId.\n *\n *    `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n *\n * @csspart container - The tablist container.\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "TabList",
+            "module": "components/tablist/tablist.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/toast/toast.component.js",