feat(text-area)!: integrate TextArea with v11

docs/src/COMPONENT_API.json

@@ -12562,6 +12562,18 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "counterMode",
+          "kind": "let",
+          "description": "Specify the counter mode",
+          "type": "\"character\" | \"word\"",
+          "value": "\"character\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "light",
           "kind": "let",
@@ -12658,6 +12670,30 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "warn",
+          "kind": "let",
+          "description": "Set to `true` to indicate an warning state",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
+        {
+          "name": "warnText",
+          "kind": "let",
+          "description": "Specify the warning state text",
+          "type": "string",
+          "value": "\"\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "id",
           "kind": "let",
@@ -12696,18 +12732,26 @@
       ],
       "moduleExports": [],
       "slots": [
+        {
+          "name": "invalidText",
+          "default": false,
+          "fallback": "{invalidText}",
+          "slot_props": "{}"
+        },
         {
           "name": "labelText",
           "default": false,
           "fallback": "{labelText}",
           "slot_props": "{}"
+        },
+        {
+          "name": "warnText",
+          "default": false,
+          "fallback": "{warnText}",
+          "slot_props": "{}"
         }
       ],
       "events": [
-        { "type": "forwarded", "name": "click", "element": "div" },
-        { "type": "forwarded", "name": "mouseover", "element": "div" },
-        { "type": "forwarded", "name": "mouseenter", "element": "div" },
-        { "type": "forwarded", "name": "mouseleave", "element": "div" },
         { "type": "forwarded", "name": "change", "element": "textarea" },
         { "type": "forwarded", "name": "input", "element": "textarea" },
         { "type": "forwarded", "name": "keydown", "element": "textarea" },
@@ -12738,14 +12782,8 @@
       ],
       "moduleExports": [],
       "slots": [],
-      "events": [
-        { "type": "forwarded", "name": "click", "element": "div" },
-        { "type": "forwarded", "name": "mouseover", "element": "div" },
-        { "type": "forwarded", "name": "mouseenter", "element": "div" },
-        { "type": "forwarded", "name": "mouseleave", "element": "div" }
-      ],
-      "typedefs": [],
-      "rest_props": { "type": "Element", "name": "div" }
+      "events": [],
+      "typedefs": []
     },
     {
       "moduleName": "TextInput",

docs/src/pages/components/TextArea.svx

@@ -11,14 +11,20 @@ components: ["TextArea", "TextAreaSkeleton"]
 
 <TextArea labelText="App description" placeholder="Enter a description..." />
 
-## Maximum character count
+## Counter (character)
 
-Specify the max character count using the `maxCount` prop. A character counter will be displayed to the right of the label.
+Specify a number using the `maxCount` prop to show a character counter. The default mode is `"charcacter"`.
 
-You can always use the native `maxlength` attribute if you'd prefer that a counter not be shown.
+The `maxlength` attribute is set to `maxCount` in this mode. You can override this by specifying `maxlength={undefined}`.
 
 <TextArea labelText="App description" placeholder="Enter a description..." maxCount={100} />
 
+## Counter (word)
+
+Specify `counterMode="word"` for the counter to count words instead of characters.
+
+<TextArea labelText="App description" placeholder="Enter a description..." maxCount={100} counterMode="word" />
+
 ## With helper text
 
 <TextArea labelText="App description" helperText="A rich description helps us better recommend related products and services" placeholder="Enter a description..." />
@@ -31,14 +37,32 @@ You can always use the native `maxlength` attribute if you'd prefer that a count
 
 <TextArea light labelText="App description" placeholder="Enter a description..." />
 
+## Read-only variant
+
+<TextArea readonly labelText="App description" placeholder="Enter a description..." />
+
 ## Custom rows
 
+Specify `rows` to adjust the height of the textarea.
+
+By default, `rows` is set to `4`.
+
 <TextArea rows={10} labelText="App description" placeholder="Enter a description..." />
 
+## Custom cols
+
+If `cols` is a number, the `textarea` will not be resizeable.
+
+<TextArea cols={50} labelText="App description" placeholder="Enter a description..." />
+
 ## Invalid state
 
 <TextArea invalid invalidText="Only plain text characters are allowed" labelText="App description" placeholder="Enter a description..." />
 
+## Warning state
+
+<TextArea warn warnText="The app description requires additional approval." labelText="App description" placeholder="Enter a description..." />
+
 ## Disabled state
 
 <TextArea disabled labelText="App description" placeholder="Enter a description..." />