@justeattakeaway/pie-text-input 0.29.19 → 0.29.20

package/custom-elements.json

@@ -50,7 +50,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\r\n    type: 'text',\r\n    value: '',\r\n    size: 'medium',\r\n    status: 'default',\r\n    disabled: false,\r\n    readonly: false,\r\n}",
+          "default": "{\n    type: 'text',\n    value: '',\n    size: 'medium',\n    status: 'default',\n    disabled: false,\n    readonly: false,\n}",
           "description": "Default values for optional properties that have default fallback values in the component."
         }
       ],
@@ -290,7 +290,7 @@
                 "text": "ValidityState"
               },
               "privacy": "public",
-              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
+              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
               "readonly": true
             },
             {
@@ -311,7 +311,7 @@
                   "description": "The latest disabled state of the input."
                 }
               ],
-              "description": "Called after the disabled state of the element changes,\r\neither because the disabled attribute of this element was added or removed;\r\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
+              "description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
             },
             {
               "kind": "method",
@@ -322,7 +322,7 @@
                   "text": "void"
                 }
               },
-              "description": "Called when the form that owns this component is reset.\r\nResets the value to the default value."
+              "description": "Called when the form that owns this component is reset.\nResets the value to the default value."
             },
             {
               "kind": "field",

package/dist/index.js

@@ -1,8 +1,8 @@
 import { LitElement as Vt, nothing as Nt, html as mt, unsafeCSS as Lt } from "lit";
-import { property as u, query as ft } from "lit/decorators.js";
-import { ifDefined as f } from "lit/directives/if-defined.js";
+import { property as u, query as ht } from "lit/decorators.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
 import { classMap as $t } from "lit/directives/class-map.js";
-import { live as ht } from "lit/directives/live.js";
+import { live as ft } from "lit/directives/live.js";
 import { FormControlMixin as Ot, RtlMixin as Pt, DelegatesFocusMixin as Rt, wrapNativeEvent as Dt, validPropertyValues as Y, safeCustomElement as _t } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-assistive-text";
 const z = class z extends Vt {
@@ -10,9 +10,9 @@ const z = class z extends Vt {
     this.getAttribute("v") || this.setAttribute("v", z.v);
   }
 };
-z.v = "0.29.19";
+z.v = "0.29.20";
 let X = z;
-const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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-placeholder);--input-border-color: var(--dt-color-border-form);--input-container-color: var(--dt-color-container-default);--input-radius: var(--dt-radius-rounded-c);--input-font-size: calc(var(--dt-font-body-l-size) * 1px);--input-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--input-height: 48px;--input-cursor: text;--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);font-size:var(--input-font-size);line-height:var(--input-line-height);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.c-textInput--large{--input-padding-block: var(--dt-spacing-d);--input-height: 56px}.c-textInput.c-textInput--small{--input-padding-block: var(--dt-spacing-b);--input-height: 40px}.c-textInput.c-textInput--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(.is-disabled) ::slotted([slot=leadingIcon]),.c-textInput:not(.is-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))))}@supports (background-color: color-mix(in srgb,black,white)){.c-textInput:hover{--input-container-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-textInput.c-textInput--readonly{--input-container-color: var(--dt-color-container-subtle);--input-border-color: var(--dt-color-border-form)}.c-textInput.is-disabled.c-textInput--readonly,.c-textInput.is-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);opacity:1}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}", zt = ["text", "number", "password", "url", "email", "tel"], te = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], Wt = ["default", "success", "error"], qt = ["small", "medium", "large"], w = {
+const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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-placeholder);--input-border-color: var(--dt-color-border-form);--input-container-color: var(--dt-color-container-default);--input-radius: var(--dt-radius-rounded-c);--input-font-family: var(--dt-font-body-l-family);--input-font-size: calc(var(--dt-font-body-l-size) * 1px);--input-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--input-height: 48px;--input-cursor: text;--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);font-family:var(--input-font-family);font-size:var(--input-font-size);line-height:var(--input-line-height);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.c-textInput--large{--input-padding-block: var(--dt-spacing-d);--input-height: 56px}.c-textInput.c-textInput--small{--input-padding-block: var(--dt-spacing-b);--input-height: 40px}.c-textInput.c-textInput--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(.is-disabled) ::slotted([slot=leadingIcon]),.c-textInput:not(.is-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))))}@supports (background-color: color-mix(in srgb,black,white)){.c-textInput:hover{--input-container-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}}.c-textInput.c-textInput--readonly{--input-container-color: var(--dt-color-container-subtle);--input-border-color: var(--dt-color-border-form)}.c-textInput.is-disabled.c-textInput--readonly,.c-textInput.is-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);opacity:1}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}", zt = ["text", "number", "password", "url", "email", "tel"], te = ["none", "text", "tel", "url", "email", "numeric", "decimal", "search"], Wt = ["default", "success", "error"], qt = ["small", "medium", "large"], w = {
   type: "text",
   value: "",
   size: "medium",
