@momentum-design/components 0.28.2 → 0.28.3

package/dist/custom-elements.json

@@ -446,6 +446,115 @@
                 "module": "utils/mixins/IconNameMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.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": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "attribute": "validation-message",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "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",
@@ -744,6 +853,44 @@
                 "module": "src/utils/mixins/IconNameMixin.ts"
               }
             },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.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": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "validation-message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
             {
               "name": "tabIndex",
               "type": {
@@ -1399,6 +1546,115 @@
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.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": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "attribute": "validation-message",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "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",
@@ -1721,6 +1977,44 @@
                 "module": "src/components/buttonsimple/buttonsimple.component.ts"
               }
             },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.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": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "validation-message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
             {
               "name": "tabIndex",
               "type": {
@@ -1981,45 +2275,154 @@
             },
             {
               "kind": "field",
-              "name": "tabIndex",
+              "name": "name",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "0",
-              "description": "This property specifies the tab order of the element.",
-              "attribute": "tabIndex",
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "TabIndexMixin",
-                "module": "utils/mixins/TabIndexMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "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",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DisabledMixin",
-                "module": "utils/mixins/DisabledMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
-            }
-          ],
-          "events": [
+            },
             {
-              "description": "(React: onClick) This event is dispatched when the button is clicked.",
-              "name": "click",
-              "reactName": "onClick",
-              "eventName": "ClickEvent"
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "attribute": "validation-message",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
             },
             {
-              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
-              "name": "keydown",
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "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",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "This property specifies the tab order of the element.",
+              "attribute": "tabIndex",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "TabIndexMixin",
+                "module": "utils/mixins/TabIndexMixin.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": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "(React: onClick) This event is dispatched when the button is clicked.",
+              "name": "click",
+              "reactName": "onClick",
+              "eventName": "ClickEvent"
+            },
+            {
+              "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
+              "name": "keydown",
               "reactName": "onKeyDown",
               "eventName": "KeydownEvent"
             },
