igniteui-webcomponents 4.4.0 → 4.5.0

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": [
@@ -216,6 +218,170 @@
         }
       ]
     },
+    {
+      "name": "igc-button-group",
+      "path": "./src/components/button-group/button-group.ts",
+      "description": "The `igc-button-group` groups a series of `igc-toggle-button`s together, exposing features such as layout and selection.",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables all buttons inside the group.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "alignment",
+          "description": "Sets the orientation of the buttons in the group.",
+          "type": "\"horizontal\" | \"vertical\"",
+          "default": "\"horizontal\""
+        },
+        {
+          "name": "selection",
+          "description": "Controls the mode of selection for the button group.",
+          "type": "\"single\" | \"single-required\" | \"multiple\"",
+          "default": "\"single\""
+        },
+        {
+          "name": "selected-items",
+          "description": "Gets/Sets the currently selected buttons (their values).",
+          "type": "string[]"
+        }
+      ],
+      "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-button-group\"",
+          "default": "\"igc-button-group\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables all buttons inside the group.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "alignment",
+          "attribute": "alignment",
+          "description": "Sets the orientation of the buttons in the group.",
+          "type": "\"horizontal\" | \"vertical\"",
+          "default": "\"horizontal\""
+        },
+        {
+          "name": "selection",
+          "attribute": "selection",
+          "description": "Controls the mode of selection for the button group.",
+          "type": "\"single\" | \"single-required\" | \"multiple\"",
+          "default": "\"single\""
+        },
+        {
+          "name": "selectedItems",
+          "attribute": "selected-items",
+          "description": "Gets/Sets the currently selected buttons (their values).",
+          "type": "string[]"
+        }
+      ],
+      "events": [
+        {
+          "name": "igcSelect",
+          "description": "Emitted when a button is selected through user interaction."
+        },
+        {
+          "name": "igcDeselect",
+          "description": "Emitted when a button is deselected through user interaction."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Renders `igc-toggle-button` component."
+        }
+      ],
+      "cssParts": [
+        {
+          "name": "group",
+          "description": "The button group container."
+        }
+      ]
+    },
+    {
+      "name": "igc-toggle-button",
+      "path": "./src/components/button-group/toggle-button.ts",
+      "description": "The `igc-toggle-button` wraps a native button element and exposes additional `value` and `selected` properties.\nIt is used in the context of an `igc-button-group` to facilitate the creation of group/toolbar like UX behaviors.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "The value attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "description": "Determines whether the button is selected.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "description": "Determines whether the button is disabled.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        },
+        {
+          "name": "tagName",
+          "type": "\"igc-toggle-button\"",
+          "default": "\"igc-toggle-button\""
+        },
+        {
+          "name": "shadowRootOptions",
+          "type": "{ delegatesFocus: boolean; mode: ShadowRootMode; slotAssignment?: SlotAssignmentMode | undefined; customElements?: CustomElementRegistry | undefined; }",
+          "default": "{\"delegatesFocus\":true}"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The value attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "Determines whether the button is selected.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Determines whether the button is disabled.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Renders the label/content of the button."
+        }
+      ],
+      "cssParts": [
+        {
+          "name": "toggle",
+          "description": "The native button element."
+        }
+      ]
+    },
     {
       "name": "igc-button",
       "path": "./src/components/button/button.ts",
@@ -262,7 +428,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": [
@@ -329,7 +496,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": [
@@ -432,7 +600,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": [
@@ -518,7 +687,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."
         }
       ],
       "cssParts": [
@@ -552,13 +722,13 @@
         {
           "name": "header-orientation",
           "description": "The orientation of the header.",
-          "type": "\"vertical\" | \"horizontal\"",
+          "type": "\"horizontal\" | \"vertical\"",
           "default": "\"horizontal\""
         },
         {
           "name": "orientation",
           "description": "The orientation of the multiple months displayed in days view.",
-          "type": "\"vertical\" | \"horizontal\"",
+          "type": "\"horizontal\" | \"vertical\"",
           "default": "\"horizontal\""
         },
         {
@@ -577,7 +747,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",
@@ -620,16 +791,16 @@
         }
       ],
       "properties": [
-        {
-          "name": "styles",
-          "type": "CSSResult",
-          "default": "\"styles\""
-        },
         {
           "name": "tagName",
           "type": "\"igc-calendar\"",
           "default": "\"igc-calendar\""
         },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        },
         {
           "name": "hideOutsideDays",
           "attribute": "hide-outside-days",
@@ -648,14 +819,14 @@
           "name": "headerOrientation",
           "attribute": "header-orientation",
           "description": "The orientation of the header.",
-          "type": "\"vertical\" | \"horizontal\"",
+          "type": "\"horizontal\" | \"vertical\"",
           "default": "\"horizontal\""
         },
         {
           "name": "orientation",
           "attribute": "orientation",
           "description": "The orientation of the multiple months displayed in days view.",
-          "type": "\"vertical\" | \"horizontal\"",
+          "type": "\"horizontal\" | \"vertical\"",
           "default": "\"horizontal\""
         },
         {
@@ -689,7 +860,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",
@@ -1157,7 +1329,7 @@
         {
           "name": "orientation",
           "description": "The orientation of the actions.",
-          "type": "\"vertical\" | \"horizontal\"",
+          "type": "\"horizontal\" | \"vertical\"",
           "default": "\"horizontal\""
         }
       ],
