@momentum-design/components 0.28.8 → 0.28.10

package/dist/custom-elements.json

@@ -546,15 +546,6 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "id",
-              "default": "`mdc-input-${uuidv4()}`",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
             {
               "kind": "field",
               "name": "tabIndex",
@@ -1646,15 +1637,6 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "id",
-              "default": "`mdc-input-${uuidv4()}`",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
             {
               "kind": "field",
               "name": "tabIndex",
@@ -2373,15 +2355,6 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "id",
-              "default": "`mdc-input-${uuidv4()}`",
-              "inheritedFrom": {
-                "name": "FormInternalsMixin",
-                "module": "utils/mixins/FormInternalsMixin.js"
-              }
-            },
             {
               "kind": "field",
               "name": "tabIndex",
@@ -2759,6 +2732,20 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "`mdc-input-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "name",
@@ -2859,20 +2846,6 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "default": "`mdc-input-${uuidv4()}`",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "attribute": "id",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "dataAriaLabel",
@@ -4774,6 +4747,20 @@
                 }
               }
             },
+            {
+              "kind": "field",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "`mdc-input-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "name",
@@ -4874,20 +4861,6 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "default": "`mdc-input-${uuidv4()}`",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "attribute": "id",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "dataAriaLabel",
@@ -5423,87 +5396,620 @@
               "name": "--mdc-link-inverted-color-active"
             },
             {
-              "description": "Text and icon color of the inverted link in disabled state",
-              "name": "--mdc-link-inverted-color-disabled"
+              "description": "Text and icon color of the inverted link in disabled state",
+              "name": "--mdc-link-inverted-color-disabled"
+            },
+            {
+              "description": "Text and icon color of the inverted link in hover state",
+              "name": "--mdc-link-inverted-color-hover"
+            },
+            {
+              "description": "Text and icon color of the inverted link in normal state",
+              "name": "--mdc-link-inverted-color-normal"
+            },
+            {
+              "description": "Text decoration of the link in disabled state for all variants",
+              "name": "--mdc-link-text-decoration-disabled"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link can be inline or standalone.",
+              "default": "false",
+              "attribute": "inline",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "LinkSize"
+              },
+              "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
+              "default": "large",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "getIconSize",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "description": "Method to get the size of the trailing icon based on the link size."
+            },
+            {
+              "kind": "method",
+              "name": "setDisabled",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The disabled state of icon"
+                }
+              ],
+              "description": "Updates the tabindex of the host element to disable or enable the link.\nWhen disabled, the link is not focusable or clickable, and tabindex is set to -1\nand aria-disabled attribute is set to true\nWhen link is not disabled, the previous tabindex of the host element is restored\nand aria-disabled attribute is removed."
+            },
+            {
+              "kind": "method",
+              "name": "updateTrailingIcon",
+              "privacy": "private",
+              "description": "Method to create and append trailing icon to the first anchor element in the slot.\nIf no icon name is provided, no icon will be rendered."
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "attribute": "disabled",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link can be inline or standalone.",
+              "default": "false",
+              "fieldName": "inline"
+            },
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link color can be inverted by setting the inverted attribute to true.",
+              "default": "false",
+              "fieldName": "inverted"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "LinkSize"
+              },
+              "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
+              "default": "large",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
+              "fieldName": "disabled",
+              "inheritedFrom": {
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
+              }
+            },
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName",
+              "inheritedFrom": {
+                "name": "IconNameMixin",
+                "module": "src/utils/mixins/IconNameMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DisabledMixin",
+              "module": "/src/utils/mixins/DisabledMixin"
+            },
+            {
+              "name": "IconNameMixin",
+              "module": "/src/utils/mixins/IconNameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-link",
+          "jsDoc": "/**\n * `mdc-link` component can be used to navigate to a different page\n * within the application or to an external site. It can be used to link to\n * emails or phone numbers.\n *\n * The `children` of the link component is expected to be an anchor element\n * containing the text, href, and other attributes.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-link\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link\n * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state\n * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state\n * @cssproperty --mdc-link-color-hover - Text and icon color of the link in hover state\n * @cssproperty --mdc-link-color-normal - Text and icon color of the link in normal state\n * @cssproperty --mdc-link-icon-margin-left - Gap between the text and icon (only applicable when an icon is set)\n * @cssproperty --mdc-link-inverted-color-active - Text and icon color of the inverted link in active state\n * @cssproperty --mdc-link-inverted-color-disabled - Text and icon color of the inverted link in disabled state\n * @cssproperty --mdc-link-inverted-color-hover - Text and icon color of the inverted link in hover state\n * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state\n * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Link",
+            "module": "components/link/link.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.",
+          "name": "List",
+          "slots": [
+            {
+              "description": "This is a default/unnamed slot",
+              "name": "default"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "listItems",
+              "type": {
+                "text": "Array<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "headerText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the list.",
+              "attribute": "header-text",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
+                }
+              ],
+              "description": "Handles the keydown event on the list element.\nIf the key is 'ArrowUp' or 'ArrowDown', it focuses to the previous or next list item\nand sets the active tabindex of the list item.\nPrevents the default event behavior."
+            },
+            {
+              "kind": "method",
+              "name": "getCurrentIndex",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "target",
+                  "type": {
+                    "text": "EventTarget | null"
+                  },
+                  "description": "The target element to find the index of."
+                }
+              ],
+              "description": "Returns the index of the given target in the listItems array.\nIf the target is not a list item, but a child element of a list item,\nit returns the index of the parent list item."
+            },
+            {
+              "kind": "method",
+              "name": "getNewIndexBasedOnKey",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "key",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The key that was pressed."
+                },
+                {
+                  "name": "currentIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The current index of the focused list item."
+                },
+                {
+                  "name": "wrappedDivsCount",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The total number of list items."
+                }
+              ],
+              "description": "Calculates a new index based on the pressed keyboard key.\nSupports navigation keys for moving focus within a list."
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  },
+                  "description": "The mouse event."
+                }
+              ],
+              "description": "Handles the mouse click event on the list element.\nFinds the index of the target element in the list items array and calls\n`resetTabIndexAndSetActiveTabIndex` with that index."
+            },
+            {
+              "kind": "method",
+              "name": "resetTabIndexAndSetActiveTabIndex",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "newIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "The index of the new active element in the list."
+                }
+              ],
+              "description": "Resets all list items tabindex to -1 and sets the tabindex of the\nelement at the given index to 0, effectively setting the active\nelement. This is used when navigating the list via keyboard."
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "header-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the list.",
+              "fieldName": "headerText"
+            },
+            {
+              "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": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-list",
+          "jsDoc": "/**\n * mdc-list component is used to display a group of list items. It is used as a container to wrap other list items.\n *\n * @tagname mdc-list\n *\n * @dependency mdc-text\n *\n * @slot default - This is a default/unnamed slot\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "List",
+            "module": "components/list/list.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/listitem/listitem.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "mdc-listitem component is used to display a label with different types of controls.\nThere can be three types of controls, a radio button, a checkbox on the\nleading side and a toggle on the trailing side.\nThe list item can contain an avatar on the leading side and a badge on the trailing side.\nAdditionally, the list item can contain a side header and a subline text.\n\nThe leading and trailing slots can be used to display controls and text. <br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\nPlease use mdc-list as a parent element even when there is only listitem for a11y purpose.",
+          "name": "ListItem",
+          "cssProperties": [
+            {
+              "description": "Allows customization of the default background color.",
+              "name": "--mdc-listitem-default-background-color"
+            },
+            {
+              "description": "Allows customization of the background color on hover.",
+              "name": "--mdc-listitem-background-color-hover"
+            },
+            {
+              "description": "Allows customization of the background color when pressed.",
+              "name": "--mdc-listitem-background-color-active"
+            },
+            {
+              "description": "Allows customization of the primary label, side header and subline text slot color.",
+              "name": "--mdc-listitem-primary-label-color"
+            },
+            {
+              "description": "Allows customization of the secondary and teritary label text slot color.",
+              "name": "--mdc-listitem-secondary-label-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "slot for list item controls to appear of leading end.",
+              "name": "leading-controls"
+            },
+            {
+              "description": "slot for list item primary label.",
+              "name": "leading-text-primary-label"
+            },
+            {
+              "description": "slot for list item secondary label.",
+              "name": "leading-text-secondary-label"
+            },
+            {
+              "description": "slot for list item tertiary label.",
+              "name": "leading-text-tertiary-label"
+            },
+            {
+              "description": "slot for list item side header text.",
+              "name": "trailing-text-side-header"
+            },
+            {
+              "description": "slot for list item subline text.",
+              "name": "trailing-text-subline"
+            },
+            {
+              "description": "slot for list item controls to appear of trailing end.",
+              "name": "trailing-controls"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "leadingControlsSlot",
+              "type": {
+                "text": "Array<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "trailingControlsSlot",
+              "type": {
+                "text": "Array<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "ListItemVariants"
+              },
+              "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
+              "default": "'full-width'",
+              "attribute": "variant",
+              "reflects": true
             },
             {
-              "description": "Text and icon color of the inverted link in hover state",
-              "name": "--mdc-link-inverted-color-hover"
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
+              "attribute": "label",
+              "reflects": true
             },
             {
-              "description": "Text and icon color of the inverted link in normal state",
-              "name": "--mdc-link-inverted-color-normal"
+              "kind": "field",
+              "name": "secondaryLabel",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
+              "attribute": "secondary-label",
+              "reflects": true
             },
-            {
-              "description": "Text decoration of the link in disabled state for all variants",
-              "name": "--mdc-link-text-decoration-disabled"
-            }
-          ],
-          "members": [
             {
               "kind": "field",
-              "name": "inline",
+              "name": "tertiaryLabel",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "The link can be inline or standalone.",
-              "default": "false",
-              "attribute": "inline",
+              "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
+              "attribute": "tertiary-label",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "inverted",
+              "name": "sideHeaderText",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "The link color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "attribute": "inverted",
+              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
+              "attribute": "side-header-text",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "sublineText",
               "type": {
-                "text": "LinkSize"
+                "text": "string | undefined"
               },
-              "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
-              "default": "large",
-              "attribute": "size",
+              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
+              "attribute": "subline-text",
               "reflects": true
             },
             {
               "kind": "method",
-              "name": "getIconSize",
+              "name": "getText",
               "privacy": "private",
               "return": {
                 "type": {
                   "text": ""
                 }
               },
-              "description": "Method to get the size of the trailing icon based on the link size."
+              "parameters": [
+                {
+                  "name": "slotName",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The name of the slot to be used."
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "TextType"
+                  },
+                  "description": "The type of the text element."
+                },
+                {
+                  "name": "content",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The text content to be displayed within the slot."
+                }
+              ],
+              "description": "Generates a template for a text slot with the specified content."
             },
             {
               "kind": "method",
-              "name": "setDisabled",
+              "name": "disableSlottedChildren",
               "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
               "parameters": [
                 {
                   "name": "disabled",
                   "type": {
                     "text": "boolean"
                   },
-                  "description": "The disabled state of icon"
+                  "description": "Whether to disable or enable the controls."
                 }
               ],
-              "description": "Updates the tabindex of the host element to disable or enable the link.\nWhen disabled, the link is not focusable or clickable, and tabindex is set to -1\nand aria-disabled attribute is set to true\nWhen link is not disabled, the previous tabindex of the host element is restored\nand aria-disabled attribute is removed."
+              "description": "Disable or enable all slotted elements in the leading and trailing slots.\nThis is useful when the list item is disabled, to prevent the user from interacting with the controls."
             },
             {
-              "kind": "method",
-              "name": "updateTrailingIcon",
-              "privacy": "private",
-              "description": "Method to create and append trailing icon to the first anchor element in the slot.\nIf no icon name is provided, no icon will be rendered."
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "default": "'listitem'"
+            },
+            {
+              "kind": "field",
+              "name": "dataAriaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
+              "attribute": "data-aria-label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
+              }
             },
             {
               "kind": "field",
@@ -5522,45 +6028,82 @@
             },
             {
               "kind": "field",
-              "name": "iconName",
+              "name": "tabIndex",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "number"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "utils/mixins/IconNameMixin.js"
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.js"
               }
             }
           ],
           "attributes": [
             {
-              "name": "inline",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "ListItemVariants"
               },
-              "description": "The link can be inline or standalone.",
-              "default": "false",
-              "fieldName": "inline"
+              "description": "The variant of the list item. It can be a pill, rectangle or a full-width.",
+              "default": "'full-width'",
+              "fieldName": "variant"
             },
             {
-              "name": "inverted",
+              "name": "label",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "description": "The link color can be inverted by setting the inverted attribute to true.",
-              "default": "false",
-              "fieldName": "inverted"
+              "description": "The primary label of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "label"
             },
             {
-              "name": "size",
+              "name": "secondary-label",
               "type": {
-                "text": "LinkSize"
+                "text": "string | undefined"
               },
-              "description": "Size of the link.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'",
-              "default": "large",
-              "fieldName": "size"
+              "description": "The secondary label of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "secondaryLabel"
+            },
+            {
+              "name": "tertiary-label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The tertiary label of the list item.\nThis appears on the leading side of the list item.",
+              "fieldName": "tertiaryLabel"
+            },
+            {
+              "name": "side-header-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The header text of the list item.\nThis appears on the trailing side of the list item.",
+              "fieldName": "sideHeaderText"
+            },
+            {
+              "name": "subline-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The subline text of the list item.\nThis appears on the trailing side of the list item.",
+              "fieldName": "sublineText"
+            },
+            {
+              "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": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+              }
             },
             {
               "name": "disabled",
@@ -5576,34 +6119,39 @@
               }
             },
             {
-              "name": "icon-name",
+              "name": "tabIndex",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "number"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName",
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "fieldName": "tabIndex",
               "inheritedFrom": {
-                "name": "IconNameMixin",
-                "module": "src/utils/mixins/IconNameMixin.ts"
+                "name": "TabIndexMixin",
+                "module": "src/utils/mixins/TabIndexMixin.ts"
               }
             }
           ],
           "mixins": [
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            },
             {
               "name": "DisabledMixin",
               "module": "/src/utils/mixins/DisabledMixin"
             },
             {
-              "name": "IconNameMixin",
-              "module": "/src/utils/mixins/IconNameMixin"
+              "name": "TabIndexMixin",
+              "module": "/src/utils/mixins/TabIndexMixin"
             }
           ],
           "superclass": {
             "name": "Component",
             "module": "/src/models"
           },
