@justeattakeaway/pie-textarea 0.4.0 → 0.6.0

package/README.md

@@ -73,10 +73,16 @@ import { PieTextarea } from '@justeattakeaway/pie-textarea/dist/react';
 ## Props
 
 | Property | Type | Default | Description |
-| --- | --- | --- | --- |
-| `disabled` | `boolean` | `false` | Indicates whether or not the textarea is disabled. |
-| `size` | `"small"`, `"medium"`, `"large"` | `"medium"` | The size of the textarea field. |
-| `resize` | `"auto"`, `"manual"` | `"auto"` | Controls the resizing behaviour of the textarea. |
+|---|---|---|---|
+| `disabled` | `boolean` | `false`| Indicates whether or not the textarea is disabled. |
+| `size` | `'small'`, `'medium'`, `'large'` | `'medium'` | The size of the textarea field. |
+| `resize` | `'auto'`, `'manual'` | `'auto'` | Controls the resizing behaviour of the textarea. |
+| `value` | `string` | `''` | The value of the textarea (used as a key/value pair in HTML forms with `name`). |
+| `name` | `string` | `''` | The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms. |
+| `autocomplete` | `string` | `''` | Allows the user to enable or disable autocomplete functionality on the textarea field. |
+| `autoFocus` | `boolean` | `false` | If true, the textarea will be focused on the first render. |
+| `readonly` | `boolean` | `false` | When true, the user cannot edit the control. Not the same as disabled. |
+| `required` | `boolean` | `false` | If true, the textarea is required to have a value before submitting the form. If there is no value, then the component validity state will be invalid. |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-textarea` component:
 

package/custom-elements.json

@@ -34,7 +34,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    disabled: false,\n    size: 'medium',\n    resize: 'auto',\n}",
+          "default": "{\n    disabled: false,\n    size: 'medium',\n    resize: 'auto',\n    label: '',\n    value: '',\n    autoFocus: false,\n    readonly: false,\n    required: false,\n}",
           "description": "Default values for optional properties that have default fallback values in the component."
         }
       ],
@@ -83,6 +83,12 @@
               "static": true,
               "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
             },
+            {
+              "kind": "field",
+              "name": "value",
+              "privacy": "public",
+              "attribute": "value"
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -102,6 +108,57 @@
               "privacy": "public",
               "attribute": "resize"
             },
+            {
+              "kind": "field",
+              "name": "label",
+              "privacy": "public",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "maxLength",
+              "type": {
+                "text": "TextareaProps['maxLength']"
+              },
+              "privacy": "public",
+              "attribute": "maxLength"
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "privacy": "public",
+              "attribute": "readonly"
+            },
+            {
+              "kind": "field",
+              "name": "autoFocus",
+              "privacy": "public",
+              "attribute": "autoFocus"
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "privacy": "public",
+              "attribute": "required"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "TextareaProps['name'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "TextareaProps['autocomplete'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "autocomplete"
+            },
             {
               "kind": "field",
               "name": "_textarea",
@@ -115,13 +172,120 @@
               "name": "_throttledResize",
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "privacy": "public",
+              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The latest disabled state of the input."
+                }
+              ],
+              "description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Called when the form that owns this component is reset.\nResets the value to the default value."
+            },
             {
               "kind": "method",
               "name": "handleResize",
               "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "restrictInputLength",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleInput",
+              "privacy": "private",
+              "description": "Handles data processing in response to the input event. The native input event is left to bubble up.",
+              "parameters": [
+                {
+                  "description": "The input event.",
+                  "name": "event"
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "handleChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "handleKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "parameters": [
+                {
+                  "name": "label",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "maxLength",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "InputEvent"
+              },
+              "description": "when the textarea value is changed.",
+              "name": "input"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "when the textarea value is changed.",
+              "name": "change"
             }
           ],
           "attributes": [
+            {
+              "name": "value",
+              "fieldName": "value"
+            },
             {
               "name": "disabled",
               "fieldName": "disabled"
@@ -133,9 +297,50 @@
             {
               "name": "resize",
               "fieldName": "resize"
+            },
+            {
+              "name": "label",
+              "fieldName": "label"
+            },
+            {
+              "name": "maxLength",
+              "type": {
+                "text": "TextareaProps['maxLength']"
+              },
+              "fieldName": "maxLength"
+            },
+            {
+              "name": "readonly",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "autoFocus",
+              "fieldName": "autoFocus"
+            },
+            {
+              "name": "required",
+              "fieldName": "required"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "TextareaProps['name'] | undefined"
+              },
+              "fieldName": "name"
+            },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": "TextareaProps['autocomplete'] | undefined"
+              },
+              "fieldName": "autocomplete"
             }
           ],
           "mixins": [
+            {
+              "name": "FormControlMixin",
+              "package": "@justeattakeaway/pie-webc-core"
+            },
             {
               "name": "RtlMixin",
               "package": "@justeattakeaway/pie-webc-core"

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
+import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
+import type { nothing } from 'lit';
 import type { PropertyValues } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
@@ -9,7 +11,7 @@ import type { TemplateResult } from 'lit-html';
 /**
  * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
  */
-declare type DefaultProps = ComponentDefaultProps<TextareaProps>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -18,6 +20,8 @@ export declare const defaultProps: DefaultProps;
 
 /**
  * @tagname pie-textarea
+ * @event {InputEvent} input - when the textarea value is changed.
+ * @event {CustomEvent} change - when the textarea value is changed.
  */
 export declare class PieTextarea extends PieTextarea_base implements TextareaProps {
     static shadowRootOptions: {
@@ -25,18 +29,54 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
     };
+    value: string;
     disabled: boolean;
     size: "small" | "medium" | "large";
     resize: "auto" | "manual";
+    label: string;
+    maxLength: TextareaProps['maxLength'];
+    readonly: boolean;
+    autoFocus: boolean;
+    required: boolean;
+    name?: TextareaProps['name'];
+    autocomplete?: TextareaProps['autocomplete'];
     private _textarea;
     private _throttledResize;
+    /**
+     * (Read-only) returns a ValidityState with the validity states that this element is in.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+     */
+    get validity(): ValidityState;
+    /**
+     * Called after the disabled state of the element changes,
+     * either because the disabled attribute of this element was added or removed;
+     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+     * @param disabled - The latest disabled state of the input.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Called when the form that owns this component is reset.
+     * Resets the value to the default value.
+     */
+    formResetCallback(): void;
+    protected firstUpdated(): void;
     private handleResize;
-    updated(changedProperties: PropertyValues<this>): void;
+    private restrictInputLength;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * Handles data processing in response to the input event. The native input event is left to bubble up.
+     * @param event - The input event.
+     */
+    private handleInput;
+    private handleChange;
+    private handleKeyDown;
+    disconnectedCallback(): void;
+    renderLabel(label: string, maxLength?: number): TemplateResult<1> | typeof nothing;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
-declare const PieTextarea_base: GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieTextarea_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
 
 export declare const resizeModes: readonly ["auto", "manual"];
 
@@ -57,6 +97,43 @@ export declare interface TextareaProps {
      * When set to `manual`, the textarea will not resize automatically but can be resized by the user.
      */
     resize?: typeof resizeModes[number];
+    /**
+     * The value of the textarea (used as a key/value pair in HTML forms with `name`).
+     */
+    value: string;
+    /**
+     * The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
+    /**
+     * Allows the user to enable or disable autocomplete functionality on the textarea field.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for more information and values.
+     */
+    autocomplete?: string;
+    /**
+     * If true, the textarea will be focused on the first render.
+     * No more than one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) for more information.
+     */
+    autoFocus?: boolean;
+    /**
+     * When true, the user cannot edit the control. Not the same as disabled.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.
+     */
+    readonly?: boolean;
+    /**
+     * If true, the textarea is required to have a value before submitting the form. If there is no value, then the component validity state will be invalid.
+     */
+    required?: boolean;
+    /**
+     * The label text for the textarea field.
+     */
+    label?: string;
+    /**
+     * The maximum number of characters allowed in the textarea field.
+     * If the `label` property is not set, this property will have no effect.
+     */
+    maxLength?: number;
 }
 
 export { }

package/dist/index.js

@@ -1,160 +1,255 @@
-import { LitElement as $, html as B, unsafeCSS as D } from "lit";
-import { property as O, query as N } from "lit/decorators.js";
-import { RtlMixin as A, validPropertyValues as w, defineCustomElement as G } from "@justeattakeaway/pie-webc-core";
-var b = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function H(e) {
-  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+import { LitElement as w, html as I, nothing as B, unsafeCSS as N } from "lit";
+import { property as h, query as V } from "lit/decorators.js";
+import { live as A } from "lit/directives/live.js";
+import { FormControlMixin as K, RtlMixin as G, wrapNativeEvent as H, validPropertyValues as F, defineCustomElement as U } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as O } from "lit/directives/if-defined.js";
+import "@justeattakeaway/pie-form-label";
+var z = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function X(t) {
+  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-var P = "Expected a function", I = 0 / 0, q = "[object Symbol]", U = /^\s+|\s+$/g, V = /^[-+]0x[0-9a-f]+$/i, X = /^0b[01]+$/i, J = /^0o[0-7]+$/i, K = parseInt, Q = typeof b == "object" && b && b.Object === Object && b, Y = typeof self == "object" && self && self.Object === Object && self, Z = Q || Y || Function("return this")(), ee = Object.prototype, te = ee.toString, re = Math.max, ae = Math.min, j = function() {
-  return Z.Date.now();
+var R = "Expected a function", C = 0 / 0, J = "[object Symbol]", Q = /^\s+|\s+$/g, Y = /^[-+]0x[0-9a-f]+$/i, Z = /^0b[01]+$/i, ee = /^0o[0-7]+$/i, te = parseInt, ae = typeof z == "object" && z && z.Object === Object && z, re = typeof self == "object" && self && self.Object === Object && self, ie = ae || re || Function("return this")(), ne = Object.prototype, oe = ne.toString, se = Math.max, le = Math.min, L = function() {
+  return ie.Date.now();
 };
-function ie(e, t, r) {
-  var i, n, s, d, o, c, p = 0, _ = !1, u = !1, y = !0;
-  if (typeof e != "function")
-    throw new TypeError(P);
-  t = R(t) || 0, v(r) && (_ = !!r.leading, u = "maxWait" in r, s = u ? re(R(r.maxWait) || 0, t) : s, y = "trailing" in r ? !!r.trailing : y);
-  function z(a) {
-    var l = i, h = n;
-    return i = n = void 0, p = a, d = e.apply(h, l), d;
-  }
-  function C(a) {
-    return p = a, o = setTimeout(g, t), _ ? z(a) : d;
-  }
-  function M(a) {
-    var l = a - c, h = a - p, E = t - l;
-    return u ? ae(E, s - h) : E;
-  }
-  function W(a) {
-    var l = a - c, h = a - p;
-    return c === void 0 || l >= t || l < 0 || u && h >= s;
-  }
-  function g() {
-    var a = j();
-    if (W(a))
-      return S(a);
-    o = setTimeout(g, M(a));
-  }
-  function S(a) {
-    return o = void 0, y && i ? z(a) : (i = n = void 0, d);
-  }
-  function L() {
-    o !== void 0 && clearTimeout(o), p = 0, i = c = n = o = void 0;
-  }
-  function F() {
-    return o === void 0 ? d : S(j());
-  }
-  function k() {
-    var a = j(), l = W(a);
-    if (i = arguments, n = this, c = a, l) {
-      if (o === void 0)
-        return C(c);
-      if (u)
-        return o = setTimeout(g, t), z(c);
+function de(t, e, a) {
+  var r, i, u, l, s, p, g = 0, m = !1, v = !1, _ = !0;
+  if (typeof t != "function")
+    throw new TypeError(R);
+  e = W(e) || 0, k(a) && (m = !!a.leading, v = "maxWait" in a, u = v ? se(W(a.maxWait) || 0, e) : u, _ = "trailing" in a ? !!a.trailing : _);
+  function $(n) {
+    var f = r, b = i;
+    return r = i = void 0, g = n, l = t.apply(b, f), l;
+  }
+  function D(n) {
+    return g = n, s = setTimeout(y, e), m ? $(n) : l;
+  }
+  function P(n) {
+    var f = n - p, b = n - g, E = e - f;
+    return v ? le(E, u - b) : E;
+  }
+  function S(n) {
+    var f = n - p, b = n - g;
+    return p === void 0 || f >= e || f < 0 || v && b >= u;
+  }
+  function y() {
+    var n = L();
+    if (S(n))
+      return T(n);
+    s = setTimeout(y, P(n));
+  }
+  function T(n) {
+    return s = void 0, _ && r ? $(n) : (r = i = void 0, l);
+  }
+  function M() {
+    s !== void 0 && clearTimeout(s), g = 0, r = p = i = s = void 0;
+  }
+  function q() {
+    return s === void 0 ? l : T(L());
+  }
+  function j() {
+    var n = L(), f = S(n);
+    if (r = arguments, i = this, p = n, f) {
+      if (s === void 0)
+        return D(p);
+      if (v)
+        return s = setTimeout(y, e), $(p);
     }
-    return o === void 0 && (o = setTimeout(g, t)), d;
+    return s === void 0 && (s = setTimeout(y, e)), l;
   }
-  return k.cancel = L, k.flush = F, k;
+  return j.cancel = M, j.flush = q, j;
 }
-function ne(e, t, r) {
-  var i = !0, n = !0;
-  if (typeof e != "function")
-    throw new TypeError(P);
-  return v(r) && (i = "leading" in r ? !!r.leading : i, n = "trailing" in r ? !!r.trailing : n), ie(e, t, {
-    leading: i,
-    maxWait: t,
-    trailing: n
+function ce(t, e, a) {
+  var r = !0, i = !0;
+  if (typeof t != "function")
+    throw new TypeError(R);
+  return k(a) && (r = "leading" in a ? !!a.leading : r, i = "trailing" in a ? !!a.trailing : i), de(t, e, {
+    leading: r,
+    maxWait: e,
+    trailing: i
   });
 }
-function v(e) {
-  var t = typeof e;
-  return !!e && (t == "object" || t == "function");
+function k(t) {
+  var e = typeof t;
+  return !!t && (e == "object" || e == "function");
 }
-function oe(e) {
-  return !!e && typeof e == "object";
+function he(t) {
+  return !!t && typeof t == "object";
 }
-function de(e) {
-  return typeof e == "symbol" || oe(e) && te.call(e) == q;
+function ue(t) {
+  return typeof t == "symbol" || he(t) && oe.call(t) == J;
 }
-function R(e) {
-  if (typeof e == "number")
-    return e;
-  if (de(e))
-    return I;
-  if (v(e)) {
-    var t = typeof e.valueOf == "function" ? e.valueOf() : e;
-    e = v(t) ? t + "" : t;
-  }
-  if (typeof e != "string")
-    return e === 0 ? e : +e;
-  e = e.replace(U, "");
-  var r = X.test(e);
-  return r || J.test(e) ? K(e.slice(2), r ? 2 : 8) : V.test(e) ? I : +e;
+function W(t) {
+  if (typeof t == "number")
+    return t;
+  if (ue(t))
+    return C;
+  if (k(t)) {
+    var e = typeof t.valueOf == "function" ? t.valueOf() : t;
+    t = k(e) ? e + "" : e;
+  }
+  if (typeof t != "string")
+    return t === 0 ? t : +t;
+  t = t.replace(Q, "");
+  var a = Z.test(t);
+  return a || ee.test(t) ? te(t.slice(2), a ? 2 : 8) : Y.test(t) ? C : +t;
 }
-var se = ne;
-const le = /* @__PURE__ */ H(se), ce = `*,*:after,*:before{box-sizing:inherit}.c-textareaWrapper{--textarea-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--textarea-border-thickness: 1px;--textarea-resize: none;--textarea-padding-inline: var(--dt-spacing-d);--textarea-padding-block: var(--dt-spacing-c);--textarea-background-color: var(--dt-color-container-default);--textarea-border-color: var(--dt-color-interactive-form);--textarea-content-color: var(--dt-color-content-default);--textarea-height: calc((var(--textarea-line-height) * 2) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));line-height:0}.c-textareaWrapper textarea{font-size:calc(var(--dt-font-body-l-size) * 1px);line-height:var(--textarea-line-height);font-family:var(--dt-font-body-l-family);resize:var(--textarea-resize);border:var(--textarea-border-thickness) solid var(--textarea-border-color);background-color:var(--textarea-background-color);color:var(--textarea-content-color);border-radius:var(--dt-radius-rounded-c);block-size:var(--textarea-height);max-block-size:var(--textarea-max-height);min-block-size:var(--textarea-min-height);padding-block-start:var(--textarea-padding-block);padding-block-end:var(--textarea-padding-block);padding-inline-start:var(--textarea-padding-inline);padding-inline-end:var(--textarea-padding-inline)}.c-textareaWrapper textarea[disabled]{--textarea-background-color: var(--dt-color-disabled-01);--textarea-border-color: var(--dt-color-disabled-01);--textarea-content-color: var(--dt-color-content-disabled)}@media (hover: hover){.c-textareaWrapper textarea:hover:not([disabled]){--textarea-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}}.c-textareaWrapper textarea:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-textareaWrapper[data-pie-size=large]{--textarea-padding-block: var(--dt-spacing-d)}.c-textareaWrapper[data-pie-size=small]{--textarea-padding-block: var(--dt-spacing-b)}.c-textareaWrapper[data-pie-resize=manual]{--textarea-resize: vertical;--textarea-min-height: calc((var(--textarea-line-height) * 1) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2))}@media (pointer: coarse){.c-textareaWrapper[data-pie-resize=manual]{--textarea-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));--textarea-min-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));--textarea-resize: none}}.c-textareaWrapper[data-pie-resize=auto]{--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));--textarea-min-height: var(--textarea-height)}
-`, fe = ["small", "medium", "large"], pe = ["auto", "manual"], x = {
+var pe = ce;
+const fe = /* @__PURE__ */ X(pe), ge = `*,*:after,*:before{box-sizing:inherit}.c-textareaWrapper{--textarea-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--textarea-border-thickness: 1px;--textarea-resize: none;--textarea-padding-inline: var(--dt-spacing-d);--textarea-padding-block: var(--dt-spacing-c);--textarea-background-color: var(--dt-color-container-default);--textarea-border-color: var(--dt-color-interactive-form);--textarea-content-color: var(--dt-color-content-default);--textarea-height: calc((var(--textarea-line-height) * 2) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));line-height:0}.c-textareaWrapper textarea{font-size:calc(var(--dt-font-body-l-size) * 1px);line-height:var(--textarea-line-height);font-family:var(--dt-font-body-l-family);resize:var(--textarea-resize);border:var(--textarea-border-thickness) solid var(--textarea-border-color);background-color:var(--textarea-background-color);color:var(--textarea-content-color);border-radius:var(--dt-radius-rounded-c);block-size:var(--textarea-height);max-block-size:var(--textarea-max-height);min-block-size:var(--textarea-min-height);padding-block-start:var(--textarea-padding-block);padding-block-end:var(--textarea-padding-block);padding-inline-start:var(--textarea-padding-inline);padding-inline-end:var(--textarea-padding-inline)}.c-textareaWrapper textarea[disabled]{--textarea-background-color: var(--dt-color-disabled-01);--textarea-border-color: var(--dt-color-disabled-01);--textarea-content-color: var(--dt-color-content-disabled)}@media (hover: hover){.c-textareaWrapper textarea:hover:not([disabled]){--textarea-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}}.c-textareaWrapper textarea:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-textareaWrapper[data-pie-size=large]{--textarea-padding-block: var(--dt-spacing-d)}.c-textareaWrapper[data-pie-size=small]{--textarea-padding-block: var(--dt-spacing-b)}.c-textareaWrapper[data-pie-resize=manual]{--textarea-resize: vertical;--textarea-min-height: calc((var(--textarea-line-height) * 1) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2))}@media (pointer: coarse){.c-textareaWrapper[data-pie-resize=manual]{--textarea-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));--textarea-min-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));--textarea-resize: none}}.c-textareaWrapper[data-pie-resize=auto]{--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));--textarea-min-height: var(--textarea-height)}
+`, ve = ["small", "medium", "large"], xe = ["auto", "manual"], c = {
   disabled: !1,
   size: "medium",
-  resize: "auto"
+  resize: "auto",
+  label: "",
+  value: "",
+  autoFocus: !1,
+  readonly: !1,
+  required: !1
 };
-var ue = Object.defineProperty, he = Object.getOwnPropertyDescriptor, m = (e, t, r, i) => {
-  for (var n = i > 1 ? void 0 : i ? he(t, r) : t, s = e.length - 1, d; s >= 0; s--)
-    (d = e[s]) && (n = (i ? d(t, r, n) : d(n)) || n);
-  return i && n && ue(t, r, n), n;
+var be = Object.defineProperty, me = Object.getOwnPropertyDescriptor, d = (t, e, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? me(e, a) : e, u = t.length - 1, l; u >= 0; u--)
+    (l = t[u]) && (i = (r ? l(e, a, i) : l(i)) || i);
+  return r && i && be(e, a, i), i;
 };
-const T = "pie-textarea";
-class f extends A($) {
+const x = "pie-textarea";
+class o extends K(G(w)) {
   constructor() {
-    super(...arguments), this.disabled = x.disabled, this.size = x.size, this.resize = x.resize, this._throttledResize = le(() => {
+    super(...arguments), this.value = c.value, this.disabled = c.disabled, this.size = c.size, this.resize = c.resize, this.label = c.label, this.readonly = c.readonly, this.autoFocus = c.autoFocus, this.required = c.required, this._throttledResize = fe(() => {
       this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight + 2}px`);
