@justeattakeaway/pie-textarea 0.11.1 → 0.12.0

package/custom-elements.json

@@ -139,15 +139,6 @@
               "privacy": "public",
               "attribute": "label"
             },
-            {
-              "kind": "field",
-              "name": "maxLength",
-              "type": {
-                "text": "TextareaProps['maxLength']"
-              },
-              "privacy": "public",
-              "attribute": "maxLength"
-            },
             {
               "kind": "field",
               "name": "readonly",
@@ -275,11 +266,6 @@
               "name": "handleResize",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "restrictInputLength",
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "handleInput",
@@ -327,13 +313,6 @@
                   "type": {
                     "text": "string"
                   }
-                },
-                {
-                  "name": "maxLength",
-                  "optional": true,
-                  "type": {
-                    "text": "number"
-                  }
                 }
               ]
             },
@@ -386,13 +365,6 @@
               "name": "label",
               "fieldName": "label"
             },
-            {
-              "name": "maxLength",
-              "type": {
-                "text": "TextareaProps['maxLength']"
-              },
-              "fieldName": "maxLength"
-            },
             {
               "name": "readonly",
               "fieldName": "readonly"

package/dist/index.d.ts

@@ -12,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' | 'assistiveText' | 'defaultValue'>>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -36,7 +36,6 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
     size: "small" | "medium" | "large";
     resize: "auto" | "manual";
     label: string;
-    maxLength: TextareaProps['maxLength'];
     readonly: boolean;
     autoFocus: boolean;
     required: boolean;
@@ -67,7 +66,6 @@ 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 input events and updates the component's value based on the input event or a provided new value.
@@ -82,7 +80,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;
+    renderLabel(label: string): TemplateResult<1> | typeof nothing;
     renderAssistiveText(): TemplateResult<1> | typeof nothing;
     render(): TemplateResult<1>;
     static styles: CSSResult;
@@ -155,11 +153,6 @@ export declare interface TextareaProps {
      * 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 placeholder text to display when the textarea is empty.
      */

package/dist/index.js

@@ -1,101 +1,101 @@
-import { LitElement as M, html as j, nothing as q, unsafeCSS as P } from "lit";
-import { property as l, query as V } from "lit/decorators.js";
+import { LitElement as L, html as j, nothing as M, unsafeCSS as P } from "lit";
+import { property as l, query as D } from "lit/decorators.js";
 import { classMap as G } from "lit/directives/class-map.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
 import { live as H } from "lit/directives/live.js";
 import "@justeattakeaway/pie-assistive-text";
 import "@justeattakeaway/pie-form-label";
 import { FormControlMixin as U, RtlMixin as X, wrapNativeEvent as J, validPropertyValues as C, defineCustomElement as Q } from "@justeattakeaway/pie-webc-core";
 var T = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function Y(t) {
-  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+function Y(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var N = "Expected a function", B = NaN, Z = "[object Symbol]", ee = /^\s+|\s+$/g, te = /^[-+]0x[0-9a-f]+$/i, ae = /^0b[01]+$/i, re = /^0o[0-7]+$/i, ie = parseInt, oe = typeof T == "object" && T && T.Object === Object && T, ne = typeof self == "object" && self && self.Object === Object && self, se = oe || ne || Function("return this")(), le = Object.prototype, de = le.toString, ce = Math.max, ue = Math.min, w = function() {
+var V = "Expected a function", q = NaN, Z = "[object Symbol]", ee = /^\s+|\s+$/g, te = /^[-+]0x[0-9a-f]+$/i, ae = /^0b[01]+$/i, re = /^0o[0-7]+$/i, ie = parseInt, oe = typeof T == "object" && T && T.Object === Object && T, ne = typeof self == "object" && self && self.Object === Object && self, se = oe || ne || Function("return this")(), le = Object.prototype, de = le.toString, ce = Math.max, ue = Math.min, w = function() {
   return se.Date.now();
 };
-function he(t, e, a) {
-  var s, o, h, u, d, p, x = 0, k = !1, v = !1, y = !0;
-  if (typeof t != "function")
-    throw new TypeError(N);
-  e = D(e) || 0, S(a) && (k = !!a.leading, v = "maxWait" in a, h = v ? ce(D(a.maxWait) || 0, e) : h, y = "trailing" in a ? !!a.trailing : y);
-  function g(i) {
-    var f = s, z = o;
-    return s = o = void 0, x = i, u = t.apply(z, f), u;
+function pe(e, t, a) {
+  var d, o, p, u, s, h, x = 0, k = !1, v = !1, g = !0;
+  if (typeof e != "function")
+    throw new TypeError(V);
+  t = B(t) || 0, S(a) && (k = !!a.leading, v = "maxWait" in a, p = v ? ce(B(a.maxWait) || 0, t) : p, g = "trailing" in a ? !!a.trailing : g);
+  function y(r) {
+    var f = d, z = o;
+    return d = o = void 0, x = r, u = e.apply(z, f), u;
   }
-  function _(i) {
-    return x = i, d = setTimeout($, e), k ? g(i) : u;
+  function E(r) {
+    return x = r, s = setTimeout($, t), k ? y(r) : u;
   }
-  function E(i) {
-    var f = i - p, z = i - x, R = e - f;
-    return v ? ue(R, h - z) : R;
+  function A(r) {
+    var f = r - h, z = r - x, R = t - f;
+    return v ? ue(R, p - z) : R;
   }
-  function O(i) {
-    var f = i - p, z = i - x;
-    return p === void 0 || f >= e || f < 0 || v && z >= h;
+  function I(r) {
+    var f = r - h, z = r - x;
+    return h === void 0 || f >= t || f < 0 || v && z >= p;
   }
   function $() {
-    var i = w();
-    if (O(i))
-      return F(i);
-    d = setTimeout($, E(i));
+    var r = w();
+    if (I(r))
+      return F(r);
+    s = setTimeout($, A(r));
   }
-  function F(i) {
-    return d = void 0, y && s ? g(i) : (s = o = void 0, u);
+  function F(r) {
+    return s = void 0, g && d ? y(r) : (d = o = void 0, u);
   }
-  function A() {
-    d !== void 0 && clearTimeout(d), x = 0, s = p = o = d = void 0;
+  function N() {
+    s !== void 0 && clearTimeout(s), x = 0, d = h = o = s = void 0;
   }
   function K() {
-    return d === void 0 ? u : F(w());
+    return s === void 0 ? u : F(w());
   }
-  function L() {
-    var i = w(), f = O(i);
-    if (s = arguments, o = this, p = i, f) {
-      if (d === void 0)
-        return _(p);
+  function _() {
+    var r = w(), f = I(r);
+    if (d = arguments, o = this, h = r, f) {
+      if (s === void 0)
+        return E(h);
       if (v)
-        return d = setTimeout($, e), g(p);
+        return s = setTimeout($, t), y(h);
     }
-    return d === void 0 && (d = setTimeout($, e)), u;
+    return s === void 0 && (s = setTimeout($, t)), u;
   }
-  return L.cancel = A, L.flush = K, L;
+  return _.cancel = N, _.flush = K, _;
 }
-function pe(t, e, a) {
-  var s = !0, o = !0;
-  if (typeof t != "function")
-    throw new TypeError(N);
-  return S(a) && (s = "leading" in a ? !!a.leading : s, o = "trailing" in a ? !!a.trailing : o), he(t, e, {
-    leading: s,
-    maxWait: e,
+function he(e, t, a) {
+  var d = !0, o = !0;
+  if (typeof e != "function")
+    throw new TypeError(V);
+  return S(a) && (d = "leading" in a ? !!a.leading : d, o = "trailing" in a ? !!a.trailing : o), pe(e, t, {
+    leading: d,
+    maxWait: t,
     trailing: o
   });
 }
-function S(t) {
-  var e = typeof t;
-  return !!t && (e == "object" || e == "function");
+function S(e) {
+  var t = typeof e;
+  return !!e && (t == "object" || t == "function");
 }
-function fe(t) {
-  return !!t && typeof t == "object";
+function fe(e) {
+  return !!e && typeof e == "object";
 }
-function xe(t) {
-  return typeof t == "symbol" || fe(t) && de.call(t) == Z;
+function xe(e) {
+  return typeof e == "symbol" || fe(e) && de.call(e) == Z;
 }
-function D(t) {
-  if (typeof t == "number")
-    return t;
-  if (xe(t))
-    return B;
-  if (S(t)) {
-    var e = typeof t.valueOf == "function" ? t.valueOf() : t;
-    t = S(e) ? e + "" : e;
+function B(e) {
+  if (typeof e == "number")
+    return e;
+  if (xe(e))
+    return q;
+  if (S(e)) {
+    var t = typeof e.valueOf == "function" ? e.valueOf() : e;
+    e = S(t) ? t + "" : t;
   }
-  if (typeof t != "string")
-    return t === 0 ? t : +t;
-  t = t.replace(ee, "");
-  var a = ae.test(t);
-  return a || re.test(t) ? ie(t.slice(2), a ? 2 : 8) : te.test(t) ? B : +t;
+  if (typeof e != "string")
+    return e === 0 ? e : +e;
+  e = e.replace(ee, "");
+  var a = ae.test(e);
+  return a || re.test(e) ? ie(e.slice(2), a ? 2 : 8) : te.test(e) ? q : +e;
 }
-var ve = pe;
+var ve = he;
 const ge = /* @__PURE__ */ Y(ve), be = "*,*: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-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.c-textarea--readonly{--textarea-background-color: var(--dt-color-container-subtle);--textarea-border-color: var(--dt-color-interactive-form)}.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);--textarea-placeholder-color: var(--dt-color-content-disabled)}@media (hover: hover){.c-textareaWrapper:hover:not(.c-textarea--disabled,.c-textarea--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))))}}.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"], ye = ["auto", "manual"], ze = ["default", "success", "error"], c = {
   disabled: !1,
   size: "medium",
@@ -108,22 +108,22 @@ const ge = /* @__PURE__ */ Y(ve), be = "*,*:after,*:before{box-sizing:inherit}.c
   readonly: !1,
   required: !1
 };
-var ke = Object.defineProperty, n = (t, e, a, s) => {
-  for (var o = void 0, h = t.length - 1, u; h >= 0; h--)
-    (u = t[h]) && (o = u(e, a, o) || o);
-  return o && ke(e, a, o), o;
+var ke = Object.defineProperty, n = (e, t, a, d) => {
+  for (var o = void 0, p = e.length - 1, u; p >= 0; p--)
+    (u = e[p]) && (o = u(t, a, o) || o);
+  return o && ke(t, a, o), o;
 };
-const m = "pie-textarea", I = "assistive-text", W = class W extends U(X(M)) {
+const b = "pie-textarea", O = "assistive-text", W = class W extends U(X(L)) {
   constructor() {
     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 = ge(() => {
       this.resize === "auto" && (this._textarea.style.height = "auto", this._textarea.style.height = `${this._textarea.scrollHeight}px`);
-    }, 100), this.handleInput = (e, a) => {
-      e ? this.value = e.target.value : a && (this.value = a), this.restrictInputLength(), this._internals.setFormValue(this.value), this.handleResize();
-    }, this.handleChange = (e) => {
-      const a = J(e);
+    }, 100), this.handleInput = (t, a) => {
+      t ? this.value = t.target.value : a && (this.value = a), this._internals.setFormValue(this.value), this.handleResize();
+    }, this.handleChange = (t) => {
+      const a = J(t);
       this.dispatchEvent(a);
-    }, this.handleKeyDown = (e) => {
-      e.key === "Enter" && e.stopPropagation();
+    }, this.handleKeyDown = (t) => {
+      t.key === "Enter" && t.stopPropagation();
     };
   }
   /**
@@ -139,8 +139,8 @@ const m = "pie-textarea", I = "assistive-text", W = class W extends U(X(M)) {
    * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
    * @param disabled - The latest disabled state of the input.
    */
-  formDisabledCallback(e) {
-    this.disabled = e;
+  formDisabledCallback(t) {
+    this.disabled = t;
   }
   /**
    * Called when the form that owns this component is reset.
@@ -150,80 +150,72 @@ const m = "pie-textarea", I = "assistive-text", W = class W extends U(X(M)) {
     this.value = this.defaultValue ?? c.value, this._internals.setFormValue(this.value);
   }
   firstUpdated() {
-    this.restrictInputLength(), this._internals.setFormValue(this.value), window.addEventListener("resize", () => this.handleResize()), this._textarea.addEventListener("keydown", this.handleKeyDown);
+    this._internals.setFormValue(this.value), window.addEventListener("resize", () => this.handleResize()), this._textarea.addEventListener("keydown", this.handleKeyDown);
   }
   handleResize() {
     this._throttledResize();
   }
-  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.handleInput(null, this.value), this.resize === "auto" && (e.has("resize") || e.has("size")) && this.handleResize();
+  updated(t) {
+    t.has("value") && this.handleInput(null, this.value), this.resize === "auto" && (t.has("resize") || t.has("size")) && this.handleResize();
   }
   disconnectedCallback() {
     this._textarea.removeEventListener("keydown", this.handleKeyDown), window.removeEventListener("resize", () => this.handleResize());
   }
-  renderLabel(e, a) {
-    const s = a ? `${this.value.length}/${a}` : void 0;
-    return e != null && e.length ? j`<pie-form-label for="${m}" trailing=${b(s)}>${e}</pie-form-label>` : q;
+  renderLabel(t) {
+    return t != null && t.length ? j`<pie-form-label for="${b}">${t}</pie-form-label>` : M;
   }
   renderAssistiveText() {
     return this.assistiveText ? j`
             <pie-assistive-text
-                id="${I}"
-                variant=${b(this.status)}
+                id="${O}"
+                variant=${m(this.status)}
                 data-test-id="pie-textarea-assistive-text">
                 ${this.assistiveText}
             </pie-assistive-text>
-        ` : q;
+        ` : M;
   }
   render() {
     const {
-      disabled: e,
+      disabled: t,
       resize: a,
-      size: s,
+      size: d,
       autocomplete: o,
-      autoFocus: h,
+      autoFocus: p,
       name: u,
-      readonly: d,
-      placeholder: p,
+      readonly: s,
+      placeholder: h,
       value: x,
       required: k,
       label: v,
-      maxLength: y,
       status: g,
-      assistiveText: _
+      assistiveText: y
     } = this, E = {
       "c-textareaWrapper": !0,
-      "c-textarea--disabled": e,
-      "c-textarea--readonly": d,
+      "c-textarea--disabled": t,
+      "c-textarea--readonly": s,
       "c-textarea--error": g === "error",
       [`c-textarea--resize-${a}`]: !0,
-      [`c-textarea--${s}`]: !0
+      [`c-textarea--${d}`]: !0
     };
     return j`<div>
-            ${this.renderLabel(v, y)}
+            ${this.renderLabel(v)}
             <div
                 class="${G(E)}"
                 data-test-id="pie-textarea-wrapper">
                 <textarea
-                    id="${m}"
-                    data-test-id="${m}"
-                    name=${b(u)}
-                    autocomplete=${b(o)}
-                    placeholder=${b(p)}
+                    id="${b}"
+                    data-test-id="${b}"
+                    name=${m(u)}
+                    autocomplete=${m(o)}
+                    placeholder=${m(h)}
                     .value=${H(x)}
-                    ?autofocus=${h}
-                    ?readonly=${d}
+                    ?autofocus=${p}
+                    ?readonly=${s}
                     ?required=${k}
-                    ?disabled=${e}
-                    aria-describedby=${b(_ ? I : void 0)}
+                    ?disabled=${t}
+                    aria-describedby=${m(y ? O : void 0)}
                     aria-invalid=${g === "error" ? "true" : "false"}
-                    aria-errormessage="${b(g === "error" ? I : void 0)}"
+                    aria-errormessage="${m(g === "error" ? O : void 0)}"
                     @input=${this.handleInput}
                     @change=${this.handleChange}
                 ></textarea>
@@ -232,65 +224,62 @@ const m = "pie-textarea", I = "assistive-text", W = class W extends U(X(M)) {
         </div>`;
   }
 };
-W.shadowRootOptions = { ...M.shadowRootOptions, delegatesFocus: !0 }, W.styles = P(be);
-let r = W;
+W.shadowRootOptions = { ...L.shadowRootOptions, delegatesFocus: !0 }, W.styles = P(be);
+let i = W;
 n([
   l({ type: String })
-], r.prototype, "value");
+], i.prototype, "value");
 n([
   l({ type: String })
-], r.prototype, "defaultValue");
+], i.prototype, "defaultValue");
 n([
   l({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled");
+], i.prototype, "disabled");
 n([
   l({ type: String }),
-  C(m, me, c.size)
-], r.prototype, "size");
+  C(b, me, c.size)
+], i.prototype, "size");
 n([
   l({ type: String }),
-  C(m, ye, c.resize)
-], r.prototype, "resize");
+  C(b, ye, c.resize)
+], i.prototype, "resize");
 n([
   l({ type: String })
-], r.prototype, "label");
-n([
-  l({ type: Number })
-], r.prototype, "maxLength");
+], i.prototype, "label");
 n([
   l({ type: Boolean })
-], r.prototype, "readonly");
+], i.prototype, "readonly");
 n([
   l({ type: Boolean })
-], r.prototype, "autoFocus");
+], i.prototype, "autoFocus");
 n([
   l({ type: Boolean })
-], r.prototype, "required");
+], i.prototype, "required");
 n([
   l({ type: String }),
-  C(m, ze, c.status)
-], r.prototype, "status");
+  C(b, ze, c.status)
+], i.prototype, "status");
 n([
   l({ type: String })
-], r.prototype, "assistiveText");
+], i.prototype, "assistiveText");
 n([
   l({ type: String })
-], r.prototype, "name");
+], i.prototype, "name");
 n([
   l({ type: String })
-], r.prototype, "autocomplete");
+], i.prototype, "autocomplete");
 n([
   l({ type: String })
-], r.prototype, "placeholder");
+], i.prototype, "placeholder");
 n([
-  V("textarea")
-], r.prototype, "_textarea");
+  D("textarea")
+], i.prototype, "_textarea");
 n([
-  V("textarea")
-], r.prototype, "focusTarget");
-Q(m, r);
+  D("textarea")
+], i.prototype, "focusTarget");
+Q(b, i);
 export {
-  r as PieTextarea,
+  i as PieTextarea,
   c as defaultProps,
   ye as resizeModes,
   me as sizes,

package/dist/react.d.ts

@@ -13,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' | 'assistiveText' | 'defaultValue'>>;
+declare type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -39,7 +39,6 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
     size: "small" | "medium" | "large";
     resize: "auto" | "manual";
     label: string;
-    maxLength: TextareaProps['maxLength'];
     readonly: boolean;
     autoFocus: boolean;
     required: boolean;
@@ -70,7 +69,6 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
     formResetCallback(): void;
     protected firstUpdated(): void;
     private handleResize;
-    private restrictInputLength;
     protected updated(changedProperties: PropertyValues<this>): void;
     /**
      * Handles input events and updates the component's value based on the input event or a provided new value.
@@ -85,7 +83,7 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
     private handleChange;
     private handleKeyDown;
     disconnectedCallback(): void;
-    renderLabel(label: string, maxLength?: number): TemplateResult<1> | typeof nothing;
+    renderLabel(label: string): TemplateResult<1> | typeof nothing;
     renderAssistiveText(): TemplateResult<1> | typeof nothing;
     render(): TemplateResult<1>;
     static styles: CSSResult;
@@ -165,11 +163,6 @@ export declare interface TextareaProps {
      * 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 placeholder text to display when the textarea is empty.
      */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-textarea",
   "description": "PIE Design System Textarea built using Web Components",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts

@@ -76,12 +76,6 @@ export interface TextareaProps {
     */
     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 placeholder text to display when the textarea is empty.
      */
@@ -91,7 +85,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' | 'assistiveText' | 'defaultValue'>>;
+type DefaultProps = ComponentDefaultProps<TextareaProps, keyof Omit<TextareaProps, 'name' | 'autocomplete' | 'assistiveText' | 'defaultValue'>>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.

package/src/index.ts

@@ -52,9 +52,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
     @property({ type: String })
     public label = defaultProps.label;
 
-    @property({ type: Number })
-    public maxLength: TextareaProps['maxLength'];
-
     @property({ type: Boolean })
     public readonly = defaultProps.readonly;
 
@@ -122,7 +119,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
     }
 
     protected firstUpdated (): void {
-        this.restrictInputLength();
         this._internals.setFormValue(this.value);
 
         window.addEventListener('resize', () => this.handleResize());
@@ -133,16 +129,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
         this._throttledResize();
     }
 
-    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.handleInput(null, this.value);
@@ -169,7 +155,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
             this.value = newValue;
         }
 
-        this.restrictInputLength();
         this._internals.setFormValue(this.value);
 
         this.handleResize();
@@ -196,11 +181,9 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
         window.removeEventListener('resize', () => this.handleResize());
     }
 
-    renderLabel (label: string, maxLength?: number) {
-        const characterCount = maxLength ? `${this.value.length}/${maxLength}` : undefined;
-
+    renderLabel (label: string) {
         return label?.length
-            ? html`<pie-form-label for="${componentSelector}" trailing=${ifDefined(characterCount)}>${label}</pie-form-label>`
+            ? html`<pie-form-label for="${componentSelector}">${label}</pie-form-label>`
             : nothing;
     }
 
@@ -232,7 +215,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
             value,
             required,
             label,
-            maxLength,
             status,
             assistiveText,
         } = this;
@@ -247,7 +229,7 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
         };
 
         return html`<div>
-            ${this.renderLabel(label, maxLength)}
+            ${this.renderLabel(label)}
             <div
                 class="${classMap(classes)}"
                 data-test-id="pie-textarea-wrapper">