@@ -1176,7 +1348,7 @@
           "name": "orientation",
           "attribute": "orientation",
           "description": "The orientation of the actions.",
-          "type": "\"vertical\" | \"horizontal\"",
+          "type": "\"horizontal\" | \"vertical\"",
           "default": "\"horizontal\""
         }
       ],
@@ -1696,7 +1868,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": [
@@ -1749,7 +1922,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": [
@@ -2438,17 +2612,11 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "readOnly",
-          "description": "Makes the control a readonly field.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
-          "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
+          "default": "false"
         },
         {
           "name": "placeholder",
@@ -2487,7 +2655,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": [
@@ -2579,14 +2748,13 @@
         },
         {
           "name": "readOnly",
-          "attribute": "readOnly",
+          "attribute": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "readonly",
-          "attribute": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
           "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
@@ -2656,7 +2824,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": [
@@ -3079,10 +3248,16 @@
           "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": [
+        {
+          "name": "tagName",
+          "type": "\"igc-dropdown\"",
+          "default": "\"igc-dropdown\""
+        },
         {
           "name": "styles",
           "type": "CSSResult",
@@ -3156,7 +3331,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": [
@@ -3394,7 +3570,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": [
@@ -3434,7 +3611,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."
         }
       ]
     },
@@ -3459,27 +3637,15 @@
           "type": "string"
         },
         {
-          "name": "minLength",
+          "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",
+          "name": "maxlength",
           "description": "The maximum string length of the control.",
           "type": "number"
         },
-        {
-          "name": "maxlength",
-          "description": "The maxlength attribute of the control.",
-          "type": "number",
-          "deprecatedMessage": "since v4.4.0\nUse the `maxLength` property instead."
-        },
         {
           "name": "min",
           "description": "The min attribute of the control.",
@@ -3522,17 +3688,11 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "readOnly",
-          "description": "Makes the control a readonly field.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
-          "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
+          "default": "false"
         },
         {
           "name": "placeholder",
@@ -3571,7 +3731,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": [
@@ -3601,26 +3762,24 @@
         },
         {
           "name": "minLength",
-          "attribute": "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",
+          "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",
           "deprecatedMessage": "since v4.4.0\nUse the `maxLength` property instead."
@@ -3682,14 +3841,13 @@
         },
         {
           "name": "readOnly",
-          "attribute": "readOnly",
+          "attribute": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "readonly",
-          "attribute": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
           "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
@@ -3759,7 +3917,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": [
@@ -3918,7 +4077,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": [
@@ -3937,7 +4097,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": [
@@ -3979,17 +4140,11 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "readOnly",
-          "description": "Makes the control a readonly field.",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
-          "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
+          "default": "false"
         },
         {
           "name": "placeholder",
@@ -4028,7 +4183,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": [
@@ -4076,14 +4232,13 @@
         },
         {
           "name": "readOnly",
-          "attribute": "readOnly",
+          "attribute": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "readonly",
-          "attribute": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
           "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
@@ -4153,7 +4308,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": [
@@ -4819,7 +4975,7 @@
         {
           "name": "alignment",
           "description": "Alignment of the radio controls inside this group.",
-          "type": "\"vertical\" | \"horizontal\"",
+          "type": "\"horizontal\" | \"vertical\"",
           "default": "\"vertical\""
         }
       ],
@@ -4838,7 +4994,7 @@
           "name": "alignment",
           "attribute": "alignment",
           "description": "Alignment of the radio controls inside this group.",
-          "type": "\"vertical\" | \"horizontal\"",
+          "type": "\"horizontal\" | \"vertical\"",
           "default": "\"vertical\""
         }
       ]
