jb-textarea 3.12.3 → 3.13.0

package/README.md

@@ -1,171 +1,240 @@
-# jb-textarea
-
-[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/jb-textarea)
-[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/javadbat/jb-textarea/main/LICENSE)
-[![NPM Version](https://img.shields.io/npm/v/jb-textarea)](https://www.npmjs.com/package/jb-textarea)
-![GitHub Created At](https://img.shields.io/github/created-at/javadbat/jb-textarea)
-
-Simple textarea web component to input long text
-
-- lightweight
-- zero dependency
-- advance validation with [jb-validation](https://github.com/javadbat/jb-validation) module
-- help you manage validation in easy way
-- config auto height grow ability with max height
-- web component so you can use it with any framework you need
-
-## Demo
-
-- [storybook](https://javadbat.github.io/design-system/?path=/docs/components-form-elements-jbtextarea)
-- [codepen][https://codepen.io/javadbat/pen/poRZVXe]
-
-## using with JS frameworks
-
-to use this component in **react** see [`jb-textarea/react`](https://github.com/javadbat/jb-textarea/tree/main/react);
-
-## installation and setup
-
-```sh
-npm i jb-textarea
-```
-
-```html
-<jb-textarea label="description" value="" message="text under the textarea box"></jb-textarea>
-```
-
-## get and set value
-
-```js
-document.querySelector("jb-textarea").value;
-// return inputted text
-document.querySelector("jb-textarea").value = "hello";
-set value to hello
-```
-### set validation
-
-jb-textarea use [jb-validation](https://github.com/javadbat/jb-validation) inside to handle validation so for more information you can read it's documentation.  
-for simple usage you can set validation to your input:
-
-```js
-//you have 2 ways: 
-//1- set list directly 
-    description.validation.list = [
-        {
-            validator: /.{3}/g,
-            message: 'description must have 3 char at least'
-        },
-    //you can use function as a validator too
-        {
-            validator: (valueString)=>{return valueString == "hello"},
-            message: 'you can only type hello in the box'
-        },
-    //you can also return string in validator if you want custom error message in some edge cases
-        {
-            validator: (valueString)=>{
-               if(valueString.includes("*")){
-                return 'you cant write * in your text'
-               }
-               return true;
-            },
-            message: 'default error when return false'
-        },
-    ];
-//2- pass a function that returns the validation list so on each validation process we execute your callback function and get the needed validation list
-const result = document.getElementByTagName('jb-textarea').validation.addValidationListGetter(getterFunction)
-```
-
-### check validation
-
-like any other jb design system you can access validation by `validation` property:
-
-```js
-//access validation module
-document.getElementByTagName('jb-textarea').validation
-// check if input pass all the validations. showError is a boolean that determine your intent to show error to user on invalid status.
-const result = document.getElementByTagName('jb-textarea').validation.checkValidity(showError)
-
-```
-
-## events
-
-```js
-document.querySelector("jb-textarea").addEventListener('change',func);
-document.querySelector("jb-textarea").addEventListener('keydown',func);
-document.querySelector("jb-textarea").addEventListener('keyup',func);
-document.querySelector("jb-textarea").addEventListener('keypress',func);
-document.querySelector("jb-textarea").addEventListener('input',func);
-// custom Keyboard event that raise when user press enter (unlike jb-input this enter event raise after keypress because it could be cancelled with prevent default)
-document.querySelector("jb-textarea").addEventListener('enter',func);
-```
-
-## auto height grow
-
-you can set `autoHeight` to true so when user type something and text overflow a textarea height component will grow by itself in boundary of `--jb-textarea-min-height` and `--jb-textarea-max-height` that you set by css variable 
-
-```js
-document.querySelector("jb-textarea").autoHeight = true;
-```
-
-the good point of set boundary with css variable is you can set different min or max base on device by CSS media queries.
-
-## set custom style
-you have 2 way to customize style,
-
-1. using selectors like`:states` or `::part` selector
-```css
-jb-textarea::part(label){
-  font-size: 2rem;
-}
-jb-textarea:states(invalid)::part(label){
-  color:red;
-}
-```
-we have `label`, `textarea-box`, `textarea`, `message` as a supported part in our component. you can also combine them with `disabled`, `invalid` states for different style in different states.
-
-2. using css variable
-
-| css variable name                     | description                                                                                   |
-| -------------                         | -------------                                                                                 |
-| --jb-textarea-margin                  | web-component margin default is `0 12px`                                                      |
-| --jb-textarea-border-radius           | web-component border-radius                                                                   |
-| --jb-textarea-border-width            | web-component border-width default is `1px`                                                   |
-| --jb-textarea-border-color            | border color of select in normal mode                                                         |
-| --jb-textarea-border-color-disabled   | border color when disabled                                                                    |
-| --jb-textarea-border-color-focus      | border color of select in normal mode                                                         |
-| --jb-textarea-bgcolor                 | background color of input                                                                     |
-| --jb-textarea-bgcolor-disabled        | background color of input when disabled                                                       |
-| --jb-textarea-border-bottom-width     | border bottom thickness default is `3px`                                                      |
-| --jb-textarea-label-font-size         | font size of input label default is `0.8em`                                                   |
-| --jb-textarea-value-font-size         | font size of input value default is `1.1em`                                                   |
-| --jb-textarea-value-color             | color of value                                                                                |
-| --jb-textarea-value-color-disabled    | color of value when disabled                                                                  |
-| --jb-textarea-message-font-size       | font size of message we show under input                                                      |
-| --jb-textarea-message-error-color     | change color of error we show under input                                                     |
-| --jb-textarea-min-height              | minimum height of text area default is `80px`                                                 |
-| --jb-textarea-max-height              | minimum height of text area default is `none`                                                 |
-| --jb-textarea-placeholder-color       | placeholder color default is 'initial'                                                        |
-| --jb-textarea-placeholder-font-size   | placeholder font-size default is `initial`                                                    |
-| --jb-textarea-label-color             | label color                                                                                   |    
-| --jb-textarea-label-color-disabled    | label color when disabled                                                                     |
-
-## add custom element in textarea box
-
-in jb-textarea you can put icon or any other custom html DOM in textarea box. to doing so you just have to place custom DOM in `jb-textarea` tag and add `slot="inline-start-section"` or `slot="inline-end-section"` or `slot="block-start-section"` or `slot="block-end-section"` to place it before or after input field.
-example:
-
-```HTML
-<jb-textarea>
-    <div slot="inline-start-section">before</div>
-    <div slot="inline-end-section">after</div>
-    <div slot="block-start-section">in Top</div>
-    <div slot="block-end-section">in Bottom</div>
-</jb-textarea>
-```
-
-## Other Related Docs:
-
-- see [`jb-textarea/react`](https://github.com/javadbat/jb-textarea/tree/main/react) if you want to use this component in react.
-
-- see [All JB Design system Component List](https://javadbat.github.io/design-system/) for more components.
-
-- use [Contribution Guide](https://github.com/javadbat/design-system/blob/main/docs/contribution-guide.md) if you want to contribute in this component.
+# jb-textarea
+
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/jb-textarea)
+[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/javadbat/jb-textarea/main/LICENSE)
+[![NPM Version](https://img.shields.io/npm/v/jb-textarea)](https://www.npmjs.com/package/jb-textarea)
+![GitHub Created At](https://img.shields.io/github/created-at/javadbat/jb-textarea)
+
+Simple textarea web component to input long text
+
+- lightweight
+- zero dependency
+- advance validation with [jb-validation](https://github.com/javadbat/jb-validation) module
+- help you manage validation in easy way
+- config auto height grow ability with max height
+- web component so you can use it with any framework you need
+
+## When to use
+
+Use `jb-textarea` when the user needs to enter multi-line text, long descriptions, comments, notes, or any free-form text that can span multiple lines.
+
+Use `jb-input` for single-line text fields.
+
+## Demo
+
+- [storybook](https://javadbat.github.io/design-system/?path=/docs/components-form-elements-jbtextarea)
+- [codepen](https://codepen.io/javadbat/pen/poRZVXe)
+
+## Using With JS Frameworks
+- [<img src="https://img.shields.io/badge/React.js-jb--textarea%2Freact-000.svg?logo=react&logoColor=%2361DAFB" height="30" />](https://github.com/javadbat/jb-textarea/tree/main/react)
+
+## Installation
+
+```sh
+npm i jb-textarea
+```
+
+```html
+<jb-textarea label="description" value="" message="text under the textarea box"></jb-textarea>
+```
+
+## API reference
+
+### Attributes
+
+| name | type | default | description |
+| --- | --- | --- | --- |
+| [`value`](#get-and-set-value) | `string` | `""` | Initial textarea value from markup. Prefer the property for runtime updates. |
+| `label` | `string` | `""` | Visible label text and accessible aria label. |
+| `message` | `string` | `""` | Helper text shown below the textarea when no validation error is visible. |
+| `name` | `string` | `""` | Form field name. |
+| `placeholder` | `string` | `""` | Placeholder forwarded to the inner textarea. |
+| [`required`](#set-validation) | `boolean` | `false` | Enables required validation. |
+| [`error`](#set-validation) | `string` | `""` | External validation error message. |
+
+### Properties
+
+| name | type | readonly | description |
+| --- | --- | --- | --- |
+| [`value`](#get-and-set-value) | `string` | no | Canonical textarea value submitted with forms. |
+| [`autoHeight`](#auto-height-grow) | `boolean` | no | Lets the textarea grow between configured min and max height. |
+| `validation` | `ValidationHelper<string>` | yes | Validation helper from `jb-validation`; set `validation.list` for custom rules. |
+| `disabled` | `boolean` | no | Disables the inner textarea and sets the `disabled` custom state. |
+| `required` | `boolean` | no | Enables required validation. |
+| `initialValue` | `string` | no | Baseline value used by `isDirty`. |
+| `isDirty` | `boolean` | yes | `true` when current `value` differs from `initialValue`. |
+| `validationMessage` | `string` | yes | Current native validation message from `ElementInternals`. |
+
+### Methods
+
+| name | returns | description |
+| --- | --- | --- |
+| `checkValidity()` | `boolean` | Runs validation without showing the error message. Dispatches `invalid` when invalid. |
+| `reportValidity()` | `boolean` | Runs validation and shows the first error message. Dispatches `invalid` when invalid. |
+
+## get and set value
+
+```js
+document.querySelector("jb-textarea").value;
+// return inputted text
+document.querySelector("jb-textarea").value = "hello";
+set value to hello
+```
+### set validation
+
+jb-textarea use [jb-validation](https://github.com/javadbat/jb-validation) inside to handle validation so for more information you can read it's documentation.  
+for simple usage you can set validation to your input:
+
+```js
+//you have 2 ways: 
+//1- set list directly 
+    description.validation.list = [
+        {
+            validator: /.{3}/g,
+            message: 'description must have 3 char at least'
+        },
+    //you can use function as a validator too
+        {
+            validator: (valueString)=>{return valueString == "hello"},
+            message: 'you can only type hello in the box'
+        },
+    //you can also return string in validator if you want custom error message in some edge cases
+        {
+            validator: (valueString)=>{
+               if(valueString.includes("*")){
+                return 'you cant write * in your text'
+               }
+               return true;
+            },
+            message: 'default error when return false'
+        },
+    ];
+//2- pass a function that returns the validation list so on each validation process we execute your callback function and get the needed validation list
+const result = document.querySelector('jb-textarea').validation.addValidationListGetter(getterFunction)
+```
+
+### check validation
+
+like any other jb design system you can access validation by `validation` property:
+
+```js
+//access validation module
+document.querySelector('jb-textarea').validation
+// check if input pass all the validations. showError is a boolean that determine your intent to show error to user on invalid status.
+const result = document.querySelector('jb-textarea').validation.checkValidity({showError})
+
+```
+
+## Events
+
+| event | cancelable | when it fires |
+| --- | --- | --- |
+| `input` | native behavior | On each user edit after `value` is updated. |
+| `beforeinput` | yes | Before the inner textarea value changes. Call `event.preventDefault()` to block the edit. |
+| `change` | yes | When the user commits the textarea value. |
+| `keydown` | yes | Re-dispatched from the inner textarea. |
+| `keyup` | yes | Re-dispatched from the inner textarea. |
+| `keypress` | yes | Re-dispatched from the inner textarea. |
+| `enter` | yes | From `keypress` when Enter is pressed. |
+| `invalid` | no | When `checkValidity()` or `reportValidity()` finds an invalid value. |
+
+```js
+document.querySelector("jb-textarea").addEventListener('change',func);
+document.querySelector("jb-textarea").addEventListener('keydown',func);
+document.querySelector("jb-textarea").addEventListener('keyup',func);
+document.querySelector("jb-textarea").addEventListener('keypress',func);
+document.querySelector("jb-textarea").addEventListener('input',func);
+// custom Keyboard event that raise when user press enter (unlike jb-input this enter event raise after keypress because it could be cancelled with prevent default)
+document.querySelector("jb-textarea").addEventListener('enter',func);
+```
+
+## auto height grow
+
+you can set `autoHeight` to true so when user type something and text overflow a textarea height component will grow by itself in boundary of `--jb-textarea-min-height` and `--jb-textarea-max-height` that you set by CSS variable 
+
+```js
+document.querySelector("jb-textarea").autoHeight = true;
+```
+
+the good point of set boundary with CSS variable is you can set different min or max based on device by CSS media queries.
+
+## set custom style
+you have 2 way to customize style,
+
+1. using selectors like`:states` or `::part` selector
+```css
+jb-textarea::part(label){
+  font-size: 2rem;
+}
+jb-textarea:states(invalid)::part(label){
+  color:red;
+}
+jb-textarea:states(invalid)::part(textarea-box){
+  border-color:red;
+}
+jb-textarea:states(disabled)::part(textarea){
+  cursor:not-allowed;
+}
+```
+we have `label`, `textarea-box`, `textarea`, `message`, `inline-start-section-wrapper`, `inline-end-section-wrapper`, `block-start-section-wrapper`, and `block-end-section-wrapper` as supported parts in our component. you can also combine them with `disabled`, `invalid` states for different style in different states.
+
+2. using CSS variable
+
+For complete styling guidance, live examples, official parts, custom states, and copyable style recipes, see [Styling](https://javadbat.github.io/design-system/?path=/docs/components-form-elements-jbtextarea-styling).
+
+## add custom element in textarea box
+
+in jb-textarea you can put icon or any other custom html DOM in textarea box. to doing so you just have to place custom DOM in `jb-textarea` tag and add `slot="inline-start-section"` or `slot="inline-end-section"` or `slot="block-start-section"` or `slot="block-end-section"` to place it before or after input field.
+
+| slot | description |
+| --- | --- |
+| `inline-start-section` | Inline content before the textarea. |
+| `inline-end-section` | Inline content after the textarea. |
+| `block-start-section` | Block content above the textarea inside the textarea box. |
+| `block-end-section` | Block content below the textarea inside the textarea box. |
+
+example:
+
+```HTML
+<jb-textarea>
+    <div slot="inline-start-section">before</div>
+    <div slot="inline-end-section">after</div>
+    <div slot="block-start-section">in Top</div>
+    <div slot="block-end-section">in Bottom</div>
+</jb-textarea>
+```
+
+## Accessibility notes
+
+- The component is form-associated and submits `value` as its form value.
+- `label` is exposed as the component aria label.
+- `message` is exposed as the component aria description when no validation error is visible.
+- `placeholder` is forwarded to the inner textarea and exposed as aria placeholder.
+- `disabled`, `invalid`, and validation state are synchronized with `ElementInternals` where the browser supports it.
+- The shadow root uses `delegatesFocus`, so focusing `<jb-textarea>` focuses the inner native textarea.
+
+## Related Docs
+- see [`jb-textarea/react`](https://github.com/javadbat/jb-textarea/tree/main/react) if you want to use this component in react.
+
+- see [All JB Design system Component List](https://javadbat.github.io/design-system/) for more components.
+
+- use [Contribution Guide](https://github.com/javadbat/design-system/blob/main/docs/contribution-guide.md) if you want to contribute in this component.
+
+## AI agent notes
+
+This package includes [`custom-elements.json`](./custom-elements.json) so documentation tools, IDEs, and AI coding agents can discover the tag name, attributes, properties, events, slots, CSS parts, CSS variables, and public methods.
+
+The package also exposes `"customElements": "custom-elements.json"` in `package.json`, which gives tools a stable package-level pointer to the manifest. This field is documented by the Custom Elements Manifest project in its [Referencing manifests from npm packages](https://github.com/webcomponents/custom-elements-manifest#referencing-manifests-from-npm-packages) section.
+
+In `custom-elements.json`, the `exports` array describes what this module makes available:
+
+| kind | meaning |
+| --- | --- |
+| `js` | A JavaScript/TypeScript export from the module, such as `JBTextareaWebComponent`. |
+| `custom-element-definition` | The custom element registration for a tag name, such as `jb-textarea`. |
+
+- Import `jb-textarea` once before using `<jb-textarea>`.
+- Use `jb-textarea` for multi-line text and `jb-input` for single-line text.
+- Use `.value` for the canonical submitted text.
+- Use `autoHeight` when the textarea should grow with content, and control bounds with `--jb-textarea-min-height` and `--jb-textarea-max-height`.
+- Set `error` for externally controlled validation errors; the component observes the attribute and updates its validation UI.

package/index.js

@@ -1 +1 @@
-export * from './dist/jb-textarea.js';
+export * from './web-component/dist/jb-textarea.js';

package/package.json

@@ -14,27 +14,40 @@
     "web component",
     "web-component"
   ],
-  "version": "3.12.3",
+  "version": "3.13.0",
   "bugs": "https://github.com/javadbat/jb-textarea/issues",
   "homepage": "https://javadbat.github.io/design-system/?path=/docs/components-form-elements-jbtextarea",
   "license": "MIT",
   "files": [
     "LICENSE",
     "README.md",
-    "lib/",
-    "dist/",
+    "web-component/custom-elements.json",
+    "web-component/lib/",
+    "web-component/dist/",
     "react/",
     "react/dist/"
   ],
   "main": "index.js",
-  "types": "./dist/jb-textarea.d.ts",
+  "types": "./web-component/dist/jb-textarea.d.ts",
+  "exports": {
+    ".": {
+      "types": "./web-component/dist/jb-textarea.d.ts",
+      "default": "./index.js"
+    },
+    "./react": {
+      "types": "./react/dist/JBTextarea.d.ts",
+      "default": "./react/index.js"
+    },
+    "./*": "./*"
+  },
+  "customElements": "web-component/custom-elements.json",
   "repository": {
 		"type": "git",
 		"url": "git@github.com:javadbat/jb-textarea.git"
   },
   "dependencies": {
-    "jb-validation":">=0.4.0",
-    "jb-core":">=0.24.0",
-    "jb-form":">=0.7.1"
+    "jb-validation":">=1.0.0",
+    "jb-core":">=0.30.0",
+    "jb-form":">=0.12.0"
   }
 }

package/react/README.md

@@ -1,5 +1,10 @@
 # jb-textarea-react
 
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/jb-textarea)
+[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/javadbat/jb-textarea/main/LICENSE)
+[![NPM Version](https://img.shields.io/npm/v/jb-textarea-react)](https://www.npmjs.com/package/jb-textarea-react)
+![GitHub Created At](https://img.shields.io/github/created-at/javadbat/jb-textarea)
+
 simple textarea react component to input long text
 
 - lightweight
@@ -7,12 +12,11 @@ simple textarea react component to input long text
 - help you manage validation in easy way
 - config auto height grow ability with max height
 
-- [codeSandbox preview](https://3f63dj.csb.app/samples/jb-textarea) for just see the demo and [codeSandbox editor](https://codesandbox.io/p/sandbox/jb-design-system-3f63dj?file=%2Fsrc%2Fsamples%2FJBTextarea.tsx) if you want to see and play with code
-
-- [storybook](https://javadbat.github.io/design-system/?path=/docs/components-form-elements-jbtextarea)
-
-## installation and setup
+- [codeSandbox preview](https://3f63dj.csb.app/samples/jb-textarea) for just see the demo and [codeSandbox editor](https://codesandbox.io/p/sandbox/jb-design-system-3f63dj?file=%2Fsrc%2Fsamples%2FJBTextarea.tsx) if you want to see and play with code
+
+Storybook: [JBTextarea docs](https://javadbat.github.io/design-system/?path=/docs/components-form-elements-jbtextarea)
 
+## Installation
 ```sh
 npm i jb-textarea-react
 ```
@@ -20,8 +24,27 @@ npm i jb-textarea-react
 ```jsx
 import {JBTextarea} from 'jb-textarea/react';
 
-<JBTextarea label="label" value={valueState} message="text under the box"></JBTextarea>
-```
+<JBTextarea label="label" value={valueState} message="text under the box"></JBTextarea>
+```
+
+## When to use
+
+Use `JBTextarea` when the user needs to enter multi-line text, long descriptions, comments, notes, or any free-form text that can span multiple lines.
+
+## Props
+
+| prop | type | description |
+| --- | --- | --- |
+| `value` | `string \| null \| undefined` | Controlled textarea value. `null` and `undefined` are normalized to an empty string. |
+| `label` | `string` | Visible label text and accessible label. |
+| `message` | `string` | Helper text shown when no validation error is visible. |
+| `name` | `string` | Form field name. |
+| `placeholder` | `string` | Placeholder forwarded to the inner textarea. |
+| `validationList` | `ValidationItem<ValidationValue>[]` | Custom validation rules from `jb-validation`. |
+| `autoHeight` | `boolean` | Lets the textarea grow between configured min and max height. |
+| `required` | `boolean` | Enables required validation. |
+| `error` | `string` | External validation error message. |
+| `disabled` | `boolean` | Disables the textarea. |
 
 ## get and set value
 
@@ -69,36 +92,76 @@ you can check if an input value meet your validation standard by creating a ref
 if `isValid` is `true` the value of input is valid.
 
 
-## events
-
-```JSX
-<JBTextarea  onChange={(e)=>{}}></JBTextarea>
-<JBTextarea  onKeydown={(e)=>{}}></JBTextarea>
-<JBTextarea  onKeyup={(e)=>{}}></JBTextarea>
-<JBTextarea  onKeypress={(e)=>{}}></JBTextarea>
-<JBTextarea  onInput={(e)=>{}}></JBTextarea>
-// custom event for when user press enter
-<JBTextarea  onEnter={(e)=>{}}></JBTextarea>
-```
+## Events
+```JSX
+<JBTextarea  onChange={(e)=>{}}></JBTextarea>
+<JBTextarea  onKeyDown={(e)=>{}}></JBTextarea>
+<JBTextarea  onKeyUp={(e)=>{}}></JBTextarea>
+<JBTextarea  onBeforeInput={(e)=>{}}></JBTextarea>
+<JBTextarea  onInput={(e)=>{}}></JBTextarea>
+<JBTextarea  onFocus={(e)=>{}}></JBTextarea>
+<JBTextarea  onBlur={(e)=>{}}></JBTextarea>
+// custom event for when user press enter
+<JBTextarea  onEnter={(e)=>{}}></JBTextarea>
+```
+
+| prop | event |
+| --- | --- |
+| `onChange` | `change` |
+| `onInput` | `input` |
+| `onBeforeInput` | `beforeinput` |
+| `onKeyDown` | `keydown` |
+| `onKeyUp` | `keyup` |
+| `onFocus` | `focus` |
+| `onBlur` | `blur` |
+| `onEnter` | `enter` |
+| `onLoad` | `load` |
+| `onInit` | `init` |
 
 ## auto height grow
 
-you can set `autoHeight` to true so when user type something and text overflow a textarea height component will grow by itself in boundary of `--jb-textarea-min-height` and `--jb-textarea-max-height` that you set by css variable 
+you can set `autoHeight` to true so when user type something and text overflow a textarea height component will grow by itself in boundary of `--jb-textarea-min-height` and `--jb-textarea-max-height` that you set by CSS variable 
 
 ```js
 <JBTextarea  autoHeight></JBTextarea>
 ```
 
-the good point of set boundary with css variable is you can set different min or max base on device by CSS media queries.
-
-## set custom style
-
- see see [jb-textarea](https://github.com/javadbat/jb-textarea) document. there is no difference between these 2 in styling.
-
-## Other Related Docs:
-
+the good point of set boundary with CSS variable is you can set different min or max based on device by CSS media queries.
+
+## set custom style
+
+ see see [jb-textarea](https://github.com/javadbat/jb-textarea) document. there is no difference between these 2 in styling.
+
+## add custom element in textarea box
+
+Pass custom prefix or suffix content as children with `slot="start-section"` or `slot="end-section"`.
+
+```jsx
+<JBTextarea label="Description">
+  <span slot="start-section">Notes</span>
+  <span slot="end-section">optional</span>
+</JBTextarea>
+```
+
+## Accessibility notes
+
+Set `label` for the textarea name and use `message` for helper text. When `autoHeight` is enabled, keep the configured max height large enough that keyboard users can still review entered content comfortably.
+
+## Shared Documentation
+
+For web-component behavior, events, slots, and CSS variables, see [`jb-textarea`](https://github.com/javadbat/jb-textarea).
+
+## Related Docs
 - see [jb-textarea](https://github.com/javadbat/jb-textarea) if you want to use this component as a web-component in other frameworks.
 
-- see [All JB Design system Component List](https://javadbat.github.io/design-system/) for more components.
-
-- use [Contribution Guide](https://github.com/javadbat/design-system/blob/main/docs/contribution-guide.md) if you want to contribute in this component.
+- see [All JB Design system Component List](https://javadbat.github.io/design-system/) for more components.
+
+- use [Contribution Guide](https://github.com/javadbat/design-system/blob/main/docs/contribution-guide.md) if you want to contribute in this component.
+
+## AI agent notes
+
+- Import `JBTextarea` from `jb-textarea/react`; the wrapper imports and registers the underlying `jb-textarea` web component.
+- Use `value` for controlled text and `onChange` or `onInput` to update React state.
+- Use `autoHeight` for growing textareas and CSS variables for min/max height.
+- Use exact React prop casing such as `onKeyDown`, `onKeyUp`, and `onBeforeInput`.
+- Use `error` for externally controlled validation errors.