-          "tagName": "mdc-link",
-          "jsDoc": "/**\n * `mdc-link` component can be used to navigate to a different page\n * within the application or to an external site. It can be used to link to\n * emails or phone numbers.\n *\n * The `children` of the link component is expected to be an anchor element\n * containing the text, href, and other attributes.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-link\n *\n * @cssproperty --mdc-link-border-radius - Border radius of the link\n * @cssproperty --mdc-link-color-active - Text and icon color of the link in active state\n * @cssproperty --mdc-link-color-disabled - Text and icon color of the link in disabled state\n * @cssproperty --mdc-link-color-hover - Text and icon color of the link in hover state\n * @cssproperty --mdc-link-color-normal - Text and icon color of the link in normal state\n * @cssproperty --mdc-link-icon-margin-left - Gap between the text and icon (only applicable when an icon is set)\n * @cssproperty --mdc-link-inverted-color-active - Text and icon color of the inverted link in active state\n * @cssproperty --mdc-link-inverted-color-disabled - Text and icon color of the inverted link in disabled state\n * @cssproperty --mdc-link-inverted-color-hover - Text and icon color of the inverted link in hover state\n * @cssproperty --mdc-link-inverted-color-normal - Text and icon color of the inverted link in normal state\n * @cssproperty --mdc-link-text-decoration-disabled - Text decoration of the link in disabled state for all variants\n */",
+          "tagName": "mdc-listitem",
+          "jsDoc": "/**\n * mdc-listitem component is used to display a label with different types of controls.\n * There can be three types of controls, a radio button, a checkbox on the\n * leading side and a toggle on the trailing side.\n * The list item can contain an avatar on the leading side and a badge on the trailing side.\n * Additionally, the list item can contain a side header and a subline text.\n *\n * The leading and trailing slots can be used to display controls and text. <br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted. <br/>\n * Please use mdc-list as a parent element even when there is only listitem for a11y purpose.\n *\n * @tagname mdc-listitem\n *\n * @dependency mdc-text\n *\n * @slot leading-controls - slot for list item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for list item primary label.\n * @slot leading-text-secondary-label - slot for list item secondary label.\n * @slot leading-text-tertiary-label - slot for list item tertiary label.\n * @slot trailing-text-side-header - slot for list item side header text.\n * @slot trailing-text-subline - slot for list item subline text.\n * @slot trailing-controls - slot for list item controls to appear of trailing end.\n *\n * @cssproperty --mdc-listitem-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-listitem-background-color-hover - Allows customization of the background color on hover.\n * @cssproperty --mdc-listitem-background-color-active - Allows customization of the background color when pressed.\n * @cssproperty --mdc-listitem-primary-label-color\n *  - Allows customization of the primary label, side header and subline text slot color.\n * @cssproperty --mdc-listitem-secondary-label-color\n *  - Allows customization of the secondary and teritary label text slot color.\n */",
           "customElement": true
         }
       ],