@@ -5079,17 +5235,11 @@
           "default": "false"
         },
         {
-          "name": "readOnly",
+          "name": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "readonly",
-          "description": "Sets the readonly state of the component",
-          "type": "boolean",
-          "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
-        },
         {
           "name": "single",
           "description": "Toggles single selection visual mode.",
@@ -5117,7 +5267,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": [
@@ -5173,14 +5324,13 @@
         },
         {
           "name": "readOnly",
-          "attribute": "readOnly",
+          "attribute": "readonly",
           "description": "Makes the control a readonly field.",
           "type": "boolean",
           "default": "false"
         },
         {
           "name": "readonly",
-          "attribute": "readonly",
           "description": "Sets the readonly state of the component",
           "type": "boolean",
           "deprecatedMessage": "since v4.4.0\nUse the `readOnly` property instead."
@@ -5238,7 +5388,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": [
@@ -5340,6 +5491,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "tagName",
+          "type": "\"igc-select-group\"",
+          "default": "\"igc-select-group\""
+        },
         {
           "name": "styles",
           "type": "CSSResult",
@@ -5372,6 +5528,11 @@
       "name": "igc-select-header",
       "path": "./src/components/select/select-header.ts",
       "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-select-header\"",
+          "default": "\"igc-select-header\""
+        },
         {
           "name": "styles",
           "type": "CSSResult",
@@ -5580,7 +5741,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": [
@@ -5720,7 +5882,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": [
@@ -6102,15 +6265,15 @@
       "name": "igc-slider-label",
       "path": "./src/components/slider/slider-label.ts",
       "properties": [
-        {
-          "name": "styles",
-          "type": "CSSResult",
-          "default": "\"css`\\n    :host {\\n      display: none;\\n    }\\n  `\""
-        },
         {
           "name": "tagName",
           "type": "\"igc-slider-label\"",
           "default": "\"igc-slider-label\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"css`\\n    :host {\\n      display: none;\\n    }\\n  `\""
         }
       ]
     },
@@ -6483,6 +6646,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "position",
+          "description": "Sets the position of the snackbar.",
+          "type": "\"top\" | \"bottom\" | \"middle\"",
+          "default": "\"bottom\""
+        },
         {
           "name": "action-text",
           "description": "The snackbar action button.",
@@ -6490,6 +6659,16 @@
         }
       ],
       "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-snackbar\"",
+          "default": "\"igc-snackbar\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        },
         {
           "name": "open",
           "attribute": "open",
@@ -6511,6 +6690,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "position",
+          "attribute": "position",
+          "description": "Sets the position of the snackbar.",
+          "type": "\"top\" | \"bottom\" | \"middle\"",
+          "default": "\"bottom\""
+        },
         {
           "name": "actionText",
           "attribute": "action-text",
@@ -6582,6 +6768,16 @@
         }
       ],
       "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-step\"",
+          "default": "\"igc-step\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        },
         {
           "name": "header",
           "type": "HTMLElement"
@@ -6749,7 +6945,7 @@
         {
           "name": "orientation",
           "description": "Gets/Sets the orientation of the stepper.",
-          "type": "\"vertical\" | \"horizontal\"",
+          "type": "\"horizontal\" | \"vertical\"",
           "default": "\"horizontal\""
         },
         {
@@ -6795,6 +6991,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-stepper\"",
+          "default": "\"igc-stepper\""
+        },
         {
           "name": "steps",
           "description": "Returns all of the stepper's steps.",
@@ -6804,7 +7005,7 @@
           "name": "orientation",
           "attribute": "orientation",
           "description": "Gets/Sets the orientation of the stepper.",
-          "type": "\"vertical\" | \"horizontal\"",
+          "type": "\"horizontal\" | \"vertical\"",
           "default": "\"horizontal\""
         },
         {
@@ -6996,7 +7197,7 @@
         {
           "name": "activation",
           "description": "Determines the tab activation. When set to auto,\nthe tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys\nand the corresponding panel is displayed.\nWhen set to manual, the tab is only focused. The selection happens after pressing Space or Enter.",
-          "type": "\"auto\" | \"manual\"",
+          "type": "\"manual\" | \"auto\"",
           "default": "\"auto\""
         }
       ],
@@ -7027,7 +7228,7 @@
           "name": "activation",
           "attribute": "activation",
           "description": "Determines the tab activation. When set to auto,\nthe tab is instantly selected while navigating with the Left/Right Arrows, Home or End keys\nand the corresponding panel is displayed.\nWhen set to manual, the tab is only focused. The selection happens after pressing Space or Enter.",
-          "type": "\"auto\" | \"manual\"",
+          "type": "\"manual\" | \"auto\"",
           "default": "\"auto\""
         }
       ],
