igniteui-webcomponents 4.3.1 → 4.5.0-beta.1

package/custom-elements.json

@@ -74,7 +74,8 @@
           "name": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"small\""
+          "default": "\"small\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "properties": [
@@ -118,7 +119,8 @@
           "attribute": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"small\""
+          "default": "\"small\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "slots": [
@@ -254,19 +256,16 @@
         },
         {
           "name": "disabled",
-          "description": "Determines whether the button is disabled.",
+          "description": "The disabled state of the component",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "aria-label",
-          "type": "string"
-        },
         {
           "name": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "default": "\"medium\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "properties": [
@@ -282,6 +281,11 @@
           "type": "\"flat\" | \"contained\" | \"outlined\" | \"fab\"",
           "default": "\"contained\""
         },
+        {
+          "name": "formAssociated",
+          "type": "true",
+          "default": "true"
+        },
         {
           "name": "type",
           "attribute": "type",
@@ -315,21 +319,21 @@
         {
           "name": "disabled",
           "attribute": "disabled",
-          "description": "Determines whether the button is disabled.",
+          "description": "The disabled state of the component",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "ariaLabel",
-          "attribute": "aria-label",
-          "type": "string"
+          "name": "form",
+          "description": "Returns the HTMLFormElement associated with this element."
         },
         {
           "name": "size",
           "attribute": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "default": "\"medium\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "events": [
@@ -424,19 +428,16 @@
         },
         {
           "name": "disabled",
-          "description": "Determines whether the button is disabled.",
+          "description": "The disabled state of the component",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "aria-label",
-          "type": "string"
-        },
         {
           "name": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"large\""
+          "default": "\"large\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "properties": [
@@ -471,6 +472,11 @@
           "type": "\"flat\" | \"contained\" | \"outlined\"",
           "default": "\"contained\""
         },
+        {
+          "name": "formAssociated",
+          "type": "true",
+          "default": "true"
+        },
         {
           "name": "type",
           "attribute": "type",
@@ -504,21 +510,21 @@
         {
           "name": "disabled",
           "attribute": "disabled",
-          "description": "Determines whether the button is disabled.",
+          "description": "The disabled state of the component",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "ariaLabel",
-          "attribute": "aria-label",
-          "type": "string"
+          "name": "form",
+          "description": "Returns the HTMLFormElement associated with this element."
         },
         {
           "name": "size",
           "attribute": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"large\""
+          "default": "\"large\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "cssParts": [
@@ -577,7 +583,8 @@
           "name": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"large\""
+          "default": "\"large\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         },
         {
           "name": "value",
@@ -689,7 +696,8 @@
           "attribute": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"large\""
+          "default": "\"large\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         },
         {
           "name": "value",
@@ -1331,50 +1339,45 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "name",
-          "description": "The name attribute of the control.",
-          "type": "string"
-        },
         {
           "name": "value",
           "description": "The value attribute of the control.",
           "type": "string"
         },
-        {
-          "name": "disabled",
-          "description": "Disables the control.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "checked",
           "description": "The checked state of the control.",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "label-position",
+          "description": "The label position of the control.",
+          "type": "\"before\" | \"after\"",
+          "default": "\"after\""
+        },
         {
           "name": "required",
-          "description": "Makes the control a required field.",
+          "description": "Makes the control a required field in a form context.",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "invalid",
-          "description": "Controls the validity of the control.",
-          "type": "boolean",
-          "default": "false"
+          "name": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
         },
         {
-          "name": "label-position",
-          "description": "The label position of the control.",
-          "type": "\"before\" | \"after\"",
-          "default": "\"after\""
+          "name": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "aria-labelledby",
-          "description": "Sets the aria-labelledby attribute for the control.",
-          "type": "string"
+          "name": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -1390,25 +1393,12 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "name",
-          "attribute": "name",
-          "description": "The name attribute of the control.",
-          "type": "string"
-        },
         {
           "name": "value",
           "attribute": "value",
           "description": "The value attribute of the control.",
           "type": "string"
         },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Disables the control.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "checked",
           "attribute": "checked",
@@ -1416,32 +1406,60 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "labelPosition",
+          "attribute": "label-position",
+          "description": "The label position of the control.",
+          "type": "\"before\" | \"after\"",
+          "default": "\"after\""
+        },
         {
           "name": "required",
           "attribute": "required",
-          "description": "Makes the control a required field.",
+          "description": "Makes the control a required field in a form context.",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "invalid",
-          "attribute": "invalid",
-          "description": "Controls the validity of the control.",
-          "type": "boolean",
-          "default": "false"
+          "name": "formAssociated",
+          "type": "true",
+          "default": "true"
         },
         {
-          "name": "labelPosition",
-          "attribute": "label-position",
-          "description": "The label position of the control.",
-          "type": "\"before\" | \"after\"",
-          "default": "\"after\""
+          "name": "name",
+          "attribute": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
         },
         {
-          "name": "ariaLabelledby",
-          "attribute": "aria-labelledby",
-          "description": "Sets the aria-labelledby attribute for the control.",
-          "type": "string"
+          "name": "form",
+          "description": "Returns the HTMLFormElement associated with this element."
+        },
+        {
+          "name": "validity",
+          "description": "Returns a ValidityState object which represents the different validity states\nthe element can be in, with respect to constraint validation."
+        },
+        {
+          "name": "validationMessage",
+          "description": "A string containing the validation message of this element."
+        },
+        {
+          "name": "willValidate",
+          "description": "A boolean value which returns true if the element is a submittable element\nthat is a candidate for constraint validation."
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalid",
+          "attribute": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [
@@ -1488,50 +1506,45 @@
       "path": "./src/components/checkbox/switch.ts",
       "description": "Similar to a checkbox, a switch controls the state of a single setting on or off.",
       "attributes": [
-        {
-          "name": "name",
-          "description": "The name attribute of the control.",
-          "type": "string"
-        },
         {
           "name": "value",
           "description": "The value attribute of the control.",
           "type": "string"
         },
-        {
-          "name": "disabled",
-          "description": "Disables the control.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "checked",
           "description": "The checked state of the control.",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "label-position",
+          "description": "The label position of the control.",
+          "type": "\"before\" | \"after\"",
+          "default": "\"after\""
+        },
         {
           "name": "required",
-          "description": "Makes the control a required field.",
+          "description": "Makes the control a required field in a form context.",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "invalid",
-          "description": "Controls the validity of the control.",
-          "type": "boolean",
-          "default": "false"
+          "name": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
         },
         {
-          "name": "label-position",
-          "description": "The label position of the control.",
-          "type": "\"before\" | \"after\"",
-          "default": "\"after\""
+          "name": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
         },
         {
-          "name": "aria-labelledby",
-          "description": "Sets the aria-labelledby attribute for the control.",
-          "type": "string"
+          "name": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -1545,25 +1558,12 @@
           "type": "CSSResult",
           "default": "\"styles\""
         },
-        {
-          "name": "name",
-          "attribute": "name",
-          "description": "The name attribute of the control.",
-          "type": "string"
-        },
         {
           "name": "value",
           "attribute": "value",
           "description": "The value attribute of the control.",
           "type": "string"
         },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Disables the control.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "checked",
           "attribute": "checked",
@@ -1571,32 +1571,60 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "labelPosition",
+          "attribute": "label-position",
+          "description": "The label position of the control.",
+          "type": "\"before\" | \"after\"",
+          "default": "\"after\""
+        },
         {
           "name": "required",
           "attribute": "required",
-          "description": "Makes the control a required field.",
+          "description": "Makes the control a required field in a form context.",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "invalid",
-          "attribute": "invalid",
-          "description": "Controls the validity of the control.",
-          "type": "boolean",
-          "default": "false"
+          "name": "formAssociated",
+          "type": "true",
+          "default": "true"
         },
         {
-          "name": "labelPosition",
-          "attribute": "label-position",
-          "description": "The label position of the control.",
-          "type": "\"before\" | \"after\"",
-          "default": "\"after\""
+          "name": "name",
+          "attribute": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
         },
         {
-          "name": "ariaLabelledby",
-          "attribute": "aria-labelledby",
-          "description": "Sets the aria-labelledby attribute for the control.",
-          "type": "string"
+          "name": "form",
+          "description": "Returns the HTMLFormElement associated with this element."
+        },
+        {
+          "name": "validity",
+          "description": "Returns a ValidityState object which represents the different validity states\nthe element can be in, with respect to constraint validation."
+        },
+        {
+          "name": "validationMessage",
+          "description": "A string containing the validation message of this element."
+        },
+        {
+          "name": "willValidate",
+          "description": "A boolean value which returns true if the element is a submittable element\nthat is a candidate for constraint validation."
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalid",
+          "attribute": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [
@@ -1676,7 +1704,8 @@
           "name": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "default": "\"medium\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "properties": [
@@ -1729,7 +1758,8 @@
           "attribute": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "default": "\"medium\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "events": [
@@ -1888,29 +1918,6 @@
       "name": "igc-combo",
       "path": "./src/components/combo/combo.ts",
       "attributes": [
-        {
-          "name": "name",
-          "description": "The name attribute of the control.",
-          "type": "string"
-        },
-        {
-          "name": "disabled",
-          "description": "The disabled attribute of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "required",
-          "description": "The required attribute of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "invalid",
-          "description": "The invalid attribute of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "outlined",
           "description": "The outlined attribute of the control.",
@@ -1950,12 +1957,6 @@
           "type": "string",
           "default": "\"Search\""
         },
-        {
-          "name": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "\"ltr\" | \"rtl\" | \"auto\"",
-          "default": "\"auto\""
-        },
         {
           "name": "open",
           "description": "Sets the open state of the component.",
@@ -2011,51 +2012,47 @@
           "name": "value",
           "description": "Sets the value (selected items). The passed value must be a valid JSON array.\nIf the data source is an array of complex objects, the `valueKey` attribute must be set.\nNote that when `displayKey` is not explicitly set, it will fall back to the value of `valueKey`.",
           "type": "ComboValue<T>[]"
-        }
-      ],
-      "properties": [
-        {
-          "name": "tagName",
-          "type": "\"igc-combo\"",
-          "default": "\"igc-combo\""
-        },
-        {
-          "name": "styles",
-          "type": "CSSResult",
-          "default": "\"styles\""
         },
         {
-          "name": "data",
-          "description": "The data source used to generate the list of options.",
-          "type": "T[]",
-          "default": "[]"
+          "name": "required",
+          "description": "Makes the control a required field in a form context.",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "name",
-          "attribute": "name",
           "description": "The name attribute of the control.",
           "type": "string"
         },
         {
           "name": "disabled",
-          "attribute": "disabled",
-          "description": "The disabled attribute of the control.",
+          "description": "The disabled state of the component",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "required",
-          "attribute": "required",
-          "description": "The required attribute of the control.",
+          "name": "invalid",
+          "description": "Control the validity of the control.",
           "type": "boolean",
           "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-combo\"",
+          "default": "\"igc-combo\""
         },
         {
-          "name": "invalid",
-          "attribute": "invalid",
-          "description": "The invalid attribute of the control.",
-          "type": "boolean",
-          "default": "false"
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        },
+        {
+          "name": "data",
+          "description": "The data source used to generate the list of options.",
+          "type": "T[]",
+          "default": "[]"
         },
         {
           "name": "outlined",
@@ -2103,13 +2100,6 @@
           "type": "string",
           "default": "\"Search\""
         },
-        {
-          "name": "dir",
-          "attribute": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "\"ltr\" | \"rtl\" | \"auto\"",
-          "default": "\"auto\""
-        },
         {
           "name": "open",
           "attribute": "open",
@@ -2174,7 +2164,7 @@
           "name": "itemTemplate",
           "description": "The template used for the content of each combo item.",
           "type": "ComboItemTemplate<T>",
-          "default": "\"({ item }) => {\\n    if (typeof item !== 'object' || item === null) {\\n      return String(item) as any;\\n    }\\n\\n    if (this.displayKey) {\\n      return html`${item[this.displayKey]}`;\\n    }\\n\\n    return html`${String(item)}`;\\n  }\""
+          "default": "\"({ item }) => {\\n    const template = this.displayKey ? `${item[this.displayKey]}` : `${item}`;\\n    return html`${template}`;\\n  }\""
         },
         {
           "name": "groupHeaderTemplate",
@@ -2192,8 +2182,56 @@
           "name": "selection",
           "description": "Returns the current selection as an array of objects as provided in the `data` source.",
           "type": "T[]"
-        }
-      ],
+        },
+        {
+          "name": "required",
+          "attribute": "required",
+          "description": "Makes the control a required field in a form context.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "formAssociated",
+          "type": "true",
+          "default": "true"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Returns the HTMLFormElement associated with this element."
+        },
+        {
+          "name": "validity",
+          "description": "Returns a ValidityState object which represents the different validity states\nthe element can be in, with respect to constraint validation."
+        },
+        {
+          "name": "validationMessage",
+          "description": "A string containing the validation message of this element."
+        },
+        {
+          "name": "willValidate",
+          "description": "A boolean value which returns true if the element is a submittable element\nthat is a candidate for constraint validation."
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalid",
+          "attribute": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
       "events": [
         {
           "name": "igcFocus",
@@ -2355,15 +2393,27 @@
           "description": "The date format to apply on the input.",
           "type": "string"
         },
+        {
+          "name": "min",
+          "description": "The minimum value required for the input to remain valid.",
+          "type": "Date"
+        },
+        {
+          "name": "max",
+          "description": "The maximum value required for the input to remain valid.",
+          "type": "Date"
+        },
         {
           "name": "min-value",
           "description": "The minimum value required for the input to remain valid.",
-          "type": "Date | null"
+          "type": "Date",
+          "deprecatedMessage": "since v4.4.0\nUse the `min` property instead."
         },
         {
           "name": "max-value",
           "description": "The maximum value required for the input to remain valid.",
-          "type": "Date | null"
+          "type": "Date",
+          "deprecatedMessage": "since v4.4.0\nUse the `max` property instead."
         },
         {
           "name": "display-format",
@@ -2387,28 +2437,11 @@
           "description": "The prompt symbol to use for unfilled parts of the mask.",
           "type": "string"
         },
-        {
-          "name": "invalid",
-          "description": "Controls the validity of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "value",
           "description": "The value of the input.",
           "type": "Date | null"
         },
-        {
-          "name": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "Direction",
-          "default": "\"auto\""
-        },
-        {
-          "name": "name",
-          "description": "The name attribute of the control.",
-          "type": "string"
-        },
         {
           "name": "outlined",
           "description": "Whether the control will have outlined appearance.",
@@ -2416,14 +2449,8 @@
           "default": "false"
         },
         {
-          "name": "required",
-          "description": "Makes the control a required field.",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "disabled",
-          "description": "Makes the control a disabled field.",
+          "name": "readOnly",
+          "description": "Makes the control a readonly field.",
           "type": "boolean",
           "default": "false"
         },
@@ -2431,7 +2458,7 @@
           "name": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
-          "default": "false"
+          "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
         },
         {
           "name": "placeholder",
@@ -2443,11 +2470,35 @@
           "description": "The label for the control.",
           "type": "string"
         },
+        {
+          "name": "required",
+          "description": "Makes the control a required field in a form context.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "default": "\"medium\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "properties": [
@@ -2462,17 +2513,31 @@
           "description": "The date format to apply on the input.",
           "type": "string"
         },
+        {
+          "name": "min",
+          "attribute": "min",
+          "description": "The minimum value required for the input to remain valid.",
+          "type": "Date"
+        },
+        {
+          "name": "max",
+          "attribute": "max",
+          "description": "The maximum value required for the input to remain valid.",
+          "type": "Date"
+        },
         {
           "name": "minValue",
           "attribute": "min-value",
           "description": "The minimum value required for the input to remain valid.",
-          "type": "Date | null"
+          "type": "Date",
+          "deprecatedMessage": "since v4.4.0\nUse the `min` property instead."
         },
         {
           "name": "maxValue",
           "attribute": "max-value",
           "description": "The maximum value required for the input to remain valid.",
-          "type": "Date | null"
+          "type": "Date",
+          "deprecatedMessage": "since v4.4.0\nUse the `max` property instead."
         },
         {
           "name": "displayFormat",
@@ -2505,13 +2570,6 @@
           "description": "The prompt symbol to use for unfilled parts of the mask.",
           "type": "string"
         },
-        {
-          "name": "invalid",
-          "attribute": "invalid",
-          "description": "Controls the validity of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "styles",
           "type": "CSSResult",
@@ -2523,19 +2581,6 @@
           "description": "The value of the input.",
           "type": "Date | null"
         },
-        {
-          "name": "dir",
-          "attribute": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "Direction",
-          "default": "\"auto\""
-        },
-        {
-          "name": "name",
-          "attribute": "name",
-          "description": "The name attribute of the control.",
-          "type": "string"
-        },
         {
           "name": "outlined",
           "attribute": "outlined",
@@ -2544,16 +2589,9 @@
           "default": "false"
         },
         {
-          "name": "required",
-          "attribute": "required",
-          "description": "Makes the control a required field.",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Makes the control a disabled field.",
+          "name": "readOnly",
+          "attribute": "readOnly",
+          "description": "Makes the control a readonly field.",
           "type": "boolean",
           "default": "false"
         },
@@ -2562,7 +2600,7 @@
           "attribute": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
-          "default": "false"
+          "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
         },
         {
           "name": "placeholder",
@@ -2576,12 +2614,61 @@
           "description": "The label for the control.",
           "type": "string"
         },
+        {
+          "name": "required",
+          "attribute": "required",
+          "description": "Makes the control a required field in a form context.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "formAssociated",
+          "type": "true",
+          "default": "true"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Returns the HTMLFormElement associated with this element."
+        },
+        {
+          "name": "validity",
+          "description": "Returns a ValidityState object which represents the different validity states\nthe element can be in, with respect to constraint validation."
+        },
+        {
+          "name": "validationMessage",
+          "description": "A string containing the validation message of this element."
+        },
+        {
+          "name": "willValidate",
+          "description": "A boolean value which returns true if the element is a submittable element\nthat is a candidate for constraint validation."
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalid",
+          "attribute": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "size",
           "attribute": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "default": "\"medium\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "events": [
@@ -3004,7 +3091,8 @@
           "name": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"large\""
+          "default": "\"large\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "properties": [
@@ -3081,7 +3169,8 @@
           "attribute": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"large\""
+          "default": "\"large\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "events": [
@@ -3289,7 +3378,9 @@
           "name": "",
           "description": "Default slot for the form."
         }
-      ]
+      ],
+      "deprecated": true,
+      "deprecatedMessage": "since version 4.4.0\nUse the native `<form>` element instead."
     },
     {
       "name": "igc-icon",
@@ -3317,7 +3408,8 @@
           "name": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "default": "\"medium\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "properties": [
@@ -3357,7 +3449,8 @@
           "attribute": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "default": "\"medium\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ]
     },
@@ -3382,20 +3475,26 @@
           "type": "string"
         },
         {
-          "name": "invalid",
-          "description": "Controls the validity of the control.",
-          "type": "boolean",
-          "default": "false"
+          "name": "minLength",
+          "description": "The minimum string length required by the control.",
+          "type": "number"
         },
         {
           "name": "minlength",
           "description": "The minlength attribute of the control.",
+          "type": "number",
+          "deprecatedMessage": "since v4.4.0\nUse the `minLength` property instead."
+        },
+        {
+          "name": "maxLength",
+          "description": "The maximum string length of the control.",
           "type": "number"
         },
         {
           "name": "maxlength",
           "description": "The maxlength attribute of the control.",
-          "type": "number"
+          "type": "number",
+          "deprecatedMessage": "since v4.4.0\nUse the `maxLength` property instead."
         },
         {
           "name": "min",
@@ -3433,17 +3532,6 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "Direction",
-          "default": "\"auto\""
-        },
-        {
-          "name": "name",
-          "description": "The name attribute of the control.",
-          "type": "string"
-        },
         {
           "name": "outlined",
           "description": "Whether the control will have outlined appearance.",
@@ -3451,14 +3539,8 @@
           "default": "false"
         },
         {
-          "name": "required",
-          "description": "Makes the control a required field.",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "disabled",
-          "description": "Makes the control a disabled field.",
+          "name": "readOnly",
+          "description": "Makes the control a readonly field.",
           "type": "boolean",
           "default": "false"
         },
@@ -3466,7 +3548,7 @@
           "name": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
-          "default": "false"
+          "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
         },
         {
           "name": "placeholder",
@@ -3478,11 +3560,35 @@
           "description": "The label for the control.",
           "type": "string"
         },
+        {
+          "name": "required",
+          "description": "Makes the control a required field in a form context.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "default": "\"medium\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "properties": [
@@ -3511,23 +3617,30 @@
           "type": "string"
         },
         {
-          "name": "invalid",
-          "attribute": "invalid",
-          "description": "Controls the validity of the control.",
-          "type": "boolean",
-          "default": "false"
+          "name": "minLength",
+          "attribute": "minLength",
+          "description": "The minimum string length required by the control.",
+          "type": "number"
         },
         {
           "name": "minlength",
           "attribute": "minlength",
           "description": "The minlength attribute of the control.",
+          "type": "number",
+          "deprecatedMessage": "since v4.4.0\nUse the `minLength` property instead."
+        },
+        {
+          "name": "maxLength",
+          "attribute": "maxLength",
+          "description": "The maximum string length of the control.",
           "type": "number"
         },
         {
           "name": "maxlength",
           "attribute": "maxlength",
           "description": "The maxlength attribute of the control.",
-          "type": "number"
+          "type": "number",
+          "deprecatedMessage": "since v4.4.0\nUse the `maxLength` property instead."
         },
         {
           "name": "min",
@@ -3577,19 +3690,6 @@
           "type": "string",
           "default": "\"\""
         },
-        {
-          "name": "dir",
-          "attribute": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "Direction",
-          "default": "\"auto\""
-        },
-        {
-          "name": "name",
-          "attribute": "name",
-          "description": "The name attribute of the control.",
-          "type": "string"
-        },
         {
           "name": "outlined",
           "attribute": "outlined",
@@ -3598,16 +3698,9 @@
           "default": "false"
         },
         {
-          "name": "required",
-          "attribute": "required",
-          "description": "Makes the control a required field.",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Makes the control a disabled field.",
+          "name": "readOnly",
+          "attribute": "readOnly",
+          "description": "Makes the control a readonly field.",
           "type": "boolean",
           "default": "false"
         },
@@ -3616,7 +3709,7 @@
           "attribute": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
-          "default": "false"
+          "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
         },
         {
           "name": "placeholder",
@@ -3630,12 +3723,61 @@
           "description": "The label for the control.",
           "type": "string"
         },