-    }, 100);
+    }, 100), this.handleInput = (e) => {
+      this.value = e.target.value, this.restrictInputLength(), this._internals.setFormValue(this.value), this.handleResize();
+    }, this.handleChange = (e) => {
+      const a = H(e);
+      this.dispatchEvent(a);
+    }, this.handleKeyDown = (e) => {
+      e.key === "Enter" && e.stopPropagation();
+    };
+  }
+  /**
+   * (Read-only) returns a ValidityState with the validity states that this element is in.
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+   */
+  get validity() {
+    return this._textarea.validity;
+  }
+  /**
+   * Called after the disabled state of the element changes,
+   * either because the disabled attribute of this element was added or removed;
+   * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+   * @param disabled - The latest disabled state of the input.
+   */
+  formDisabledCallback(e) {
+    this.disabled = e;
+  }
+  /**
+   * Called when the form that owns this component is reset.
+   * Resets the value to the default value.
+   */
+  formResetCallback() {
+    this.value = c.value, this._internals.setFormValue(this.value);
+  }
+  firstUpdated() {
+    this.restrictInputLength(), this._internals.setFormValue(this.value), this._textarea.addEventListener("keydown", this.handleKeyDown);
   }
   handleResize() {
     this._throttledResize();
   }
-  updated(t) {
-    this.resize === "auto" && (t.has("resize") || t.has("size")) && this.handleResize();
+  restrictInputLength() {
+    if (this.label.length && this.maxLength && this.value.length > this.maxLength) {
+      const e = this.value.slice(0, this.maxLength);
+      this._textarea.value = e, this.value = e;
+    }
+  }
+  updated(e) {
+    e.has("value") && (this.restrictInputLength(), this._internals.setFormValue(this.value)), this.resize === "auto" && (e.has("resize") || e.has("size")) && this.handleResize();
+  }
+  disconnectedCallback() {
+    this._textarea.removeEventListener("keydown", this.handleKeyDown);
+  }
+  renderLabel(e, a) {
+    const r = a ? `${this.value.length}/${a}` : void 0;
+    return e != null && e.length ? I`<pie-form-label for="${x}" trailing=${O(r)}>${e}</pie-form-label>` : B;
   }
   render() {
     const {
-      disabled: t,
-      resize: r,
-      size: i
+      disabled: e,
+      resize: a,
+      size: r,
+      autocomplete: i,
+      autoFocus: u,
+      name: l,
+      readonly: s,
+      value: p,
+      required: g,
+      label: m,
+      maxLength: v
     } = this;
-    return B`
+    return I`
             <div
                 class="c-textareaWrapper"
                 data-test-id="pie-textarea-wrapper"
-                data-pie-size="${i}"
-                data-pie-resize="${r}">
+                data-pie-size="${r}"
+                data-pie-resize="${a}">
+                ${this.renderLabel(m, v)}
                 <textarea
-                    data-test-id="pie-textarea"
-                    @input=${this.handleResize}
-                    ?disabled=${t}
+                    id="${x}"
+                    data-test-id="${x}"
+                    name=${O(l)}
+                    autocomplete=${O(i)}
+                    .value=${A(p)}
+                    ?autofocus=${u}
+                    ?readonly=${s}
+                    ?required=${g}
+                    ?disabled=${e}
+                    @input=${this.handleInput}
+                    @change=${this.handleChange}
                 ></textarea>
             </div>`;
   }
 }
-f.shadowRootOptions = { ...$.shadowRootOptions, delegatesFocus: !0 };
-f.styles = D(ce);
-m([
-  O({ type: Boolean, reflect: !0 })
-], f.prototype, "disabled", 2);
-m([
-  O({ type: String }),
-  w(T, fe, x.size)
-], f.prototype, "size", 2);
-m([
-  O({ type: String }),
-  w(T, pe, x.resize)
-], f.prototype, "resize", 2);
-m([
-  N("textarea")
-], f.prototype, "_textarea", 2);
-G(T, f);
+o.shadowRootOptions = { ...w.shadowRootOptions, delegatesFocus: !0 };
+o.styles = N(ge);
+d([
+  h({ type: String })
+], o.prototype, "value", 2);
+d([
+  h({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+d([
+  h({ type: String }),
+  F(x, ve, c.size)
+], o.prototype, "size", 2);
+d([
+  h({ type: String }),
+  F(x, xe, c.resize)
+], o.prototype, "resize", 2);
+d([
+  h({ type: String })
+], o.prototype, "label", 2);
+d([
+  h({ type: Number })
+], o.prototype, "maxLength", 2);
+d([
+  h({ type: Boolean })
+], o.prototype, "readonly", 2);
+d([
+  h({ type: Boolean })
+], o.prototype, "autoFocus", 2);
+d([
+  h({ type: Boolean })
+], o.prototype, "required", 2);
+d([
+  h({ type: String })
+], o.prototype, "name", 2);
+d([
+  h({ type: String })
+], o.prototype, "autocomplete", 2);
+d([
+  V("textarea")
+], o.prototype, "_textarea", 2);
+U(x, o);
 export {
-  f as PieTextarea,
-  x as defaultProps,
-  pe as resizeModes,
-  fe as sizes
+  o as PieTextarea,
+  c as defaultProps,
+  xe as resizeModes,
+  ve as sizes
 };

package/dist/react.d.ts

@@ -1,7 +1,9 @@
 import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
+import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
+import type { nothing } from 'lit';
 import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
@@ -10,17 +12,19 @@ import type { TemplateResult } from 'lit-html';
 /**
  * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
  */
-declare type DefaultProps = ComponentDefaultProps<TextareaProps>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
  */
 export declare const defaultProps: DefaultProps;
 
-export declare const PieTextarea: React_2.ForwardRefExoticComponent<TextareaProps & React_2.RefAttributes<PieTextarea_2> & ReactBaseType>;
+export declare const PieTextarea: React_2.ForwardRefExoticComponent<TextareaProps & React_2.RefAttributes<PieTextarea_2> & PieTextareaEvents & ReactBaseType>;
 
 /**
  * @tagname pie-textarea
+ * @event {InputEvent} input - when the textarea value is changed.
+ * @event {CustomEvent} change - when the textarea value is changed.
  */
 declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
     static shadowRootOptions: {
@@ -28,18 +32,59 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
         mode: ShadowRootMode;
         slotAssignment?: SlotAssignmentMode | undefined;
     };
+    value: string;
     disabled: boolean;
     size: "small" | "medium" | "large";
     resize: "auto" | "manual";
+    label: string;
+    maxLength: TextareaProps['maxLength'];
+    readonly: boolean;
+    autoFocus: boolean;
+    required: boolean;
+    name?: TextareaProps['name'];
+    autocomplete?: TextareaProps['autocomplete'];
     private _textarea;
     private _throttledResize;
+    /**
+     * (Read-only) returns a ValidityState with the validity states that this element is in.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+     */
+    get validity(): ValidityState;
+    /**
+     * Called after the disabled state of the element changes,
+     * either because the disabled attribute of this element was added or removed;
+     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+     * @param disabled - The latest disabled state of the input.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Called when the form that owns this component is reset.
+     * Resets the value to the default value.
+     */
+    formResetCallback(): void;
+    protected firstUpdated(): void;
     private handleResize;
-    updated(changedProperties: PropertyValues<this>): void;
+    private restrictInputLength;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * Handles data processing in response to the input event. The native input event is left to bubble up.
+     * @param event - The input event.
+     */
+    private handleInput;
+    private handleChange;
+    private handleKeyDown;
+    disconnectedCallback(): void;
+    renderLabel(label: string, maxLength?: number): TemplateResult<1> | typeof nothing;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
-declare const PieTextarea_base: GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieTextarea_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
+
+declare type PieTextareaEvents = {
+    onInput?: (event: InputEvent) => void;
+    onChange?: (event: CustomEvent) => void;
+};
 
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLTextAreaElement>;
 
@@ -62,6 +107,43 @@ export declare interface TextareaProps {
      * When set to `manual`, the textarea will not resize automatically but can be resized by the user.
      */
     resize?: typeof resizeModes[number];
+    /**
+     * The value of the textarea (used as a key/value pair in HTML forms with `name`).
+     */
+    value: string;
+    /**
+     * The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
+    /**
+     * Allows the user to enable or disable autocomplete functionality on the textarea field.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for more information and values.
+     */
+    autocomplete?: string;
+    /**
+     * If true, the textarea will be focused on the first render.
+     * No more than one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) for more information.
+     */
+    autoFocus?: boolean;
+    /**
+     * When true, the user cannot edit the control. Not the same as disabled.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.
+     */
+    readonly?: boolean;
+    /**
+     * If true, the textarea is required to have a value before submitting the form. If there is no value, then the component validity state will be invalid.
+     */
+    required?: boolean;
+    /**
+     * The label text for the textarea field.
+     */
+    label?: string;
+    /**
+     * The maximum number of characters allowed in the textarea field.
+     * If the `label` property is not set, this property will have no effect.
+     */
+    maxLength?: number;
 }
 
 export { }

package/dist/react.js

@@ -1,20 +1,28 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
 import { PieTextarea as a } from "./index.js";
-import { defaultProps as P, resizeModes as f, sizes as T } from "./index.js";
+import { defaultProps as l, resizeModes as d, sizes as g } from "./index.js";
 import "lit";
 import "lit/decorators.js";
+import "lit/directives/live.js";
 import "@justeattakeaway/pie-webc-core";
+import "lit/directives/if-defined.js";
+import "@justeattakeaway/pie-form-label";
 const r = t({
   displayName: "PieTextarea",
   elementClass: a,
   react: e,
   tagName: "pie-textarea",
-  events: {}
-}), x = r;
+  events: {
+    onInput: "input",
+    // when the textarea value is changed.
+    onChange: "change"
+    // when the textarea value is changed.
+  }
+}), P = r;
 export {
-  x as PieTextarea,
-  P as defaultProps,
-  f as resizeModes,
-  T as sizes
+  P as PieTextarea,
+  l as defaultProps,
+  d as resizeModes,
+  g as sizes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-textarea",
   "description": "PIE Design System Textarea built using Web Components",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -41,6 +41,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
+    "@justeattakeaway/pie-form-label": "0.14.0",
     "@justeattakeaway/pie-webc-core": "0.24.0",
     "lodash.throttle": "4.1.1"
   },

package/src/defs.ts

@@ -20,12 +20,57 @@ export interface TextareaProps {
      * When set to `manual`, the textarea will not resize automatically but can be resized by the user.
      */
     resize?: typeof resizeModes[number];
+
+    /**
+     * The value of the textarea (used as a key/value pair in HTML forms with `name`).
+     */
+    value: string;
+
+    /**
+     * The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
+
+    /**
+     * Allows the user to enable or disable autocomplete functionality on the textarea field.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for more information and values.
+     */
+    autocomplete?: string;
+
+    /**
+     * If true, the textarea will be focused on the first render.
+     * No more than one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) for more information.
+     */
+    autoFocus?: boolean;
+
+    /**
+     * When true, the user cannot edit the control. Not the same as disabled.
+     * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.
+     */
+    readonly?: boolean;
+
+    /**
+     * If true, the textarea is required to have a value before submitting the form. If there is no value, then the component validity state will be invalid.
+     */
+    required?: boolean;
+
+    /**
+    * The label text for the textarea field.
+    */
+    label?: string;
+
+    /**
+     * The maximum number of characters allowed in the textarea field.
+     * If the `label` property is not set, this property will have no effect.
+     */
+    maxLength?: number;
 }
 
 /**
  * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
  */
-type DefaultProps = ComponentDefaultProps<TextareaProps>;
+type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -34,4 +79,9 @@ export const defaultProps: DefaultProps = {
     disabled: false,
     size: 'medium',
     resize: 'auto',
+    label: '',
+    value: '',
+    autoFocus: false,
+    readonly: false,
+    required: false,
 };

package/src/index.ts

@@ -1,16 +1,23 @@
 import {
-    LitElement, html, unsafeCSS, PropertyValues,
+    LitElement, html, unsafeCSS, PropertyValues, nothing,
 } from 'lit';
+
 import { property, query } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
 import throttle from 'lodash.throttle';
 
-import { validPropertyValues, RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import {
+    validPropertyValues, RtlMixin, defineCustomElement, FormControlMixin, wrapNativeEvent,
+} from '@justeattakeaway/pie-webc-core';
 
+import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './textarea.scss?inline';
 import {
     TextareaProps, defaultProps, sizes, resizeModes,
 } from './defs';
 
+import '@justeattakeaway/pie-form-label';
+
 // Valid values available to consumers
 export * from './defs';
 
@@ -18,10 +25,15 @@ const componentSelector = 'pie-textarea';
 
 /**
  * @tagname pie-textarea
+ * @event {InputEvent} input - when the textarea value is changed.
+ * @event {CustomEvent} change - when the textarea value is changed.
  */
-export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
+export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implements TextareaProps {
     static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 
+    @property({ type: String })
+    public value = defaultProps.value;
+
     @property({ type: Boolean, reflect: true })
     public disabled = defaultProps.disabled;
 
@@ -33,6 +45,27 @@ export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
     @validPropertyValues(componentSelector, resizeModes, defaultProps.resize)
     public resize = defaultProps.resize;
 
+    @property({ type: String })
+    public label = defaultProps.label;
+
+    @property({ type: Number })
+    public maxLength: TextareaProps['maxLength'];
+
+    @property({ type: Boolean })
+    public readonly = defaultProps.readonly;
+
+    @property({ type: Boolean })
+    public autoFocus = defaultProps.autoFocus;
+
+    @property({ type: Boolean })
+    public required = defaultProps.required;
+
+    @property({ type: String })
+    public name?: TextareaProps['name'];
+
+    @property({ type: String })
+    public autocomplete?: TextareaProps['autocomplete'];
+
     @query('textarea')
     private _textarea!: HTMLTextAreaElement;
 
@@ -43,21 +76,119 @@ export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
         }
     }, 100);
 
+    /**
+     * (Read-only) returns a ValidityState with the validity states that this element is in.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+     */
+    public get validity (): ValidityState {
+        return (this._textarea as HTMLTextAreaElement).validity;
+    }
+
+    /**
+     * Called after the disabled state of the element changes,
+     * either because the disabled attribute of this element was added or removed;
+     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+     * @param disabled - The latest disabled state of the input.
+     */
+    public formDisabledCallback (disabled: boolean): void {
+        this.disabled = disabled;
+    }
+
+    /**
+     * Called when the form that owns this component is reset.
+     * Resets the value to the default value.
+     */
+    public formResetCallback (): void {
+        this.value = defaultProps.value;
+
+        this._internals.setFormValue(this.value);
+    }
+
+    protected firstUpdated (): void {
+        this.restrictInputLength();
+        this._internals.setFormValue(this.value);
+
+        this._textarea.addEventListener('keydown', this.handleKeyDown);
+    }
+
     private handleResize () {
         this._throttledResize();
     }
 
-    updated (changedProperties: PropertyValues<this>) {
+    private restrictInputLength () {
+        if (this.label.length && this.maxLength && this.value.length > this.maxLength) {
+            const trimmedValue = this.value.slice(0, this.maxLength);
+            // Ensures that the internal text area is correctly trimmed and synced with our value.
+            // The live() directive does not solve this for us.
+            this._textarea.value = trimmedValue;
+            this.value = trimmedValue;
+        }
+    }
+
+    protected updated (changedProperties: PropertyValues<this>) {
+        if (changedProperties.has('value')) {
+            this.restrictInputLength();
+            this._internals.setFormValue(this.value);
+        }
+
         if (this.resize === 'auto' && (changedProperties.has('resize') || changedProperties.has('size'))) {
             this.handleResize();
         }
     }
 
+    /**
+     * Handles data processing in response to the input event. The native input event is left to bubble up.
+     * @param event - The input event.
+     */
+    private handleInput = (event: InputEvent) => {
+        this.value = (event.target as HTMLTextAreaElement).value;
+        this.restrictInputLength();
+        this._internals.setFormValue(this.value);
+
+        this.handleResize();
+    };
+
+    private handleChange = (event: Event) => {
+        // We have to create our own change event because the native one
+        // does not penetrate the shadow boundary.
+
+        // This is because some events set `composed` to `false`.
+        // Reference: https://javascript.info/shadow-dom-events#event-composed
+        const customChangeEvent = wrapNativeEvent(event);
+        this.dispatchEvent(customChangeEvent);
+    };
+
+    private handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            event.stopPropagation();
+        }
+    };
+
+    public disconnectedCallback (): void {
+        this._textarea.removeEventListener('keydown', this.handleKeyDown);
+    }
+
+    renderLabel (label: string, maxLength?: number) {
+        const characterCount = maxLength ? `${this.value.length}/${maxLength}` : undefined;
+
+        return label?.length
+            ? html`<pie-form-label for="${componentSelector}" trailing=${ifDefined(characterCount)}>${label}</pie-form-label>`
+            : nothing;
+    }
+
     render () {
         const {
             disabled,
             resize,
             size,
+            autocomplete,
+            autoFocus,
+            name,
+            readonly,
+            value,
+            required,
+            label,
+            maxLength,
         } = this;
 
         return html`
@@ -66,10 +197,19 @@ export class PieTextarea extends RtlMixin(LitElement) implements TextareaProps {
                 data-test-id="pie-textarea-wrapper"
                 data-pie-size="${size}"
                 data-pie-resize="${resize}">
+                ${this.renderLabel(label, maxLength)}
                 <textarea
-                    data-test-id="pie-textarea"
-                    @input=${this.handleResize}
+                    id="${componentSelector}"
+                    data-test-id="${componentSelector}"
+                    name=${ifDefined(name)}
+                    autocomplete=${ifDefined(autocomplete)}
+                    .value=${live(value)}
+                    ?autofocus=${autoFocus}
+                    ?readonly=${readonly}
+                    ?required=${required}
                     ?disabled=${disabled}
+                    @input=${this.handleInput}
+                    @change=${this.handleChange}
                 ></textarea>
             </div>`;
     }

package/src/react.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createComponent } from '@lit/react';
+import { createComponent, EventName } from '@lit/react';
 import { PieTextarea as PieTextareaLit } from './index';
 import { TextareaProps } from './defs';
 
@@ -10,10 +10,18 @@ const PieTextareaReact = createComponent({
     elementClass: PieTextareaLit,
     react: React,
     tagName: 'pie-textarea',
-    events: {},
+    events: {
+        onInput: 'input' as EventName<InputEvent>, // when the textarea value is changed.
+        onChange: 'change' as EventName<CustomEvent>, // when the textarea value is changed.
+    },
 });
 
 type ReactBaseType = React.HTMLAttributes<HTMLTextAreaElement>
 
+type PieTextareaEvents = {
+    onInput?: (event: InputEvent) => void;
+    onChange?: (event: CustomEvent) => void;
+};
+
 export const PieTextarea = PieTextareaReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<TextareaProps>
-    & React.RefAttributes<PieTextareaLit> & ReactBaseType>;
+    & React.RefAttributes<PieTextareaLit> & PieTextareaEvents & ReactBaseType>;