@justeattakeaway/pie-textarea 0.7.0 → 0.8.0

package/custom-elements.json

@@ -28,13 +28,21 @@
           },
           "default": "['auto', 'manual']"
         },
+        {
+          "kind": "variable",
+          "name": "statusTypes",
+          "type": {
+            "text": "['default', 'success', 'error']"
+          },
+          "default": "['default', 'success', 'error']"
+        },
         {
           "kind": "variable",
           "name": "defaultProps",
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    disabled: false,\n    size: 'medium',\n    resize: 'auto',\n    label: '',\n    value: '',\n    autoFocus: false,\n    readonly: false,\n    required: false,\n}",
+          "default": "{\n    disabled: false,\n    size: 'medium',\n    resize: 'auto',\n    label: '',\n    value: '',\n    status: 'default',\n    autoFocus: false,\n    readonly: false,\n    required: false,\n}",
           "description": "Default values for optional properties that have default fallback values in the component."
         }
       ],
@@ -55,6 +63,14 @@
             "module": "src/defs.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "statusTypes",
+          "declaration": {
+            "name": "statusTypes",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "defaultProps",
@@ -150,11 +166,26 @@
               "privacy": "public",
               "attribute": "required"
             },
+            {
+              "kind": "field",
+              "name": "status",
+              "privacy": "public",
+              "attribute": "status"
+            },
+            {
+              "kind": "field",
+              "name": "assistiveText",
+              "type": {
+                "text": "TextareaProps['assistiveText']"
+              },
+              "privacy": "public",
+              "attribute": "assistiveText"
+            },
             {
               "kind": "field",
               "name": "name",
               "type": {
-                "text": "TextareaProps['name'] | undefined"
+                "text": "TextareaProps['name']"
               },
               "privacy": "public",
               "attribute": "name"
@@ -163,7 +194,7 @@
               "kind": "field",
               "name": "autocomplete",
               "type": {
-                "text": "TextareaProps['autocomplete'] | undefined"
+                "text": "TextareaProps['autocomplete']"
               },
               "privacy": "public",
               "attribute": "autocomplete"
@@ -176,6 +207,14 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "focusTarget",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "_throttledResize",
@@ -272,6 +311,10 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "method",
+              "name": "renderAssistiveText"
             }
           ],
           "events": [
@@ -337,17 +380,28 @@
               "name": "required",
               "fieldName": "required"
             },
+            {
+              "name": "status",
+              "fieldName": "status"
+            },
+            {
+              "name": "assistiveText",
+              "type": {
+                "text": "TextareaProps['assistiveText']"
+              },
+              "fieldName": "assistiveText"
+            },
             {
               "name": "name",
               "type": {
-                "text": "TextareaProps['name'] | undefined"
+                "text": "TextareaProps['name']"
               },
               "fieldName": "name"
             },
             {
               "name": "autocomplete",
               "type": {
-                "text": "TextareaProps['autocomplete'] | undefined"
+                "text": "TextareaProps['autocomplete']"
               },
               "fieldName": "autocomplete"
             }

package/dist/index.d.ts

@@ -4,6 +4,7 @@ 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 { PIEInputElement } from '@justeattakeaway/pie-webc-core';
 import type { PropertyValues } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
