@justeattakeaway/pie-textarea 0.5.0 → 0.6.0

package/custom-elements.json

@@ -34,7 +34,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    disabled: false,\n    size: 'medium',\n    resize: 'auto',\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    autoFocus: false,\n    readonly: false,\n    required: false,\n}",
           "description": "Default values for optional properties that have default fallback values in the component."
         }
       ],
@@ -108,6 +108,21 @@
               "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",
@@ -203,6 +218,11 @@
               "name": "handleResize",
               "privacy": "private"
             },
+            {
+              "kind": "method",
+              "name": "restrictInputLength",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "handleInput",
@@ -224,6 +244,25 @@
               "kind": "field",
               "name": "handleKeyDown",
               "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "renderLabel",
+              "parameters": [
+                {
+                  "name": "label",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "maxLength",
+                  "optional": true,
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             }
           ],
           "events": [
@@ -259,6 +298,17 @@
               "name": "resize",
               "fieldName": "resize"
             },
+            {
+              "name": "label",
+              "fieldName": "label"
+            },
+            {
+              "name": "maxLength",
+              "type": {
+                "text": "TextareaProps['maxLength']"
+              },
+              "fieldName": "maxLength"
+            },
             {
               "name": "readonly",
               "fieldName": "readonly"

package/dist/index.d.ts

@@ -3,6 +3,7 @@ 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';
@@ -10,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, keyof Omit<TextareaProps, 'name' | 'autocomplete'>>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -32,6 +33,8 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
     disabled: boolean;
     size: "small" | "medium" | "large";
     resize: "auto" | "manual";
+    label: string;
+    maxLength: TextareaProps['maxLength'];
     readonly: boolean;
     autoFocus: boolean;
     required: boolean;
@@ -58,6 +61,7 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
     formResetCallback(): void;
     protected firstUpdated(): void;
     private handleResize;
+    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.
@@ -67,6 +71,7 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
     private handleChange;
     private handleKeyDown;
     disconnectedCallback(): void;
+    renderLabel(label: string, maxLength?: number): TemplateResult<1> | typeof nothing;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
@@ -120,6 +125,15 @@ export declare interface TextareaProps {
      * 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,125 +1,127 @@
-import { LitElement as F, html as q, unsafeCSS as B } from "lit";
-import { property as p, query as N } from "lit/decorators.js";
-import { ifDefined as W } from "lit/directives/if-defined.js";
-import { live as V } from "lit/directives/live.js";
-import { FormControlMixin as A, RtlMixin as K, wrapNativeEvent as G, validPropertyValues as I, defineCustomElement as H } from "@justeattakeaway/pie-webc-core";
-var m = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function U(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 R = "Expected a function", w = 0 / 0, X = "[object Symbol]", J = /^\s+|\s+$/g, Q = /^[-+]0x[0-9a-f]+$/i, Y = /^0b[01]+$/i, Z = /^0o[0-7]+$/i, ee = parseInt, te = typeof m == "object" && m && m.Object === Object && m, ae = typeof self == "object" && self && self.Object === Object && self, re = te || ae || Function("return this")(), ie = Object.prototype, ne = ie.toString, oe = Math.max, se = Math.min, j = function() {
-  return re.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 le(e, t, a) {
-  var n, r, d, l, o, h, x = 0, T = !1, v = !1, z = !0;
-  if (typeof e != "function")
+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);
-  t = C(t) || 0, y(a) && (T = !!a.leading, v = "maxWait" in a, d = v ? oe(C(a.maxWait) || 0, t) : d, z = "trailing" in a ? !!a.trailing : z);
-  function k(i) {
-    var f = n, g = r;
-    return n = r = void 0, x = i, l = e.apply(g, f), l;
+  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(i) {
-    return x = i, o = setTimeout(b, t), T ? k(i) : l;
+  function D(n) {
+    return g = n, s = setTimeout(y, e), m ? $(n) : l;
   }
-  function P(i) {
-    var f = i - h, g = i - x, $ = t - f;
-    return v ? se($, d - g) : $;
+  function P(n) {
+    var f = n - p, b = n - g, E = e - f;
+    return v ? le(E, u - b) : E;
   }
-  function E(i) {
-    var f = i - h, g = i - x;
-    return h === void 0 || f >= t || f < 0 || v && g >= d;
+  function S(n) {
+    var f = n - p, b = n - g;
+    return p === void 0 || f >= e || f < 0 || v && b >= u;
   }
-  function b() {
-    var i = j();
-    if (E(i))
-      return S(i);
-    o = setTimeout(b, P(i));
+  function y() {
+    var n = L();
+    if (S(n))
+      return T(n);
+    s = setTimeout(y, P(n));
   }
-  function S(i) {
-    return o = void 0, z && n ? k(i) : (n = r = void 0, l);
-  }
-  function L() {
-    o !== void 0 && clearTimeout(o), x = 0, n = h = r = o = void 0;
+  function T(n) {
+    return s = void 0, _ && r ? $(n) : (r = i = void 0, l);
   }
   function M() {
-    return o === void 0 ? l : S(j());
+    s !== void 0 && clearTimeout(s), g = 0, r = p = i = s = void 0;
+  }
+  function q() {
+    return s === void 0 ? l : T(L());
   }
-  function _() {
-    var i = j(), f = E(i);
-    if (n = arguments, r = this, h = i, f) {
-      if (o === void 0)
-        return D(h);
+  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 o = setTimeout(b, t), k(h);
+        return s = setTimeout(y, e), $(p);
     }
-    return o === void 0 && (o = setTimeout(b, t)), l;
+    return s === void 0 && (s = setTimeout(y, e)), l;
   }
-  return _.cancel = L, _.flush = M, _;
+  return j.cancel = M, j.flush = q, j;
 }
-function de(e, t, a) {
-  var n = !0, r = !0;
-  if (typeof e != "function")
+function ce(t, e, a) {
+  var r = !0, i = !0;
+  if (typeof t != "function")
     throw new TypeError(R);
-  return y(a) && (n = "leading" in a ? !!a.leading : n, r = "trailing" in a ? !!a.trailing : r), le(e, t, {
-    leading: n,
-    maxWait: t,
-    trailing: 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 y(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 ce(e) {
-  return !!e && typeof e == "object";
+function he(t) {
+  return !!t && typeof t == "object";
 }
-function ue(e) {
-  return typeof e == "symbol" || ce(e) && ne.call(e) == X;
+function ue(t) {
+  return typeof t == "symbol" || he(t) && oe.call(t) == J;
 }
-function C(e) {
-  if (typeof e == "number")
-    return e;
-  if (ue(e))
-    return w;
-  if (y(e)) {
-    var t = typeof e.valueOf == "function" ? e.valueOf() : e;
-    e = y(t) ? t + "" : t;
-  }
-  if (typeof e != "string")
-    return e === 0 ? e : +e;
-  e = e.replace(J, "");
-  var a = Y.test(e);
-  return a || Z.test(e) ? ee(e.slice(2), a ? 2 : 8) : Q.test(e) ? w : +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 he = de;
-const pe = /* @__PURE__ */ U(he), fe = `*,*: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)}
-`, xe = ["small", "medium", "large"], ve = ["auto", "manual"], c = {
+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",
+  label: "",
   value: "",
   autoFocus: !1,
   readonly: !1,
   required: !1
 };
-var ge = Object.defineProperty, be = Object.getOwnPropertyDescriptor, u = (e, t, a, n) => {
-  for (var r = n > 1 ? void 0 : n ? be(t, a) : t, d = e.length - 1, l; d >= 0; d--)
-    (l = e[d]) && (r = (n ? l(t, a, r) : l(r)) || r);
-  return n && r && ge(t, a, r), r;
+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 O = "pie-textarea";
-class s extends A(K(F)) {
+const x = "pie-textarea";
+class o extends K(G(w)) {
   constructor() {
-    super(...arguments), this.value = c.value, this.disabled = c.disabled, this.size = c.size, this.resize = c.resize, this.readonly = c.readonly, this.autoFocus = c.autoFocus, this.required = c.required, this._throttledResize = pe(() => {
+    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), this.handleInput = (t) => {
-      this.value = t.target.value, this._internals.setFormValue(this.value), this.handleResize();
-    }, this.handleChange = (t) => {
-      const a = G(t);
+    }, 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 = (t) => {
-      t.key === "Enter" && t.stopPropagation();
+    }, this.handleKeyDown = (e) => {
+      e.key === "Enter" && e.stopPropagation();
     };
   }
   /**
@@ -135,8 +137,8 @@ class s extends A(K(F)) {
    * 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(t) {
-    this.disabled = t;
+  formDisabledCallback(e) {
+    this.disabled = e;
   }
   /**
    * Called when the form that owns this component is reset.
@@ -146,88 +148,108 @@ class s extends A(K(F)) {
     this.value = c.value, this._internals.setFormValue(this.value);
   }
   firstUpdated() {
-    this._internals.setFormValue(this.value), this._textarea.addEventListener("keydown", this.handleKeyDown);
+    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(), t.has("value") && this._internals.setFormValue(this.value);
+  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,
+      disabled: e,
       resize: a,
-      size: n,
-      autocomplete: r,
-      autoFocus: d,
+      size: r,
+      autocomplete: i,
+      autoFocus: u,
       name: l,
-      readonly: o,
-      value: h,
-      required: x
+      readonly: s,
+      value: p,
+      required: g,
+      label: m,
+      maxLength: v
     } = this;
-    return q`
+    return I`
             <div
                 class="c-textareaWrapper"
                 data-test-id="pie-textarea-wrapper"
-                data-pie-size="${n}"
+                data-pie-size="${r}"
                 data-pie-resize="${a}">
+                ${this.renderLabel(m, v)}
                 <textarea
-                    name=${W(l)}
-                    autocomplete=${W(r)}
-                    .value=${V(h)}
-                    ?autofocus=${d}
-                    ?readonly=${o}
-                    ?required=${x}
-                    ?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}
-                    data-test-id="pie-textarea"
                 ></textarea>
             </div>`;
   }
 }
-s.shadowRootOptions = { ...F.shadowRootOptions, delegatesFocus: !0 };
-s.styles = B(fe);
-u([
-  p({ type: String })
-], s.prototype, "value", 2);
-u([
-  p({ type: Boolean, reflect: !0 })
-], s.prototype, "disabled", 2);
-u([
-  p({ type: String }),
-  I(O, xe, c.size)
-], s.prototype, "size", 2);
-u([
-  p({ type: String }),
-  I(O, ve, c.resize)
-], s.prototype, "resize", 2);
-u([
-  p({ type: Boolean })
-], s.prototype, "readonly", 2);
-u([
-  p({ type: Boolean })
-], s.prototype, "autoFocus", 2);
-u([
-  p({ type: Boolean })
-], s.prototype, "required", 2);
-u([
-  p({ type: String })
-], s.prototype, "name", 2);
-u([
-  p({ type: String })
-], s.prototype, "autocomplete", 2);
-u([
-  N("textarea")
-], s.prototype, "_textarea", 2);
-H(O, s);
+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 {
-  s as PieTextarea,
+  o as PieTextarea,
   c as defaultProps,
-  ve as resizeModes,
-  xe as sizes
+  xe as resizeModes,
+  ve as sizes
 };

package/dist/react.d.ts

@@ -3,6 +3,7 @@ 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';
@@ -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'>>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -35,6 +36,8 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
     disabled: boolean;
     size: "small" | "medium" | "large";
     resize: "auto" | "manual";
+    label: string;
+    maxLength: TextareaProps['maxLength'];
     readonly: boolean;
     autoFocus: boolean;
     required: boolean;
@@ -61,6 +64,7 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
     formResetCallback(): void;
     protected firstUpdated(): void;
     private handleResize;
+    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.
@@ -70,6 +74,7 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps {
     private handleChange;
     private handleKeyDown;
     disconnectedCallback(): void;
+    renderLabel(label: string, maxLength?: number): TemplateResult<1> | typeof nothing;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
@@ -130,6 +135,15 @@ export declare interface TextareaProps {
      * 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,12 +1,13 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
 import { PieTextarea as a } from "./index.js";
-import { defaultProps as T, resizeModes as l, sizes as d } 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/if-defined.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,
@@ -18,10 +19,10 @@ const r = t({
     onChange: "change"
     // when the textarea value is changed.
   }
-}), c = r;
+}), P = r;
 export {
-  c as PieTextarea,
-  T as defaultProps,
-  l as resizeModes,
-  d 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.5.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

@@ -54,12 +54,23 @@ export interface TextareaProps {
      * 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, keyof Omit<TextareaProps, 'name'| 'autocomplete'>>;
+type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'maxLength'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -68,6 +79,7 @@ export const defaultProps: DefaultProps = {
     disabled: false,
     size: 'medium',
     resize: 'auto',
+    label: '',
     value: '',
     autoFocus: false,
     readonly: false,

package/src/index.ts

@@ -1,8 +1,8 @@
 import {
-    LitElement, html, unsafeCSS, PropertyValues,
+    LitElement, html, unsafeCSS, PropertyValues, nothing,
 } from 'lit';
+
 import { property, query } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import throttle from 'lodash.throttle';
 
@@ -10,11 +10,14 @@ 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';
 
@@ -42,6 +45,12 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
     @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;
 
@@ -96,6 +105,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
     }
 
     protected firstUpdated (): void {
+        this.restrictInputLength();
         this._internals.setFormValue(this.value);
 
         this._textarea.addEventListener('keydown', this.handleKeyDown);
@@ -105,14 +115,25 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
         this._throttledResize();
     }
 
-    protected updated (changedProperties: PropertyValues<this>) {
-        if (this.resize === 'auto' && (changedProperties.has('resize') || changedProperties.has('size'))) {
-            this.handleResize();
+    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();
+        }
     }
 
     /**
@@ -121,6 +142,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
      */
     private handleInput = (event: InputEvent) => {
         this.value = (event.target as HTMLTextAreaElement).value;
+        this.restrictInputLength();
         this._internals.setFormValue(this.value);
 
         this.handleResize();
@@ -146,6 +168,14 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
         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,
@@ -157,6 +187,8 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
             readonly,
             value,
             required,
+            label,
+            maxLength,
         } = this;
 
         return html`
@@ -165,7 +197,10 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
                 data-test-id="pie-textarea-wrapper"
                 data-pie-size="${size}"
                 data-pie-resize="${resize}">
+                ${this.renderLabel(label, maxLength)}
                 <textarea
+                    id="${componentSelector}"
+                    data-test-id="${componentSelector}"
                     name=${ifDefined(name)}
                     autocomplete=${ifDefined(autocomplete)}
                     .value=${live(value)}
@@ -175,7 +210,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
                     ?disabled=${disabled}
                     @input=${this.handleInput}
                     @change=${this.handleChange}
-                    data-test-id="pie-textarea"
                 ></textarea>
             </div>`;
     }