+        {
+          "name": "required",
+          "attribute": "required",
+          "description": "Makes the control a required field in a form context.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "formAssociated",
+          "type": "true",
+          "default": "true"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Returns the HTMLFormElement associated with this element."
+        },
+        {
+          "name": "validity",
+          "description": "Returns a ValidityState object which represents the different validity states\nthe element can be in, with respect to constraint validation."
+        },
+        {
+          "name": "validationMessage",
+          "description": "A string containing the validation message of this element."
+        },
+        {
+          "name": "willValidate",
+          "description": "A boolean value which returns true if the element is a submittable element\nthat is a candidate for constraint validation."
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalid",
+          "attribute": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "size",
           "attribute": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "default": "\"medium\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "events": [
@@ -3794,7 +3936,8 @@
           "name": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"large\""
+          "default": "\"large\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "properties": [
@@ -3813,7 +3956,8 @@
           "attribute": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"large\""
+          "default": "\"large\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "slots": [
@@ -3844,28 +3988,11 @@
           "description": "The prompt symbol to use for unfilled parts of the mask.",
           "type": "string"
         },
-        {
-          "name": "invalid",
-          "description": "Controls the validity of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "value",
           "description": "The value of the input.\n\nRegardless of the currently set `value-mode`, an empty value will return an empty string.",
           "type": "string"
         },