@@ -2079,6 +2482,44 @@
               "default": "button",
               "fieldName": "type"
             },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.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": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "validation-message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
             {
               "name": "tabIndex",
               "type": {
@@ -2107,6 +2548,10 @@
             }
           ],
           "mixins": [
+            {
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
+            },
             {
               "name": "TabIndexMixin",
               "module": "/src/utils/mixins/TabIndexMixin"
@@ -2221,12 +2666,29 @@
               "attribute": "indeterminate",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "attribute": "autofocus",
+              "reflects": true
+            },
             {
               "kind": "method",
               "name": "setFormValue",
               "privacy": "private",
               "description": "Updates the form value to reflect the current state of the checkbox.\nIf checked, the value is set to either the user-provided value or 'on' if no value is provided.\nIf unchecked, the value is set to null."
             },
+            {
+              "kind": "method",
+              "name": "manageRequired",
+              "privacy": "private",
+              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid."
+            },
             {
               "kind": "method",
               "name": "toggleState",
@@ -2240,8 +2702,8 @@
             },
             {
               "kind": "method",
-              "name": "handleChange",
-              "privacy": "public",
+              "name": "handleKeyDown",
+              "privacy": "private",
               "return": {
                 "type": {
                   "text": "void"
@@ -2251,16 +2713,17 @@
                 {
                   "name": "event",
                   "type": {
-                    "text": "Event"
-                  }
+                    "text": "KeyboardEvent"
+                  },
+                  "description": "The keyboard event."
                 }
               ],
-              "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
+              "description": "Handles the keydown event on the checkbox.\nWhen the user presses Enter, the form is submitted."
             },
             {
               "kind": "method",
-              "name": "handleKeyDown",
-              "privacy": "private",
+              "name": "handleChange",
+              "privacy": "public",
               "return": {
                 "type": {
                   "text": "void"
@@ -2270,16 +2733,11 @@
                 {
                   "name": "event",
                   "type": {
-                    "text": "KeyboardEvent"
-                  },
-                  "description": "The keyboard event."
+                    "text": "Event"
+                  }
                 }
               ],
-              "description": "Handles the keydown event on the checkbox.\nWhen the user presses Enter, the form is submitted."
-            },
-            {
-              "kind": "field",
-              "name": "internals"
+              "description": "Toggles the state of the checkbox element.\nand dispatch the new change event."
             },
             {
               "kind": "field",
@@ -2298,46 +2756,116 @@
             },
             {
               "kind": "field",
-              "name": "id",
+              "name": "name",
               "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",
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "value",
               "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",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "NameMixin",
-                "module": "utils/mixins/NameMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "validationMessage",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "attribute": "validation-message",
               "reflects": true,
               "inheritedFrom": {
-                "name": "ValueMixin",
-                "module": "utils/mixins/ValueMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "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"
               }
             },
             {
@@ -2535,17 +3063,26 @@
               "description": "This property is used to determine the parent checkbox in a nested checkbox group.\nIf any one of the children is unselected, then the parent checkbox will be indeterminate.\nIf all children are either selected or unselected, then the parent checkbox will not be indeterminate.",
               "fieldName": "indeterminate"
             },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "fieldName": "autofocus"
+            },
             {
               "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.",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
               "fieldName": "name",
               "inheritedFrom": {
-                "name": "NameMixin",
-                "module": "src/utils/mixins/NameMixin.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
@@ -2557,8 +3094,20 @@
               "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": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "validation-message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
@@ -2651,12 +3200,8 @@
           ],
           "mixins": [
             {
-              "name": "NameMixin",
-              "module": "/src/utils/mixins/NameMixin"
-            },
-            {
-              "name": "ValueMixin",
-              "module": "/src/utils/mixins/ValueMixin"
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
             },
             {
               "name": "DataAriaLabelMixin",
@@ -4125,37 +4670,18 @@
             },
             {
               "kind": "method",
-              "name": "checkValidity",
+              "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": "boolean"
+                  "text": ""
                 }
               }
             },
             {
               "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": ""
-                }
-              }
+              "name": "setInputValidity",
+              "privacy": "private"
             },
             {
               "kind": "method",
@@ -4245,61 +4771,131 @@
             },
             {
               "kind": "field",
-              "name": "id",
+              "name": "name",
               "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",
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "value",
               "type": {
-                "text": "string | null"
+                "text": "string"
               },
-              "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",
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "validationMessage",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "attribute": "value",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "attribute": "validation-message",
               "reflects": true,
               "inheritedFrom": {
-                "name": "ValueMixin",
-                "module": "utils/mixins/ValueMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "id",
               "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",
+              "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",
+              "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": "NameMixin",
-                "module": "utils/mixins/NameMixin.js"
+                "name": "DataAriaLabelMixin",
+                "module": "utils/mixins/DataAriaLabelMixin.js"
               }
             },
             {
@@ -4619,16 +5215,16 @@
               "fieldName": "clearAriaLabel"
             },
             {
-              "name": "data-aria-label",
+              "name": "name",
               "type": {
-                "text": "string | null"
+                "text": "string"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "fieldName": "dataAriaLabel",
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
@@ -4640,21 +5236,33 @@
               "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": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
-              "name": "name",
+              "name": "validation-message",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "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",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "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": "NameMixin",
-                "module": "src/utils/mixins/NameMixin.ts"
+                "name": "DataAriaLabelMixin",
+                "module": "src/utils/mixins/DataAriaLabelMixin.ts"
               }
             },
             {
@@ -4734,16 +5342,12 @@
           ],
           "mixins": [
             {
-              "name": "DataAriaLabelMixin",
-              "module": "/src/utils/mixins/DataAriaLabelMixin"
-            },
-            {
-              "name": "ValueMixin",
-              "module": "/src/utils/mixins/ValueMixin"
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
             },
             {
-              "name": "NameMixin",
-              "module": "/src/utils/mixins/NameMixin"
+              "name": "DataAriaLabelMixin",
+              "module": "/src/utils/mixins/DataAriaLabelMixin"
             }
           ],
           "superclass": {
@@ -6837,10 +7441,15 @@
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "setFormValue",
-              "privacy": "private",
-              "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "attribute": "autofocus",
+              "reflects": true
             },
             {
               "kind": "method",
@@ -6872,6 +7481,34 @@
               ],
               "description": "The '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": "setGroupValidity",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "radios",