@@ -7083,29 +7284,355 @@
       ]
     },
     {
-      "name": "igc-toast",
-      "path": "./src/components/toast/toast.ts",
-      "description": "A toast component is used to show a notification",
+      "name": "igc-textarea",
+      "path": "./src/components/textarea/textarea.ts",
+      "description": "This element represents a multi-line plain-text editing control,\nuseful when you want to allow users to enter a sizeable amount of free-form text,\nfor example a comment on a review or feedback form.",
       "attributes": [
         {
-          "name": "open",
-          "description": "Determines whether the toast is opened.",
-          "type": "boolean",
-          "default": "false"
+          "name": "autocomplete",
+          "description": "Specifies what if any permission the browser has to provide for automated assistance in filling out form field values,\nas well as guidance to the browser as to the type of information expected in the field.\nRefer to [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for additional information.",
+          "type": "string"
         },
         {
-          "name": "display-time",
-          "description": "Determines the time after which the toast will close",
-          "type": "number",
-          "default": "4000"
+          "name": "autocapitalize",
+          "description": "Controls whether and how text input is automatically capitalized as it is entered/edited by the user.\n\n[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).",
+          "type": "\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\""
         },
         {
-          "name": "keep-open",
-          "description": "Determines whether the toast is closed automatically or not.",
-          "type": "boolean",
-          "default": "false"
-        }
-      ],
+          "name": "inputmode",
+          "description": "Hints at the type of data that might be entered by the user while editing the element or its contents.\nThis allows a browser to display an appropriate virtual keyboard.\n\n[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)",
+          "type": "\"numeric\" | \"none\" | \"email\" | \"search\" | \"tel\" | \"text\" | \"url\" | \"decimal\""
+        },
+        {
+          "name": "label",
+          "description": "The label for the control.",
+          "type": "string"
+        },
+        {
+          "name": "maxlength",
+          "description": "The maximum number of characters (UTF-16 code units) that the user can enter.\nIf this value isn't specified, the user can enter an unlimited number of characters.",
+          "type": "number"
+        },
+        {
+          "name": "minlength",
+          "description": "The minimum number of characters (UTF-16 code units) required that the user should enter.",
+          "type": "number"
+        },
+        {
+          "name": "outlined",
+          "description": "Whether the control will have outlined appearance.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placeholder",
+          "description": "The placeholder attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "readonly",
+          "description": "Makes the control a readonly field.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "resize",
+          "description": "Controls whether the control can be resized.\nWhen `auto` is set, the control will try to expand and fit its content.",
+          "type": "\"vertical\" | \"none\" | \"auto\"",
+          "default": "\"vertical\""
+        },
+        {
+          "name": "rows",
+          "description": "The number of visible text lines for the control. If it is specified, it must be a positive integer.\nIf it is not specified, the default value is 2.",
+          "type": "number",
+          "default": "2"
+        },
+        {
+          "name": "value",
+          "description": "The value of the component",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "spellcheck",
+          "description": "Controls whether the element may be checked for spelling errors.",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "wrap",
+          "description": "Indicates how the control should wrap the value for form submission.\nRefer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\nfor explanation of the available values.",
+          "type": "\"off\" | \"hard\" | \"soft\"",
+          "default": "\"soft\""
+        },
+        {
+          "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"
+        }
+      ],
+      "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-textarea\"",
+          "default": "\"igc-textarea\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[\"styles\"]"
+        },
+        {
+          "name": "autocomplete",
+          "attribute": "autocomplete",
+          "description": "Specifies what if any permission the browser has to provide for automated assistance in filling out form field values,\nas well as guidance to the browser as to the type of information expected in the field.\nRefer to [this page](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for additional information.",
+          "type": "string"
+        },
+        {
+          "name": "autocapitalize",
+          "attribute": "autocapitalize",
+          "description": "Controls whether and how text input is automatically capitalized as it is entered/edited by the user.\n\n[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).",
+          "type": "\"none\" | \"off\" | \"on\" | \"sentences\" | \"words\" | \"characters\""
+        },
+        {
+          "name": "inputMode",
+          "attribute": "inputmode",
+          "description": "Hints at the type of data that might be entered by the user while editing the element or its contents.\nThis allows a browser to display an appropriate virtual keyboard.\n\n[MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode)",
+          "type": "\"numeric\" | \"none\" | \"email\" | \"search\" | \"tel\" | \"text\" | \"url\" | \"decimal\""
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "The label for the control.",
+          "type": "string"
+        },
+        {
+          "name": "maxLength",
+          "attribute": "maxlength",
+          "description": "The maximum number of characters (UTF-16 code units) that the user can enter.\nIf this value isn't specified, the user can enter an unlimited number of characters.",
+          "type": "number"
+        },
+        {
+          "name": "minLength",
+          "attribute": "minlength",
+          "description": "The minimum number of characters (UTF-16 code units) required that the user should enter.",
+          "type": "number"
+        },
+        {
+          "name": "outlined",
+          "attribute": "outlined",
+          "description": "Whether the control will have outlined appearance.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "placeholder",
+          "attribute": "placeholder",
+          "description": "The placeholder attribute of the control.",
+          "type": "string"
+        },
+        {
+          "name": "readOnly",
+          "attribute": "readonly",
+          "description": "Makes the control a readonly field.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "resize",
+          "attribute": "resize",
+          "description": "Controls whether the control can be resized.\nWhen `auto` is set, the control will try to expand and fit its content.",
+          "type": "\"vertical\" | \"none\" | \"auto\"",
+          "default": "\"vertical\""
+        },
+        {
+          "name": "rows",
+          "attribute": "rows",
+          "description": "The number of visible text lines for the control. If it is specified, it must be a positive integer.\nIf it is not specified, the default value is 2.",
+          "type": "number",
+          "default": "2"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "The value of the component",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "spellcheck",
+          "attribute": "spellcheck",
+          "description": "Controls whether the element may be checked for spelling errors.",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "wrap",
+          "attribute": "wrap",
+          "description": "Indicates how the control should wrap the value for form submission.\nRefer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes)\nfor explanation of the available values.",
+          "type": "\"off\" | \"hard\" | \"soft\"",
+          "default": "\"soft\""
+        },
+        {
+          "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": "igcInput",
+          "description": "Emitted when the control receives user input."
+        },
+        {
+          "name": "igcChange",
+          "description": "Emitted when the a change to the control value is committed by the user."
+        },
+        {
+          "name": "igcFocus",
+          "description": "Emitted when the control gains focus."
+        },
+        {
+          "name": "igcBlur",
+          "description": "Emitted when the control loses focus."
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Text content from the default slot will be used as the value of the component."
+        },
+        {
+          "name": "prefix",
+          "description": "Renders content before the input."
+        },
+        {
+          "name": "suffix",
+          "description": "Renders content after input."
+        },
+        {
+          "name": "helper-text",
+          "description": "Renders content below the input."
+        }
+      ],
+      "cssParts": [
+        {
+          "name": "container",
+          "description": "The main wrapper that holds all main input elements."
+        },
+        {
+          "name": "input",
+          "description": "The native input element."
+        },
+        {
+          "name": "label",
+          "description": "The native label element."
+        },
+        {
+          "name": "prefix",
+          "description": "The prefix wrapper."
+        },
+        {
+          "name": "suffix",
+          "description": "The suffix wrapper."
+        },
+        {
+          "name": "helper-text",
+          "description": "The helper text wrapper."
+        }
+      ]
+    },
+    {
+      "name": "igc-toast",
+      "path": "./src/components/toast/toast.ts",
+      "description": "A toast component is used to show a notification",
+      "attributes": [
+        {
+          "name": "open",
+          "description": "Determines whether the toast is opened.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "display-time",
+          "description": "Determines the time after which the toast will close",
+          "type": "number",
+          "default": "4000"
+        },
+        {
+          "name": "keep-open",
+          "description": "Determines whether the toast is closed automatically or not.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "position",
+          "description": "Sets the position of the toast.",
+          "type": "\"top\" | \"bottom\" | \"middle\"",
+          "default": "\"bottom\""
+        }
+      ],
       "properties": [
         {
           "name": "tagName",
@@ -7137,6 +7664,13 @@
           "description": "Determines whether the toast is closed automatically or not.",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "position",
+          "attribute": "position",
+          "description": "Sets the position of the toast.",
+          "type": "\"top\" | \"bottom\" | \"middle\"",
+          "default": "\"bottom\""
         }
       ],
       "cssParts": [
@@ -7198,6 +7732,16 @@
         }
       ],
       "properties": [
+        {
+          "name": "tagName",
+          "type": "\"igc-tree-item\"",
+          "default": "\"igc-tree-item\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        },
         {
           "name": "tree",
           "description": "A reference to the tree the item is a part of.",
@@ -7346,10 +7890,21 @@
           "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": [
+        {
+          "name": "tagName",
+          "type": "\"igc-tree\"",
+          "default": "\"igc-tree\""
+        },
+        {
+          "name": "styles",
+          "type": "CSSResult",
+          "default": "\"styles\""
+        },
         {
           "name": "singleBranchExpand",
           "attribute": "single-branch-expand",
@@ -7374,7 +7929,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": [