-        {
-          "name": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "Direction",
-          "default": "\"auto\""
-        },
-        {
-          "name": "name",
-          "description": "The name attribute of the control.",
-          "type": "string"
-        },
         {
           "name": "outlined",
           "description": "Whether the control will have outlined appearance.",
@@ -3873,14 +4000,8 @@
           "default": "false"
         },
         {
-          "name": "required",
-          "description": "Makes the control a required field.",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "disabled",
-          "description": "Makes the control a disabled field.",
+          "name": "readOnly",
+          "description": "Makes the control a readonly field.",
           "type": "boolean",
           "default": "false"
         },
@@ -3888,7 +4009,7 @@
           "name": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
-          "default": "false"
+          "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
         },
         {
           "name": "placeholder",
@@ -3900,11 +4021,35 @@
           "description": "The label for the control.",
           "type": "string"
         },
+        {
+          "name": "required",
+          "description": "Makes the control a required field in a form context.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "default": "\"medium\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "properties": [
@@ -3932,13 +4077,6 @@
           "description": "The prompt symbol to use for unfilled parts of the mask.",
           "type": "string"
         },
-        {
-          "name": "invalid",
-          "attribute": "invalid",
-          "description": "Controls the validity of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "styles",
           "type": "CSSResult",
@@ -3950,19 +4088,6 @@
           "description": "The value of the input.\n\nRegardless of the currently set `value-mode`, an empty value will return an empty string.",
           "type": "string"
         },