@@ -5612,8 +6160,8 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "Link",
-            "module": "components/link/link.component.js"
+            "name": "ListItem",
+            "module": "components/listitem/listitem.component.js"
           }
         }
       ]
@@ -7612,6 +8160,20 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "`mdc-radio-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "name",
@@ -7712,20 +8274,6 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "default": "`mdc-input-${uuidv4()}`",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "attribute": "id",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "dataAriaLabel",
@@ -9055,15 +9603,6 @@
                 "module": "components/buttonsimple/buttonsimple.component.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "id",
-              "default": "`mdc-input-${uuidv4()}`",
-              "inheritedFrom": {
-                "name": "Buttonsimple",
-                "module": "components/buttonsimple/buttonsimple.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "tabIndex",
@@ -9845,6 +10384,20 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "default": "`mdc-toggle-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "attribute": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "name",
@@ -9945,20 +10498,6 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
-            {
-              "kind": "field",
-              "name": "id",
-              "type": {
-                "text": "string"
-              },
-              "default": "`mdc-input-${uuidv4()}`",
-              "description": "The unique id of the input field. It is used to link the input field with the label.",
-              "attribute": "id",
-              "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
-              }
-            },
             {
               "kind": "field",
               "name": "dataAriaLabel",
@@ -11320,11 +11859,6 @@
             {
               "kind": "method",
               "name": "reportValidity"
-            },
-            {
-              "kind": "field",
-              "name": "id",
-              "default": "`mdc-input-${uuidv4()}`"
             }
           ],
           "attributes": [