@@ -107,7 +107,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
       e.forEach((t) => {
         const { addedNodes: a, removedNodes: i } = t, n = Array.from(a), o = Array.from(i);
         n.forEach((r) => {
-          var h;
+          var f;
           if (l.has(r) && r.constructor.formAssociated && O(r), S.has(r)) {
             const m = S.get(r);
             Object.keys(C).filter((b) => m[b] !== null).forEach((b) => {
@@ -128,10 +128,10 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
             for (; b; )
               O(b), b = E.nextNode();
           }
-          r.localName === "fieldset" && ((h = R.observe) === null || h === void 0 || h.call(R, r, tt), P(r, !0));
+          r.localName === "fieldset" && ((f = R.observe) === null || f === void 0 || f.call(R, r, tt), P(r, !0));
         }), o.forEach((r) => {
-          const h = l.get(r);
-          h && g.get(h) && et(h), F.has(r) && F.get(r).disconnect();
+          const f = l.get(r);
+          f && g.get(f) && et(f), F.has(r) && F.get(r).disconnect();
         });
       });
     }
@@ -185,7 +185,7 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
           const n = y.get(e);
           if (e.noValidate)
             return;
-          n.size && Array.from(n).reverse().map((h) => l.get(h).reportValidity()).includes(!1) && a.preventDefault();
+          n.size && Array.from(n).reverse().map((f) => l.get(f).reportValidity()).includes(!1) && a.preventDefault();
         }
       });
     }, Et = (e) => {
@@ -316,10 +316,10 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
       const { get: n } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
       Object.defineProperty(HTMLFormElement.prototype, "elements", {
         get(...o) {
-          const r = n.call(this, ...o), h = Array.from(y.get(this) || []);
-          if (h.length === 0)
+          const r = n.call(this, ...o), f = Array.from(y.get(this) || []);
+          if (f.length === 0)
             return r;
-          const m = Array.from(r).concat(h).sort((E, b) => E.compareDocumentPosition ? E.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
+          const m = Array.from(r).concat(f).sort((E, b) => E.compareDocumentPosition ? E.compareDocumentPosition(b) & 2 ? 1 : -1 : 0);
           return new Ct(m);
         }
       });
@@ -394,9 +394,9 @@ const Ht = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.c-textInp
         for (const E in t)
           r[E] = t[E];
         Object.keys(r).length === 0 && Mt(o);
-        const h = Object.assign(Object.assign({}, o), r);
-        delete h.valid;
-        const { valid: m } = kt(o, h, this.form);
+        const f = Object.assign(Object.assign({}, o), r);
+        delete f.valid;
+        const { valid: m } = kt(o, f, this.form);
         if (!m && !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.");
         I.set(this, m ? "" : a), n.isConnected ? (n.toggleAttribute("internals-invalid", !m), n.toggleAttribute("internals-valid", m), n.setAttribute("aria-invalid", `${!m}`)) : T.set(n, this);
@@ -572,25 +572,25 @@ let s = class extends Ot(Pt(Rt(X))) {
                 <slot name="leadingIcon"></slot>
                 <slot name="leadingText"></slot>
                 <input
-                    type=${f(T)}
-                    .value=${ht(C)}
-                    name=${f(N)}
-                    ?disabled=${ht(g)}
-                    pattern=${f(S)}
-                    step=${f(L)}
-                    minlength=${f(M)}
-                    maxlength=${f(I)}
-                    min=${f(F)}
-                    max=${f(y)}
-                    autocomplete=${f(d)}
+                    type=${h(T)}
+                    .value=${ft(C)}
+                    name=${h(N)}
+                    ?disabled=${ft(g)}
+                    pattern=${h(S)}
+                    step=${h(L)}
+                    minlength=${h(M)}
+                    maxlength=${h(I)}
+                    min=${h(F)}
+                    max=${h(y)}
+                    autocomplete=${h(d)}
                     ?autofocus=${v}
-                    inputmode=${f(l)}
-                    placeholder=${f($)}
+                    inputmode=${h(l)}
+                    placeholder=${h($)}
                     ?readonly=${A}
                     ?required=${O}
-                    aria-describedby=${f(p ? Q : void 0)}
+                    aria-describedby=${h(p ? Q : void 0)}
                     aria-invalid=${k === "error" ? "true" : "false"}
-                    aria-errormessage="${f(k === "error" ? Q : void 0)}"
+                    aria-errormessage="${h(k === "error" ? Q : void 0)}"
                     @input=${this.handleInput}
                     @change=${this.handleChange}
                     data-test-id="pie-text-input">
@@ -604,7 +604,7 @@ let s = class extends Ot(Pt(Rt(X))) {
             ${p ? mt`
                 <pie-assistive-text
                     id="${Q}"
-                    variant=${f(k)}
+                    variant=${h(k)}
                     data-test-id="pie-text-input-assistive-text">
                     ${p}
                 </pie-assistive-text>
@@ -676,10 +676,10 @@ c([
   u({ type: Boolean })
 ], s.prototype, "required", 2);
 c([
-  ft("input")
+  ht("input")
 ], s.prototype, "input", 2);
 c([
-  ft("input")
+  ht("input")
 ], s.prototype, "focusTarget", 2);
 s = c([
   _t("pie-text-input")

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-text-input",
   "description": "PIE Design System Input built using Web Components",
-  "version": "0.29.19",
+  "version": "0.29.20",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",

package/src/text-input.scss

@@ -14,6 +14,7 @@
     --input-border-color: var(--dt-color-border-form);
     --input-container-color: var(--dt-color-container-default);
     --input-radius: var(--dt-radius-rounded-c);
+    --input-font-family: var(--dt-font-body-l-family);
     --input-font-size: #{p.font-size(--dt-font-body-l-size)};
     --input-line-height: #{p.font-size(--dt-font-body-l-line-height)};
     --input-height: 48px;
@@ -29,6 +30,7 @@
     padding-inline-end: var(--input-padding-inline);
     padding-block-start: var(--input-padding-block);
     padding-block-end: var(--input-padding-block);
+    font-family: var(--input-font-family);
     font-size: var(--input-font-size);
     line-height: var(--input-line-height);
     display: flex;