-        {
-          "name": "dir",
-          "attribute": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "Direction",
-          "default": "\"auto\""
-        },
-        {
-          "name": "name",
-          "attribute": "name",
-          "description": "The name attribute of the control.",
-          "type": "string"
-        },
         {
           "name": "outlined",
           "attribute": "outlined",
@@ -3971,16 +4096,9 @@
           "default": "false"
         },
         {
-          "name": "required",
-          "attribute": "required",
-          "description": "Makes the control a required field.",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Makes the control a disabled field.",
+          "name": "readOnly",
+          "attribute": "readOnly",
+          "description": "Makes the control a readonly field.",
           "type": "boolean",
           "default": "false"
         },
@@ -3989,7 +4107,7 @@
           "attribute": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
-          "default": "false"
+          "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
         },
         {
           "name": "placeholder",
@@ -4003,12 +4121,61 @@
           "description": "The label for the control.",
           "type": "string"
         },
+        {
+          "name": "required",
+          "attribute": "required",
+          "description": "Makes the control a required field in a form context.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "formAssociated",
+          "type": "true",
+          "default": "true"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Returns the HTMLFormElement associated with this element."
+        },
+        {
+          "name": "validity",
+          "description": "Returns a ValidityState object which represents the different validity states\nthe element can be in, with respect to constraint validation."
+        },
+        {
+          "name": "validationMessage",
+          "description": "A string containing the validation message of this element."
+        },
+        {
+          "name": "willValidate",
+          "description": "A boolean value which returns true if the element is a submittable element\nthat is a candidate for constraint validation."
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalid",
+          "attribute": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "size",
           "attribute": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "default": "\"medium\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "events": [
@@ -4702,57 +4869,84 @@
       "name": "igc-radio",
       "path": "./src/components/radio/radio.ts",
       "attributes": [
-        {
-          "name": "name",
-          "description": "The name attribute of the control.",
-          "type": "string"
-        },
         {
           "name": "value",
           "description": "The value attribute of the control.",
           "type": "string"
         },
         {
-          "name": "required",
-          "description": "Makes the control a required field.",
+          "name": "checked",
+          "description": "The checked state of the control.",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "checked",
-          "description": "The checked state of the control.",
+          "name": "label-position",
+          "description": "The label position of the radio control.",
+          "type": "\"before\" | \"after\"",
+          "default": "\"after\""
+        },
+        {
+          "name": "required",
+          "description": "Makes the control a required field in a form context.",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
+        },
         {
           "name": "disabled",
-          "description": "Disables the radio control.",
+          "description": "The disabled state of the component",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "invalid",
-          "description": "Controls the validity of the control.",
+          "description": "Control the validity of the control.",
           "type": "boolean",
           "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-radio\"",
+          "default": "\"igc-radio\""
         },
         {
-          "name": "label-position",
+          "name": "value",
+          "attribute": "value",
+          "description": "The value attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "checked",
+          "attribute": "checked",
+          "description": "The checked state of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "labelPosition",
+          "attribute": "label-position",
           "description": "The label position of the radio control.",
           "type": "\"before\" | \"after\"",
           "default": "\"after\""
         },
         {
-          "name": "aria-labelledby",
-          "description": "Sets the aria-labelledby attribute for the radio control.",
-          "type": "string"
-        }
-      ],
-      "properties": [
+          "name": "required",
+          "attribute": "required",
+          "description": "Makes the control a required field in a form context.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
-          "name": "tagName",
-          "type": "\"igc-radio\"",
-          "default": "\"igc-radio\""
+          "name": "formAssociated",
+          "type": "true",
+          "default": "true"
         },
         {
           "name": "name",
@@ -4761,51 +4955,34 @@
           "type": "string"
         },
         {
-          "name": "value",
-          "attribute": "value",
-          "description": "The value attribute of the control.",
-          "type": "string"
+          "name": "form",
+          "description": "Returns the HTMLFormElement associated with this element."
+        },
+        {
+          "name": "validity",
+          "description": "Returns a ValidityState object which represents the different validity states\nthe element can be in, with respect to constraint validation."
         },
         {
-          "name": "required",
-          "attribute": "required",
-          "description": "Makes the control a required field.",
-          "type": "boolean",
-          "default": "false"
+          "name": "validationMessage",
+          "description": "A string containing the validation message of this element."
         },
         {
-          "name": "checked",
-          "attribute": "checked",
-          "description": "The checked state of the control.",
-          "type": "boolean",
-          "default": "false"
+          "name": "willValidate",
+          "description": "A boolean value which returns true if the element is a submittable element\nthat is a candidate for constraint validation."
         },
         {
           "name": "disabled",
           "attribute": "disabled",
-          "description": "Disables the radio control.",
+          "description": "The disabled state of the component",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "invalid",
           "attribute": "invalid",
-          "description": "Controls the validity of the control.",
+          "description": "Control the validity of the control.",
           "type": "boolean",
           "default": "false"
-        },
-        {
-          "name": "labelPosition",
-          "attribute": "label-position",
-          "description": "The label position of the radio control.",
-          "type": "\"before\" | \"after\"",
-          "default": "\"after\""
-        },
-        {
-          "name": "ariaLabelledby",
-          "attribute": "aria-labelledby",
-          "description": "Sets the aria-labelledby attribute for the radio control.",
-          "type": "string"
         }
       ],
       "events": [
@@ -4901,11 +5078,6 @@
           "type": "number",
           "default": "1"
         },
