@justeattakeaway/pie-button 1.0.0 → 1.2.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { LitElement as At, html as M, nothing as F, unsafeCSS as It } from "lit";
+import { LitElement as At, html as z, nothing as F, unsafeCSS as It } from "lit";
 import { classMap as vt } from "lit/directives/class-map.js";
 import { ifDefined as K } from "lit/directives/if-defined.js";
 import { property as v } from "lit/decorators.js";
@@ -6,7 +6,7 @@ import { FormControlMixin as Lt, validPropertyValues as A, defineCustomElement a
 import "@justeattakeaway/pie-spinner";
 (function() {
   (function(k) {
-    const a = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), T = {
+    const r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), T = {
       ariaAtomic: "aria-atomic",
       ariaAutoComplete: "aria-autocomplete",
       ariaBusy: "aria-busy",
@@ -49,88 +49,88 @@ import "@justeattakeaway/pie-spinner";
       ariaValueNow: "aria-valuenow",
       ariaValueText: "aria-valuetext",
       role: "role"
-    }, ht = (e, t) => {
+    }, pt = (e, t) => {
       for (let o in T) {
         t[o] = null;
         let i = null;
-        const n = T[o];
+        const a = T[o];
         Object.defineProperty(t, o, {
           get() {
             return i;
           },
           set(s) {
-            i = s, e.isConnected ? e.setAttribute(n, s) : I.set(e, t);
+            i = s, e.isConnected ? e.setAttribute(a, s) : I.set(e, t);
           }
         });
       }
     };
     function X(e) {
-      const t = c.get(e), { form: o } = t;
+      const t = d.get(e), { form: o } = t;
       it(e, o, t), ot(e, t.labels);
     }
     const Y = (e, t = !1) => {
       const o = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
         acceptNode(s) {
-          return c.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+          return d.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
         }
       });
       let i = o.nextNode();
-      const n = !t || e.disabled;
+      const a = !t || e.disabled;
       for (; i; )
-        i.formDisabledCallback && n && $(i, e.disabled), i = o.nextNode();
+        i.formDisabledCallback && a && $(i, e.disabled), i = o.nextNode();
     }, Z = { attributes: !0, attributeFilter: ["disabled", "name"] }, V = O() ? new MutationObserver((e) => {
       for (const t of e) {
         const o = t.target;
         if (t.attributeName === "disabled" && (o.constructor.formAssociated ? $(o, o.hasAttribute("disabled")) : o.localName === "fieldset" && Y(o)), t.attributeName === "name" && o.constructor.formAssociated) {
-          const i = c.get(o), n = j.get(o);
-          i.setFormValue(n);
+          const i = d.get(o), a = j.get(o);
+          i.setFormValue(a);
         }
       }
     }) : {};
     function _(e) {
       e.forEach((t) => {
-        const { addedNodes: o, removedNodes: i } = t, n = Array.from(o), s = Array.from(i);
-        n.forEach((l) => {
-          var u;
-          if (c.has(l) && l.constructor.formAssociated && X(l), I.has(l)) {
-            const p = I.get(l);
-            Object.keys(T).filter((g) => p[g] !== null).forEach((g) => {
-              l.setAttribute(T[g], p[g]);
+        const { addedNodes: o, removedNodes: i } = t, a = Array.from(o), s = Array.from(i);
+        a.forEach((l) => {
+          var h;
+          if (d.has(l) && l.constructor.formAssociated && X(l), I.has(l)) {
+            const m = I.get(l);
+            Object.keys(T).filter((g) => m[g] !== null).forEach((g) => {
+              l.setAttribute(T[g], m[g]);
             }), I.delete(l);
           }
           if (L.has(l)) {
-            const p = L.get(l);
-            l.setAttribute("internals-valid", p.validity.valid.toString()), l.setAttribute("internals-invalid", (!p.validity.valid).toString()), l.setAttribute("aria-invalid", (!p.validity.valid).toString()), L.delete(l);
+            const m = L.get(l);
+            l.setAttribute("internals-valid", m.validity.valid.toString()), l.setAttribute("internals-invalid", (!m.validity.valid).toString()), l.setAttribute("aria-invalid", (!m.validity.valid).toString()), L.delete(l);
           }
           if (l.localName === "form") {
-            const p = E.get(l), x = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
+            const m = E.get(l), w = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
               acceptNode(B) {
-                return c.has(B) && B.constructor.formAssociated && !(p && p.has(B)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+                return d.has(B) && B.constructor.formAssociated && !(m && m.has(B)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
               }
             });
-            let g = x.nextNode();
+            let g = w.nextNode();
             for (; g; )
-              X(g), g = x.nextNode();
+              X(g), g = w.nextNode();
           }
-          l.localName === "fieldset" && ((u = V.observe) === null || u === void 0 || u.call(V, l, Z), Y(l, !0));
+          l.localName === "fieldset" && ((h = V.observe) === null || h === void 0 || h.call(V, l, Z), Y(l, !0));
         }), s.forEach((l) => {
-          const u = c.get(l);
-          u && b.get(u) && tt(u), S.has(l) && S.get(l).disconnect();
+          const h = d.get(l);
+          h && b.get(h) && tt(h), M.has(l) && M.get(l).disconnect();
         });
       });
     }
-    function pt(e) {
+    function mt(e) {
       e.forEach((t) => {
         const { removedNodes: o } = t;
         o.forEach((i) => {
-          const n = J.get(t.target);
-          c.has(i) && nt(i), n.disconnect();
+          const a = J.get(t.target);
+          d.has(i) && rt(i), a.disconnect();
         });
       });
     }
-    const mt = (e) => {
+    const ut = (e) => {
       var t, o;
-      const i = new MutationObserver(pt);
+      const i = new MutationObserver(mt);
       !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (o = i.observe) === null || o === void 0 || o.call(i, e, { childList: !0 }), J.set(e, i);
     };
     O() && new MutationObserver(_);
@@ -146,7 +146,7 @@ import "@justeattakeaway/pie-spinner";
     }, et = (e, t) => {
       const o = document.createElement("input");
       return o.type = "hidden", o.name = e.getAttribute("name"), e.after(o), b.get(t).push(o), o;
-    }, ut = (e, t) => {
+    }, ht = (e, t) => {
       var o;
       b.set(t, []), (o = V.observe) === null || o === void 0 || o.call(V, e, Z);
     }, ot = (e, t) => {
@@ -156,8 +156,8 @@ import "@justeattakeaway/pie-spinner";
         t[0].id || (o = `${t[0].htmlFor}_Label`, t[0].id = o), e.setAttribute("aria-labelledby", o);
       }
     }, N = (e) => {
-      const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), o = E.get(e) || [], i = Array.from(o).filter((s) => s.isConnected).map((s) => c.get(s).validity.valid), n = [...t, ...i].includes(!1);
-      e.toggleAttribute("internals-invalid", n), e.toggleAttribute("internals-valid", !n);
+      const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), o = E.get(e) || [], i = Array.from(o).filter((s) => s.isConnected).map((s) => d.get(s).validity.valid), a = [...t, ...i].includes(!1);
+      e.toggleAttribute("internals-invalid", a), e.toggleAttribute("internals-valid", !a);
     }, ft = (e) => {
       N(P(e.target));
     }, gt = (e) => {
@@ -166,13 +166,13 @@ import "@justeattakeaway/pie-spinner";
       const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((o) => `${o}:not([disabled])`).map((o) => `${o}:not([form])${e.id ? `,${o}[form='${e.id}']` : ""}`).join(",");
       e.addEventListener("click", (o) => {
         if (o.target.closest(t)) {
-          const n = E.get(e);
+          const a = E.get(e);
           if (e.noValidate)
             return;
-          n.size && Array.from(n).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && o.preventDefault();
+          a.size && Array.from(a).reverse().map((h) => d.get(h).reportValidity()).includes(!1) && o.preventDefault();
         }
       });
-    }, wt = (e) => {
+    }, xt = (e) => {
       const t = E.get(e.target);
       t && t.size && t.forEach((o) => {
         o.constructor.formAssociated && o.formResetCallback && o.formResetCallback.apply(o);
@@ -183,8 +183,8 @@ import "@justeattakeaway/pie-spinner";
         if (i)
           i.add(e);
         else {
-          const n = /* @__PURE__ */ new Set();
-          n.add(e), E.set(t, n), yt(t), t.addEventListener("reset", wt), t.addEventListener("input", ft), t.addEventListener("change", gt);
+          const a = /* @__PURE__ */ new Set();
+          a.add(e), E.set(t, a), yt(t), t.addEventListener("reset", xt), t.addEventListener("input", ft), t.addEventListener("change", gt);
         }
         y.set(t, { ref: e, internals: o }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
           e.formAssociatedCallback.apply(e, [t]);
@@ -193,29 +193,29 @@ import "@justeattakeaway/pie-spinner";
     }, P = (e) => {
       let t = e.parentNode;
       return t && t.tagName !== "FORM" && (t = P(t)), t;
-    }, w = (e, t, o = DOMException) => {
+    }, x = (e, t, o = DOMException) => {
       if (!e.constructor.formAssociated)
         throw new o(t);
-    }, rt = (e, t, o) => {
+    }, nt = (e, t, o) => {
       const i = E.get(e);
-      return i && i.size && i.forEach((n) => {
-        c.get(n)[o]() || (t = !1);
+      return i && i.size && i.forEach((a) => {
+        d.get(a)[o]() || (t = !1);
       }), t;
-    }, nt = (e) => {
+    }, rt = (e) => {
       if (e.constructor.formAssociated) {
-        const t = c.get(e), { labels: o, form: i } = t;
+        const t = d.get(e), { labels: o, form: i } = t;
         ot(e, o), it(e, i, t);
       }
     };
     function O() {
       return typeof MutationObserver < "u";
     }
-    class xt {
+    class wt {
       constructor() {
         this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
       }
     }
-    const Et = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), kt = (e, t, o) => (e.valid = Mt(t), Object.keys(t).forEach((i) => e[i] = t[i]), o && N(o), e), Mt = (e) => {
+    const Et = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), kt = (e, t, o) => (e.valid = zt(t), Object.keys(t).forEach((i) => e[i] = t[i]), o && N(o), e), zt = (e) => {
       let t = !0;
       for (let o in e)
         o !== "valid" && e[o] !== !1 && (t = !1);
@@ -236,9 +236,9 @@ import "@justeattakeaway/pie-spinner";
       add(t) {
         if (!/^--/.test(t) || typeof t != "string")
           throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
-        const o = super.add(t), i = D.get(this), n = `state${t}`;
-        return i.isConnected ? at(i, n) : setTimeout(() => {
-          at(i, n);
+        const o = super.add(t), i = D.get(this), a = `state${t}`;
+        return i.isConnected ? at(i, a) : setTimeout(() => {
+          at(i, a);
         }), o;
       }
       clear() {
@@ -258,14 +258,14 @@ import "@justeattakeaway/pie-spinner";
       if (typeof t == "function" ? e !== t || !i : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
       return o === "m" ? i : o === "a" ? i.call(e) : i ? i.value : t.get(e);
     }
-    function St(e, t, o, i, n) {
-      if (typeof t == "function" ? e !== t || !n : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    function Mt(e, t, o, i, a) {
+      if (typeof t == "function" ? e !== t || !0 : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
       return t.set(e, o), o;
     }
-    var z;
-    class Ct {
+    var C;
+    class St {
       constructor(t) {
-        z.set(this, void 0), St(this, z, t);
+        C.set(this, void 0), Mt(this, C, t);
         for (let o = 0; o < t.length; o++) {
           let i = t[o];
           this[o] = i, i.hasAttribute("name") && (this[i.getAttribute("name")] = i);
@@ -273,10 +273,10 @@ import "@justeattakeaway/pie-spinner";
         Object.freeze(this);
       }
       get length() {
-        return st(this, z, "f").length;
+        return st(this, C, "f").length;
       }
-      [(z = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-        return st(this, z, "f")[Symbol.iterator]();
+      [(C = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+        return st(this, C, "f")[Symbol.iterator]();
       }
       item(t) {
         return this[t] == null ? null : this[t];
@@ -285,27 +285,27 @@ import "@justeattakeaway/pie-spinner";
         return this[t] == null ? null : this[t];
       }
     }
-    function zt() {
+    function Ct() {
       const e = HTMLFormElement.prototype.checkValidity;
       HTMLFormElement.prototype.checkValidity = o;
       const t = HTMLFormElement.prototype.reportValidity;
       HTMLFormElement.prototype.reportValidity = i;
       function o(...s) {
         let l = e.apply(this, s);
-        return rt(this, l, "checkValidity");
+        return nt(this, l, "checkValidity");
       }
       function i(...s) {
         let l = t.apply(this, s);
-        return rt(this, l, "reportValidity");
+        return nt(this, l, "reportValidity");
       }
-      const { get: n } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
+      const { get: a } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
       Object.defineProperty(HTMLFormElement.prototype, "elements", {
         get(...s) {
-          const l = n.call(this, ...s), u = Array.from(E.get(this) || []);
-          if (u.length === 0)
+          const l = a.call(this, ...s), h = Array.from(E.get(this) || []);
+          if (h.length === 0)
             return l;
-          const p = Array.from(l).concat(u).sort((x, g) => x.compareDocumentPosition ? x.compareDocumentPosition(g) & 2 ? 1 : -1 : 0);
-          return new Ct(p);
+          const m = Array.from(l).concat(h).sort((w, g) => w.compareDocumentPosition ? w.compareDocumentPosition(g) & 2 ? 1 : -1 : 0);
+          return new St(m);
         }
       });
     }
@@ -316,14 +316,14 @@ import "@justeattakeaway/pie-spinner";
       constructor(t) {
         if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
-        const o = t.getRootNode(), i = new xt();
-        this.states = new W(t), a.set(this, t), r.set(this, i), c.set(t, this), ht(t, this), ut(t, this), Object.seal(this), o instanceof DocumentFragment && mt(o);
+        const o = t.getRootNode(), i = new wt();
+        this.states = new W(t), r.set(this, t), n.set(this, i), d.set(t, this), pt(t, this), ht(t, this), Object.seal(this), o instanceof DocumentFragment && ut(o);
       }
       checkValidity() {
-        const t = a.get(this);
-        if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+        const t = r.get(this);
+        if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
-        const o = r.get(this);
+        const o = n.get(this);
         if (!o.valid) {
           const i = new Event("invalid", {
             bubbles: !1,
@@ -335,20 +335,20 @@ import "@justeattakeaway/pie-spinner";
         return o.valid;
       }
       get form() {
-        const t = a.get(this);
-        w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
+        const t = r.get(this);
+        x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
         let o;
         return t.constructor.formAssociated === !0 && (o = P(t)), o;
       }
       get labels() {
-        const t = a.get(this);
-        w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
+        const t = r.get(this);
+        x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
         const o = t.getAttribute("id"), i = t.getRootNode();
         return i && o ? i.querySelectorAll(`[for="${o}"]`) : [];
       }
       reportValidity() {
-        const t = a.get(this);
-        if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+        const t = r.get(this);
+        if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
         const o = this.checkValidity(), i = G.get(this);
         if (i && !t.constructor.formAssociated)
@@ -356,51 +356,51 @@ import "@justeattakeaway/pie-spinner";
         return !o && i && (t.focus(), i.focus()), o;
       }
       setFormValue(t) {
-        const o = a.get(this);
-        if (w(o, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), tt(this), t != null && !(t instanceof FormData)) {
+        const o = r.get(this);
+        if (x(o, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), tt(this), t != null && !(t instanceof FormData)) {
           if (o.getAttribute("name")) {
             const i = et(o, this);
             i.value = t;
           }
-        } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, n]) => {
-          if (typeof n == "string") {
+        } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, a]) => {
+          if (typeof a == "string") {
             const s = et(o, this);
-            s.name = i, s.value = n;
+            s.name = i, s.value = a;
           }
         });
         j.set(o, t);
       }
       setValidity(t, o, i) {
-        const n = a.get(this);
-        if (w(n, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
+        const a = r.get(this);
+        if (x(a, "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.");
         G.set(this, i);
-        const s = r.get(this), l = {};
-        for (const x in t)
-          l[x] = t[x];
+        const s = n.get(this), l = {};
+        for (const w in t)
+          l[w] = t[w];
         Object.keys(l).length === 0 && Et(s);
-        const u = Object.assign(Object.assign({}, s), l);
-        delete u.valid;
-        const { valid: p } = kt(s, u, this.form);
-        if (!p && !o)
+        const h = Object.assign(Object.assign({}, s), l);
+        delete h.valid;
+        const { valid: m } = kt(s, h, this.form);
+        if (!m && !o)
           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 ? "" : o), n.isConnected ? (n.toggleAttribute("internals-invalid", !p), n.toggleAttribute("internals-valid", p), n.setAttribute("aria-invalid", `${!p}`)) : L.set(n, this);
+        u.set(this, m ? "" : o), a.isConnected ? (a.toggleAttribute("internals-invalid", !m), a.toggleAttribute("internals-valid", m), a.setAttribute("aria-invalid", `${!m}`)) : L.set(a, this);
       }
       get shadowRoot() {
-        const t = a.get(this), o = q.get(t);
+        const t = r.get(this), o = q.get(t);
         return o || null;
       }
       get validationMessage() {
-        const t = a.get(this);
-        return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), m.get(this);
+        const t = r.get(this);
+        return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), u.get(this);
       }
       get validity() {
-        const t = a.get(this);
-        return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), r.get(this);
+        const t = r.get(this);
+        return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), n.get(this);
       }
       get willValidate() {
-        const t = a.get(this);
-        return w(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
+        const t = r.get(this);
+        return x(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
       }
     }
     function Ft() {
@@ -427,25 +427,25 @@ import "@justeattakeaway/pie-spinner";
         "reportValidity"
       ].every((i) => i in o.internals);
     }
-    let ct = !1, dt = !1;
+    let dt = !1, ct = !1;
     function H(e) {
-      dt || (dt = !0, window.CustomStateSet = W, e && (HTMLElement.prototype.attachInternals = function(...t) {
+      ct || (ct = !0, window.CustomStateSet = W, e && (HTMLElement.prototype.attachInternals = function(...t) {
         const o = e.call(this, t);
         return o.states = new W(this), o;
       }));
     }
     function bt(e = !0) {
-      if (!ct) {
-        if (ct = !0, typeof window < "u" && (window.ElementInternals = lt), typeof CustomElementRegistry < "u") {
+      if (!dt) {
+        if (dt = !0, typeof window < "u" && (window.ElementInternals = lt), typeof CustomElementRegistry < "u") {
           const t = CustomElementRegistry.prototype.define;
-          CustomElementRegistry.prototype.define = function(o, i, n) {
+          CustomElementRegistry.prototype.define = function(o, i, a) {
             if (i.formAssociated) {
               const s = i.prototype.connectedCallback;
               i.prototype.connectedCallback = function() {
-                Q.has(this) || (Q.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), nt(this);
+                Q.has(this) || (Q.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), rt(this);
               };
             }
-            t.call(this, o, i, n);
+            t.call(this, o, i, a);
           };
         }
         if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
@@ -453,22 +453,22 @@ import "@justeattakeaway/pie-spinner";
             if (this.tagName.indexOf("-") === -1)
               throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
           } else return {};
-          if (c.has(this))
+          if (d.has(this))
             throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
           return new lt(this);
         }), typeof Element < "u") {
           let t = function(...i) {
-            const n = o.apply(this, i);
-            if (q.set(this, n), O()) {
+            const a = o.apply(this, i);
+            if (q.set(this, a), O()) {
               const s = new MutationObserver(_);
-              window.ShadyDOM ? s.observe(this, R) : s.observe(n, R), S.set(this, s);
+              window.ShadyDOM ? s.observe(this, R) : s.observe(a, R), M.set(this, s);
             }
-            return n;
+            return a;
           };
           const o = Element.prototype.attachShadow;
           Element.prototype.attachShadow = t;
         }
-        O() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, R), typeof HTMLFormElement < "u" && zt(), (e || typeof window < "u" && !window.CustomStateSet) && H();
+        O() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, R), typeof HTMLFormElement < "u" && Ct(), (e || typeof window < "u" && !window.CustomStateSet) && H();
       }
     }
     return !!customElements.polyfillWrapFlushCallback || (Ft() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : bt(!1)), k.forceCustomStateSetPolyfill = H, k.forceElementInternalsPolyfill = bt, Object.defineProperty(k, "__esModule", { value: !0 }), k;
@@ -494,36 +494,36 @@ const Vt = ["button", "a"], Nt = ["xsmall", "small-productive", "small-expressiv
   isLoading: !1,
   isFullWidth: !1,
   isResponsive: !1
-}, Rt = "*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-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;--icon-display-override: block;position:relative;display:inline-flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;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;-webkit-user-select:none;user-select:none;text-decoration:none;inline-size:var(--btn-inline-size)}.o-btn.o-btn--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.o-btn--primary:active:not(:disabled),.o-btn.o-btn--primary.is-loading: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.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn.o-btn--primary.o-btn--xsmall:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--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.o-btn--primary.o-btn--xsmall:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.is-loading: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)))}@media (min-width: 769px){.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive,.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive{--btn-bg-color: var(--dt-color-interactive-brand)}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive: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.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading: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.o-btn--secondary{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--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.o-btn--secondary:active:not(:disabled),.o-btn.o-btn--secondary.is-loading: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.o-btn--outline{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--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.o-btn--outline:active:not(:disabled),.o-btn.o-btn--outline.is-loading: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.o-btn--ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn.o-btn--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.o-btn--ghost:active:not(:disabled),.o-btn.o-btn--ghost.is-loading: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.o-btn--inverse{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--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.o-btn--inverse:active:not(:disabled),.o-btn.o-btn--inverse.is-loading: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.o-btn--ghost-inverse,.o-btn.o-btn--outline-inverse{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--ghost-inverse:hover:not(:disabled),.o-btn.o-btn--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.o-btn--ghost-inverse:active:not(:disabled),.o-btn.o-btn--ghost-inverse.is-loading:not(:disabled),.o-btn.o-btn--outline-inverse:active:not(:disabled),.o-btn.o-btn--outline-inverse.is-loading: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.o-btn--outline-inverse:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--destructive{--btn-bg-color: var(--dt-color-support-error)}.o-btn.o-btn--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.o-btn--destructive:active:not(:disabled),.o-btn.o-btn--destructive.is-loading: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.o-btn--destructive-ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn.o-btn--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.o-btn--destructive-ghost:active:not(:disabled),.o-btn.o-btn--destructive-ghost.is-loading: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.o-btn--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);--icon-size-override: 16px}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--responsive{--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);--icon-size-override: 20px}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--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);--icon-size-override: 20px}}.o-btn.o-btn--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);--icon-size-override: 20px}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--responsive{--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);--icon-size-override: 24px}}.o-btn.o-btn--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);--icon-size-override: 20px}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--responsive{--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);--icon-size-override: 24px}}.o-btn.o-btn--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);--icon-size-override: 24px}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--responsive{--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);--icon-size-override: 24px}}.o-btn.o-btn--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);--icon-size-override: 24px}.o-btn.o-btn--fullWidth{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not(.o-btn--ghost,.o-btn--ghost-inverse,.o-btn--destructive-ghost){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled].o-btn--outline{border-color:var(--dt-color-disabled-01)!important}.o-btn.is-loading>*:not(pie-spinner){visibility:hidden}.o-btn.is-loading 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(--icon-size-override);width:var(--icon-size-override)}";
-var $t = Object.defineProperty, h = (k, a, r, b) => {
-  for (var c = void 0, m = k.length - 1, y; m >= 0; m--)
-    (y = k[m]) && (c = y(a, r, c) || c);
-  return c && $t(a, r, c), c;
+}, Rt = "*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-light);--icon-display-override: block;--btn-padding-vertical-xsmall: 6px;--btn-padding-vertical-small: 8px;--btn-padding-vertical-medium: 10px;--btn-padding-vertical-large: 14px;--btn-padding-horizontal-small: var(--dt-spacing-b);--btn-padding-horizontal-medium: var(--dt-spacing-d);--btn-padding-horizontal-large: var(--dt-spacing-e);position:relative;display:inline-flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;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;-webkit-user-select:none;user-select:none;text-decoration:none;inline-size:var(--btn-inline-size)}.o-btn.o-btn--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.o-btn--primary:active:not(:disabled),.o-btn.o-btn--primary.is-loading: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.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--btn-bg-color: var(--dt-color-interactive-primary);--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--primary.o-btn--xsmall:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--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.o-btn--primary.o-btn--xsmall:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.is-loading: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)))}@media (min-width: 769px){.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive,.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive{--btn-bg-color: var(--dt-color-interactive-brand)}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive: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.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading: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.o-btn--secondary{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--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.o-btn--secondary:active:not(:disabled),.o-btn.o-btn--secondary.is-loading: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.o-btn--outline{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--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.o-btn--outline:active:not(:disabled),.o-btn.o-btn--outline.is-loading: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.o-btn--ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn.o-btn--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.o-btn--ghost:active:not(:disabled),.o-btn.o-btn--ghost.is-loading: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.o-btn--inverse{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--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.o-btn--inverse:active:not(:disabled),.o-btn.o-btn--inverse.is-loading: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.o-btn--ghost-inverse,.o-btn.o-btn--outline-inverse{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--ghost-inverse:hover:not(:disabled),.o-btn.o-btn--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.o-btn--ghost-inverse:active:not(:disabled),.o-btn.o-btn--ghost-inverse.is-loading:not(:disabled),.o-btn.o-btn--outline-inverse:active:not(:disabled),.o-btn.o-btn--outline-inverse.is-loading: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.o-btn--outline-inverse{border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--destructive{--btn-bg-color: var(--dt-color-support-error)}.o-btn.o-btn--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.o-btn--destructive:active:not(:disabled),.o-btn.o-btn--destructive.is-loading: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.o-btn--destructive-ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn.o-btn--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.o-btn--destructive-ghost:active:not(:disabled),.o-btn.o-btn--destructive-ghost.is-loading: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.o-btn--xsmall{--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-small)}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-small) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--expressive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--xsmall.o-btn--outline,.o-btn.o-btn--xsmall.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-small)}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--outline.o-btn--responsive,.o-btn.o-btn--xsmall.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-small) - 1px) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--outline.o-btn--responsive.o-btn--expressive,.o-btn.o-btn--xsmall.o-btn--outline-inverse.o-btn--responsive.o-btn--expressive{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--small-expressive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-expressive.o-btn--outline,.o-btn.o-btn--small-expressive.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--outline.o-btn--responsive,.o-btn.o-btn--small-expressive.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-productive{--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-small) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-productive.o-btn--outline,.o-btn.o-btn--small-productive.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-small) - 1px) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--outline.o-btn--responsive,.o-btn.o-btn--small-productive.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--medium{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--medium.o-btn--outline,.o-btn.o-btn--medium.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--outline.o-btn--responsive,.o-btn.o-btn--medium.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--large{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large)}.o-btn.o-btn--large.o-btn--outline,.o-btn.o-btn--large.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large)}.o-btn.o-btn--fullWidth{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not(.o-btn--ghost,.o-btn--ghost-inverse,.o-btn--destructive-ghost){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled].o-btn--outline,.o-btn[disabled].o-btn--outline-inverse{border-color:var(--dt-color-disabled-01)!important}.o-btn.is-loading>*:not(pie-spinner){visibility:hidden}.o-btn.is-loading 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}.o-btn-text{text-overflow:ellipsis;overflow:hidden}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}";
+var $t = Object.defineProperty, p = (k, r, n, b) => {
+  for (var d = void 0, u = k.length - 1, y; u >= 0; u--)
+    (y = k[u]) && (d = y(r, n, d) || d);
+  return d && $t(r, n, d), d;
 };
-const C = "pie-button", U = class U extends Lt(At) {
+const S = "pie-button", U = class U extends Lt(At) {
   constructor() {
-    super(...arguments), this.tag = f.tag, this.size = f.size, this.type = f.type, this.variant = f.variant, this.iconPlacement = f.iconPlacement, this.disabled = f.disabled, this.isLoading = f.isLoading, this.isFullWidth = f.isFullWidth, this.isResponsive = f.isResponsive, this._handleFormKeyDown = (a) => {
-      if (!(a.key !== "Enter" || this.type !== "submit" || this.disabled)) {
-        if (a.target instanceof HTMLElement) {
-          const r = a.target.tagName.toLowerCase();
-          if (r === "button" || r === "pie-button")
+    super(...arguments), this.tag = f.tag, this.size = f.size, this.type = f.type, this.variant = f.variant, this.iconPlacement = f.iconPlacement, this.disabled = f.disabled, this.isLoading = f.isLoading, this.isFullWidth = f.isFullWidth, this.isResponsive = f.isResponsive, this._handleFormKeyDown = (r) => {
+      if (!(r.key !== "Enter" || this.type !== "submit" || this.disabled)) {
+        if (r.target instanceof HTMLElement) {
+          const n = r.target.tagName.toLowerCase();
+          if (n === "button" || n === "pie-button")
             return;
         }
-        a.preventDefault(), this._handleClick();
+        r.preventDefault(), this._handleClick();
       }
     };
   }
   connectedCallback() {
-    var a;
-    super.connectedCallback(), this.type === "submit" && ((a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown));
+    var r;
+    super.connectedCallback(), this.type === "submit" && ((r = this.form) == null || r.addEventListener("keydown", this._handleFormKeyDown));
   }
   disconnectedCallback() {
-    var a;
-    super.disconnectedCallback(), this.type === "submit" && ((a = this.form) == null || a.removeEventListener("keydown", this._handleFormKeyDown));
+    var r;
+    super.disconnectedCallback(), this.type === "submit" && ((r = this.form) == null || r.removeEventListener("keydown", this._handleFormKeyDown));
   }
-  updated(a) {
-    var r, b;
-    a.has("type") && (this.type === "submit" ? (r = this.form) == null || r.addEventListener("keydown", this._handleFormKeyDown) : (b = this.form) == null || b.removeEventListener("keydown", this._handleFormKeyDown));
+  updated(r) {
+    var n, b;
+    r.has("type") && (this.type === "submit" ? (n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown) : (b = this.form) == null || b.removeEventListener("keydown", this._handleFormKeyDown));
   }
   /**
    * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
@@ -533,10 +533,10 @@ const C = "pie-button", U = class U extends Lt(At) {
    *
    * TODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin.
    */
-  _simulateNativeButtonClick(a) {
+  _simulateNativeButtonClick(r) {
     if (!this.form) return;
-    const r = document.createElement("button");
-    r.type = a, r.style.position = "absolute", r.style.width = "1px", r.style.height = "1px", r.style.padding = "0", r.style.margin = "-1px", r.style.overflow = "hidden", r.style.border = "0", r.style.whiteSpace = "nowrap", a === "submit" && (this.name && (r.name = this.name), this.value && (r.value = this.value), this.formaction && r.setAttribute("formaction", this.formaction), this.formenctype && r.setAttribute("formenctype", this.formenctype), this.formmethod && r.setAttribute("formmethod", this.formmethod), this.formnovalidate && r.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && r.setAttribute("formtarget", this.formtarget)), this.form.append(r), r.click(), r.remove();
+    const n = document.createElement("button");
+    n.type = r, n.style.position = "absolute", n.style.width = "1px", n.style.height = "1px", n.style.padding = "0", n.style.margin = "-1px", n.style.overflow = "hidden", n.style.border = "0", n.style.whiteSpace = "nowrap", r === "submit" && (this.name && (n.name = this.name), this.value && (n.value = this.value), this.formaction && n.setAttribute("formaction", this.formaction), this.formenctype && n.setAttribute("formenctype", this.formenctype), this.formmethod && n.setAttribute("formmethod", this.formmethod), this.formnovalidate && n.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && n.setAttribute("formtarget", this.formtarget)), this.form.append(n), n.click(), n.remove();
   }
   _handleClick() {
     this.form && (this.isLoading || this.tag === "button" && (this.type === "submit" ? (this.formnovalidate || this.form.reportValidity()) && this._simulateNativeButtonClick("submit") : this.type === "reset" && this._simulateNativeButtonClick("reset")));
@@ -547,147 +547,147 @@ const C = "pie-button", U = class U extends Lt(At) {
    * @private
    */
   renderSpinner() {
-    const { size: a, variant: r, disabled: b } = this, c = a && a.includes("small") ? "small" : "medium";
-    let m;
-    return b ? m = r === "ghost-inverse" ? "inverse" : "secondary" : m = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", M`
+    const { size: r, variant: n, disabled: b } = this, d = r && r.includes("small") ? "small" : "medium";
+    let u;
+    return b ? u = n === "ghost-inverse" ? "inverse" : "secondary" : u = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", z`
             <pie-spinner
-                size="${c}"
-                variant="${m}">
+                size="${d}"
+                variant="${u}">
             </pie-spinner>`;
   }
-  renderAnchor(a) {
+  renderAnchor(r) {
     const {
-      href: r,
+      href: n,
       iconPlacement: b,
-      rel: c,
-      target: m
+      rel: d,
+      target: u
     } = this;
-    return M`
+    return z`
             <a
-                href="${K(r)}"
-                rel="${K(c)}"
-                target="${K(m)}"
-                class="${vt(a)}">
-                ${b === "leading" ? M`<slot name="icon"></slot>` : F}
+                href="${K(n)}"
+                rel="${K(d)}"
+                target="${K(u)}"
+                class="${vt(r)}">
+                ${b === "leading" ? z`<slot name="icon"></slot>` : F}
                 <slot></slot>
-                ${b === "trailing" ? M`<slot name="icon"></slot>` : F}
+                ${b === "trailing" ? z`<slot name="icon"></slot>` : F}
             </a>`;
   }
-  renderButton(a) {
+  renderButton(r) {
     const {
-      disabled: r,
+      disabled: n,
       iconPlacement: b,
-      isLoading: c,
-      type: m
+      isLoading: d,
+      type: u
     } = this, y = {
-      ...a,
-      "is-loading": c
+      ...r,
+      "is-loading": d
     };
-    return M`
+    return z`
             <button
                 @click=${this._handleClick}
                 class=${vt(y)}
-                type=${m}
-                ?disabled=${r}>
-                    ${c ? this.renderSpinner() : F}
-                    ${b === "leading" ? M`<slot name="icon"></slot>` : F}
-                    <slot></slot>
-                    ${b === "trailing" ? M`<slot name="icon"></slot>` : F}
+                type=${u}
+                ?disabled=${n}>
+                    ${d ? this.renderSpinner() : F}
+                    ${b === "leading" ? z`<slot name="icon"></slot>` : F}
+                    <span class="o-btn-text"><slot></slot></span>
+                    ${b === "trailing" ? z`<slot name="icon"></slot>` : F}
             </button>`;
   }
   render() {
     const {
-      isFullWidth: a,
-      isResponsive: r,
+      isFullWidth: r,
+      isResponsive: n,
       responsiveSize: b,
-      size: c,
-      tag: m,
+      size: d,
+      tag: u,
       variant: y
-    } = this, S = {
+    } = this, M = {
       "o-btn": !0,
-      "o-btn--fullWidth": a,
-      "o-btn--responsive": r,
-      [`o-btn--${b}`]: !!(r && b),
+      "o-btn--fullWidth": r,
+      "o-btn--responsive": n,
+      [`o-btn--${b}`]: !!(n && b),
       [`o-btn--${y}`]: !0,
-      [`o-btn--${c}`]: !0
+      [`o-btn--${d}`]: !0
     };
-    return m === "a" ? this.renderAnchor(S) : this.renderButton(S);
+    return u === "a" ? this.renderAnchor(M) : this.renderButton(M);
   }
   focus() {
-    var a, r;
-    (r = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button")) == null || r.focus();
+    var r, n;
+    (n = (r = this.shadowRoot) == null ? void 0 : r.querySelector("button")) == null || n.focus();
   }
 };
 U.styles = It(Rt);
-let d = U;
-h([
+let c = U;
+p([
   v({ type: String }),
-  A(C, Vt, f.tag)
-], d.prototype, "tag");
-h([
+  A(S, Vt, f.tag)
+], c.prototype, "tag");
+p([
   v({ type: String }),
-  A(C, Nt, f.size)
-], d.prototype, "size");
-h([
+  A(S, Nt, f.size)
+], c.prototype, "size");
+p([
   v({ type: String }),
-  A(C, Pt, f.type)
-], d.prototype, "type");
-h([
+  A(S, Pt, f.type)
+], c.prototype, "type");
+p([
   v({ type: String }),
-  A(C, Ot, f.variant)
-], d.prototype, "variant");
-h([
+  A(S, Ot, f.variant)
+], c.prototype, "variant");
+p([
   v({ type: String }),
-  A(C, _t, f.iconPlacement)
-], d.prototype, "iconPlacement");
-h([
+  A(S, _t, f.iconPlacement)
+], c.prototype, "iconPlacement");
+p([
   v({ type: Boolean })
-], d.prototype, "disabled");
-h([
+], c.prototype, "disabled");
+p([
   v({ type: Boolean, reflect: !0 })
-], d.prototype, "isLoading");
-h([
+], c.prototype, "isLoading");
+p([
   v({ type: Boolean })
-], d.prototype, "isFullWidth");
-h([
+], c.prototype, "isFullWidth");
+p([
   v({ type: Boolean })
-], d.prototype, "isResponsive");
-h([
+], c.prototype, "isResponsive");
+p([
   v({ type: String })
-], d.prototype, "name");
-h([
+], c.prototype, "name");
+p([
   v({ type: String })
-], d.prototype, "value");
-h([
+], c.prototype, "value");
+p([
   v({ type: String })
-], d.prototype, "formaction");
-h([
+], c.prototype, "formaction");
+p([
   v({ type: String })
-], d.prototype, "formenctype");
-h([
+], c.prototype, "formenctype");
+p([
   v({ type: String })
-], d.prototype, "formmethod");
-h([
+], c.prototype, "formmethod");
+p([
   v({ type: Boolean })
-], d.prototype, "formnovalidate");
-h([
+], c.prototype, "formnovalidate");
+p([
   v({ type: String })
-], d.prototype, "formtarget");
-h([
+], c.prototype, "formtarget");
+p([
   v({ type: String })
-], d.prototype, "responsiveSize");
-h([
+], c.prototype, "responsiveSize");
+p([
   v({ type: String })
-], d.prototype, "href");
-h([
+], c.prototype, "href");
+p([
   v({ type: String })
-], d.prototype, "rel");
-h([
+], c.prototype, "rel");
+p([
   v({ type: String })
-], d.prototype, "target");
-Tt(C, d);
+], c.prototype, "target");
+Tt(S, c);
 export {
-  d as PieButton,
+  c as PieButton,
   f as defaultProps,
   Gt as formEncodingtypes,
   Jt as formMethodTypes,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -37,7 +37,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.13.1",
+    "@justeattakeaway/pie-css": "0.14.1",
     "@justeattakeaway/pie-wrapper-react": "0.14.2",
     "cem-plugin-module-file-extensions": "0.0.5"
   },

package/src/button.scss

@@ -24,60 +24,84 @@
     // The following values set to default background and color
     // currently this sets the primary button styles
     --btn-bg-color: var(--dt-color-interactive-brand);
-    --btn-text-color: var(--dt-color-content-interactive-primary);
-
-    // Heights for the different button sizes
-    --btn-height--xsmall: 32px;
-    --btn-height--small: 40px;
-    --btn-height--medium: 48px;
-    --btn-height--large: 56px;
+    --btn-text-color: var(--dt-color-content-interactive-light);
     --icon-display-override: block;
 
+    // Vertical and horizontal padding values for the button
+    --btn-padding-vertical-xsmall: 6px;
+    --btn-padding-vertical-small: 8px;
+    --btn-padding-vertical-medium: 10px;
+    --btn-padding-vertical-large: 14px;
+    --btn-padding-horizontal-small: var(--dt-spacing-b);
+    --btn-padding-horizontal-medium: var(--dt-spacing-d);
+    --btn-padding-horizontal-large: var(--dt-spacing-e);
+
     /**
     * Mixin for updating the button styles based on the size passed in.
     * Takes in the name of the size to be used.
     */
     @mixin button-size($size) {
         @if $size == 'xsmall' {
-            --btn-height: var(--btn-height--xsmall);
-            --btn-padding: 6px var(--dt-spacing-b);
             --btn-font-size: #{p.font-size(--dt-font-size-14)};
             --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
             --icon-size-override: 16px;
         } @else if $size == 'small-expressive' {
-            --btn-height: var(--btn-height--small);
-            --btn-padding: 6px var(--dt-spacing-d);
             --btn-font-size: #{p.font-size(--dt-font-size-20)};
             --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
             --icon-size-override: 20px;
         } @else if $size == 'small-productive' {
-            --btn-height: var(--btn-height--small);
-            --btn-padding: 8px var(--dt-spacing-d);
             --btn-font-size: #{p.font-size(--dt-font-size-16)};
             --btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
             --icon-size-override: 20px;
         } @else if $size == 'medium' {
-            --btn-height: var(--btn-height--medium);
-            --btn-padding: 10px var(--dt-spacing-e);
             --btn-font-size: #{p.font-size(--dt-font-size-20)};
             --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
             --icon-size-override: 24px;
         } @else if $size == 'large' {
-            --btn-height: var(--btn-height--large);
-            --btn-padding: 14px var(--dt-spacing-e);
             --btn-font-size: #{p.font-size(--dt-font-size-20)};
             --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
             --icon-size-override: 24px;
         }
     }
 
+    /**
+    * Mixin for applying the button padding based on the size passed in.
+    * $size: The name of the size to be used.
+    * $offsetPaddingForBorder: A boolean to specify whether the padding should be offset for a border
+    */
+    @mixin button-padding($size, $offsetPaddingForBorder: false) {
+        $verticalPadding: '';
+        $horizontalPadding: '';
+
+        @if $size == 'xsmall' {
+            $verticalPadding: '--btn-padding-vertical-xsmall';
+            $horizontalPadding: '--btn-padding-horizontal-small';
+        } @else if $size == 'small-expressive' {
+            $verticalPadding: '--btn-padding-vertical-xsmall';
+            $horizontalPadding: '--btn-padding-horizontal-medium';
+        } @else if $size == 'small-productive' {
+            $verticalPadding: '--btn-padding-vertical-small';
+            $horizontalPadding: '--btn-padding-horizontal-medium';
+        } @else if $size == 'medium' {
+            $verticalPadding: '--btn-padding-vertical-medium';
+            $horizontalPadding: '--btn-padding-horizontal-large';
+        } @else if $size == 'large' {
+            $verticalPadding: '--btn-padding-vertical-large';
+            $horizontalPadding: '--btn-padding-horizontal-large';
+        }
+
+        @if $offsetPaddingForBorder {
+            padding: calc(var(#{$verticalPadding}) - 1px) var(#{$horizontalPadding});
+        } @else {
+            padding: var(#{$verticalPadding}) var(#{$horizontalPadding});
+        }
+    }
+
     position: relative;
     display: inline-flex;
     gap: var(--dt-spacing-b);
     align-items: center;
     justify-content: center;
-    height: var(--btn-height);
-    padding: var(--btn-padding);
     border: none;
     border-radius: var(--btn-border-radius);
     outline: none;
@@ -107,6 +131,7 @@
             * update the button backgrounds so that the text is accessible
             **/
             --btn-bg-color: var(--dt-color-interactive-primary);
+            --btn-text-color: var(--dt-color-content-interactive-primary);
 
             @include p.button-interactive-states('--dt-color-interactive-primary', 'inverse');
         }
@@ -167,7 +192,7 @@
         @include p.button-interactive-states('--dt-color-container-default', 'transparent');
     }
 
-    &.o-btn--outline-inverse:not([disabled]) {
+    &.o-btn--outline-inverse {
         border: 1px solid var(--dt-color-border-strong);
     }
 
@@ -191,43 +216,98 @@
     // *********************
     &.o-btn--xsmall {
         @include button-size(xsmall);
+        @include button-padding(xsmall);
 
         @include responsive-wide {
             // productive is the default size when responsive is enabled
             @include button-size(small-productive);
+            @include button-padding(small-productive);
 
             &.o-btn--expressive {
                 @include button-size(small-expressive);
+                @include button-padding(small-expressive);
+            }
+        }
+
+        &.o-btn--outline,
+        &.o-btn--outline-inverse {
+            @include button-padding(xsmall, true);
+
+            @include responsive-wide {
+                @include button-padding(small-productive, true);
+
+                &.o-btn--expressive {
+                    @include button-padding(small-expressive, true);
+                }
             }
         }
     }
 
     &.o-btn--small-expressive {
         @include button-size(small-expressive);
+        @include button-padding(small-expressive);
 
         @include responsive-wide {
             @include button-size(medium);
+            @include button-padding(medium);
+        }
+
+        &.o-btn--outline,
+        &.o-btn--outline-inverse {
+            @include button-padding(small-expressive, true);
+
+            @include responsive-wide {
+                @include button-padding(medium, true);
+            }
         }
     }
 
     &.o-btn--small-productive {
         @include button-size(small-productive);
+        @include button-padding(small-productive);
 
         @include responsive-wide {
             @include button-size(medium);
+            @include button-padding(medium);
+        }
+
+        &.o-btn--outline,
+        &.o-btn--outline-inverse {
+            @include button-padding(small-productive, true);
+
+            @include responsive-wide {
+                @include button-padding(medium, true);
+            }
         }
     }
 
     &.o-btn--medium {
         @include button-size(medium);
+        @include button-padding(medium);
 
         @include responsive-wide {
             @include button-size(large);
+            @include button-padding(large);
+        }
+
+        &.o-btn--outline,
+        &.o-btn--outline-inverse {
+            @include button-padding(medium, true);
+
+            @include responsive-wide {
+                @include button-padding(large, true);
+            }
         }
     }
 
     &.o-btn--large {
         @include button-size(large);
+        @include button-padding(large);
+
+        &.o-btn--outline,
+        &.o-btn--outline-inverse {
+            @include button-padding(large, true);
+        }
     }
 
     // ******************************
@@ -251,7 +331,8 @@
         }
 
         // For outline variants, set the border to the disabled color
-        &.o-btn--outline {
+        &.o-btn--outline,
+        &.o-btn--outline-inverse {
             border-color: var(--dt-color-disabled-01) !important;
         }
     }
@@ -277,6 +358,14 @@
     }
 }
 
+// The inner span for the button text is needed to handle the text-overflow
+// Without this, single word overflow wouldn't be possible in combination
+// with display: flex.
+.o-btn-text {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
 // Used to size an SVG if one is passed in (when not using the component icons)
 ::slotted(svg) {
     height: var(--icon-size-override);

package/src/index.ts

@@ -265,7 +265,7 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
                 ?disabled=${disabled}>
                     ${isLoading ? this.renderSpinner() : nothing}
                     ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
-                    <slot></slot>
+                    <span class="o-btn-text"><slot></slot></span>
                     ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
             </button>`;
     }