@justeattakeaway/pie-textarea 0.17.30 → 0.18.0

package/README.md

@@ -43,6 +43,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 | `autoFocus`    | `true`, `false`                                              | If true, focuses the textarea on first render. Only one element should have `autofocus`. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus).                                                              | `false`     |
 | `defaultValue` | `string`                                                     | Value used during a form reset to replace the current value.                                                                                                                                                                                     | `undefined` |
 | `disabled`     | `true`, `false`                                              | When true, the user cannot edit or interact with the textarea.                                                                                                                                                                                   | `false`     |
+| `maxlength`    | `number`                                                     | The maximum number of characters the textarea can hold.                                                                                                                                                                                          | `undefined` |
 | `name`         | `string`                                                     | Name of the textarea (used in form key/value pairs).                                                                                                                                                                                             | `undefined` |
 | `placeholder`  | `string`                                                     | Placeholder text shown when textarea is empty.                                                                                                                                                                                                   | `""`        |
 | `readonly`     | `true`, `false`                                              | When true, the user cannot edit the textarea. Not the same as disabled. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly).                                                                                       | `false`     |
@@ -76,11 +77,12 @@ const textarea = document.querySelector('pie-textarea');
 console.log(textarea.validity.valid);
 ```
 
-This getter can be useful for reducing the amount of validation code in your application. For example, if you want to create a textarea that requires attention, you can set the `required` property on the component. You can then check the validity of the input in your application code:
+This getter can be useful for reducing the amount of validation code in your application. For example, if you want to create a textarea that should be at most 200 characters long and requires a value, you can set the `maxlength` and `required` properties on the component. You can then check the validity of the textarea in your application code:
 
 ```html
 <pie-textarea
   id="my-textarea"
+  maxlength="200"
   required>
 </pie-textarea>
 ```
@@ -92,7 +94,7 @@ const isValid = textarea.validity.valid;
 // We could use this to drive the status and assistiveText properties on our textarea (this would likely be inside a submit event handler in a real application)
 if (!isValid) {
   textarea.status = 'error';
-  textarea.assistiveText = 'This textarea is required';
+  textarea.assistiveText = 'Please enter a value of no more than 200 characters';
 }
 ```
 
@@ -137,6 +139,7 @@ import '@justeattakeaway/pie-webc/components/textarea.js';
     name="my-textarea"
     placeholder="Please enter a value"
     autocomplete="on"
+    maxlength="200"
     value=""
     autoFocus
     readonly>
@@ -154,6 +157,7 @@ import '@justeattakeaway/pie-webc/components/textarea.js';
     name="my-textarea"
     placeholder="Please enter a value"
     autocomplete="on"
+    maxlength="200"
     value=""
     autoFocus
     readonly>
@@ -169,6 +173,7 @@ import { PieTextarea } from '@justeattakeaway/pie-webc/react/textarea.js';
     name="my-textarea"
     placeholder="Please enter a value"
     autocomplete="on"
+    maxlength="200"
     value=""
     autoFocus
     readonly>

package/custom-elements.json

@@ -185,6 +185,15 @@
               "privacy": "public",
               "attribute": "placeholder"
             },
+            {
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "TextareaProps['maxlength']"
+              },
+              "privacy": "public",
+              "attribute": "maxlength"
+            },
             {
               "kind": "field",
               "name": "_textarea",
@@ -221,7 +230,7 @@
                 "text": "ValidityState"
               },
               "privacy": "public",
-              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
+              "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
             },
             {
@@ -242,7 +251,7 @@
                   "description": "The latest disabled state of the input."
                 }
               ],
-              "description": "Called after the disabled state of the element changes,\r\neither because the disabled attribute of this element was added or removed;\r\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
+              "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",
@@ -253,7 +262,7 @@
                   "text": "void"
                 }
               },
-              "description": "Called when the form that owns this component is reset.\r\nResets the value to the default value."
+              "description": "Called when the form that owns this component is reset.\nResets the value to the default value."
             },
             {
               "kind": "method",
@@ -387,6 +396,13 @@
                 "text": "TextareaProps['placeholder']"
               },
               "fieldName": "placeholder"