-        {
-          "name": "name",
-          "description": "The name attribute of the control",
-          "type": "string"
-        },
         {
           "name": "label",
           "description": "The label of the control.",
@@ -4923,14 +5095,14 @@
           "default": "0"
         },
         {
-          "name": "disabled",
-          "description": "Sets the disabled state of the component",
+          "name": "hover-preview",
+          "description": "Sets hover preview behavior for the component",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "hover-preview",
-          "description": "Sets hover preview behavior for the component",
+          "name": "readOnly",
+          "description": "Makes the control a readonly field.",
           "type": "boolean",
           "default": "false"
         },
@@ -4938,7 +5110,7 @@
           "name": "readonly",
           "description": "Sets the readonly state of the component",
           "type": "boolean",
-          "default": "false"
+          "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
         },
         {
           "name": "single",
@@ -4946,11 +5118,29 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"large\""
+          "default": "\"large\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "properties": [
@@ -4978,12 +5168,6 @@
           "type": "number",
           "default": "1"
         },
-        {
-          "name": "name",
-          "attribute": "name",
-          "description": "The name attribute of the control",
-          "type": "string"
-        },
         {
           "name": "label",
           "attribute": "label",
@@ -5004,16 +5188,16 @@
           "default": "0"
         },
         {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "Sets the disabled state of the component",
+          "name": "hoverPreview",
+          "attribute": "hover-preview",
+          "description": "Sets hover preview behavior for the component",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "hoverPreview",
-          "attribute": "hover-preview",
-          "description": "Sets hover preview behavior for the component",
+          "name": "readOnly",
+          "attribute": "readOnly",
+          "description": "Makes the control a readonly field.",
           "type": "boolean",
           "default": "false"
         },