+                  "type": {
+                    "text": "Radio[]"
+                  },
+                  "description": "Array of radios of the same group"
+                },
+                {
+                  "name": "isValid",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "Boolean value to set the validity of the group"
+                }
+              ],
+              "description": "Sets the validity of the group of radios."
+            },
+            {
+              "kind": "method",
+              "name": "setActualFormValue",
+              "privacy": "private",
+              "description": "Updates the form value to reflect the current state of the radio.\nIf checked, the value is set to the user-provided value.\nIf unchecked, the value is set to null."
+            },
             {
               "kind": "method",
               "name": "handleChange",
@@ -6952,13 +7589,14 @@
             },
             {
               "kind": "field",
-              "name": "id",
+              "name": "helpTextType",
               "type": {
-                "text": "string"
+                "text": "ValidationType"
               },
-              "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",
+              "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
+              "attribute": "help-text-type",
+              "reflects": true,
+              "default": "undefined as unknown",
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
@@ -6971,12 +7609,12 @@
                 "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.",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
               "attribute": "name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "NameMixin",
-                "module": "utils/mixins/NameMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
@@ -6990,8 +7628,92 @@
               "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "ValueMixin",
-                "module": "utils/mixins/ValueMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "attribute": "validation-message",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "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"
               }
             },
             {
@@ -7054,26 +7776,12 @@
             },
             {
               "kind": "field",
-              "name": "helpTextType",
+              "name": "helpText",
               "type": {
-                "text": "ValidationType"
+                "text": "string | undefined"
               },
-              "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",
+              "description": "The help text that is displayed below the input field.",
+              "attribute": "help-text",
               "reflects": true,
               "inheritedFrom": {
                 "name": "FormfieldWrapper",
@@ -7203,17 +7911,26 @@
               "description": "Determines whether the radio is read-only.",
               "fieldName": "readonly"
             },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "fieldName": "autofocus"
+            },
             {
               "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.",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
               "fieldName": "name",
               "inheritedFrom": {
-                "name": "NameMixin",
-                "module": "src/utils/mixins/NameMixin.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
@@ -7225,8 +7942,20 @@
               "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": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "validation-message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
@@ -7319,12 +8048,8 @@
           ],
           "mixins": [
             {
-              "name": "NameMixin",
-              "module": "/src/utils/mixins/NameMixin"
-            },
-            {
-              "name": "ValueMixin",
-              "module": "/src/utils/mixins/ValueMixin"
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
             },
             {
               "name": "DataAriaLabelMixin",
@@ -7383,13 +8108,8 @@
                 "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"
-              }
+              "description": "Name of the radio group.\nThey are used to group elements in a form together.",
+              "attribute": "name"
             },
             {
               "kind": "field",
@@ -7577,19 +8297,6 @@
               }
             }
           ],
-          "mixins": [
-            {
-              "name": "NameMixin",
-              "module": "/src/utils/mixins/NameMixin"
-            }
-          ],
-          "superclass": {
-            "name": "FormfieldGroup",
-            "module": "/src/components/formfieldgroup"
-          },
-          "tagName": "mdc-radiogroup",
-          "jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text\n *\n */",
-          "customElement": true,
           "attributes": [
             {
               "name": "name",
@@ -7597,12 +8304,8 @@
                 "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"
-              }
+              "description": "Name of the radio group.\nThey are used to group elements in a form together.",
+              "fieldName": "name"
             },
             {
               "name": "data-aria-label",
@@ -7692,6 +8395,13 @@
               }
             }
           ],
+          "superclass": {
+            "name": "FormfieldGroup",
+            "module": "/src/components/formfieldgroup"
+          },
+          "tagName": "mdc-radiogroup",
+          "jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text\n *\n */",
+          "customElement": true,
           "slots": [
             {
               "description": "This is a default slot for checkbox or toggle components.",
@@ -8235,6 +8945,115 @@
                 "module": "utils/mixins/IconNameMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.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": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "attribute": "validation-message",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "components/buttonsimple/buttonsimple.component.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "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",
@@ -8462,6 +9281,44 @@
                 "module": "src/utils/mixins/IconNameMixin.ts"
               }
             },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "fieldName": "name",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.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": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
+            {
+              "name": "validation-message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "Buttonsimple",
+                "module": "src/components/buttonsimple/buttonsimple.component.ts"
+              }
+            },
             {
               "name": "tabIndex",
               "type": {
@@ -8687,7 +9544,7 @@
               "name": "--mdc-themeprovider-letter-spacing-adjustment"
             },
             {
-              "description": "Option to override the font feature settings, default: `normal`",
+              "description": "Option to override the font feature settings, default: `\"ss02\" on`",
               "name": "--mdc-themeprovider-font-feature-settings"
             },
             {
@@ -8764,7 +9621,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-themeprovider",
-          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `normal`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the\n * scrollbar thumb on hover. Applicable only on webkit browsers.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the\n * scrollbar thumb on press. Applicable only on webkit browsers.\n */",
+          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot - children\n *\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color,\n * default: color-theme-text-primary-normal\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family,\n * default: `Momentum` (from momentum-design/fonts)\n * @cssproperty --mdc-themeprovider-font-weight - Option to override the font weight, default: `400`\n * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,\n * default: `-0.25px` (this is to match the old CiscoSans)\n * @cssproperty --mdc-themeprovider-font-feature-settings - Option to override the font feature settings,\n * default: `\"ss02\" on`\n * @cssproperty --mdc-themeprovider-scrollbar-track-color - Option to override the color of the scrollbar track.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-color - Option to override the color of the scrollbar thumb.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-hover-color - Option to override the color of the\n * scrollbar thumb on hover. Applicable only on webkit browsers.\n * @cssproperty --mdc-themeprovider-scrollbar-thumb-active-color - Option to override the color of the\n * scrollbar thumb on press. Applicable only on webkit browsers.\n */",
           "customElement": true
         }
       ],