+            },
+            {
+              "name": "maxlength",
+              "type": {
+                "text": "TextareaProps['maxlength']"
+              },
+              "fieldName": "maxlength"
             }
           ],
           "mixins": [

package/dist/index.d.ts

@@ -11,7 +11,7 @@ import { 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' | 'assistiveText' | 'defaultValue'>>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue' | 'maxlength'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -37,6 +37,7 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
     name: TextareaProps['name'];
     autocomplete: TextareaProps['autocomplete'];
     placeholder: TextareaProps['placeholder'];
+    maxlength: TextareaProps['maxlength'];
     private _textarea;
     focusTarget: HTMLElement;
     private _abortController;
@@ -147,6 +148,10 @@ export declare interface TextareaProps {
      * The placeholder text to display when the textarea is empty.
      */
     placeholder?: string;
+    /**
+     * The maximum number of characters allowed in the textarea.
+     */
+    maxlength?: number;
 }
 
 export { }

package/dist/index.js

@@ -1,88 +1,88 @@
-import { LitElement as de, nothing as ce, html as J, unsafeCSS as ue } from "lit";
-import { property as l, query as Y } from "lit/decorators.js";
+import { LitElement as de, nothing as ce, html as Q, unsafeCSS as ue } from "lit";
+import { property as l, query as Z } from "lit/decorators.js";
 import { classMap as pe } from "lit/directives/class-map.js";
-import { ifDefined as z } from "lit/directives/if-defined.js";
+import { ifDefined as y } from "lit/directives/if-defined.js";
 import { live as he } from "lit/directives/live.js";
 import "@justeattakeaway/pie-assistive-text";
-import { FormControlMixin as fe, RtlMixin as xe, DelegatesFocusMixin as ve, wrapNativeEvent as ge, validPropertyValues as N, safeCustomElement as be } from "@justeattakeaway/pie-webc-core";
+import { FormControlMixin as fe, RtlMixin as xe, DelegatesFocusMixin as ve, wrapNativeEvent as ge, validPropertyValues as U, safeCustomElement as be } from "@justeattakeaway/pie-webc-core";
 const O = class O extends de {
   willUpdate() {
     this.getAttribute("v") || this.setAttribute("v", O.v);
   }
 };
-O.v = "0.17.30";
+O.v = "0.18.0";
 let V = O;
 var w = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
 function me(t) {
   return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
 }
-var B, Q;
+var P, Y;
 function ye() {
-  if (Q) return B;
-  Q = 1;
-  var t = "Expected a function", s = NaN, g = "[object Symbol]", f = /^\s+|\s+$/g, c = /^[-+]0x[0-9a-f]+$/i, b = /^0b[01]+$/i, x = /^0o[0-7]+$/i, E = parseInt, I = typeof w == "object" && w && w.Object === Object && w, F = typeof self == "object" && self && self.Object === Object && self, k = I || F || Function("return this")(), R = Object.prototype, L = R.toString, Z = Math.max, ee = Math.min, M = function() {
+  if (Y) return P;
+  Y = 1;
+  var t = "Expected a function", s = NaN, g = "[object Symbol]", f = /^\s+|\s+$/g, c = /^[-+]0x[0-9a-f]+$/i, b = /^0b[01]+$/i, x = /^0o[0-7]+$/i, E = parseInt, I = typeof w == "object" && w && w.Object === Object && w, F = typeof self == "object" && self && self.Object === Object && self, k = I || F || Function("return this")(), R = Object.prototype, L = R.toString, M = Math.max, ee = Math.min, q = function() {
     return k.Date.now();
   };
-  function te(e, a, n) {
-    var p, h, W, y, u, m, T = 0, G = !1, _ = !1, q = !0;
+  function te(e, i, n) {
+    var p, h, W, z, u, m, $ = 0, H = !1, T = !1, D = !0;
     if (typeof e != "function")
       throw new TypeError(t);
-    a = U(a) || 0, S(n) && (G = !!n.leading, _ = "maxWait" in n, W = _ ? Z(U(n.maxWait) || 0, a) : W, q = "trailing" in n ? !!n.trailing : q);
-    function D(r) {
-      var v = p, $ = h;
-      return p = h = void 0, T = r, y = e.apply($, v), y;
+    i = G(i) || 0, S(n) && (H = !!n.leading, T = "maxWait" in n, W = T ? M(G(n.maxWait) || 0, i) : W, D = "trailing" in n ? !!n.trailing : D);
+    function A(r) {
+      var v = p, _ = h;
+      return p = h = void 0, $ = r, z = e.apply(_, v), z;
     }
     function oe(r) {
-      return T = r, u = setTimeout(j, a), G ? D(r) : y;
+      return $ = r, u = setTimeout(j, i), H ? A(r) : z;
     }
     function ne(r) {
-      var v = r - m, $ = r - T, X = a - v;
-      return _ ? ee(X, W - $) : X;
+      var v = r - m, _ = r - $, J = i - v;
+      return T ? ee(J, W - _) : J;
     }
-    function H(r) {
-      var v = r - m, $ = r - T;
-      return m === void 0 || v >= a || v < 0 || _ && $ >= W;
+    function K(r) {
+      var v = r - m, _ = r - $;
+      return m === void 0 || v >= i || v < 0 || T && _ >= W;
     }
     function j() {
-      var r = M();
-      if (H(r))
-        return K(r);
+      var r = q();
+      if (K(r))
+        return X(r);
       u = setTimeout(j, ne(r));
     }
-    function K(r) {
-      return u = void 0, q && p ? D(r) : (p = h = void 0, y);
+    function X(r) {
+      return u = void 0, D && p ? A(r) : (p = h = void 0, z);
     }
     function se() {
-      u !== void 0 && clearTimeout(u), T = 0, p = m = h = u = void 0;
+      u !== void 0 && clearTimeout(u), $ = 0, p = m = h = u = void 0;
     }
     function le() {
-      return u === void 0 ? y : K(M());
+      return u === void 0 ? z : X(q());
     }
-    function A() {
-      var r = M(), v = H(r);
+    function B() {
+      var r = q(), v = K(r);
       if (p = arguments, h = this, m = r, v) {
         if (u === void 0)
           return oe(m);
-        if (_)
-          return u = setTimeout(j, a), D(m);
+        if (T)
+          return u = setTimeout(j, i), A(m);
       }
-      return u === void 0 && (u = setTimeout(j, a)), y;
+      return u === void 0 && (u = setTimeout(j, i)), z;
     }
-    return A.cancel = se, A.flush = le, A;
+    return B.cancel = se, B.flush = le, B;
   }
-  function re(e, a, n) {
+  function re(e, i, n) {
     var p = !0, h = !0;
     if (typeof e != "function")
       throw new TypeError(t);
-    return S(n) && (p = "leading" in n ? !!n.leading : p, h = "trailing" in n ? !!n.trailing : h), te(e, a, {
+    return S(n) && (p = "leading" in n ? !!n.leading : p, h = "trailing" in n ? !!n.trailing : h), te(e, i, {
       leading: p,
-      maxWait: a,
+      maxWait: i,
       trailing: h
     });
   }
   function S(e) {
-    var a = typeof e;
-    return !!e && (a == "object" || a == "function");
+    var i = typeof e;
+    return !!e && (i == "object" || i == "function");
   }
   function ae(e) {
     return !!e && typeof e == "object";
@@ -90,14 +90,14 @@ function ye() {
   function ie(e) {
     return typeof e == "symbol" || ae(e) && L.call(e) == g;
   }
-  function U(e) {
+  function G(e) {
     if (typeof e == "number")
       return e;
     if (ie(e))
       return s;
     if (S(e)) {
-      var a = typeof e.valueOf == "function" ? e.valueOf() : e;
-      e = S(a) ? a + "" : a;
+      var i = typeof e.valueOf == "function" ? e.valueOf() : e;
+      e = S(i) ? i + "" : i;
     }
     if (typeof e != "string")
       return e === 0 ? e : +e;
@@ -105,10 +105,10 @@ function ye() {
     var n = b.test(e);
     return n || x.test(e) ? E(e.slice(2), n ? 2 : 8) : c.test(e) ? s : +e;
   }
-  return B = re, B;
+  return P = re, P;
 }
 var ze = ye();
-const ke = /* @__PURE__ */ me(ze), Te = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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-border-form);--textarea-content-color: var(--dt-color-content-default);--textarea-placeholder-color: var(--dt-color-content-placeholder);--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 textarea::placeholder{color:var(--textarea-placeholder-color);opacity:1}.c-textareaWrapper.is-readonly{--textarea-background-color: var(--dt-color-container-subtle);--textarea-border-color: var(--dt-color-border-form)}.c-textareaWrapper.is-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);--textarea-placeholder-color: var(--dt-color-content-disabled)}@media (hover: hover){.c-textareaWrapper:hover:not(.is-disabled,.is-readonly){--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))))}@supports (background-color: color-mix(in srgb,black,white)){.c-textareaWrapper:hover:not(.is-disabled,.is-readonly){--textarea-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.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.has-error{--textarea-border-color: var(--dt-color-support-error)}", _e = ["small", "medium", "large"], $e = ["auto", "manual"], Ce = ["default", "success", "error"], d = {
+const ke = /* @__PURE__ */ me(ze), $e = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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-border-form);--textarea-content-color: var(--dt-color-content-default);--textarea-placeholder-color: var(--dt-color-content-placeholder);--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 textarea::placeholder{color:var(--textarea-placeholder-color);opacity:1}.c-textareaWrapper.is-readonly{--textarea-background-color: var(--dt-color-container-subtle);--textarea-border-color: var(--dt-color-border-form)}.c-textareaWrapper.is-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);--textarea-placeholder-color: var(--dt-color-content-disabled)}@media (hover: hover){.c-textareaWrapper:hover:not(.is-disabled,.is-readonly){--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))))}@supports (background-color: color-mix(in srgb,black,white)){.c-textareaWrapper:hover:not(.is-disabled,.is-readonly){--textarea-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.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.has-error{--textarea-border-color: var(--dt-color-support-error)}", Te = ["small", "medium", "large"], _e = ["auto", "manual"], Ce = ["default", "success", "error"], d = {
   disabled: !1,
   size: "medium",
   resize: "auto",
@@ -124,8 +124,8 @@ var Se = Object.defineProperty, We = Object.getOwnPropertyDescriptor, o = (t, s,
     (x = t[b]) && (c = (f ? x(s, g, c) : x(c)) || c);
   return f && c && Se(s, g, c), c;
 };
-const C = "pie-textarea", P = "assistive-text";
-let i = class extends fe(xe(ve(V))) {
+const C = "pie-textarea", N = "assistive-text";
+let a = class extends fe(xe(ve(V))) {
   constructor() {
     super(...arguments), this.value = d.value, this.disabled = d.disabled, this.size = d.size, this.resize = d.resize, this.readonly = d.readonly, this.autoFocus = d.autoFocus, this.required = d.required, this.status = d.status, this._throttledResize = ke(() => {
       this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
@@ -180,10 +180,10 @@ let i = class extends fe(xe(ve(V))) {
     this._throttledResize();
   }
   renderAssistiveText() {
-    return this.assistiveText ? J`
+    return this.assistiveText ? Q`
             <pie-assistive-text
-                id="${P}"
-                variant=${z(this.status)}
+                id="${N}"
+                variant=${y(this.status)}
                 data-test-id="pie-textarea-assistive-text">
                 ${this.assistiveText}
             </pie-assistive-text>
@@ -202,8 +202,9 @@ let i = class extends fe(xe(ve(V))) {
       value: I,
       required: F,
       status: k,
-      assistiveText: R
-    } = this, L = {
+      assistiveText: R,
+      maxlength: L
+    } = this, M = {
       "c-textareaWrapper": !0,
       "is-disabled": t,
       "is-readonly": x,
@@ -211,88 +212,92 @@ let i = class extends fe(xe(ve(V))) {
       [`c-textarea--resize-${s}`]: !0,
       [`c-textarea--${g}`]: !0
     };
-    return J`<div>
+    return Q`<div>
             <div
-                class="${pe(L)}"
+                class="${pe(M)}"
                 data-test-id="pie-textarea-wrapper">
                 <textarea
                     id="${C}"
                     data-test-id="${C}"
-                    name=${z(b)}
-                    autocomplete=${z(f)}
-                    placeholder=${z(E)}
+                    name=${y(b)}
+                    autocomplete=${y(f)}
+                    placeholder=${y(E)}
                     .value=${he(I)}
                     ?autofocus=${c}
                     ?readonly=${x}
                     ?required=${F}
                     ?disabled=${t}
-                    aria-describedby=${z(R ? P : void 0)}
+                    aria-describedby=${y(R ? N : void 0)}
                     aria-invalid=${k === "error" ? "true" : "false"}
-                    aria-errormessage="${z(k === "error" ? P : void 0)}"
+                    aria-errormessage="${y(k === "error" ? N : void 0)}"
                     @input=${this.handleInput}
                     @change=${this.handleChange}
+                    maxlength=${y(L)}
                 ></textarea>
             </div>
             ${this.renderAssistiveText()}
         </div>`;
   }
 };
-i.styles = ue(Te);
+a.styles = ue($e);
 o([
   l({ type: String })
-], i.prototype, "value", 2);
+], a.prototype, "value", 2);
 o([
   l({ type: String })
-], i.prototype, "defaultValue", 2);
+], a.prototype, "defaultValue", 2);
 o([
   l({ type: Boolean, reflect: !0 })
-], i.prototype, "disabled", 2);
+], a.prototype, "disabled", 2);
 o([
   l({ type: String }),
-  N(C, _e, d.size)
-], i.prototype, "size", 2);
+  U(C, Te, d.size)
+], a.prototype, "size", 2);
 o([
   l({ type: String }),
-  N(C, $e, d.resize)
-], i.prototype, "resize", 2);
+  U(C, _e, d.resize)
+], a.prototype, "resize", 2);
 o([
   l({ type: Boolean })
-], i.prototype, "readonly", 2);
+], a.prototype, "readonly", 2);
 o([
   l({ type: Boolean })
-], i.prototype, "autoFocus", 2);
+], a.prototype, "autoFocus", 2);
 o([
   l({ type: Boolean })
-], i.prototype, "required", 2);
+], a.prototype, "required", 2);
 o([
   l({ type: String }),
-  N(C, Ce, d.status)
-], i.prototype, "status", 2);
+  U(C, Ce, d.status)
+], a.prototype, "status", 2);
 o([
   l({ type: String })
-], i.prototype, "assistiveText", 2);
+], a.prototype, "assistiveText", 2);
 o([
   l({ type: String, reflect: !0 })
-], i.prototype, "name", 2);
+], a.prototype, "name", 2);
 o([
   l({ type: String })
-], i.prototype, "autocomplete", 2);
+], a.prototype, "autocomplete", 2);
 o([
   l({ type: String })
-], i.prototype, "placeholder", 2);
+], a.prototype, "placeholder", 2);
+o([
+  l({ type: Number })
+], a.prototype, "maxlength", 2);
 o([
-  Y("textarea")
-], i.prototype, "_textarea", 2);
+  Z("textarea")
+], a.prototype, "_textarea", 2);
 o([
-  Y("textarea")
-], i.prototype, "focusTarget", 2);
-i = o([
+  Z("textarea")
+], a.prototype, "focusTarget", 2);
+a = o([
   be("pie-textarea")
-], i);
+], a);
 export {
-  i as PieTextarea,
+  a as PieTextarea,
   d as defaultProps,
-  $e as resizeModes,
-  _e as sizes,
+  _e as resizeModes,
+  Te as sizes,
   Ce as statusTypes
 };

package/dist/react.d.ts

@@ -12,7 +12,7 @@ import { 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' | 'assistiveText' | 'defaultValue'>>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue' | 'maxlength'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -40,6 +40,7 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
     name: TextareaProps['name'];
     autocomplete: TextareaProps['autocomplete'];
     placeholder: TextareaProps['placeholder'];
+    maxlength: TextareaProps['maxlength'];
     private _textarea;
     focusTarget: HTMLElement;
     private _abortController;
@@ -157,6 +158,10 @@ export declare interface TextareaProps {
      * The placeholder text to display when the textarea is empty.
      */
     placeholder?: string;
+    /**
+     * The maximum number of characters allowed in the textarea.
+     */
+    maxlength?: number;
 }
 
 export { }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-textarea",
   "description": "PIE Design System Textarea built using Web Components",
-  "version": "0.17.30",
+  "version": "0.18.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -49,13 +49,10 @@
     "@types/lodash.throttle": "4.1.9"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.11.30",
+    "@justeattakeaway/pie-assistive-text": "0.11.31",
     "@justeattakeaway/pie-webc-core": "14.0.1",
     "lodash.throttle": "4.1.1"
   },
-  "volta": {
-    "extends": "../../../package.json"
-  },
   "customElements": "custom-elements.json",
   "sideEffects": [
     "dist/*.js"

package/src/defs.ts

@@ -75,12 +75,17 @@ export interface TextareaProps {
      * The placeholder text to display when the textarea is empty.
      */
     placeholder?: string;
+
+    /**
+     * The maximum number of characters allowed in the textarea.
+     */
+    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' | 'assistiveText' | 'defaultValue'>>;
+type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue'| 'maxlength'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.

package/src/index.ts

@@ -75,6 +75,9 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
     @property({ type: String })
     public placeholder: TextareaProps['placeholder'];
 
+    @property({ type: Number })
+    public maxlength: TextareaProps['maxlength'];
+
     @query('textarea')
     private _textarea!: HTMLTextAreaElement;
 
@@ -216,6 +219,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
             required,
             status,
             assistiveText,
+            maxlength,
         } = this;
 
         const classes = {
@@ -247,6 +251,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(DelegatesFocusMixin(P
                     aria-errormessage="${ifDefined(status === 'error' ? assistiveTextIdValue : undefined)}"
                     @input=${this.handleInput}
                     @change=${this.handleChange}
+                    maxlength=${ifDefined(maxlength)}
                 ></textarea>
             </div>
             ${this.renderAssistiveText()}