@@ -11,7 +12,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, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength' | 'defaultValue'>>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength' | 'assistiveText' | 'defaultValue'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -23,7 +24,7 @@ export declare const defaultProps: DefaultProps;
  * @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 {
+export declare class PieTextarea extends PieTextarea_base implements TextareaProps, PIEInputElement {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -39,9 +40,12 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
     readonly: boolean;
     autoFocus: boolean;
     required: boolean;
-    name?: TextareaProps['name'];
-    autocomplete?: TextareaProps['autocomplete'];
+    status: "default" | "error" | "success";
+    assistiveText: TextareaProps['assistiveText'];
+    name: TextareaProps['name'];
+    autocomplete: TextareaProps['autocomplete'];
     private _textarea;
+    focusTarget: HTMLElement;
     private _throttledResize;
     /**
      * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -73,6 +77,7 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
     private handleKeyDown;
     disconnectedCallback(): void;
     renderLabel(label: string, maxLength?: number): TemplateResult<1> | typeof nothing;
+    renderAssistiveText(): TemplateResult<1> | typeof nothing;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
@@ -83,6 +88,8 @@ export declare const resizeModes: readonly ["auto", "manual"];
 
 export declare const sizes: readonly ["small", "medium", "large"];
 
+export declare const statusTypes: readonly ["default", "success", "error"];
+
 export declare interface TextareaProps {
     /**
      * Same as the HTML disabled attribute - indicates whether the textarea is disabled.
@@ -106,6 +113,14 @@ export declare interface TextareaProps {
      * An optional default value to use when the textarea is reset.
      */
     defaultValue?: string;
+    /**
+     * An optional assistive text to display below the textarea element. Must be provided when the status is success or error.
+     */
+    assistiveText?: string;
+    /**
+     * The status of the textarea component / assistive text. Can be default, success or error.
+     */
+    status?: typeof statusTypes[number];
     /**
      * The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms.
      */

package/dist/index.js

@@ -1,124 +1,127 @@
-import { LitElement as w, html as I, nothing as q, unsafeCSS as B } from "lit";
-import { property as c, query as N } 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 { LitElement as M, html as L, nothing as F, unsafeCSS as A } from "lit";
+import { property as l, query as P } from "lit/decorators.js";
+import { classMap as K } from "lit/directives/class-map.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
+import { live as G } from "lit/directives/live.js";
+import "@justeattakeaway/pie-assistive-text";
 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) {
+import { FormControlMixin as H, RtlMixin as U, wrapNativeEvent as X, validPropertyValues as O, defineCustomElement as J } from "@justeattakeaway/pie-webc-core";
+var T = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function Q(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-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, S = function() {
-  return ie.Date.now();
+var V = "Expected a function", R = 0 / 0, Y = "[object Symbol]", Z = /^\s+|\s+$/g, ee = /^[-+]0x[0-9a-f]+$/i, te = /^0b[01]+$/i, ae = /^0o[0-7]+$/i, re = parseInt, ie = typeof T == "object" && T && T.Object === Object && T, ne = typeof self == "object" && self && self.Object === Object && self, oe = ie || ne || Function("return this")(), se = Object.prototype, le = se.toString, de = Math.max, ce = Math.min, j = function() {
+  return oe.Date.now();
 };
-function de(t, e, a) {
-  var r, i, u, d, s, p, g = 0, m = !1, v = !1, _ = !0;
+function ue(t, e, a) {
+  var r, i, h, u, d, p, x = 0, k = !1, v = !1, g = !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, d = t.apply(b, f), d;
+    throw new TypeError(V);
+  e = D(e) || 0, _(a) && (k = !!a.leading, v = "maxWait" in a, h = v ? de(D(a.maxWait) || 0, e) : h, g = "trailing" in a ? !!a.trailing : g);
+  function y(n) {
+    var f = r, z = i;
+    return r = i = void 0, x = n, u = t.apply(z, f), u;
   }
-  function D(n) {
-    return g = n, s = setTimeout(y, e), m ? $(n) : d;
+  function w(n) {
+    return x = n, d = setTimeout($, e), k ? y(n) : u;
   }
-  function P(n) {
-    var f = n - p, b = n - g, E = e - f;
-    return v ? le(E, u - b) : E;
+  function q(n) {
+    var f = n - p, z = n - x, C = e - f;
+    return v ? ce(C, h - z) : C;
   }
-  function L(n) {
-    var f = n - p, b = n - g;
-    return p === void 0 || f >= e || f < 0 || v && b >= u;
+  function I(n) {
+    var f = n - p, z = n - x;
+    return p === void 0 || f >= e || f < 0 || v && z >= h;
   }
-  function y() {
-    var n = S();
-    if (L(n))
-      return T(n);
-    s = setTimeout(y, P(n));
+  function $() {
+    var n = j();
+    if (I(n))
+      return W(n);
+    d = setTimeout($, q(n));
   }
-  function T(n) {
-    return s = void 0, _ && r ? $(n) : (r = i = void 0, d);
+  function W(n) {
+    return d = void 0, g && r ? y(n) : (r = i = void 0, u);
   }
-  function M() {
-    s !== void 0 && clearTimeout(s), g = 0, r = p = i = s = void 0;
+  function B() {
+    d !== void 0 && clearTimeout(d), x = 0, r = p = i = d = void 0;
   }
-  function V() {
-    return s === void 0 ? d : T(S());
+  function N() {
+    return d === void 0 ? u : W(j());
   }
-  function j() {
-    var n = S(), f = L(n);
+  function S() {
+    var n = j(), f = I(n);
     if (r = arguments, i = this, p = n, f) {
-      if (s === void 0)
-        return D(p);
+      if (d === void 0)
+        return w(p);
       if (v)
-        return s = setTimeout(y, e), $(p);
+        return d = setTimeout($, e), y(p);
     }
-    return s === void 0 && (s = setTimeout(y, e)), d;
+    return d === void 0 && (d = setTimeout($, e)), u;
   }
-  return j.cancel = M, j.flush = V, j;
+  return S.cancel = B, S.flush = N, S;
 }
-function ce(t, e, a) {
+function he(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, {
+    throw new TypeError(V);
+  return _(a) && (r = "leading" in a ? !!a.leading : r, i = "trailing" in a ? !!a.trailing : i), ue(t, e, {
     leading: r,
     maxWait: e,
     trailing: i
   });
 }
-function k(t) {
+function _(t) {
   var e = typeof t;
   return !!t && (e == "object" || e == "function");
 }
-function he(t) {
+function pe(t) {
   return !!t && typeof t == "object";
 }
-function ue(t) {
-  return typeof t == "symbol" || he(t) && oe.call(t) == J;
+function fe(t) {
+  return typeof t == "symbol" || pe(t) && le.call(t) == Y;
 }
-function W(t) {
+function D(t) {
   if (typeof t == "number")
     return t;
-  if (ue(t))
-    return C;
-  if (k(t)) {
+  if (fe(t))
+    return R;
+  if (_(t)) {
     var e = typeof t.valueOf == "function" ? t.valueOf() : t;
-    t = k(e) ? e + "" : e;
+    t = _(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;
+  t = t.replace(Z, "");
+  var a = te.test(t);
+  return a || ae.test(t) ? re(t.slice(2), a ? 2 : 8) : ee.test(t) ? R : +t;
 }
-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"], h = {
+var xe = he;
+const ve = /* @__PURE__ */ Q(xe), 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-c);--textarea-padding-block: var(--dt-spacing-b);--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));line-height:0;padding:var(--dt-spacing-a);border:var(--textarea-border-thickness) solid var(--textarea-border-color);background-color:var(--textarea-background-color);border-radius:var(--dt-radius-rounded-c);inline-size:100%}.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:none;background-color:var(--textarea-background-color);color:var(--textarea-content-color);block-size:var(--textarea-height);max-block-size:var(--textarea-max-height);min-block-size:var(--textarea-min-height);inline-size:100%;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:focus{box-shadow:none;outline:none}.c-textareaWrapper.c-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:hover:not(.c-textarea--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:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-textareaWrapper.c-textarea--large{--textarea-padding-block: var(--dt-spacing-c)}.c-textareaWrapper.c-textarea--small{--textarea-padding-block: var(--dt-spacing-a)}.c-textareaWrapper.c-textarea--resize-manual{--textarea-resize: vertical;--textarea-min-height: calc((var(--textarea-line-height) * 1) + (var(--textarea-padding-block) * 2))}@media (pointer: coarse){.c-textareaWrapper.c-textarea--resize-manual{--textarea-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-min-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-resize: none}}.c-textareaWrapper.c-textarea--resize-auto{--textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));--textarea-min-height: var(--textarea-height)}.c-textareaWrapper.c-textarea--error{--textarea-border-color: var(--dt-color-support-error)}
+`, me = ["small", "medium", "large"], be = ["auto", "manual"], ye = ["default", "success", "error"], c = {
   disabled: !1,
   size: "medium",
   resize: "auto",
   label: "",
   value: "",
+  status: "default",
   autoFocus: !1,
   readonly: !1,
   required: !1
 };
-var be = Object.defineProperty, me = Object.getOwnPropertyDescriptor, l = (t, e, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? me(e, a) : e, u = t.length - 1, d; u >= 0; u--)
-    (d = t[u]) && (i = (r ? d(e, a, i) : d(i)) || i);
-  return r && i && be(e, a, i), i;
+var ze = Object.defineProperty, ke = Object.getOwnPropertyDescriptor, s = (t, e, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? ke(e, a) : e, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (i = (r ? u(e, a, i) : u(i)) || i);
+  return r && i && ze(e, a, i), i;
 };
-const x = "pie-textarea";
-class o extends K(G(w)) {
+const m = "pie-textarea", E = "assistive-text";
+class o extends H(U(M)) {
   constructor() {
-    super(...arguments), this.value = h.value, this.disabled = h.disabled, this.size = h.size, this.resize = h.resize, this.label = h.label, this.readonly = h.readonly, this.autoFocus = h.autoFocus, this.required = h.required, this._throttledResize = fe(() => {
-      this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight + 2}px`);
+    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.status = c.status, this._throttledResize = ve(() => {
+      this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
     }, 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);
+      const a = X(e);
       this.dispatchEvent(a);
     }, this.handleKeyDown = (e) => {
       e.key === "Enter" && e.stopPropagation();
@@ -145,10 +148,10 @@ class o extends K(G(w)) {
    * Resets the value to the default value.
    */
   formResetCallback() {
-    this.value = this.defaultValue ?? h.value, this._internals.setFormValue(this.value);
+    this.value = this.defaultValue ?? c.value, this._internals.setFormValue(this.value);
   }
   firstUpdated() {
-    this.restrictInputLength(), this._internals.setFormValue(this.value), this._textarea.addEventListener("keydown", this.handleKeyDown);
+    this.restrictInputLength(), this._internals.setFormValue(this.value), window.addEventListener("resize", () => this.handleResize()), this._textarea.addEventListener("keydown", this.handleKeyDown);
   }
   handleResize() {
     this._throttledResize();
@@ -163,11 +166,21 @@ class o extends K(G(w)) {
     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);
+    this._textarea.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("resize", () => this.handleResize());
   }
   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>` : q;
+    return e != null && e.length ? L`<pie-form-label for="${m}" trailing=${b(r)}>${e}</pie-form-label>` : F;
+  }
+  renderAssistiveText() {
+    return this.assistiveText ? L`
+            <pie-assistive-text
+                id="${E}"
+                variant=${b(this.status)}
+                data-test-id="pie-textarea-assistive-text">
+                ${this.assistiveText}
+            </pie-assistive-text>
+        ` : F;
   }
   render() {
     const {
@@ -175,84 +188,106 @@ class o extends K(G(w)) {
       resize: a,
       size: r,
       autocomplete: i,
-      autoFocus: u,
-      name: d,
-      readonly: s,
+      autoFocus: h,
+      name: u,
+      readonly: d,
       value: p,
-      required: g,
-      label: m,
-      maxLength: v
-    } = this;
-    return I`
+      required: x,
+      label: k,
+      maxLength: v,
+      status: g,
+      assistiveText: y
+    } = this, w = {
+      "c-textareaWrapper": !0,
+      "c-textarea--disabled": e,
+      "c-textarea--error": g === "error",
+      [`c-textarea--resize-${a}`]: !0,
+      [`c-textarea--${r}`]: !0
+    };
+    return L`<div>
+            ${this.renderLabel(k, v)}
             <div
-                class="c-textareaWrapper"
-                data-test-id="pie-textarea-wrapper"
-                data-pie-size="${r}"
-                data-pie-resize="${a}">
-                ${this.renderLabel(m, v)}
+                class="${K(w)}"
+                data-test-id="pie-textarea-wrapper">
                 <textarea
-                    id="${x}"
-                    data-test-id="${x}"
-                    name=${O(d)}
-                    autocomplete=${O(i)}
-                    .value=${A(p)}
-                    ?autofocus=${u}
-                    ?readonly=${s}
-                    ?required=${g}
+                    id="${m}"
+                    data-test-id="${m}"
+                    name=${b(u)}
+                    autocomplete=${b(i)}
+                    .value=${G(p)}
+                    ?autofocus=${h}
+                    ?readonly=${d}
+                    ?required=${x}
                     ?disabled=${e}
+                    aria-describedby=${b(y ? E : void 0)}
+                    aria-invalid=${g === "error" ? "true" : "false"}
+                    aria-errormessage="${b(g === "error" ? E : void 0)}"
                     @input=${this.handleInput}
                     @change=${this.handleChange}
                 ></textarea>
-            </div>`;
+            </div>
+            ${this.renderAssistiveText()}
+        </div>`;
   }
 }
-o.shadowRootOptions = { ...w.shadowRootOptions, delegatesFocus: !0 };
-o.styles = B(ge);
-l([
-  c({ type: String })
+o.shadowRootOptions = { ...M.shadowRootOptions, delegatesFocus: !0 };
+o.styles = A(ge);
+s([
+  l({ type: String })
 ], o.prototype, "value", 2);
-l([
-  c({ type: String })
+s([
+  l({ type: String })
 ], o.prototype, "defaultValue", 2);
-l([
-  c({ type: Boolean, reflect: !0 })
+s([
+  l({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled", 2);
-l([
-  c({ type: String }),
-  F(x, ve, h.size)
+s([
+  l({ type: String }),
+  O(m, me, c.size)
 ], o.prototype, "size", 2);
-l([
-  c({ type: String }),
-  F(x, xe, h.resize)
+s([
+  l({ type: String }),
+  O(m, be, c.resize)
 ], o.prototype, "resize", 2);
-l([
-  c({ type: String })
+s([
+  l({ type: String })
 ], o.prototype, "label", 2);
-l([
-  c({ type: Number })
+s([
+  l({ type: Number })
 ], o.prototype, "maxLength", 2);
-l([
-  c({ type: Boolean })
+s([
+  l({ type: Boolean })
 ], o.prototype, "readonly", 2);
-l([
-  c({ type: Boolean })
+s([
+  l({ type: Boolean })
 ], o.prototype, "autoFocus", 2);
-l([
-  c({ type: Boolean })
+s([
+  l({ type: Boolean })
 ], o.prototype, "required", 2);
-l([
-  c({ type: String })
+s([
+  l({ type: String }),
+  O(m, ye, c.status)
+], o.prototype, "status", 2);
+s([
+  l({ type: String })
+], o.prototype, "assistiveText", 2);
+s([
+  l({ type: String })
 ], o.prototype, "name", 2);
-l([
-  c({ type: String })
+s([
+  l({ type: String })
 ], o.prototype, "autocomplete", 2);
-l([
-  N("textarea")
+s([
+  P("textarea")
 ], o.prototype, "_textarea", 2);
-U(x, o);
+s([
+  P("textarea")
+], o.prototype, "focusTarget", 2);
+J(m, o);
 export {
   o as PieTextarea,
-  h as defaultProps,
-  xe as resizeModes,
-  ve as sizes
+  c as defaultProps,
+  be as resizeModes,
+  me as sizes,
+  ye as statusTypes
 };

package/dist/react.d.ts

@@ -4,6 +4,7 @@ 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 { PIEInputElement } from '@justeattakeaway/pie-webc-core';
 import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
@@ -12,7 +13,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, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength' | 'defaultValue'>>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength' | 'assistiveText' | 'defaultValue'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -26,7 +27,7 @@ export declare const PieTextarea: React_2.ForwardRefExoticComponent<TextareaProp
  * @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 {
+declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, PIEInputElement {
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -42,9 +43,12 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
     readonly: boolean;
     autoFocus: boolean;
     required: boolean;
-    name?: TextareaProps['name'];
-    autocomplete?: TextareaProps['autocomplete'];
+    status: "default" | "error" | "success";
+    assistiveText: TextareaProps['assistiveText'];
+    name: TextareaProps['name'];
+    autocomplete: TextareaProps['autocomplete'];
     private _textarea;
+    focusTarget: HTMLElement;
     private _throttledResize;
     /**
      * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -76,6 +80,7 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
     private handleKeyDown;
     disconnectedCallback(): void;
     renderLabel(label: string, maxLength?: number): TemplateResult<1> | typeof nothing;
+    renderAssistiveText(): TemplateResult<1> | typeof nothing;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
@@ -93,6 +98,8 @@ export declare const resizeModes: readonly ["auto", "manual"];
 
 export declare const sizes: readonly ["small", "medium", "large"];
 
+export declare const statusTypes: readonly ["default", "success", "error"];
+
 export declare interface TextareaProps {
     /**
      * Same as the HTML disabled attribute - indicates whether the textarea is disabled.
@@ -116,6 +123,14 @@ export declare interface TextareaProps {
      * An optional default value to use when the textarea is reset.
      */
     defaultValue?: string;
+    /**
+     * An optional assistive text to display below the textarea element. Must be provided when the status is success or error.
+     */
+    assistiveText?: string;
+    /**
+     * The status of the textarea component / assistive text. Can be default, success or error.
+     */
+    status?: typeof statusTypes[number];
     /**
      * The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms.
      */

package/dist/react.js

@@ -1,13 +1,15 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
 import { PieTextarea as a } from "./index.js";
-import { defaultProps as l, resizeModes as d, sizes as g } from "./index.js";
+import { defaultProps as d, resizeModes as g, sizes as C, statusTypes as h } from "./index.js";
 import "lit";
 import "lit/decorators.js";
-import "lit/directives/live.js";
-import "@justeattakeaway/pie-webc-core";
+import "lit/directives/class-map.js";
 import "lit/directives/if-defined.js";
+import "lit/directives/live.js";
+import "@justeattakeaway/pie-assistive-text";
 import "@justeattakeaway/pie-form-label";
+import "@justeattakeaway/pie-webc-core";
 const r = t({
   displayName: "PieTextarea",
   elementClass: a,
@@ -19,10 +21,11 @@ const r = t({
     onChange: "change"
     // when the textarea value is changed.
   }
-}), P = r;
+}), f = r;
 export {
-  P as PieTextarea,
-  l as defaultProps,
-  d as resizeModes,
-  g as sizes
+  f as PieTextarea,
+  d as defaultProps,
+  g as resizeModes,
+  C as sizes,
+  h as statusTypes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-textarea",
   "description": "PIE Design System Textarea built using Web Components",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -36,7 +36,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.17.0",
+    "@justeattakeaway/pie-components-config": "0.18.0",
     "@justeattakeaway/pie-css": "0.12.1",
     "@types/lodash.throttle": "4.1.9",
     "cem-plugin-module-file-extensions": "0.0.5"

package/src/defs.ts

@@ -2,6 +2,7 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 export const sizes = ['small', 'medium', 'large'] as const;
 export const resizeModes = ['auto', 'manual'] as const;
+export const statusTypes = ['default', 'success', 'error'] as const;
 
 export interface TextareaProps {
     /**
@@ -31,6 +32,16 @@ export interface TextareaProps {
      */
     defaultValue?: string;
 
+    /**
+     * An optional assistive text to display below the textarea element. Must be provided when the status is success or error.
+     */
+    assistiveText?: string;
+
+    /**
+     * The status of the textarea component / assistive text. Can be default, success or error.
+     */
+    status?: typeof statusTypes[number];
+
     /**
      * The name of the textarea (used as a key/value pair with `value`). This is required in order to work properly with forms.
      */
@@ -75,7 +86,7 @@ export interface TextareaProps {
 /**
  * The default values for the `TextareaProps` that are required (i.e. they have a fallback value in the component).
  */
-type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength' | 'defaultValue'>>;
+type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength' | 'assistiveText' | 'defaultValue'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -86,6 +97,7 @@ export const defaultProps: DefaultProps = {
     resize: 'auto',
     label: '',
     value: '',
+    status: 'default',
     autoFocus: false,
     readonly: false,
     required: false,

package/src/index.ts

@@ -1,34 +1,35 @@
 import {
-    LitElement, html, unsafeCSS, PropertyValues, nothing,
+    LitElement, html, unsafeCSS, type PropertyValues, nothing,
 } from 'lit';
-
 import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import throttle from 'lodash.throttle';
 
+import '@justeattakeaway/pie-assistive-text';
+import '@justeattakeaway/pie-form-label';
 import {
-    validPropertyValues, RtlMixin, defineCustomElement, FormControlMixin, wrapNativeEvent,
+    validPropertyValues, RtlMixin, defineCustomElement, FormControlMixin, wrapNativeEvent, type PIEInputElement,
 } from '@justeattakeaway/pie-webc-core';
 
-import { ifDefined } from 'lit/directives/if-defined.js';
 import styles from './textarea.scss?inline';
 import {
-    TextareaProps, defaultProps, sizes, resizeModes,
+    type TextareaProps, defaultProps, sizes, resizeModes, statusTypes,
 } from './defs';
 
-import '@justeattakeaway/pie-form-label';
-
 // Valid values available to consumers
 export * from './defs';
 
 const componentSelector = 'pie-textarea';
+const assistiveTextIdValue = 'assistive-text';
 
 /**
  * @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 FormControlMixin(RtlMixin(LitElement)) implements TextareaProps {
+export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implements TextareaProps, PIEInputElement {
     static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 
     @property({ type: String })
@@ -64,18 +65,28 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
     public required = defaultProps.required;
 
     @property({ type: String })
-    public name?: TextareaProps['name'];
+    @validPropertyValues(componentSelector, statusTypes, defaultProps.status)
+    public status = defaultProps.status;
+
+    @property({ type: String })
+    public assistiveText: TextareaProps['assistiveText'];
+
+    @property({ type: String })
+    public name: TextareaProps['name'];
 
     @property({ type: String })
-    public autocomplete?: TextareaProps['autocomplete'];
+    public autocomplete: TextareaProps['autocomplete'];
 
     @query('textarea')
     private _textarea!: HTMLTextAreaElement;
 
+    @query('textarea')
+    public focusTarget!: HTMLElement;
+
     private _throttledResize = throttle(() => {
         if (this.resize === 'auto') {
             this._textarea.style.height = 'auto';
-            this._textarea.style.height = `${this._textarea.scrollHeight + 2}px`; // +2 for border thicknesses
+            this._textarea.style.height = `${this._textarea.scrollHeight}px`;
         }
     }, 100);
 
@@ -111,6 +122,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
         this.restrictInputLength();
         this._internals.setFormValue(this.value);
 
+        window.addEventListener('resize', () => this.handleResize());
         this._textarea.addEventListener('keydown', this.handleKeyDown);
     }
 
@@ -169,6 +181,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
 
     public disconnectedCallback (): void {
         this._textarea.removeEventListener('keydown', this.handleKeyDown);
+        window.removeEventListener('resize', () => this.handleResize());
     }
 
     renderLabel (label: string, maxLength?: number) {
@@ -179,6 +192,21 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
             : nothing;
     }
 
+    renderAssistiveText () {
+        if (!this.assistiveText) {
+            return nothing;
+        }
+
+        return html`
+            <pie-assistive-text
+                id="${assistiveTextIdValue}"
+                variant=${ifDefined(this.status)}
+                data-test-id="pie-textarea-assistive-text">
+                ${this.assistiveText}
+            </pie-assistive-text>
+        `;
+    }
+
     render () {
         const {
             disabled,
@@ -192,15 +220,23 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
             required,
             label,
             maxLength,
+            status,
+            assistiveText,
         } = this;
 
-        return html`
+        const classes = {
+            'c-textareaWrapper': true,
+            'c-textarea--disabled': disabled,
+            'c-textarea--error': status === 'error',
+            [`c-textarea--resize-${resize}`]: true,
+            [`c-textarea--${size}`]: true,
+        };
+
+        return html`<div>
+            ${this.renderLabel(label, maxLength)}
             <div
-                class="c-textareaWrapper"
-                data-test-id="pie-textarea-wrapper"
-                data-pie-size="${size}"
-                data-pie-resize="${resize}">
-                ${this.renderLabel(label, maxLength)}
+                class="${classMap(classes)}"
+                data-test-id="pie-textarea-wrapper">
                 <textarea
                     id="${componentSelector}"
                     data-test-id="${componentSelector}"
@@ -211,10 +247,15 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
                     ?readonly=${readonly}
                     ?required=${required}
                     ?disabled=${disabled}
+                    aria-describedby=${ifDefined(assistiveText ? assistiveTextIdValue : undefined)}
+                    aria-invalid=${status === 'error' ? 'true' : 'false'}
+                    aria-errormessage="${ifDefined(status === 'error' ? assistiveTextIdValue : undefined)}"
                     @input=${this.handleInput}
                     @change=${this.handleChange}
                 ></textarea>
-            </div>`;
+            </div>
+            ${this.renderAssistiveText()}
+        </div>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/src/textarea.scss

@@ -1,6 +1,7 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
 // Heights are being defined based on the line height of the text and the padding.
+// Some of the padding is in the wrapper element to properly position the textarea resize handle.
 // Changing the `size` property affects the padding and therefore the height of the textarea.
 // Default height is two lines of text.
 // Minimum height in manual resize mode is one line of text.
@@ -9,81 +10,95 @@
   --textarea-line-height: #{p.line-height(--dt-font-body-l-line-height)};
   --textarea-border-thickness: 1px;
   --textarea-resize: none;
-  --textarea-padding-inline: var(--dt-spacing-d);
-  --textarea-padding-block: var(--dt-spacing-c);
+  --textarea-padding-inline: var(--dt-spacing-c);
+  --textarea-padding-block: var(--dt-spacing-b);
   --textarea-background-color: var(--dt-color-container-default);
   --textarea-border-color: var(--dt-color-interactive-form);
   --textarea-content-color: var(--dt-color-content-default);
 
   // Default height is two lines of text
-  --textarea-height: calc((var(--textarea-line-height) * 2) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2));
+  --textarea-height: calc((var(--textarea-line-height) * 2) + (var(--textarea-padding-block) * 2));
 
-  line-height: 0; // Remove once there is text outside the textarea
+  line-height: 0;
+  padding: var(--dt-spacing-a);
+  border: var(--textarea-border-thickness) solid var(--textarea-border-color);
+  background-color: var(--textarea-background-color);
+  border-radius: var(--dt-radius-rounded-c);
+  inline-size: 100%;
 
   textarea {
     @include p.font-size(--dt-font-body-l-size);
     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);
+    border: none;
     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);
+    inline-size: 100%;
 
     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);
 
-    &[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);
+    &:focus {
+      box-shadow: none;
+      outline: none;
     }
+  }
 
-    @media (hover: hover) {
-      &: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-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);
+  }
 
-    &:focus-visible {
-      @include p.focus;
+  @media (hover: hover) {
+    &:hover:not(.c-textarea--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))));
     }
   }
 
-  &[data-pie-size="large"] {
-    --textarea-padding-block: var(--dt-spacing-d);
+  &:focus-within {
+    @include p.focus;
   }
 
-  &[data-pie-size="small"] {
-    --textarea-padding-block: var(--dt-spacing-b);
+  &.c-textarea--large {
+    --textarea-padding-block: var(--dt-spacing-c);
   }
 
-  &[data-pie-resize="manual"] {
+  &.c-textarea--small {
+    --textarea-padding-block: var(--dt-spacing-a);
+  }
+
+  &.c-textarea--resize-manual {
     --textarea-resize: vertical;
 
     // Minimum is one line of text
-    --textarea-min-height: calc((var(--textarea-line-height) * 1) + (var(--textarea-padding-block) * 2) + (var(--textarea-border-thickness) * 2)); // One line of text
+    --textarea-min-height: calc((var(--textarea-line-height) * 1) + (var(--textarea-padding-block) * 2));
 
     @media (pointer: coarse) {
       // Fixed size for touch devices
-      --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-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));
+      --textarea-min-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));
+      --textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));
       --textarea-resize: none;
     }
   }
 
-  &[data-pie-resize="auto"] {
+  &.c-textarea--resize-auto {
     // Maximum is six lines of text
-    --textarea-max-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));
 
     // Minimum is two lines of text
     --textarea-min-height: var(--textarea-height);
   }
+
+  &.c-textarea--error {
+    --textarea-border-color: var(--dt-color-support-error);
+  }
 }