@@ -5022,7 +5206,7 @@
           "attribute": "readonly",
           "description": "Sets the readonly state of the component",
           "type": "boolean",
-          "default": "false"
+          "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
         },
         {
           "name": "single",
@@ -5031,12 +5215,54 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "formAssociated",
+          "type": "true",
+          "default": "true"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Returns the HTMLFormElement associated with this element."
+        },
+        {
+          "name": "validity",
+          "description": "Returns a ValidityState object which represents the different validity states\nthe element can be in, with respect to constraint validation."
+        },
+        {
+          "name": "validationMessage",
+          "description": "A string containing the validation message of this element."
+        },
+        {
+          "name": "willValidate",
+          "description": "A boolean value which returns true if the element is a submittable element\nthat is a candidate for constraint validation."
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalid",
+          "attribute": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "size",
           "attribute": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"large\""
+          "default": "\"large\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "events": [
@@ -5218,6 +5444,11 @@
           "description": "Returns the text of the item without the prefix and suffix content.",
           "type": "string"
         },
+        {
+          "name": "tagName",
+          "type": "\"igc-select-item\"",
+          "default": "\"igc-select-item\""
+        },
         {
           "name": "styles",
           "type": "CSSResult",
@@ -5289,29 +5520,6 @@
           "description": "The value attribute of the control.",
           "type": "string | undefined"
         },
