@justeattakeaway/pie-textarea 0.11.1 → 0.13.0

package/custom-elements.json

@@ -42,7 +42,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    disabled: false,\n    size: 'medium',\n    resize: 'auto',\n    label: '',\n    value: '',\n    placeholder: '',\n    status: 'default',\n    autoFocus: false,\n    readonly: false,\n    required: false,\n}",
+          "default": "{\n    disabled: false,\n    size: 'medium',\n    resize: 'auto',\n    value: '',\n    placeholder: '',\n    status: 'default',\n    autoFocus: false,\n    readonly: false,\n    required: false,\n}",
           "description": "Default values for optional properties that have default fallback values in the component."
         }
       ],
@@ -133,21 +133,6 @@
               "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",
@@ -275,11 +260,6 @@
               "name": "handleResize",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "restrictInputLength",
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "handleInput",
@@ -318,25 +298,6 @@
               "name": "handleKeyDown",
               "privacy": "private"
             },
-            {
-              "kind": "method",
-              "name": "renderLabel",
-              "parameters": [
-                {
-                  "name": "label",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "maxLength",
-                  "optional": true,
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
             {
               "kind": "method",
               "name": "renderAssistiveText"
@@ -382,17 +343,6 @@
               "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

@@ -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.
@@ -35,8 +35,6 @@ 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;
@@ -67,7 +65,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 +79,6 @@ export declare class PieTextarea extends PieTextarea_base implements TextareaPro
     private handleChange;
     private handleKeyDown;
     disconnectedCallback(): void;
-    renderLabel(label: string, maxLength?: number): TemplateResult<1> | typeof nothing;
     renderAssistiveText(): TemplateResult<1> | typeof nothing;
     render(): TemplateResult<1>;
     static styles: CSSResult;
@@ -151,15 +147,6 @@ 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;
     /**
      * The placeholder text to display when the textarea is empty.
      */

package/dist/index.js

@@ -1,106 +1,104 @@
-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 F, nothing as K, html as R, unsafeCSS as P } from "lit";
+import { property as d, query as q } 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 g } 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";
+import { FormControlMixin as U, RtlMixin as X, wrapNativeEvent as J, validPropertyValues as w, 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 B = "Expected a function", L = 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, _ = 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 l, i, p, u, s, h, v = 0, k = !1, f = !1, m = !0;
+  if (typeof e != "function")
+    throw new TypeError(B);
+  t = M(t) || 0, S(a) && (k = !!a.leading, f = "maxWait" in a, p = f ? ce(M(a.maxWait) || 0, t) : p, m = "trailing" in a ? !!a.trailing : m);
+  function y(r) {
+    var x = l, z = i;
+    return l = i = void 0, v = r, u = e.apply(z, x), u;
   }
-  function _(i) {
-    return x = i, d = setTimeout($, e), k ? g(i) : u;
+  function D(r) {
+    return v = 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 V(r) {
+    var x = r - h, z = r - v, I = t - x;
+    return f ? ue(I, p - z) : I;
   }
-  function O(i) {
-    var f = i - p, z = i - x;
-    return p === void 0 || f >= e || f < 0 || v && z >= h;
+  function O(r) {
+    var x = r - h, z = r - v;
+    return h === void 0 || x >= t || x < 0 || f && z >= p;
   }
   function $() {
-    var i = w();
-    if (O(i))
-      return F(i);
-    d = setTimeout($, E(i));
+    var r = _();
+    if (O(r))
+      return C(r);
+    s = setTimeout($, V(r));
   }
-  function F(i) {
-    return d = void 0, y && s ? g(i) : (s = o = void 0, u);
+  function C(r) {
+    return s = void 0, m && l ? y(r) : (l = i = void 0, u);
   }
   function A() {
-    d !== void 0 && clearTimeout(d), x = 0, s = p = o = d = void 0;
+    s !== void 0 && clearTimeout(s), v = 0, l = h = i = s = void 0;
   }
-  function K() {
-    return d === void 0 ? u : F(w());
+  function N() {
+    return s === void 0 ? u : C(_());
   }
-  function L() {
-    var i = w(), f = O(i);
-    if (s = arguments, o = this, p = i, f) {
-      if (d === void 0)
-        return _(p);
-      if (v)
-        return d = setTimeout($, e), g(p);
+  function E() {
+    var r = _(), x = O(r);
+    if (l = arguments, i = this, h = r, x) {
+      if (s === void 0)
+        return D(h);
+      if (f)
+        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 E.cancel = A, E.flush = N, E;
 }
-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,
-    trailing: o
+function he(e, t, a) {
+  var l = !0, i = !0;
+  if (typeof e != "function")
+    throw new TypeError(B);
+  return S(a) && (l = "leading" in a ? !!a.leading : l, i = "trailing" in a ? !!a.trailing : i), pe(e, t, {
+    leading: l,
+    maxWait: t,
+    trailing: i
   });
 }
-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 M(e) {
+  if (typeof e == "number")
+    return e;
+  if (xe(e))
+    return L;
+  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) ? L : +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",
   resize: "auto",
-  label: "",
   value: "",
   placeholder: "",
   status: "default",
@@ -108,22 +106,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, l) => {
+  for (var i = void 0, p = e.length - 1, u; p >= 0; p--)
+    (u = e[p]) && (i = u(t, a, i) || i);
+  return i && ke(t, a, i), i;
 };
-const m = "pie-textarea", I = "assistive-text", W = class W extends U(X(M)) {
+const b = "pie-textarea", j = "assistive-text", W = class W extends U(X(F)) {
   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(() => {
+    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.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 +137,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 +148,67 @@ 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;
-  }
   renderAssistiveText() {
-    return this.assistiveText ? j`
+    return this.assistiveText ? R`
             <pie-assistive-text
-                id="${I}"
-                variant=${b(this.status)}
+                id="${j}"
+                variant=${g(this.status)}
                 data-test-id="pie-textarea-assistive-text">
                 ${this.assistiveText}
             </pie-assistive-text>
-        ` : q;
+        ` : K;
   }
   render() {
     const {
-      disabled: e,
+      disabled: t,
       resize: a,
-      size: s,
-      autocomplete: o,
-      autoFocus: h,
+      size: l,
+      autocomplete: i,
+      autoFocus: p,
       name: u,
-      readonly: d,
-      placeholder: p,
-      value: x,
+      readonly: s,
+      placeholder: h,
+      value: v,
       required: k,
-      label: v,
-      maxLength: y,
-      status: g,
-      assistiveText: _
-    } = this, E = {
+      status: f,
+      assistiveText: m
+    } = this, y = {
       "c-textareaWrapper": !0,
-      "c-textarea--disabled": e,
-      "c-textarea--readonly": d,
-      "c-textarea--error": g === "error",
+      "c-textarea--disabled": t,
+      "c-textarea--readonly": s,
+      "c-textarea--error": f === "error",
       [`c-textarea--resize-${a}`]: !0,
-      [`c-textarea--${s}`]: !0
+      [`c-textarea--${l}`]: !0
     };
-    return j`<div>
-            ${this.renderLabel(v, y)}
+    return R`<div>
             <div
-                class="${G(E)}"
+                class="${G(y)}"
                 data-test-id="pie-textarea-wrapper">
                 <textarea
-                    id="${m}"
-                    data-test-id="${m}"
-                    name=${b(u)}
-                    autocomplete=${b(o)}
-                    placeholder=${b(p)}
-                    .value=${H(x)}
-                    ?autofocus=${h}
-                    ?readonly=${d}
+                    id="${b}"
+                    data-test-id="${b}"
+                    name=${g(u)}
+                    autocomplete=${g(i)}
+                    placeholder=${g(h)}
+                    .value=${H(v)}
+                    ?autofocus=${p}
+                    ?readonly=${s}
                     ?required=${k}
-                    ?disabled=${e}
-                    aria-describedby=${b(_ ? I : void 0)}
-                    aria-invalid=${g === "error" ? "true" : "false"}
-                    aria-errormessage="${b(g === "error" ? I : void 0)}"
+                    ?disabled=${t}
+                    aria-describedby=${g(m ? j : void 0)}
+                    aria-invalid=${f === "error" ? "true" : "false"}
+                    aria-errormessage="${g(f === "error" ? j : void 0)}"
                     @input=${this.handleInput}
                     @change=${this.handleChange}
                 ></textarea>
@@ -232,65 +217,59 @@ 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;
-n([
-  l({ type: String })
-], r.prototype, "value");
-n([
-  l({ type: String })
-], r.prototype, "defaultValue");
+W.shadowRootOptions = { ...F.shadowRootOptions, delegatesFocus: !0 }, W.styles = P(be);
+let o = W;
 n([
-  l({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled");
+  d({ type: String })
+], o.prototype, "value");
 n([
-  l({ type: String }),
-  C(m, me, c.size)
-], r.prototype, "size");
+  d({ type: String })
+], o.prototype, "defaultValue");
 n([
-  l({ type: String }),
-  C(m, ye, c.resize)
-], r.prototype, "resize");
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled");
 n([
-  l({ type: String })
-], r.prototype, "label");
+  d({ type: String }),
+  w(b, me, c.size)
+], o.prototype, "size");
 n([
-  l({ type: Number })
-], r.prototype, "maxLength");
+  d({ type: String }),
+  w(b, ye, c.resize)
+], o.prototype, "resize");
 n([
-  l({ type: Boolean })
-], r.prototype, "readonly");
+  d({ type: Boolean })
+], o.prototype, "readonly");
 n([
-  l({ type: Boolean })
-], r.prototype, "autoFocus");
+  d({ type: Boolean })
+], o.prototype, "autoFocus");
 n([
-  l({ type: Boolean })
-], r.prototype, "required");
+  d({ type: Boolean })
+], o.prototype, "required");
 n([
-  l({ type: String }),
-  C(m, ze, c.status)
-], r.prototype, "status");
+  d({ type: String }),
+  w(b, ze, c.status)
+], o.prototype, "status");
 n([
-  l({ type: String })
-], r.prototype, "assistiveText");
+  d({ type: String })
+], o.prototype, "assistiveText");
 n([
-  l({ type: String })
-], r.prototype, "name");
+  d({ type: String })
+], o.prototype, "name");
 n([
-  l({ type: String })
-], r.prototype, "autocomplete");
+  d({ type: String })
+], o.prototype, "autocomplete");
 n([
-  l({ type: String })
-], r.prototype, "placeholder");
+  d({ type: String })
+], o.prototype, "placeholder");
 n([
-  V("textarea")
-], r.prototype, "_textarea");
+  q("textarea")
+], o.prototype, "_textarea");
 n([
-  V("textarea")
-], r.prototype, "focusTarget");
-Q(m, r);
+  q("textarea")
+], o.prototype, "focusTarget");
+Q(b, o);
 export {
-  r as PieTextarea,
+  o 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.
@@ -38,8 +38,6 @@ declare class PieTextarea_2 extends PieTextarea_base implements TextareaProps, P
     disabled: boolean;
     size: "small" | "medium" | "large";
     resize: "auto" | "manual";
-    label: string;
-    maxLength: TextareaProps['maxLength'];
     readonly: boolean;
     autoFocus: boolean;
     required: boolean;
@@ -70,7 +68,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 +82,6 @@ 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;
     renderAssistiveText(): TemplateResult<1> | typeof nothing;
     render(): TemplateResult<1>;
     static styles: CSSResult;
@@ -161,15 +157,6 @@ 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;
     /**
      * 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.13.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -42,7 +42,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-form-label": "0.14.4",
+    "@justeattakeaway/pie-assistive-text": "0.8.0",
     "@justeattakeaway/pie-webc-core": "0.24.2",
     "lodash.throttle": "4.1.1"
   },

package/src/defs.ts

@@ -71,17 +71,6 @@ export interface TextareaProps {
      */
     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 placeholder text to display when the textarea is empty.
      */
@@ -91,7 +80,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.
@@ -100,7 +89,6 @@ export const defaultProps: DefaultProps = {
     disabled: false,
     size: 'medium',
     resize: 'auto',
-    label: '',
     value: '',
     placeholder: '',
     status: 'default',

package/src/index.ts

@@ -8,7 +8,6 @@ import { live } from 'lit/directives/live.js';
 import throttle from 'lodash.throttle';
 
 import '@justeattakeaway/pie-assistive-text';
-import '@justeattakeaway/pie-form-label';
 import {
     validPropertyValues, RtlMixin, defineCustomElement, FormControlMixin, wrapNativeEvent, type PIEInputElement,
 } from '@justeattakeaway/pie-webc-core';
@@ -49,12 +48,6 @@ 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;
 
@@ -122,7 +115,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 +125,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 +151,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
             this.value = newValue;
         }
 
-        this.restrictInputLength();
         this._internals.setFormValue(this.value);
 
         this.handleResize();
@@ -196,14 +177,6 @@ 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;
-
-        return label?.length
-            ? html`<pie-form-label for="${componentSelector}" trailing=${ifDefined(characterCount)}>${label}</pie-form-label>`
-            : nothing;
-    }
-
     renderAssistiveText () {
         if (!this.assistiveText) {
             return nothing;
@@ -231,8 +204,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
             placeholder,
             value,
             required,
-            label,
-            maxLength,
             status,
             assistiveText,
         } = this;
@@ -247,7 +218,6 @@ export class PieTextarea extends FormControlMixin(RtlMixin(LitElement)) implemen
         };
 
         return html`<div>
-            ${this.renderLabel(label, maxLength)}
             <div
                 class="${classMap(classes)}"
                 data-test-id="pie-textarea-wrapper">