@justeattakeaway/pie-text-input 0.22.2 → 0.23.1

package/README.md

@@ -8,17 +8,6 @@
   </a>
 </p>
 
-# Table of Contents
-
-1. [Introduction](#pie-text-input)
-2. [Installation](#installation)
-3. [Importing the component](#importing-the-component)
-4. [Peer Dependencies](#peer-dependencies)
-5. [Props](#props)
-6. [Events](#events)
-7. [Slots](#slots)
-8. [Contributing](#contributing)
-
 ## pie-text-input
 
 `pie-text-input` is a Web Component built using the Lit library.
@@ -33,117 +22,21 @@ To install `pie-text-input` in your application, run the following on your comma
 _Note: Versions of this component prior to v0.19.0 were named `pie-input`._
 
 ```bash
-# npm
-$ npm i @justeattakeaway/pie-text-input
-
-# yarn
-$ yarn add @justeattakeaway/pie-text-input
+npm i @justeattakeaway/pie-text-input
+```
+```bash
+yarn add @justeattakeaway/pie-text-input
 ```
 
 For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
 
+## Documentation
 
-### Importing the component
-
-#### JavaScript
-```js
-// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
-import { PieTextInput } from '@justeattakeaway/pie-text-input';
+Visit  [Text Input | PIE Design System](https://pie.design/components/text-input/code) to view more information on this component.
 
-// If you don't need to reference the imported object, you can simply
-// import the module which registers the component as a custom element.
-import '@justeattakeaway/pie-text-input';
-```
-
-#### React
-```js
-// React
-// For React, you will need to import our React-specific component build
-// which wraps the web component using ​@lit/react
-import { PieTextInput } from '@justeattakeaway/pie-text-input/dist/react';
-```
-
-> [!NOTE]
-> When using the React version of the component, please make sure to also
-> include React as a [peer dependency](#peer-dependencies) in your project.
-
-
-## Peer Dependencies
-
-> [!IMPORTANT]
-> When using `pie-text-input`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
-
-
-## Props
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `autocomplete` | `string` | - | Allows the user to enable or disable autocomplete functionality on the input field. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for more information and values. |
-| `autoFocus` | `boolean` | - | If true, the input will be focused on the first render. No more than one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) for more information. |
-| `inputmode` | `'none'`, `'text'`, `'tel'`, `'url'`, `'email'`, `'numeric'`, `'decimal'`, `'search'` | - | Provides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#inputmode) for more information. |
-| `maxlength` | `number` | - | Maximum length (number of characters) of value. Only applies to types: `text`, `url`, `tel`, `email`, and `password`. |
-| `minlength` | `number` | - | Minimum length (number of characters) of value. Only applies to types: `text`, `url`, `tel`, `email`, and `password`. |
-| `name` | `string` | - | The name of the input (used as a key/value pair with `value`). This is required in order to work properly with forms. |
-| `pattern` | `string` | - | Specifies a regular expression the form control's value should match. |
-| `placeholder` | `string` | - | The placeholder text to display when the input is empty. Only applies to types: `text`, `url`, `tel`, `email`, and `password`. |
-| `readonly` | `boolean` | - | When true, the user cannot edit the control. Not the same as disabled. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information. |
-| `type` | `'text'`, `'number'`, `'password'`, `'url'`, `'email'`, `'tel'` | `text` | The type of HTML input to render. |
-| `value` | `string` | `''` | The value of the input (used as a key/value pair in HTML forms with `name`). |
-| `assistiveText` | `string` | `''` | Allows assistive text to be displayed below the input element. |
-| `status` | `'error'`, `'success'` | `undefined` | The status of the input component / assistive text. If you use `status` you must provide an `assistiveText` prop value for accessibility purposes. |
-| `step` | `number` | - | An optional amount that value should be incremented or decremented by when using the up and down arrows in the input. Only applies when type is `number`. |
-| `min` | `number` | - | The minimum value of the input. Only applies when type is `number`. If the value provided is lower, the input is invalid. |
-| `max` | `number` | - | The maximum value of the input. Only applies when type is `number`. If the value provided is higher, the input is invalid. |
-| `size` | `'small'`, `'medium'`, `'large'` | `medium` | The size of the input field. Can be `small`, `medium`, or `large`. Defaults to `medium`. |
-| `required` | `boolean` | `false` | If true, the input is required to have a value before submitting the form. If there is no value, then the component validity state will be invalid. |
-
-In your markup or JSX, you can then use these to set the properties for the `pie-text-input` component:
-
-```html
-<!-- Native HTML -->
-<pie-text-input
-    autocomplete="on"
-    autoFocus
-    inputmode="text"
-    maxlength="8"
-    minlength="4"
-    name="myinput"
-    pattern="[a-z]{4,8}"
-    placeholder="Please enter a value"
-    readonly
-    type="text"
-    value="">
-</pie-text-input>
-
-<!-- JSX -->
-<PieTextInput
-    autocomplete="on"
-    autoFocus
-    inputmode="text"
-    maxlength={8}
-    minlength={4}
-    name="myinput"
-    pattern="[a-z]{4,8}"
-    placeholder="Please enter a value"
-    readonly
-    type="text"
-    value="">
-</PieTextInput>
-```
+## Questions
 
-## Events
-| Event | Type | Description |
-|-------|------|-------------|
-| `change` | `CustomEvent` | Triggered when the input loses focus after it's value has changed. |
-| `input` | `InputEvent` | Triggered when the input value is changed. |
-
-## Slots
-| Slot | Description |
-|------|-------------|
-| `leadingText` | Short text to display at the start of the input. Wrap the text in a `<span>`. Do not use with `leadingIcon` at the same time. |
-| `leadingIcon` | An icon to display at the start of the input. Do not use with `leadingText` at the same time. |
-| `trailingText` | Short text to display at the end of the input. Wrap the text in a `<span>`. Do not use with `trailingIcon` at the same time. |
-| `trailingIcon` | An icon to display at the end of the input. Do not use with `trailingText` at the same time. |
+Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
 
 ## Contributing
 

package/custom-elements.json

@@ -32,9 +32,9 @@
           "kind": "variable",
           "name": "statusTypes",
           "type": {
-            "text": "['success', 'error']"
+            "text": "['default', 'success', 'error']"
           },
-          "default": "['success', 'error']"
+          "default": "['default', 'success', 'error']"
         },
         {
           "kind": "variable",
@@ -50,7 +50,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    type: 'text',\n    value: '',\n    size: 'medium',\n}",
+          "default": "{\n    type: 'text',\n    value: '',\n    size: 'medium',\n    status: 'default',\n}",
           "description": "Default values for optional properties that have default fallback values in the component."
         }
       ],

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
@@ -11,7 +11,7 @@ import type { TemplateResult } from 'lit-html';
 /**
  * The default values for the `TextInputProps` that are required (i.e. they have a fallback value in the component).
  */
-declare type DefaultProps = ComponentDefaultPropsGeneric<TextInputProps, 'type' | 'value' | 'size'>;
+declare type DefaultProps = ComponentDefaultProps<TextInputProps, 'type' | 'value' | 'size' | 'status'>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -94,7 +94,7 @@ declare const PieTextInput_base: GenericConstructor<FormControlInterface> & Gene
 
 export declare const sizes: readonly ["small", "medium", "large"];
 
-export declare const statusTypes: readonly ["success", "error"];
+export declare const statusTypes: readonly ["default", "success", "error"];
 
 export declare interface TextInputProps {
     /**
@@ -155,11 +155,11 @@ export declare interface TextInputProps {
      */
     defaultValue?: string;
     /**
-     * An optional assistive text to display below the input element.
+     * An optional assistive text to display below the input element. Must be provided when the status is success or error.
      */
     assistiveText?: string;
     /**
-     * The status of the input component / assistive text such as error, success or default.
+     * The status of the input component / assistive text. Can be default, success or error.
      */
     status?: typeof statusTypes[number];
     /**

package/dist/index.js

@@ -2,17 +2,18 @@ import { LitElement as pt, html as ut, nothing as At, unsafeCSS as Vt } from "li
 import { property as u, query as mt } from "lit/decorators.js";
 import { ifDefined as m } from "lit/directives/if-defined.js";
 import { live as J } from "lit/directives/live.js";
-import { FormControlMixin as Nt, RtlMixin as Lt, wrapNativeEvent as $t, validPropertyValues as ht, defineCustomElement as Ot } from "@justeattakeaway/pie-webc-core";
+import { FormControlMixin as Nt, RtlMixin as Lt, wrapNativeEvent as $t, validPropertyValues as ft, defineCustomElement as Ot } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-assistive-text";
 const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-block: var(--dt-spacing-c);--input-padding-inline: var(--dt-spacing-d);--input-gap: var(--dt-spacing-d);--input-text-color: var(--dt-color-content-default);--input-text-color-leading-trailing-content: var(--dt-color-content-default);--input-text-color-placeholder: var(--dt-color-content-subdued);--input-border-color: var(--dt-color-interactive-form);--input-container-color: var(--dt-color-container-default);--input-radius: var(--dt-radius-rounded-c);--input-font-size: var(--dt-font-body-l-size);--input-height: 48px;--input-cursor: text;--icon-display-override: block;--icon-size-override: 24px;height:var(--input-height);border:1px solid var(--input-border-color);border-radius:var(--input-radius);padding-inline-start:var(--input-padding-inline);padding-inline-end:var(--input-padding-inline);padding-block-start:var(--input-padding-block);padding-block-end:var(--input-padding-block);line-height:24px;font-size:var(--input-font-size);display:flex;flex-wrap:nowrap;align-items:center;background-color:var(--input-container-color);color:var(--input-text-color-leading-trailing-content);cursor:var(--input-cursor)}.c-textInput[data-pie-size=large]{--input-padding-block: var(--dt-spacing-d);--input-height: 56px}.c-textInput[data-pie-size=small]{--input-padding-block: var(--dt-spacing-b);--input-height: 40px}.c-textInput[data-pie-status=error]{--input-border-color: var(--dt-color-support-error)}.c-textInput ::slotted([slot=leadingText]),.c-textInput ::slotted([slot=leadingIcon]){margin-inline-end:var(--input-gap)}.c-textInput ::slotted([slot=trailingText]),.c-textInput ::slotted([slot=trailingIcon]){margin-inline-start:var(--input-gap)}@supports (gap: var(--input-gap)){.c-textInput{gap:var(--input-gap)}.c-textInput ::slotted([slot=leadingText]),.c-textInput ::slotted([slot=leadingIcon]){margin-inline-end:0}.c-textInput ::slotted([slot=trailingText]),.c-textInput ::slotted([slot=trailingIcon]){margin-inline-start:0}}.c-textInput:not([data-pie-disabled]) ::slotted([slot=leadingIcon]),.c-textInput:not([data-pie-disabled]) ::slotted([slot=trailingIcon]){color:var(--dt-color-content-subdued)}@media (hover: hover){.c-textInput:hover{--input-container-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-textInput[data-pie-readonly]{--input-container-color: var(--dt-color-disabled-01);--input-border-color: var(--dt-color-interactive-form)}.c-textInput[data-pie-disabled][data-pie-readonly],.c-textInput[data-pie-disabled]{--input-container-color: var(--dt-color-disabled-01);--input-border-color: var(--dt-color-disabled-01);--input-text-color: var(--dt-color-content-disabled);--input-text-color-placeholder: var(--dt-color-content-disabled);--input-text-color-leading-trailing-content: var(--dt-color-content-disabled);--input-cursor: auto}.c-textInput:focus-within{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}input{border:0;outline:0;height:24px;padding:0;color:var(--input-text-color);width:100%;font-size:var(--input-font-size);font-family:inherit;background:none;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}input::placeholder{color:var(--input-text-color-placeholder)}input:disabled{-webkit-text-fill-color:var(--input-text-color);color:var(--input-text-color);-webkit-opacity:1;opacity:1}input[type=number]:not([step])::-webkit-inner-spin-button,input[type=number]:not([step])::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]:not([step]){-moz-appearance:textfield}
-`, Rt = ["text", "number", "password", "url", "email", "tel"], Gt = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], _t = ["success", "error"], Jt = ["small", "medium", "large"], A = {
+`, Rt = ["text", "number", "password", "url", "email", "tel"], Gt = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], _t = ["default", "success", "error"], Jt = ["small", "medium", "large"], T = {
   type: "text",
   value: "",
-  size: "medium"
+  size: "medium",
+  status: "default"
 };
 (function() {
   (function(E) {
-    const s = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), k = {
+    const s = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), N = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), S = {
       ariaAtomic: "aria-atomic",
       ariaAutoComplete: "aria-autocomplete",
       ariaBusy: "aria-busy",
@@ -56,16 +57,16 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
       ariaValueText: "aria-valuetext",
       role: "role"
     }, H = (e, t) => {
-      for (let a in k) {
+      for (let a in S) {
         t[a] = null;
         let i = null;
-        const o = k[a];
+        const o = S[a];
         Object.defineProperty(t, a, {
           get() {
             return i;
           },
           set(n) {
-            i = n, e.isConnected ? e.setAttribute(o, n) : T.set(e, t);
+            i = n, e.isConnected ? e.setAttribute(o, n) : k.set(e, t);
           }
         });
       }
@@ -97,12 +98,12 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
       e.forEach((t) => {
         const { addedNodes: a, removedNodes: i } = t, o = Array.from(a), n = Array.from(i);
         o.forEach((r) => {
-          var h;
-          if (c.has(r) && r.constructor.formAssociated && O(r), T.has(r)) {
-            const p = T.get(r);
-            Object.keys(k).filter((v) => p[v] !== null).forEach((v) => {
-              r.setAttribute(k[v], p[v]);
-            }), T.delete(r);
+          var f;
+          if (c.has(r) && r.constructor.formAssociated && O(r), k.has(r)) {
+            const p = k.get(r);
+            Object.keys(S).filter((v) => p[v] !== null).forEach((v) => {
+              r.setAttribute(S[v], p[v]);
+            }), k.delete(r);
           }
           if (b.has(r)) {
             const p = b.get(r);
@@ -118,14 +119,14 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
             for (; v; )
               O(v), v = x.nextNode();
           }
-          r.localName === "fieldset" && ((h = R.observe) === null || h === void 0 || h.call(R, r, Y), P(r, !0));
+          r.localName === "fieldset" && ((f = R.observe) === null || f === void 0 || f.call(R, r, Y), P(r, !0));
         }), n.forEach((r) => {
-          const h = c.get(r);
-          h && g.get(h) && Z(h), S.has(r) && S.get(r).disconnect();
+          const f = c.get(r);
+          f && g.get(f) && Z(f), C.has(r) && C.get(r).disconnect();
         });
       });
     }
-    function ft(e) {
+    function ht(e) {
       e.forEach((t) => {
         const { removedNodes: a } = t;
         a.forEach((i) => {
@@ -136,7 +137,7 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
     }
     const gt = (e) => {
       var t, a;
-      const i = new MutationObserver(ft);
+      const i = new MutationObserver(ht);
       !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (a = i.observe) === null || a === void 0 || a.call(i, e, { childList: !0 }), $.set(e, i);
     };
     z() && new MutationObserver(W);
@@ -175,7 +176,7 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
           const o = y.get(e);
           if (e.noValidate)
             return;
-          o.size && Array.from(o).reverse().map((h) => c.get(h).reportValidity()).includes(!1) && a.preventDefault();
+          o.size && Array.from(o).reverse().map((f) => c.get(f).reportValidity()).includes(!1) && a.preventDefault();
         }
       });
     }, xt = (e) => {
@@ -275,10 +276,10 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
       return i === "a" ? o.call(e, a) : o ? o.value = a : t.set(e, a), a;
     }
-    var F;
+    var A;
     class St {
       constructor(t) {
-        F.set(this, void 0), kt(this, F, t, "f");
+        A.set(this, void 0), kt(this, A, t, "f");
         for (let a = 0; a < t.length; a++) {
           let i = t[a];
           this[a] = i, i.hasAttribute("name") && (this[i.getAttribute("name")] = i);
@@ -286,10 +287,10 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
         Object.freeze(this);
       }
       get length() {
-        return rt(this, F, "f").length;
+        return rt(this, A, "f").length;
       }
-      [(F = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-        return rt(this, F, "f")[Symbol.iterator]();
+      [(A = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+        return rt(this, A, "f")[Symbol.iterator]();
       }
       item(t) {
         return this[t] == null ? null : this[t];
@@ -314,10 +315,10 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
       const { get: o } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
       Object.defineProperty(HTMLFormElement.prototype, "elements", {
         get(...n) {
-          const r = o.call(this, ...n), h = Array.from(y.get(this) || []);
-          if (h.length === 0)
+          const r = o.call(this, ...n), f = Array.from(y.get(this) || []);
+          if (f.length === 0)
             return r;
-          const p = Array.from(r).concat(h).sort((x, v) => x.compareDocumentPosition ? x.compareDocumentPosition(v) & 2 ? 1 : -1 : 0);
+          const p = Array.from(r).concat(f).sort((x, v) => x.compareDocumentPosition ? x.compareDocumentPosition(v) & 2 ? 1 : -1 : 0);
           return new St(p);
         }
       });
@@ -330,13 +331,13 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
         if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
         const a = t.getRootNode(), i = new Et();
-        this.states = new j(t), s.set(this, t), f.set(this, i), c.set(t, this), H(t, this), yt(t, this), Object.seal(this), a instanceof DocumentFragment && gt(a);
+        this.states = new j(t), s.set(this, t), h.set(this, i), c.set(t, this), H(t, this), yt(t, this), Object.seal(this), a instanceof DocumentFragment && gt(a);
       }
       checkValidity() {
         const t = s.get(this);
         if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
-        const a = f.get(this);
+        const a = h.get(this);
         if (!a.valid) {
           const i = new Event("invalid", {
             bubbles: !1,
@@ -389,13 +390,13 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
         if (w(o, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
           throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
         L.set(this, i);
-        const n = f.get(this), r = {};
+        const n = h.get(this), r = {};
         for (const x in t)
           r[x] = t[x];
         Object.keys(r).length === 0 && Mt(n);
-        const h = Object.assign(Object.assign({}, n), r);
-        delete h.valid;
-        const { valid: p } = It(n, h, this.form);
+        const f = Object.assign(Object.assign({}, n), r);
+        delete f.valid;
+        const { valid: p } = It(n, f, this.form);
         if (!p && !a)
           throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
         M.set(this, p ? "" : a), o.isConnected ? (o.toggleAttribute("internals-invalid", !p), o.toggleAttribute("internals-valid", p), o.setAttribute("aria-invalid", `${!p}`)) : b.set(o, this);
@@ -410,7 +411,7 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
       }
       get validity() {
         const t = s.get(this);
-        return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), f.get(this);
+        return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), h.get(this);
       }
       get willValidate() {
         const t = s.get(this);
@@ -456,7 +457,7 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
             if (i.formAssociated) {
               const n = i.prototype.connectedCallback;
               i.prototype.connectedCallback = function() {
-                C.has(this) || (C.set(this, !0), this.hasAttribute("disabled") && B(this, !0)), n != null && n.apply(this), ot(this);
+                F.has(this) || (F.set(this, !0), this.hasAttribute("disabled") && B(this, !0)), n != null && n.apply(this), ot(this);
               };
             }
             t.call(this, a, i, o);
@@ -476,7 +477,7 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
             const o = a.apply(this, i);
             if (N.set(this, o), z()) {
               const n = new MutationObserver(W);
-              window.ShadyDOM ? n.observe(this, q) : n.observe(o, q), S.set(this, n);
+              window.ShadyDOM ? n.observe(this, q) : n.observe(o, q), C.set(this, n);
             }
             return o;
           };
@@ -489,19 +490,19 @@ const Pt = `*,*:after,*:before{box-sizing:inherit}.c-textInput{--input-padding-b
     return !!customElements.polyfillWrapFlushCallback || (Ft() ? typeof window < "u" && !window.CustomStateSet && K(HTMLElement.prototype.attachInternals) : dt(!1)), E.forceCustomStateSetPolyfill = K, E.forceElementInternalsPolyfill = dt, Object.defineProperty(E, "__esModule", { value: !0 }), E;
   })({});
 })();
-var Dt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, d = (E, s, f, g) => {
-  for (var c = g > 1 ? void 0 : g ? zt(s, f) : s, M = E.length - 1, I; M >= 0; M--)
-    (I = E[M]) && (c = (g ? I(s, f, c) : I(c)) || c);
-  return g && c && Dt(s, f, c), c;
+var Dt = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, d = (E, s, h, g) => {
+  for (var c = g > 1 ? void 0 : g ? zt(s, h) : s, M = E.length - 1, I; M >= 0; M--)
+    (I = E[M]) && (c = (g ? I(s, h, c) : I(c)) || c);
+  return g && c && Dt(s, h, c), c;
 };
 const X = "pie-text-input", Q = "assistive-text";
 class l extends Nt(Lt(pt)) {
   constructor() {
-    super(...arguments), this.type = A.type, this.value = A.value, this.size = A.size, this.required = !1, this.handleInput = (s) => {
+    super(...arguments), this.type = T.type, this.value = T.value, this.status = T.status, this.size = T.size, this.required = !1, this.handleInput = (s) => {
       this.value = s.target.value, this._internals.setFormValue(this.value);
     }, this.handleChange = (s) => {
-      const f = $t(s);
-      this.dispatchEvent(f);
+      const h = $t(s);
+      this.dispatchEvent(h);
     };
   }
   /**
@@ -525,7 +526,7 @@ class l extends Nt(Lt(pt)) {
    * Resets the value to the default value.
    */
   formResetCallback() {
-    this.value = this.defaultValue ?? A.value, this.input && (this.input.value = this.value), this._internals.setFormValue(this.value);
+    this.value = this.defaultValue ?? T.value, this.input && (this.input.value = this.value), this._internals.setFormValue(this.value);
   }
   firstUpdated(s) {
     super.firstUpdated(s), this._internals.setFormValue(this.value);
@@ -536,21 +537,21 @@ class l extends Nt(Lt(pt)) {
   render() {
     const {
       assistiveText: s,
-      autocomplete: f,
+      autocomplete: h,
       autoFocus: g,
       disabled: c,
       inputmode: M,
       maxlength: I,
-      minlength: S,
+      minlength: C,
       min: y,
       max: V,
-      name: T,
+      name: k,
       pattern: N,
       step: L,
       placeholder: $,
-      readonly: C,
+      readonly: F,
       status: b,
-      type: k,
+      type: S,
       value: H,
       size: O,
       required: P
@@ -562,7 +563,7 @@ class l extends Nt(Lt(pt)) {
                 data-pie-size=${m(O)}
                 data-pie-status=${m(b)}
                 ?data-pie-disabled=${J(c)}
-                ?data-pie-readonly=${C}>
+                ?data-pie-readonly=${F}>
                 <!-- The reason for separate slots for icons and text is that we cannot programmatically be aware of the
                 HTML used inside of the slot without breaking SSR in consuming applications (icons need to use different colours than text content)
                 Therefore, we provide two slots and advise consumers do not attempt to use both leading/trailing at the same time
@@ -570,21 +571,21 @@ class l extends Nt(Lt(pt)) {
                 <slot name="leadingIcon"></slot>
                 <slot name="leadingText"></slot>
                 <input
-                    type=${m(k)}
+                    type=${m(S)}
                     .value=${J(H)}
-                    name=${m(T)}
+                    name=${m(k)}
                     ?disabled=${J(c)}
                     pattern=${m(N)}
                     step=${m(L)}
-                    minlength=${m(S)}
+                    minlength=${m(C)}
                     maxlength=${m(I)}
                     min=${m(y)}
                     max=${m(V)}
-                    autocomplete=${m(f)}
+                    autocomplete=${m(h)}
                     ?autofocus=${g}
                     inputmode=${m(M)}
                     placeholder=${m($)}
-                    ?readonly=${C}
+                    ?readonly=${F}
                     ?required=${P}
                     aria-describedby=${m(s ? Q : void 0)}
                     aria-invalid=${b === "error" ? "true" : "false"}
@@ -599,14 +600,21 @@ class l extends Nt(Lt(pt)) {
                 <slot name="trailingIcon"></slot>
                 <slot name="trailingText"></slot>
             </div>
-            ${s ? ut`<pie-assistive-text id="${Q}" variant=${m(b)} data-test-id="pie-text-input-assistive-text">${s}</pie-assistive-text>` : At}`;
+            ${s ? ut`
+                <pie-assistive-text
+                    id="${Q}"
+                    variant=${m(b)}
+                    data-test-id="pie-text-input-assistive-text">
+                    ${s}
+                </pie-assistive-text>
+            ` : At}`;
   }
 }
 l.shadowRootOptions = { ...pt.shadowRootOptions, delegatesFocus: !0 };
 l.styles = Vt(Pt);
 d([
   u({ type: String, reflect: !0 }),
-  ht(X, Rt, A.type)
+  ft(X, Rt, T.type)
 ], l.prototype, "type", 2);
 d([
   u({ type: String })
@@ -649,7 +657,7 @@ d([
 ], l.prototype, "assistiveText", 2);
 d([
   u({ type: String }),
-  ht(X, _t, void 0)
+  ft(X, _t, T.status)
 ], l.prototype, "status", 2);
 d([
   u({ type: Number })
@@ -675,7 +683,7 @@ d([
 Ot(X, l);
 export {
   l as PieTextInput,
-  A as defaultProps,
+  T as defaultProps,
   Gt as inputModes,
   Jt as sizes,
   _t as statusTypes,

package/dist/react.d.ts

@@ -1,4 +1,4 @@
-import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
@@ -12,7 +12,7 @@ import type { TemplateResult } from 'lit-html';
 /**
  * The default values for the `TextInputProps` that are required (i.e. they have a fallback value in the component).
  */
-declare type DefaultProps = ComponentDefaultPropsGeneric<TextInputProps, 'type' | 'value' | 'size'>;
+declare type DefaultProps = ComponentDefaultProps<TextInputProps, 'type' | 'value' | 'size' | 'status'>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -104,7 +104,7 @@ declare type ReactBaseType = React_2.InputHTMLAttributes<HTMLInputElement>;
 
 export declare const sizes: readonly ["small", "medium", "large"];
 
-export declare const statusTypes: readonly ["success", "error"];
+export declare const statusTypes: readonly ["default", "success", "error"];
 
 export declare interface TextInputProps {
     /**
@@ -165,11 +165,11 @@ export declare interface TextInputProps {
      */
     defaultValue?: string;
     /**
-     * An optional assistive text to display below the input element.
+     * An optional assistive text to display below the input element. Must be provided when the status is success or error.
      */
     assistiveText?: string;
     /**
-     * The status of the input component / assistive text such as error, success or default.
+     * The status of the input component / assistive text. Can be default, success or error.
      */
     status?: typeof statusTypes[number];
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-text-input",
   "description": "PIE Design System Input built using Web Components",
-  "version": "0.22.2",
+  "version": "0.23.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -13,7 +13,7 @@
     "**/*.d.ts"
   ],
   "pieMetadata": {
-    "componentStatus": "alpha"
+    "componentStatus": "beta"
   },
   "scripts": {
     "build": "run -T vite build",
@@ -37,13 +37,13 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.16.0",
-    "@justeattakeaway/pie-icons-webc": "0.24.1",
+    "@justeattakeaway/pie-icons-webc": "0.24.2",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-assistive-text": "0.4.1",
-    "@justeattakeaway/pie-webc-core": "0.23.0",
+    "@justeattakeaway/pie-assistive-text": "0.5.1",
+    "@justeattakeaway/pie-webc-core": "0.24.0",
     "element-internals-polyfill": "1.3.11"
   },
   "volta": {

package/src/defs.ts

@@ -1,8 +1,8 @@
-import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
 export const types = ['text', 'number', 'password', 'url', 'email', 'tel'] as const;
 export const inputModes = ['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search'] as const;
-export const statusTypes = ['success', 'error'] as const;
+export const statusTypes = ['default', 'success', 'error'] as const;
 export const sizes = ['small', 'medium', 'large'] as const;
 
 export interface TextInputProps {
@@ -77,12 +77,12 @@ export interface TextInputProps {
     defaultValue?: string;
 
     /**
-     * An optional assistive text to display below the input element.
+     * An optional assistive text to display below the input element. Must be provided when the status is success or error.
      */
     assistiveText?: string;
 
     /**
-     * The status of the input component / assistive text such as error, success or default.
+     * The status of the input component / assistive text. Can be default, success or error.
      */
     status?: typeof statusTypes[number];
 
@@ -115,7 +115,7 @@ export interface TextInputProps {
 /**
  * The default values for the `TextInputProps` that are required (i.e. they have a fallback value in the component).
  */
-type DefaultProps = ComponentDefaultPropsGeneric<TextInputProps, 'type' | 'value' | 'size'>;
+type DefaultProps = ComponentDefaultProps<TextInputProps, 'type' | 'value' | 'size' | 'status'>;
 
 /**
  * Default values for optional properties that have default fallback values in the component.
@@ -124,4 +124,5 @@ export const defaultProps: DefaultProps = {
     type: 'text',
     value: '',
     size: 'medium',
+    status: 'default',
 };

package/src/index.ts

@@ -78,8 +78,8 @@ export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) impleme
     public assistiveText?: TextInputProps['assistiveText'];
 
     @property({ type: String })
-    @validPropertyValues(componentSelector, statusTypes, undefined)
-    public status?: TextInputProps['status'];
+    @validPropertyValues(componentSelector, statusTypes, defaultProps.status)
+    public status?: TextInputProps['status'] = defaultProps.status;
 
     @property({ type: Number })
     public step?: TextInputProps['step'];
@@ -239,7 +239,14 @@ export class PieTextInput extends FormControlMixin(RtlMixin(LitElement)) impleme
                 <slot name="trailingIcon"></slot>
                 <slot name="trailingText"></slot>
             </div>
-            ${assistiveText ? html`<pie-assistive-text id="${assistiveTextIdValue}" variant=${ifDefined(status)} data-test-id="pie-text-input-assistive-text">${assistiveText}</pie-assistive-text>` : nothing}`;
+            ${assistiveText ? html`
+                <pie-assistive-text
+                    id="${assistiveTextIdValue}"
+                    variant=${ifDefined(status)}
+                    data-test-id="pie-text-input-assistive-text">
+                    ${assistiveText}
+                </pie-assistive-text>
+            ` : nothing}`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite