@momentum-design/components 0.18.5 → 0.18.6

package/dist/custom-elements.json

@@ -1096,77 +1096,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bullet/bullet.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
-          "name": "Bullet",
-          "cssProperties": [
-            {
-              "description": "background color of the bullet",
-              "name": "--mdc-bullet-background-color"
-            },
-            {
-              "description": "small size value of the bullet",
-              "name": "--mdc-bullet-size-small"
-            },
-            {
-              "description": "medium size value of the bullet",
-              "name": "--mdc-bullet-size-medium"
-            },
-            {
-              "description": "large size value of the bullet",
-              "name": "--mdc-bullet-size-large"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "privacy": "public",
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "attribute": "size",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "size",
-              "type": {
-                "text": "Size"
-              },
-              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
-              "default": "small",
-              "fieldName": "size"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-bullet",
-          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Bullet",
-            "module": "components/bullet/bullet.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.component.js",
@@ -1975,6 +1904,77 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bullet/bullet.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
+          "name": "Bullet",
+          "cssProperties": [
+            {
+              "description": "background color of the bullet",
+              "name": "--mdc-bullet-background-color"
+            },
+            {
+              "description": "small size value of the bullet",
+              "name": "--mdc-bullet-size-small"
+            },
+            {
+              "description": "medium size value of the bullet",
+              "name": "--mdc-bullet-size-medium"
+            },
+            {
+              "description": "large size value of the bullet",
+              "name": "--mdc-bullet-size-large"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "privacy": "public",
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "attribute": "size",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "size",
+              "type": {
+                "text": "Size"
+              },
+              "description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
+              "default": "small",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-bullet",
+          "jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n*/",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Bullet",
+            "module": "components/bullet/bullet.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/checkbox/checkbox.component.js",
@@ -3226,165 +3226,975 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/link/link.component.js",
+      "path": "components/input/input.component.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "`mdc-link` component can be used to navigate to a different page\nwithin the application or to an external site. It can be used to link to\nemails or phone numbers.\n\nThe `children` of the link component is expected to be an anchor element\ncontaining the text, href, and other attributes.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.",
-          "name": "Link",
+          "description": "mdc-input is a component that allows users to input text.\n It contains:\n- label field - describe the input field.\n- input field - contains the value\n- help text or validation message - displayed below the input field.\n- trailing button - it displays a clear the input field.\n- prefix text - displayed before the input field.\n- leading icon - displayed before the input field.\n- clear-aria-label - aria label for the trailing button.\n- all the attributes of the input field.",
+          "name": "Input",
           "cssProperties": [
             {
-              "description": "Border radius of the link",
-              "name": "--mdc-link-border-radius"
+              "description": "Border color for the input container when disabled",
+              "name": "--mdc-input-disabled-border-color"
             },
             {
-              "description": "Text and icon color of the link in active state",
-              "name": "--mdc-link-color-active"
+              "description": "Text color for the input field when disabled",
+              "name": "--mdc-input-disabled-text-color"
             },
             {
-              "description": "Text and icon color of the link in disabled state",
-              "name": "--mdc-link-color-disabled"
+              "description": "Background color for the input field when disabled",
+              "name": "--mdc-input-disabled-background-color"
             },
             {
-              "description": "Text and icon color of the link in hover state",
-              "name": "--mdc-link-color-hover"
+              "description": "Border color for the input container",
+              "name": "--mdc-input-border-color"
             },
             {
-              "description": "Text and icon color of the link in normal state",
-              "name": "--mdc-link-color-normal"
+              "description": "Text color for the input field",
+              "name": "--mdc-input-text-color"
             },
             {
-              "description": "Gap between the text and icon (only applicable when an icon is set)",
-              "name": "--mdc-link-icon-margin-left"
+              "description": "Background color for the input field",
+              "name": "--mdc-input-background-color"
             },
             {
-              "description": "Text and icon color of the inverted link in active state",
-              "name": "--mdc-link-inverted-color-active"
+              "description": "Background color for the selected text",
+              "name": "--mdc-input-selection-background-color"
             },
             {
-              "description": "Text and icon color of the inverted link in disabled state",
-              "name": "--mdc-link-inverted-color-disabled"
+              "description": "Text color for the selected text",
+              "name": "--mdc-input-selection-text-color"
             },
             {
-              "description": "Text and icon color of the inverted link in hover state",
-              "name": "--mdc-link-inverted-color-hover"
+              "description": "Text color for the help text",
+              "name": "--mdc-input-support-text-color"
             },
             {
-              "description": "Text and icon color of the inverted link in normal state",
-              "name": "--mdc-link-inverted-color-normal"
+              "description": "Background color for the input field when hovered",
+              "name": "--mdc-input-hover-background-color"
             },
             {
-              "description": "Text decoration of the link in disabled state for all variants",
-              "name": "--mdc-link-text-decoration-disabled"
+              "description": "Background color for the input field when focused",
+              "name": "--mdc-input-focused-background-color"
+            },
+            {
+              "description": "Border color for the input container when focused",
+              "name": "--mdc-input-focused-border-color"
+            },
+            {
+              "description": "Border color for the input container when error",
+              "name": "--mdc-input-error-border-color"
+            },
+            {
+              "description": "Border color for the input container when warning",
+              "name": "--mdc-input-warning-border-color"
+            },
+            {
+              "description": "Border color for the input container when success",
+              "name": "--mdc-input-success-border-color"
+            },
+            {
+              "description": "Border color for the input container when primary",
+              "name": "--mdc-input-primary-border-color"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "iconName",
+              "name": "placeholder",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string"
               },
-              "description": "Name of the icon (= filename) to be used as trailing icon for link.\n\nIf no `icon` is provided, no icon will be rendered.",
-              "attribute": "icon-name"
+              "default": "''",
+              "description": "The placeholder text that is displayed when the input field is empty.",
+              "attribute": "placeholder"
             },
             {
               "kind": "field",
-              "name": "inline",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
-              "description": "The link can be inline or standalone.",
               "default": "false",
-              "attribute": "inline",
-              "reflects": true
+              "description": "required attribute of the input field.\nIf true, the consumer should indicate it on the label that the input field is required.",
+              "attribute": "required"
             },
             {
               "kind": "field",
-              "name": "inverted",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
-              "description": "The link color can be inverted by setting the inverted attribute to true.",
               "default": "false",
-              "attribute": "inverted",
-              "reflects": true
+              "description": "readonly attribute of the input field. If true, the input field is read-only.",
+              "attribute": "readonly"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "prefixText",
               "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",
-              "reflects": true
+              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
+              "attribute": "prefix-text"
             },
             {
-              "kind": "method",
-              "name": "getIconSize",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": ""
-                }
+              "kind": "field",
+              "name": "leadingIcon",
+              "type": {
+                "text": "IconNames | undefined"
               },
-              "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."
+              "description": "The leading icon that is displayed before the input field.",
+              "attribute": "leading-icon"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "trailingButton",
               "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"
-              }
-            }
-          ],
-          "attributes": [
+              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
+              "attribute": "trailing-button"
+            },
             {
-              "name": "icon-name",
+              "kind": "field",
+              "name": "maxlength",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "number | undefined"
               },
-              "description": "Name of the icon (= filename) to be used as trailing icon for link.\n\nIf no `icon` is provided, no icon will be rendered.",
-              "fieldName": "iconName"
+              "description": "The maximum number of characters that the input field can accept.",
+              "attribute": "maxlength"
             },
             {
-              "name": "inline",
+              "kind": "field",
+              "name": "minlength",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "description": "The link can be inline or standalone.",
-              "default": "false",
+              "description": "The minimum number of characters that the input field can accept.",
+              "attribute": "minlength"
+            },
+            {
+              "kind": "field",
+              "name": "autocapitalize",
+              "type": {
+                "text": "AutoCapitalizeType"
+              },
+              "description": "The autocapitalize attribute of the input field.",
+              "default": "'off'",
+              "attribute": "autocapitalize"
+            },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "any"
+              },
+              "default": "'off'",
+              "description": "The autocomplete attribute of the input field.",
+              "attribute": "autocomplete"
+            },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, the input field is focused when the component is rendered.",
+              "attribute": "autofocus"
+            },
+            {
+              "kind": "field",
+              "name": "dirname",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
+              "attribute": "dirname"
+            },
+            {
+              "kind": "field",
+              "name": "pattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
+              "attribute": "pattern"
+            },
+            {
+              "kind": "field",
+              "name": "list",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
+              "attribute": "list"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "number | undefined | undefined"
+              },
+              "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
+              "default": "undefined",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "clearAriaLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
+              "attribute": "clear-aria-label"
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity"
+            },
+            {
+              "kind": "method",
+              "name": "handleValueChange",
+              "description": "Handles the value change of the input field.\nSets the form value and updates the validity of the input field.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setValidityFromInput",
+              "privacy": "private",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateValue",
+              "privacy": "private",
+              "description": "Updates the value of the input field.\nSets the form value.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "onInput",
+              "privacy": "private",
+              "description": "Handles the input event of the input field.\nUpdates the value and sets the validity of the input field."
+            },
+            {
+              "kind": "method",
+              "name": "onChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "Event which contains information about the value change."
+                }
+              ],
+              "description": "Handles the change event of the input field.\nUpdates the value and sets the validity of the input field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
+            },
+            {
+              "kind": "method",
+              "name": "renderLeadingIcon",
+              "privacy": "protected",
+              "description": "Renders the leading icon before the input field.\nIf the leading icon is not set, it will not be displayed.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderPrefixText",
+              "privacy": "protected",
+              "description": "Renders the prefix text before the input field.\nIf the prefix text is more than 10 characters,\n- it will not be displayed.\n- the validation messsage will be displayed.\n\n Note: We are setting aria-hidden so that the screen reader does not read the prefix text.\n The consumers should set the appropriate aria-label for the input field using 'data-aria-label' attribute.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "clearInputText",
+              "privacy": "private",
+              "description": "Clears the input field."
+            },
+            {
+              "kind": "method",
+              "name": "renderTrailingButton",
+              "privacy": "protected",
+              "description": "Renders the trailing button to clear the input field if the trailingButton is set to true.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "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",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "ValueMixin",
+                "module": "utils/mixins/ValueMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "NameMixin",
+                "module": "utils/mixins/NameMixin.js"
+              }
+            },
+            {
+              "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": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "attribute": "label",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "id",
+              "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": "helpTextType",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helpText",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabelElement",
+              "privacy": "protected",
+              "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpTextIcon",
+              "privacy": "protected",
+              "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelpText",
+              "privacy": "protected",
+              "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "privacy": "protected",
+              "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderHelperText",
+              "privacy": "protected",
+              "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "EventConstructor"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The placeholder text that is displayed when the input field is empty.",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "required attribute of the input field.\nIf true, the consumer should indicate it on the label that the input field is required.",
+              "fieldName": "required"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "readonly attribute of the input field. If true, the input field is read-only.",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "prefix-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
+              "fieldName": "prefixText"
+            },
+            {
+              "name": "leading-icon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The leading icon that is displayed before the input field.",
+              "fieldName": "leadingIcon"
+            },
+            {
+              "name": "trailing-button",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "The trailing button when set to true, shows a clear button that clears the input field.",
+              "fieldName": "trailingButton"
+            },
+            {
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The maximum number of characters that the input field can accept.",
+              "fieldName": "maxlength"
+            },
+            {
+              "name": "minlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The minimum number of characters that the input field can accept.",
+              "fieldName": "minlength"
+            },
+            {
+              "name": "autocapitalize",
+              "type": {
+                "text": "AutoCapitalizeType"
+              },
+              "description": "The autocapitalize attribute of the input field.",
+              "default": "'off'",
+              "fieldName": "autocapitalize"
+            },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": "any"
+              },
+              "default": "'off'",
+              "description": "The autocomplete attribute of the input field.",
+              "fieldName": "autocomplete"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If true, the input field is focused when the component is rendered.",
+              "fieldName": "autofocus"
+            },
+            {
+              "name": "dirname",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
+              "fieldName": "dirname"
+            },
+            {
+              "name": "pattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The pattern attribute of the input field.\nSpecifies a regular expression that the input value must match for validation purposes.",
+              "fieldName": "pattern"
+            },
+            {
+              "name": "list",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The list attribute of the input field.\nIdentifies a list of pre-defined options to suggest to the user.",
+              "fieldName": "list"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "number | undefined | undefined"
+              },
+              "description": "The size attribute of the input field.\nSpecifies the width of the input field.",
+              "default": "undefined",
+              "fieldName": "size"
+            },
+            {
+              "name": "clear-aria-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Aria label for the trailing button. If trailing button is set to true, this label is used for the clear button.",
+              "fieldName": "clearAriaLabel"
+            },
+            {
+              "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": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value",
+              "inheritedFrom": {
+                "name": "ValueMixin",
+                "module": "src/utils/mixins/ValueMixin.ts"
+              }
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "NameMixin",
+                "module": "src/utils/mixins/NameMixin.ts"
+              }
+            },
+            {
+              "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": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
+              "fieldName": "label",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "id",
+              "default": "`mdc-input-${uuidv4()}`",
+              "description": "The unique id of the input field. It is used to link the input field with the label.",
+              "fieldName": "id",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text-type",
+              "type": {
+                "text": "ValidationType"
+              },
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "fieldName": "helpTextType",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            },
+            {
+              "name": "help-text",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The help text that is displayed below the input field.",
+              "fieldName": "helpText",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ],
+          "mixins": [
+            {
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
+            },
+            {
+              "name": "ValueMixin",
+              "module": "/src/utils/mixins/ValueMixin"
+            },
+            {
+              "name": "NameMixin",
+              "module": "/src/utils/mixins/NameMixin"
+            }
+          ],
+          "superclass": {
+            "name": "FormfieldWrapper",
+            "module": "/src/components/formfieldwrapper"
+          },
+          "tagName": "mdc-input",
+          "jsDoc": "/**\n * mdc-input is a component that allows users to input text.\n *  It contains:\n * - label field - describe the input field.\n * - input field - contains the value\n * - help text or validation message - displayed below the input field.\n * - trailing button - it displays a clear the input field.\n * - prefix text - displayed before the input field.\n * - leading icon - displayed before the input field.\n * - clear-aria-label - aria label for the trailing button.\n * - all the attributes of the input field.\n *\n * @tagname mdc-input\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-input-disabled-border-color - Border color for the input container when disabled\n * @cssproperty --mdc-input-disabled-text-color - Text color for the input field when disabled\n * @cssproperty --mdc-input-disabled-background-color - Background color for the input field when disabled\n * @cssproperty --mdc-input-border-color - Border color for the input container\n * @cssproperty --mdc-input-text-color - Text color for the input field\n * @cssproperty --mdc-input-background-color - Background color for the input field\n * @cssproperty --mdc-input-selection-background-color - Background color for the selected text\n * @cssproperty --mdc-input-selection-text-color - Text color for the selected text\n * @cssproperty --mdc-input-support-text-color - Text color for the help text\n * @cssproperty --mdc-input-hover-background-color - Background color for the input field when hovered\n * @cssproperty --mdc-input-focused-background-color - Background color for the input field when focused\n * @cssproperty --mdc-input-focused-border-color - Border color for the input container when focused\n * @cssproperty --mdc-input-error-border-color - Border color for the input container when error\n * @cssproperty --mdc-input-warning-border-color - Border color for the input container when warning\n * @cssproperty --mdc-input-success-border-color - Border color for the input container when success\n * @cssproperty --mdc-input-primary-border-color - Border color for the input container when primary\n *\n */",
+          "customElement": true,
+          "slots": [
+            {
+              "description": "slot to add the label info icon",
+              "name": "label-info",
+              "inheritedFrom": {
+                "name": "FormfieldWrapper",
+                "module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Input",
+            "module": "components/input/input.component.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/link/link.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "`mdc-link` component can be used to navigate to a different page\nwithin the application or to an external site. It can be used to link to\nemails or phone numbers.\n\nThe `children` of the link component is expected to be an anchor element\ncontaining the text, href, and other attributes.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.",
+          "name": "Link",
+          "cssProperties": [
+            {
+              "description": "Border radius of the link",
+              "name": "--mdc-link-border-radius"
+            },
+            {
+              "description": "Text and icon color of the link in active state",
+              "name": "--mdc-link-color-active"
+            },
+            {
+              "description": "Text and icon color of the link in disabled state",
+              "name": "--mdc-link-color-disabled"
+            },
+            {
+              "description": "Text and icon color of the link in hover state",
+              "name": "--mdc-link-color-hover"
+            },
+            {
+              "description": "Text and icon color of the link in normal state",
+              "name": "--mdc-link-color-normal"
+            },
+            {
+              "description": "Gap between the text and icon (only applicable when an icon is set)",
+              "name": "--mdc-link-icon-margin-left"
+            },
+            {
+              "description": "Text and icon color of the inverted link in active state",
+              "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 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": "iconName",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename) to be used as trailing icon for link.\n\nIf no `icon` is provided, no icon will be rendered.",
+              "attribute": "icon-name"
+            },
+            {
+              "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"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "icon-name",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "Name of the icon (= filename) to be used as trailing icon for link.\n\nIf no `icon` is provided, no icon will be rendered.",
+              "fieldName": "iconName"
+            },
+            {
+              "name": "inline",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "The link can be inline or standalone.",
+              "default": "false",
               "fieldName": "inline"
             },
             {
@@ -3516,125 +4326,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/modalcontainer/modalcontainer.component.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The `mdc-modalcontainer` component is an element used to\ndisplay a modal container that can further be used in popover.",
-          "name": "Modalcontainer",
-          "cssProperties": [
-            {
-              "description": "primary background color of the modalcontainer",
-              "name": "--mdc-modalcontainer-primary-background-color"
-            },
-            {
-              "description": "border color of the modalcontainer",
-              "name": "--mdc-modalcontainer-border-color"
-            },
-            {
-              "description": "inverted background color of the modalcontainer",
-              "name": "--mdc-modalcontainer-inverted-background-color"
-            },
-            {
-              "description": "inverted border color of the modalcontainer",
-              "name": "--mdc-modalcontainer-inverted-border-color"
-            },
-            {
-              "description": "inverted text color of the modalcontainer",
-              "name": "--mdc-modalcontainer-inverted-text-color"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot for modal container",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "color",
-              "type": {
-                "text": "ModalContainerColor"
-              },
-              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "attribute": "color",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "elevation",
-              "type": {
-                "text": "ModalContainerElevation"
-              },
-              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
-              "default": "0",
-              "attribute": "elevation",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "role",
-              "type": {
-                "text": "ModalContainerRole"
-              },
-              "description": "Role of the modalcontainer",
-              "default": "dialog",
-              "attribute": "role"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "color",
-              "type": {
-                "text": "ModalContainerColor"
-              },
-              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
-              "default": "tonal",
-              "fieldName": "color"
-            },
-            {
-              "name": "elevation",
-              "type": {
-                "text": "ModalContainerElevation"
-              },
-              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
-              "default": "0",
-              "fieldName": "elevation"
-            },
-            {
-              "name": "role",
-              "type": {
-                "text": "ModalContainerRole"
-              },
-              "description": "Role of the modalcontainer",
-              "default": "dialog",
-              "fieldName": "role"
-            }
-          ],
-          "superclass": {
-            "name": "Component",
-            "module": "/src/models"
-          },
-          "tagName": "mdc-modalcontainer",
-          "jsDoc": "/**\n * The `mdc-modalcontainer` component is an element used to\n * display a modal container that can further be used in popover.\n *\n * @tagname mdc-modalcontainer\n *\n * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer\n *\n * @slot - Default slot for modal container\n */",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "Modalcontainer",
-            "module": "components/modalcontainer/modalcontainer.component.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/presence/presence.component.js",
@@ -3805,6 +4496,125 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/modalcontainer/modalcontainer.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-modalcontainer` component is an element used to\ndisplay a modal container that can further be used in popover.",
+          "name": "Modalcontainer",
+          "cssProperties": [
+            {
+              "description": "primary background color of the modalcontainer",
+              "name": "--mdc-modalcontainer-primary-background-color"
+            },
+            {
+              "description": "border color of the modalcontainer",
+              "name": "--mdc-modalcontainer-border-color"
+            },
+            {
+              "description": "inverted background color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-background-color"
+            },
+            {
+              "description": "inverted border color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-border-color"
+            },
+            {
+              "description": "inverted text color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-text-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for modal container",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "ModalContainerColor"
+              },
+              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "elevation",
+              "type": {
+                "text": "ModalContainerElevation"
+              },
+              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
+              "default": "0",
+              "attribute": "elevation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "ModalContainerRole"
+              },
+              "description": "Role of the modalcontainer",
+              "default": "dialog",
+              "attribute": "role"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "ModalContainerColor"
+              },
+              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "fieldName": "color"
+            },
+            {
+              "name": "elevation",
+              "type": {
+                "text": "ModalContainerElevation"
+              },
+              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
+              "default": "0",
+              "fieldName": "elevation"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "ModalContainerRole"
+              },
+              "description": "Role of the modalcontainer",
+              "default": "dialog",
+              "fieldName": "role"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-modalcontainer",
+          "jsDoc": "/**\n * The `mdc-modalcontainer` component is an element used to\n * display a modal container that can further be used in popover.\n *\n * @tagname mdc-modalcontainer\n *\n * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer\n *\n * @slot - Default slot for modal container\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Modalcontainer",
+            "module": "components/modalcontainer/modalcontainer.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/text/text.component.js",