-        {
-          "name": "name",
-          "description": "The name attribute of the control.",
-          "type": "string"
-        },
-        {
-          "name": "disabled",
-          "description": "The disabled attribute of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "required",
-          "description": "The required attribute of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "invalid",
-          "description": "The invalid attribute of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "outlined",
           "description": "The outlined attribute of the control.",
@@ -5334,10 +5542,27 @@
           "type": "string"
         },
         {
-          "name": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "\"ltr\" | \"rtl\" | \"auto\"",
-          "default": "\"auto\""
+          "name": "required",
+          "description": "Makes the control a required field in a form context.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
         },
         {
           "name": "keep-open-on-select",
@@ -5379,7 +5604,8 @@
           "name": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "default": "\"medium\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "properties": [
@@ -5389,33 +5615,6 @@
           "description": "The value attribute of the control.",
           "type": "string | undefined"
         },
-        {
-          "name": "name",
-          "attribute": "name",
-          "description": "The name attribute of the control.",
-          "type": "string"
-        },
-        {
-          "name": "disabled",
-          "attribute": "disabled",
-          "description": "The disabled attribute of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "required",
-          "attribute": "required",
-          "description": "The required attribute of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
-        {
-          "name": "invalid",
-          "attribute": "invalid",
-          "description": "The invalid attribute of the control.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "outlined",
           "attribute": "outlined",
@@ -5442,11 +5641,57 @@
           "type": "string"
         },
         {
-          "name": "dir",
-          "attribute": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "\"ltr\" | \"rtl\" | \"auto\"",
-          "default": "\"auto\""
+          "name": "required",
+          "attribute": "required",
+          "description": "Makes the control a required field in a form context.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "formAssociated",
+          "type": "true",
+          "default": "true"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "The name attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "form",
+          "description": "Returns the HTMLFormElement associated with this element."
+        },
+        {
+          "name": "validity",
+          "description": "Returns a ValidityState object which represents the different validity states\nthe element can be in, with respect to constraint validation."
+        },
+        {
+          "name": "validationMessage",
+          "description": "A string containing the validation message of this element."
+        },
+        {
+          "name": "willValidate",
+          "description": "A boolean value which returns true if the element is a submittable element\nthat is a candidate for constraint validation."
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "The disabled state of the component",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "invalid",
+          "attribute": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "tagName",
+          "type": "\"igc-select\"",
+          "default": "\"igc-select\""
         },
         {
           "name": "styles",
@@ -5500,7 +5745,8 @@
           "attribute": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"medium\""
+          "default": "\"medium\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "events": [
@@ -5901,14 +6147,21 @@
       "attributes": [
         {
           "name": "value",
-          "description": "The current value of the slider.",
-          "type": "number"
+          "description": "The current value of the component.",
+          "type": "number",
+          "default": "0"
         },
         {
-          "name": "aria-label",
-          "description": "The aria label of the slider thumb.",
+          "name": "name",
+          "description": "The name attribute of the control.",
           "type": "string"
         },
+        {
+          "name": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "min",
           "description": "The minimum value of the slider scale. Defaults to 0.",
@@ -5931,7 +6184,7 @@
         },
         {
           "name": "disabled",
-          "description": "Disables the UI interactions of the slider.",
+          "description": "The disabled state of the component",
           "type": "boolean",
           "default": "false"
         },
@@ -6009,15 +6262,44 @@
         {
           "name": "value",
           "attribute": "value",
-          "description": "The current value of the slider.",
-          "type": "number"
+          "description": "The current value of the component.",
+          "type": "number",
+          "default": "0"
+        },
+        {
+          "name": "formAssociated",
+          "type": "true",
+          "default": "true"
         },
         {
-          "name": "ariaLabel",
-          "attribute": "aria-label",
-          "description": "The aria label of the slider thumb.",
+          "name": "name",
+          "attribute": "name",
+          "description": "The name attribute of the control.",
           "type": "string"
         },
+        {
+          "name": "form",
+          "description": "Returns the HTMLFormElement associated with this element."
+        },
+        {
+          "name": "validity",
+          "description": "Returns a ValidityState object which represents the different validity states\nthe element can be in, with respect to constraint validation."
+        },
+        {
+          "name": "validationMessage",
+          "description": "A string containing the validation message of this element."
+        },
+        {
+          "name": "willValidate",
+          "description": "A boolean value which returns true if the element is a submittable element\nthat is a candidate for constraint validation."
+        },
+        {
+          "name": "invalid",
+          "attribute": "invalid",
+          "description": "Control the validity of the control.",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "styles",
           "type": "CSSResult",
@@ -6050,7 +6332,7 @@
         {
           "name": "disabled",
           "attribute": "disabled",
-          "description": "Disables the UI interactions of the slider.",
+          "description": "The disabled state of the component",
           "type": "boolean",
           "default": "false"
         },
@@ -6334,6 +6616,10 @@
           "name": "contentBody",
           "type": "HTMLElement"
         },
+        {
+          "name": "body",
+          "type": "HTMLElement"
+        },
         {
           "name": "invalid",
           "attribute": "invalid",
@@ -6511,10 +6797,22 @@
           "default": "false"
         },
         {
-          "name": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "Direction",
-          "default": "\"auto\""
+          "name": "vertical-animation",
+          "description": "The animation type when in vertical mode.",
+          "type": "\"none\" | \"grow\" | \"fade\"",
+          "default": "\"grow\""
+        },
+        {
+          "name": "horizontal-animation",
+          "description": "The animation type when in horizontal mode.",
+          "type": "\"none\" | \"fade\" | \"slide\"",
+          "default": "\"slide\""
+        },
+        {
+          "name": "animation-duration",
+          "description": "The animation duration in either vertical or horizontal mode.",
+          "type": "number",
+          "default": "320"
         },
         {
           "name": "title-position",
@@ -6557,11 +6855,25 @@
           "default": "false"
         },
         {
-          "name": "dir",
-          "attribute": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "Direction",
-          "default": "\"auto\""
+          "name": "verticalAnimation",
+          "attribute": "vertical-animation",
+          "description": "The animation type when in vertical mode.",
+          "type": "\"none\" | \"grow\" | \"fade\"",
+          "default": "\"grow\""
+        },
+        {
+          "name": "horizontalAnimation",
+          "attribute": "horizontal-animation",
+          "description": "The animation type when in horizontal mode.",
+          "type": "\"none\" | \"fade\" | \"slide\"",
+          "default": "\"slide\""
+        },
+        {
+          "name": "animationDuration",
+          "attribute": "animation-duration",
+          "description": "The animation duration in either vertical or horizontal mode.",
+          "type": "number",
+          "default": "320"
         },
         {
           "name": "titlePosition",
@@ -7056,17 +7368,12 @@
           "type": "\"multiple\" | \"none\" | \"cascade\"",
           "default": "\"none\""
         },
-        {
-          "name": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "Direction",
-          "default": "\"auto\""
-        },
         {
           "name": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"large\""
+          "default": "\"large\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "properties": [
@@ -7084,13 +7391,6 @@
           "type": "\"multiple\" | \"none\" | \"cascade\"",
           "default": "\"none\""
         },
-        {
-          "name": "dir",
-          "attribute": "dir",
-          "description": "The direction attribute of the control.",
-          "type": "Direction",
-          "default": "\"auto\""
-        },
         {
           "name": "items",
           "description": "Returns all of the tree's items.",
@@ -7101,7 +7401,8 @@
           "attribute": "size",
           "description": "Determines the size of the component.",
           "type": "\"small\" | \"medium\" | \"large\"",
-          "default": "\"large\""
+          "default": "\"large\"",
+          "deprecatedMessage": "since v4.5.0. Use the `--ig-size` CSS custom property instead."
         }
       ],
       "events": [