@@ -8880,6 +9737,23 @@
               "attribute": "size",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "attribute": "autofocus",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "manageRequired",
+              "privacy": "private",
+              "description": "Manages the required state of the checkbox.\nIf the checkbox is not checked and the requiredLabel property is set, then the checkbox is invalid."
+            },
             {
               "kind": "method",
               "name": "setFormValue",
@@ -8897,6 +9771,26 @@
               },
               "description": "Toggles the state of the toggle element.\nIf the element is not disabled, then the checked property is toggled."
             },
+            {
+              "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 toggle element.\nWhen the user presses Enter, the form is submitted."
+            },
             {
               "kind": "method",
               "name": "handleChange",
@@ -8941,20 +9835,6 @@
                 "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",
@@ -8962,12 +9842,12 @@
                 "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.",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
               "attribute": "name",
               "reflects": true,
               "inheritedFrom": {
-                "name": "NameMixin",
-                "module": "utils/mixins/NameMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
@@ -8981,49 +9861,133 @@
               "attribute": "value",
               "reflects": true,
               "inheritedFrom": {
-                "name": "ValueMixin",
-                "module": "utils/mixins/ValueMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "dataAriaLabel",
+              "name": "validationMessage",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
-              "attribute": "data-aria-label",
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "attribute": "validation-message",
               "reflects": true,
               "inheritedFrom": {
-                "name": "DataAriaLabelMixin",
-                "module": "utils/mixins/DataAriaLabelMixin.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "validity",
               "type": {
-                "text": "boolean"
+                "text": "ValidityState"
               },
-              "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,
+              "readonly": true,
               "inheritedFrom": {
-                "name": "FormfieldWrapper",
-                "module": "components/formfieldwrapper/formfieldwrapper.component.js"
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.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,
+              "name": "willValidate",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "utils/mixins/FormInternalsMixin.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "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",
+              "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": "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"
@@ -9180,17 +10144,26 @@
               "default": "default",
               "fieldName": "size"
             },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Automatically focus on the element when the page loads.\n[MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)",
+              "fieldName": "autofocus"
+            },
             {
               "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.",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
               "fieldName": "name",
               "inheritedFrom": {
-                "name": "NameMixin",
-                "module": "src/utils/mixins/NameMixin.ts"
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
@@ -9202,8 +10175,20 @@
               "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": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
+              }
+            },
+            {
+              "name": "validation-message",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "fieldName": "validationMessage",
+              "inheritedFrom": {
+                "name": "FormInternalsMixin",
+                "module": "src/utils/mixins/FormInternalsMixin.ts"
               }
             },
             {
@@ -9296,12 +10281,8 @@
           ],
           "mixins": [
             {
-              "name": "NameMixin",
-              "module": "/src/utils/mixins/NameMixin"
-            },
-            {
-              "name": "ValueMixin",
-              "module": "/src/utils/mixins/ValueMixin"
+              "name": "FormInternalsMixin",
+              "module": "/src/utils/mixins/FormInternalsMixin"
             },
             {
               "name": "DataAriaLabelMixin",
@@ -10339,73 +11320,85 @@
     },
     {
       "kind": "javascript-module",
-      "path": "utils/mixins/IconNameMixin.js",
+      "path": "utils/mixins/FormInternalsMixin.js",
       "declarations": [
         {
           "kind": "mixin",
           "description": "",
-          "name": "IconNameMixin",
+          "name": "FormInternalsMixin",
           "members": [
             {
               "kind": "field",
-              "name": "iconName",
+              "name": "name",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "attribute": "icon-name"
-            }
-          ],
-          "attributes": [
+              "default": "''",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
+              "attribute": "name",
+              "reflects": true
+            },
             {
-              "name": "icon-name",
+              "kind": "field",
+              "name": "value",
               "type": {
-                "text": "IconNames | undefined"
+                "text": "string"
               },
-              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
-              "fieldName": "iconName"
-            }
-          ],
-          "parameters": [
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "attribute": "value",
+              "reflects": true
+            },
             {
-              "name": "superClass",
+              "kind": "field",
+              "name": "validationMessage",
               "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "IconNameMixin",
-          "declaration": {
-            "name": "IconNameMixin",
-            "module": "utils/mixins/IconNameMixin.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "utils/mixins/NameMixin.js",
-      "declarations": [
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "NameMixin",
-          "members": [
+                "text": "string | undefined"
+              },
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "attribute": "validation-message",
+              "reflects": true
+            },
             {
               "kind": "field",
-              "name": "name",
+              "name": "validity",
               "type": {
-                "text": "string"
+                "text": "ValidityState"
               },
-              "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
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "setValidity",
+              "description": "Sets the validity of the input field based on the input field's validity.",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity"
+            },
+            {
+              "kind": "field",
+              "name": "id",
+              "default": "`mdc-input-${uuidv4()}`"
             }
           ],
           "attributes": [
@@ -10415,61 +11408,25 @@
                 "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.",
+              "description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
               "fieldName": "name"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "NameMixin",
-          "declaration": {
-            "name": "NameMixin",
-            "module": "utils/mixins/NameMixin.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "utils/mixins/ReadonlyMixin.js",
-      "declarations": [
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "ReadonlyMixin",
-          "members": [
+            },
             {
-              "kind": "field",
-              "name": "readonly",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false",
-              "description": "Indicates whether the component is readonly.\nWhen the component is readonly, it is not editable.",
-              "attribute": "readonly",
-              "reflects": true
-            }
-          ],
-          "attributes": [
+              "default": "''",
+              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
+              "fieldName": "value"
+            },
             {
-              "name": "readonly",
+              "name": "validation-message",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "description": "Indicates whether the component is readonly.\nWhen the component is readonly, it is not editable.",
-              "fieldName": "readonly"
+              "description": "Custom validation message that will override the default message and displayed when the input is invalid.",
+              "fieldName": "validationMessage"
             }
           ],
           "parameters": [
@@ -10485,44 +11442,41 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ReadonlyMixin",
+          "name": "FormInternalsMixin",
           "declaration": {
-            "name": "ReadonlyMixin",
-            "module": "utils/mixins/ReadonlyMixin.js"
+            "name": "FormInternalsMixin",
+            "module": "utils/mixins/FormInternalsMixin.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "utils/mixins/RequiredMixin.js",
+      "path": "utils/mixins/IconNameMixin.js",
       "declarations": [
         {
           "kind": "mixin",
           "description": "",
-          "name": "RequiredMixin",
+          "name": "IconNameMixin",
           "members": [
             {
               "kind": "field",
-              "name": "required",
+              "name": "iconName",
               "type": {
-                "text": "boolean"
+                "text": "IconNames | undefined"
               },
-              "default": "false",
-              "description": "Indicates whether the component is required.\nWhen the component is required, it is a mandatory field.",
-              "attribute": "required",
-              "reflects": true
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "attribute": "icon-name"
             }
           ],
           "attributes": [
             {
-              "name": "required",
+              "name": "icon-name",
               "type": {
-                "text": "boolean"
+                "text": "IconNames | undefined"
               },
-              "default": "false",
-              "description": "Indicates whether the component is required.\nWhen the component is required, it is a mandatory field.",
-              "fieldName": "required"
+              "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
+              "fieldName": "iconName"
             }
           ],
           "parameters": [
@@ -10538,10 +11492,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "RequiredMixin",
+          "name": "IconNameMixin",
           "declaration": {
-            "name": "RequiredMixin",
-            "module": "utils/mixins/RequiredMixin.js"
+            "name": "IconNameMixin",
+            "module": "utils/mixins/IconNameMixin.js"
           }
         }
       ]
@@ -10599,59 +11553,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "utils/mixins/ValueMixin.js",
-      "declarations": [
-        {
-          "kind": "mixin",
-          "description": "",
-          "name": "ValueMixin",
-          "members": [
-            {
-              "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
-            }
-          ],
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
-              "fieldName": "value"
-            }
-          ],
-          "parameters": [
-            {
-              "name": "superClass",
-              "type": {
-                "text": "T"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ValueMixin",
-          "declaration": {
-            "name": "ValueMixin",
-            "module": "utils/mixins/ValueMixin.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "utils/mixins/index.types.js",