@justeattakeaway/pie-button 0.40.1 → 0.40.2

package/dist/index.js

@@ -1,4 +1,4 @@
-import { unsafeCSS as wt, LitElement as xt, html as N, nothing as O } from "lit";
+import { unsafeCSS as wt, LitElement as xt, html as N, nothing as W } from "lit";
 import { property as h } from "lit/decorators.js";
 import { ifDefined as Et } from "lit/directives/if-defined.js";
 import { validPropertyValues as R, defineCustomElement as kt } from "@justeattakeaway/pie-webc-core";
@@ -16,7 +16,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
 ], Lt = ["leading", "trailing"], Pt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Dt = ["post", "get", "dialog"], $t = ["_self", "_blank", "_parent", "_top"], Ft = `*,*:before,*:after{box-sizing:border-box}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]{border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--btn-icon-size: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--btn-icon-size: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--btn-icon-size: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--btn-icon-size);width:var(--btn-icon-size)}
 `;
 (function() {
-  const p = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), S = {
+  const p = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), S = {
     ariaAtomic: "aria-atomic",
     ariaAutoComplete: "aria-autocomplete",
     ariaBusy: "aria-busy",
@@ -73,11 +73,11 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       });
     }
   };
-  function q(i) {
+  function U(i) {
     const t = c.get(i), { form: e } = t;
-    X(i, e, t), Q(i, t.labels);
+    Y(i, e, t), X(i, t.labels);
   }
-  const U = (i, t = !1) => {
+  const j = (i, t = !1) => {
     const e = document.createTreeWalker(i, NodeFilter.SHOW_ELEMENT, {
       acceptNode(l) {
         return c.has(l) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
@@ -87,10 +87,10 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     const o = !t || i.disabled;
     for (; r; )
       r.formDisabledCallback && o && D(r, i.disabled), r = e.nextNode();
-  }, j = { attributes: !0, attributeFilter: ["disabled", "name"] }, z = T() ? new MutationObserver((i) => {
+  }, G = { attributes: !0, attributeFilter: ["disabled", "name"] }, z = T() ? new MutationObserver((i) => {
     for (const t of i) {
       const e = t.target;
-      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? D(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && U(e)), t.attributeName === "name" && e.constructor.formAssociated) {
+      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? D(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && j(e)), t.attributeName === "name" && e.constructor.formAssociated) {
         const r = c.get(e), o = M.get(e);
         r.setFormValue(o);
       }
@@ -101,7 +101,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       const { addedNodes: e, removedNodes: r } = t, o = Array.from(e), l = Array.from(r);
       o.forEach((n) => {
         var b;
-        if (c.has(n) && n.constructor.formAssociated && q(n), k.has(n)) {
+        if (c.has(n) && n.constructor.formAssociated && U(n), k.has(n)) {
           const d = k.get(n);
           Object.keys(S).filter((y) => d[y] !== null).forEach((y) => {
             n.setAttribute(S[y], d[y]);
@@ -113,18 +113,18 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         }
         if (n.localName === "form") {
           const d = g.get(n), x = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
-            acceptNode(rt) {
-              return c.has(rt) && !(d && d.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+            acceptNode(O) {
+              return c.has(O) && O.constructor.formAssociated && !(d && d.has(O)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
             }
           });
           let y = x.nextNode();
           for (; y; )
-            q(y), y = x.nextNode();
+            U(y), y = x.nextNode();
         }
-        n.localName === "fieldset" && ((b = z.observe) == null || b.call(z, n, j), U(n, !0));
+        n.localName === "fieldset" && ((b = z.observe) == null || b.call(z, n, G), j(n, !0));
       }), l.forEach((n) => {
         const b = c.get(n);
-        b && a.get(b) && G(b), f.has(n) && f.get(n).disconnect();
+        b && a.get(b) && J(b), f.has(n) && f.get(n).disconnect();
       });
     });
   }
@@ -132,15 +132,15 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     i.forEach((t) => {
       const { removedNodes: e } = t;
       e.forEach((r) => {
-        const o = B.get(t.target);
-        c.has(r) && Z(r), o.disconnect();
+        const o = K.get(t.target);
+        c.has(r) && tt(r), o.disconnect();
       });
     });
   }
   const nt = (i) => {
     var e;
     const t = new MutationObserver(at);
-    (e = t.observe) == null || e.call(t, i, { childList: !0 }), B.set(i, t);
+    (e = t.observe) == null || e.call(t, i, { childList: !0 }), K.set(i, t);
   };
   T() && new MutationObserver(_);
   const P = {
@@ -148,17 +148,17 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     subtree: !0
   }, D = (i, t) => {
     i.toggleAttribute("internals-disabled", t), t ? i.setAttribute("aria-disabled", "true") : i.removeAttribute("aria-disabled"), i.formDisabledCallback && i.formDisabledCallback.apply(i, [t]);
-  }, G = (i) => {
+  }, J = (i) => {
     a.get(i).forEach((e) => {
       e.remove();
     }), a.set(i, []);
-  }, J = (i, t) => {
+  }, Q = (i, t) => {
     const e = document.createElement("input");
     return e.type = "hidden", e.name = i.getAttribute("name"), i.after(e), a.get(t).push(e), e;
   }, st = (i, t) => {
     var e;
-    a.set(t, []), (e = z.observe) == null || e.call(z, i, j);
-  }, Q = (i, t) => {
+    a.set(t, []), (e = z.observe) == null || e.call(z, i, G);
+  }, X = (i, t) => {
     if (t.length) {
       Array.from(t).forEach((r) => r.addEventListener("click", i.click.bind(i)));
       let e = t[0].id;
@@ -186,7 +186,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     t && t.size && t.forEach((e) => {
       e.constructor.formAssociated && e.formResetCallback && e.formResetCallback.apply(e);
     });
-  }, X = (i, t, e) => {
+  }, Y = (i, t, e) => {
     if (t) {
       const r = g.get(t);
       if (r)
@@ -205,15 +205,15 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
   }, w = (i, t, e = DOMException) => {
     if (!i.constructor.formAssociated)
       throw new e(t);
-  }, Y = (i, t, e) => {
+  }, Z = (i, t, e) => {
     const r = g.get(i);
     return r && r.size && r.forEach((o) => {
       c.get(o)[e]() || (t = !1);
     }), t;
-  }, Z = (i) => {
+  }, tt = (i) => {
     if (i.constructor.formAssociated) {
       const t = c.get(i), { labels: e, form: r } = t;
-      Q(i, e), X(i, r, t);
+      X(i, e), Y(i, r, t);
     }
   };
   function T() {
@@ -230,7 +230,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       e !== "valid" && i[e] !== !1 && (t = !1);
     return t;
   }, $ = /* @__PURE__ */ new WeakMap();
-  function tt(i, t) {
+  function et(i, t) {
     i.toggleAttribute(t, !0), i.part && i.part.add(t);
   }
   class V extends Set {
@@ -246,8 +246,8 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       if (!/^--/.test(t) || typeof t != "string")
         throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
       const e = super.add(t), r = $.get(this), o = `state${t}`;
-      return r.isConnected ? tt(r, o) : setTimeout(() => {
-        tt(r, o);
+      return r.isConnected ? et(r, o) : setTimeout(() => {
+        et(r, o);
       }), e;
     }
     clear() {
@@ -262,7 +262,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       }), e;
     }
   }
-  function et(i, t, e, r) {
+  function it(i, t, e, r) {
     if (e === "a" && !r)
       throw new TypeError("Private accessor was defined without a getter");
     if (typeof t == "function" ? i !== t || !r : !t.has(i))
@@ -289,10 +289,10 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       Object.freeze(this);
     }
     get length() {
-      return et(this, C, "f").length;
+      return it(this, C, "f").length;
     }
     [(C = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-      return et(this, C, "f")[Symbol.iterator]();
+      return it(this, C, "f")[Symbol.iterator]();
     }
     item(t) {
       return this[t] == null ? null : this[t];
@@ -308,11 +308,11 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     HTMLFormElement.prototype.reportValidity = r;
     function e(...l) {
       let n = i.apply(this, l);
-      return Y(this, n, "checkValidity");
+      return Z(this, n, "checkValidity");
     }
     function r(...l) {
       let n = t.apply(this, l);
-      return Y(this, n, "reportValidity");
+      return Z(this, n, "reportValidity");
     }
     const { get: o } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
     Object.defineProperty(HTMLFormElement.prototype, "elements", {
@@ -325,7 +325,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       }
     });
   }
-  class it {
+  class rt {
     static get isPolyfilled() {
       return !0;
     }
@@ -366,22 +366,22 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       const t = p.get(this);
       if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
         return !0;
-      const e = this.checkValidity(), r = H.get(this);
+      const e = this.checkValidity(), r = B.get(this);
       if (r && !t.constructor.formAssociated)
         throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
       return !e && r && (t.focus(), r.focus()), e;
     }
     setFormValue(t) {
       const e = p.get(this);
-      if (w(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), G(this), t != null && !(t instanceof FormData)) {
+      if (w(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), J(this), t != null && !(t instanceof FormData)) {
         if (e.getAttribute("name")) {
-          const r = J(e, this);
+          const r = Q(e, this);
           r.value = t;
         }
       } else
         t != null && t instanceof FormData && Array.from(t).reverse().forEach(([r, o]) => {
           if (typeof o == "string") {
-            const l = J(e, this);
+            const l = Q(e, this);
             l.name = r, l.value = o;
           }
         });
@@ -391,7 +391,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       const o = p.get(this);
       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.");
-      H.set(this, r);
+      B.set(this, r);
       const l = s.get(this), n = {};
       for (const x in t)
         n[x] = t[x];
@@ -404,7 +404,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       u.set(this, d ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !d), o.toggleAttribute("internals-valid", d), o.setAttribute("aria-invalid", `${!d}`)) : F.set(o, this);
     }
     get shadowRoot() {
-      const t = p.get(this), e = W.get(t);
+      const t = p.get(this), e = H.get(t);
       return e || null;
     }
     get validationMessage() {
@@ -454,13 +454,13 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       };
     }
   } else {
-    if (typeof window < "u" && (window.ElementInternals = it), typeof CustomElementRegistry < "u") {
+    if (typeof window < "u" && (window.ElementInternals = rt), typeof CustomElementRegistry < "u") {
       const i = CustomElementRegistry.prototype.define;
       CustomElementRegistry.prototype.define = function(t, e, r) {
         if (e.formAssociated) {
           const o = e.prototype.connectedCallback;
           e.prototype.connectedCallback = function() {
-            K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), o != null && o.apply(this), Z(this);
+            q.has(this) || (q.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), o != null && o.apply(this), tt(this);
           };
         }
         i.call(this, t, e, r);
@@ -474,11 +474,11 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         return {};
       if (c.has(this))
         throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
-      return new it(this);
+      return new rt(this);
     }), typeof Element < "u") {
       let i = function(...e) {
         const r = t.apply(this, e);
-        if (W.set(this, r), T()) {
+        if (H.set(this, r), T()) {
           const o = new MutationObserver(_);
           window.ShadyDOM ? o.observe(this, P) : o.observe(r, P), f.set(this, o);
         }
@@ -578,10 +578,10 @@ class v extends xt {
                 ?isFullWidth=${c}
                 ?isResponsive=${g}
                 ?isLoading=${f}>
-                    ${f ? this.renderSpinner() : O}
-                    ${M === "leading" ? N`<slot name="icon"></slot>` : O}
+                    ${f ? this.renderSpinner() : W}
+                    ${M === "leading" ? N`<slot name="icon"></slot>` : W}
                     <slot></slot>
-                    ${M === "trailing" ? N`<slot name="icon"></slot>` : O}
+                    ${M === "trailing" ? N`<slot name="icon"></slot>` : W}
             </button>`;
   }
   focus() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.40.1",
+  "version": "0.40.2",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -39,6 +39,6 @@
   "dependencies": {
     "@justeattakeaway/pie-spinner": "0.3.1",
     "@justeattakeaway/pie-webc-core": "0.13.0",
-    "element-internals-polyfill": "1.3.8"
+    "element-internals-polyfill": "1.3.9"
   }
 }