@justeattakeaway/pie-button 1.5.0 → 1.5.1

package/dist/index.d.ts

@@ -125,9 +125,9 @@ export declare class PieButton extends PieButton_base implements ButtonProps {
     disconnectedCallback(): void;
     updated(changedProperties: PropertyValues<this>): void;
     tag: "button" | "a";
-    size: "xsmall" | "medium" | "large" | "small-productive" | "small-expressive";
+    size: "xsmall" | "small-productive" | "small-expressive" | "medium" | "large";
     type: "button" | "submit" | "reset";
-    variant: "secondary" | "inverse" | "primary" | "primary-alternative" | "outline" | "outline-inverse" | "ghost" | "ghost-inverse" | "destructive" | "destructive-ghost";
+    variant: "primary" | "primary-alternative" | "secondary" | "outline" | "outline-inverse" | "ghost" | "inverse" | "ghost-inverse" | "destructive" | "destructive-ghost";
     iconPlacement: "leading" | "trailing";
     disabled: boolean;
     isLoading: boolean;

package/dist/index.js

@@ -6,7 +6,7 @@ import { FormControlMixin as Tt, validPropertyValues as A, defineCustomElement a
 import "@justeattakeaway/pie-spinner";
 (function() {
   (function(y) {
-    const n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), U = /* @__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 a = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), U = /* @__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",
@@ -53,13 +53,13 @@ import "@justeattakeaway/pie-spinner";
       for (let i in T) {
         t[i] = null;
         let o = null;
-        const a = T[i];
+        const n = T[i];
         Object.defineProperty(t, i, {
           get() {
             return o;
           },
           set(s) {
-            o = s, e.isConnected ? e.setAttribute(a, s) : I.set(e, t);
+            o = s, e.isConnected ? e.setAttribute(n, s) : I.set(e, t);
           }
         });
       }
@@ -75,22 +75,22 @@ import "@justeattakeaway/pie-spinner";
         }
       });
       let o = i.nextNode();
-      const a = !t || e.disabled;
+      const n = !t || e.disabled;
       for (; o; )
-        o.formDisabledCallback && a && R(o, e.disabled), o = i.nextNode();
+        o.formDisabledCallback && n && R(o, e.disabled), o = i.nextNode();
     }, Z = { attributes: !0, attributeFilter: ["disabled", "name"] }, V = _() ? new MutationObserver((e) => {
       for (const t of e) {
         const i = t.target;
         if (t.attributeName === "disabled" && (i.constructor.formAssociated ? R(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && Y(i)), t.attributeName === "name" && i.constructor.formAssociated) {
-          const o = l.get(i), a = U.get(i);
-          o.setFormValue(a);
+          const o = l.get(i), n = U.get(i);
+          o.setFormValue(n);
         }
       }
     }) : {};
     function O(e) {
       e.forEach((t) => {
-        const { addedNodes: i, removedNodes: o } = t, a = Array.from(i), s = Array.from(o);
-        a.forEach((d) => {
+        const { addedNodes: i, removedNodes: o } = t, n = Array.from(i), s = Array.from(o);
+        n.forEach((d) => {
           var u;
           if (l.has(d) && d.constructor.formAssociated && X(d), I.has(d)) {
             const h = I.get(d);
@@ -123,8 +123,8 @@ import "@justeattakeaway/pie-spinner";
       e.forEach((t) => {
         const { removedNodes: i } = t;
         i.forEach((o) => {
-          const a = J.get(t.target);
-          l.has(o) && nt(o), a.disconnect();
+          const n = J.get(t.target);
+          l.has(o) && at(o), n.disconnect();
         });
       });
     }
@@ -156,8 +156,8 @@ import "@justeattakeaway/pie-spinner";
         t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
       }
     }, N = (e) => {
-      const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = E.get(e) || [], o = Array.from(i).filter((s) => s.isConnected).map((s) => l.get(s).validity.valid), a = [...t, ...o].includes(!1);
-      e.toggleAttribute("internals-invalid", a), e.toggleAttribute("internals-valid", !a);
+      const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = E.get(e) || [], o = Array.from(i).filter((s) => s.isConnected).map((s) => l.get(s).validity.valid), n = [...t, ...o].includes(!1);
+      e.toggleAttribute("internals-invalid", n), e.toggleAttribute("internals-valid", !n);
     }, ft = (e) => {
       N(P(e.target));
     }, yt = (e) => {
@@ -166,10 +166,10 @@ import "@justeattakeaway/pie-spinner";
       const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${e.id ? `,${i}[form='${e.id}']` : ""}`).join(",");
       e.addEventListener("click", (i) => {
         if (i.target.closest(t)) {
-          const a = E.get(e);
+          const n = E.get(e);
           if (e.noValidate)
             return;
-          a.size && Array.from(a).reverse().map((u) => l.get(u).reportValidity()).includes(!1) && i.preventDefault();
+          n.size && Array.from(n).reverse().map((u) => l.get(u).reportValidity()).includes(!1) && i.preventDefault();
         }
       });
     }, wt = (e) => {
@@ -183,8 +183,8 @@ import "@justeattakeaway/pie-spinner";
         if (o)
           o.add(e);
         else {
-          const a = /* @__PURE__ */ new Set();
-          a.add(e), E.set(t, a), xt(t), t.addEventListener("reset", wt), t.addEventListener("input", ft), t.addEventListener("change", yt);
+          const n = /* @__PURE__ */ new Set();
+          n.add(e), E.set(t, n), xt(t), t.addEventListener("reset", wt), t.addEventListener("input", ft), t.addEventListener("change", yt);
         }
         f.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
           e.formAssociatedCallback.apply(e, [t]);
@@ -198,10 +198,10 @@ import "@justeattakeaway/pie-spinner";
         throw new i(t);
     }, rt = (e, t, i) => {
       const o = E.get(e);
-      return o && o.size && o.forEach((a) => {
-        l.get(a)[i]() || (t = !1);
+      return o && o.size && o.forEach((n) => {
+        l.get(n)[i]() || (t = !1);
       }), t;
-    }, nt = (e) => {
+    }, at = (e) => {
       if (e.constructor.formAssociated) {
         const t = l.get(e), { labels: i, form: o } = t;
         it(e, i), ot(e, o, t);
@@ -221,7 +221,7 @@ import "@justeattakeaway/pie-spinner";
         i !== "valid" && e[i] !== !1 && (t = !1);
       return t;
     }, D = /* @__PURE__ */ new WeakMap();
-    function at(e, t) {
+    function nt(e, t) {
       e.toggleAttribute(t, !0), e.part && e.part.add(t);
     }
     class W extends Set {
@@ -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 i = super.add(t), o = D.get(this), a = `state${t}`;
-        return o.isConnected ? at(o, a) : setTimeout(() => {
-          at(o, a);
+        const i = super.add(t), o = D.get(this), n = `state${t}`;
+        return o.isConnected ? nt(o, n) : setTimeout(() => {
+          nt(o, n);
         }), i;
       }
       clear() {
@@ -254,11 +254,10 @@ import "@justeattakeaway/pie-spinner";
       }
     }
     function st(e, t, i, o) {
-      if (i === "a" && !o) throw new TypeError("Private accessor was defined without a getter");
-      if (typeof t == "function" ? e !== t || !o : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+      if (typeof t == "function" ? e !== t || !0 : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
       return i === "m" ? o : i === "a" ? o.call(e) : o ? o.value : t.get(e);
     }
-    function St(e, t, i, o, a) {
+    function St(e, t, i, o, n) {
       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, i), i;
     }
@@ -298,10 +297,10 @@ import "@justeattakeaway/pie-spinner";
         let d = t.apply(this, s);
         return rt(this, d, "reportValidity");
       }
-      const { get: a } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
+      const { get: n } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
       Object.defineProperty(HTMLFormElement.prototype, "elements", {
         get(...s) {
-          const d = a.call(this, ...s), u = Array.from(E.get(this) || []);
+          const d = n.call(this, ...s), u = Array.from(E.get(this) || []);
           if (u.length === 0)
             return d;
           const h = Array.from(d).concat(u).sort((k, x) => k.compareDocumentPosition ? k.compareDocumentPosition(x) & 2 ? 1 : -1 : 0);
@@ -317,10 +316,10 @@ import "@justeattakeaway/pie-spinner";
         if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
         const i = t.getRootNode(), o = new kt();
-        this.states = new W(t), n.set(this, t), r.set(this, o), l.set(t, this), pt(t, this), gt(t, this), Object.seal(this), i instanceof DocumentFragment && ut(i);
+        this.states = new W(t), a.set(this, t), r.set(this, o), l.set(t, this), pt(t, this), gt(t, this), Object.seal(this), i instanceof DocumentFragment && ut(i);
       }
       checkValidity() {
-        const t = n.get(this);
+        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)
           return !0;
         const i = r.get(this);
@@ -335,19 +334,19 @@ import "@justeattakeaway/pie-spinner";
         return i.valid;
       }
       get form() {
-        const t = n.get(this);
+        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.");
         let i;
         return t.constructor.formAssociated === !0 && (i = P(t)), i;
       }
       get labels() {
-        const t = n.get(this);
+        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 i = t.getAttribute("id"), o = t.getRootNode();
         return o && i ? o.querySelectorAll(`[for="${i}"]`) : [];
       }
       reportValidity() {
-        const t = n.get(this);
+        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)
           return !0;
         const i = this.checkValidity(), o = G.get(this);
@@ -356,23 +355,23 @@ import "@justeattakeaway/pie-spinner";
         return !i && o && (t.focus(), o.focus()), i;
       }
       setFormValue(t) {
-        const i = n.get(this);
+        const i = a.get(this);
         if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), tt(this), t != null && !(t instanceof FormData)) {
           if (i.getAttribute("name")) {
             const o = et(i, this);
             o.value = t;
           }
-        } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([o, a]) => {
-          if (typeof a == "string") {
+        } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([o, n]) => {
+          if (typeof n == "string") {
             const s = et(i, this);
-            s.name = o, s.value = a;
+            s.name = o, s.value = n;
           }
         });
         U.set(i, t);
       }
       setValidity(t, i, o) {
-        const a = n.get(this);
-        if (w(a, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
+        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)
           throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
         G.set(this, o);
         const s = r.get(this), d = {};
@@ -384,22 +383,22 @@ import "@justeattakeaway/pie-spinner";
         const { valid: h } = zt(s, u, this.form);
         if (!h && !i)
           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, h ? "" : i), a.isConnected ? (a.toggleAttribute("internals-invalid", !h), a.toggleAttribute("internals-valid", h), a.setAttribute("aria-invalid", `${!h}`)) : L.set(a, this);
+        m.set(this, h ? "" : i), n.isConnected ? (n.toggleAttribute("internals-invalid", !h), n.toggleAttribute("internals-valid", h), n.setAttribute("aria-invalid", `${!h}`)) : L.set(n, this);
       }
       get shadowRoot() {
-        const t = n.get(this), i = q.get(t);
+        const t = a.get(this), i = q.get(t);
         return i || null;
       }
       get validationMessage() {
-        const t = n.get(this);
+        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);
       }
       get validity() {
-        const t = n.get(this);
+        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);
       }
       get willValidate() {
-        const t = n.get(this);
+        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"));
       }
     }
@@ -438,14 +437,14 @@ import "@justeattakeaway/pie-spinner";
       if (!dt) {
         if (dt = !0, typeof window < "u" && (window.ElementInternals = lt), typeof CustomElementRegistry < "u") {
           const t = CustomElementRegistry.prototype.define;
-          CustomElementRegistry.prototype.define = function(i, o, a) {
+          CustomElementRegistry.prototype.define = function(i, o, n) {
             if (o.formAssociated) {
               const s = o.prototype.connectedCallback;
               o.prototype.connectedCallback = function() {
-                Q.has(this) || (Q.set(this, !0), this.hasAttribute("disabled") && R(this, !0)), s != null && s.apply(this), nt(this);
+                Q.has(this) || (Q.set(this, !0), this.hasAttribute("disabled") && R(this, !0)), s != null && s.apply(this), at(this);
               };
             }
-            t.call(this, i, o, a);
+            t.call(this, i, o, n);
           };
         }
         if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
@@ -458,12 +457,12 @@ import "@justeattakeaway/pie-spinner";
           return new lt(this);
         }), typeof Element < "u") {
           let t = function(...o) {
-            const a = i.apply(this, o);
-            if (q.set(this, a), _()) {
+            const n = i.apply(this, o);
+            if (q.set(this, n), _()) {
               const s = new MutationObserver(O);
-              window.ShadyDOM ? s.observe(this, $) : s.observe(a, $), M.set(this, s);
+              window.ShadyDOM ? s.observe(this, $) : s.observe(n, $), M.set(this, s);
             }
-            return a;
+            return n;
           };
           const i = Element.prototype.attachShadow;
           Element.prototype.attachShadow = t;
@@ -474,14 +473,14 @@ import "@justeattakeaway/pie-spinner";
     return !!customElements.polyfillWrapFlushCallback || (At() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : bt(!1)), y.forceCustomStateSetPolyfill = H, y.forceElementInternalsPolyfill = bt, Object.defineProperty(y, "__esModule", { value: !0 }), y;
   })({});
 })();
-var Nt = Object.defineProperty, Pt = (y, n, r, b) => {
+var Nt = Object.defineProperty, Pt = (y, a, r, b) => {
   for (var l = void 0, m = y.length - 1, f; m >= 0; m--)
-    (f = y[m]) && (l = f(n, r, l) || l);
-  return l && Nt(n, r, l), l;
+    (f = y[m]) && (l = f(a, r, l) || l);
+  return l && Nt(a, r, l), l;
 };
 class mt extends It {
   constructor() {
-    super(...arguments), this.v = "1.5.0";
+    super(...arguments), this.v = "1.5.1";
   }
 }
 Pt([
@@ -509,35 +508,35 @@ const _t = ["button", "a"], Ot = ["xsmall", "small-productive", "small-expressiv
   isFullWidth: !1,
   isResponsive: !1
 }, Wt = "*,*: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);--int-states-mixin-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(--int-states-mixin-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,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}.o-btn.o-btn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}.o-btn.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--int-states-mixin-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,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-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,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--xsmall.is-loading:not(:disabled,.is-disabled),.o-btn.o-btn--primary.o-btn--small-productive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--primary.o-btn--xsmall:hover:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary))}.o-btn.o-btn--primary.o-btn--xsmall:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--xsmall.is-loading:not(:disabled,.is-disabled),.o-btn.o-btn--primary.o-btn--small-productive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-interactive-primary))}}@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{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled,.is-disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled,.is-disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}}.o-btn.o-btn--primary-alternative{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--primary-alternative:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-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-alternative:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary-alternative.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--primary-alternative:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary))}.o-btn.o-btn--primary-alternative:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary-alternative.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-interactive-primary))}}.o-btn.o-btn--secondary{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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,.is-disabled,.is-dismissible),.o-btn.o-btn--secondary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-secondary))}.o-btn.o-btn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--secondary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-secondary))}}.o-btn.o-btn--outline{--int-states-mixin-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,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-btn.o-btn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--outline.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-btn.o-btn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--outline.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-btn.o-btn--ghost{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn.o-btn--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-btn.o-btn--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-btn.o-btn--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-btn.o-btn--inverse{--int-states-mixin-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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,.is-disabled,.is-dismissible),.o-btn.o-btn--inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-inverse))}.o-btn.o-btn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-inverse))}}.o-btn.o-btn--ghost-inverse,.o-btn.o-btn--outline-inverse{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--ghost-inverse:hover:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--outline-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier))}.o-btn.o-btn--ghost-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-inverse.is-loading:not(:disabled,.is-disabled),.o-btn.o-btn--outline-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--outline-inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--ghost-inverse:hover:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--outline-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent))}.o-btn.o-btn--ghost-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-inverse.is-loading:not(:disabled,.is-disabled),.o-btn.o-btn--outline-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--outline-inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-transparent))}}.o-btn.o-btn--outline-inverse{border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--destructive{--int-states-mixin-bg-color: var(--dt-color-support-error)}.o-btn.o-btn--destructive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-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,.is-disabled,.is-dismissible),.o-btn.o-btn--destructive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-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)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--destructive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error))}.o-btn.o-btn--destructive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--destructive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error))}}.o-btn.o-btn--destructive-ghost{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn.o-btn--destructive-ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-btn.o-btn--destructive-ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--destructive-ghost.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--destructive-ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-btn.o-btn--destructive-ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--destructive-ghost.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.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){--int-states-mixin-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 Ht = Object.defineProperty, p = (y, n, r, b) => {
+var Ht = Object.defineProperty, p = (y, a, r, b) => {
   for (var l = void 0, m = y.length - 1, f; m >= 0; m--)
-    (f = y[m]) && (l = f(n, r, l) || l);
-  return l && Ht(n, r, l), l;
+    (f = y[m]) && (l = f(a, r, l) || l);
+  return l && Ht(a, r, l), l;
 };
 const S = "pie-button", j = class j extends Tt(mt) {
   constructor() {
-    super(...arguments), this.tag = g.tag, this.size = g.size, this.type = g.type, this.variant = g.variant, this.iconPlacement = g.iconPlacement, this.disabled = g.disabled, this.isLoading = g.isLoading, this.isFullWidth = g.isFullWidth, this.isResponsive = g.isResponsive, this._handleFormKeyDown = (n) => {
-      if (!(n.key !== "Enter" || this.type !== "submit" || this.disabled)) {
-        if (n.target instanceof HTMLElement) {
-          const r = n.target.tagName.toLowerCase();
+    super(...arguments), this.tag = g.tag, this.size = g.size, this.type = g.type, this.variant = g.variant, this.iconPlacement = g.iconPlacement, this.disabled = g.disabled, this.isLoading = g.isLoading, this.isFullWidth = g.isFullWidth, this.isResponsive = g.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")
             return;
         }
-        n.preventDefault(), this._handleClick();
+        a.preventDefault(), this._handleClick();
       }
     };
   }
   connectedCallback() {
-    var n;
-    super.connectedCallback(), this.type === "submit" && ((n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown));
+    var a;
+    super.connectedCallback(), this.type === "submit" && ((a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown));
   }
   disconnectedCallback() {
-    var n;
-    super.disconnectedCallback(), this.type === "submit" && ((n = this.form) == null || n.removeEventListener("keydown", this._handleFormKeyDown));
+    var a;
+    super.disconnectedCallback(), this.type === "submit" && ((a = this.form) == null || a.removeEventListener("keydown", this._handleFormKeyDown));
   }
-  updated(n) {
+  updated(a) {
     var r, b;
-    n.has("type") && (this.type === "submit" ? (r = this.form) == null || r.addEventListener("keydown", this._handleFormKeyDown) : (b = this.form) == null || b.removeEventListener("keydown", this._handleFormKeyDown));
+    a.has("type") && (this.type === "submit" ? (r = this.form) == null || r.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.
@@ -547,10 +546,10 @@ const S = "pie-button", j = class j extends Tt(mt) {
    *
    * TODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin.
    */
-  _simulateNativeButtonClick(n) {
+  _simulateNativeButtonClick(a) {
     if (!this.form) return;
     const r = document.createElement("button");
-    r.type = n, 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", n === "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();
+    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();
   }
   _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")));
@@ -561,7 +560,7 @@ const S = "pie-button", j = class j extends Tt(mt) {
    * @private
    */
   renderSpinner() {
-    const { size: n, variant: r, disabled: b } = this, l = n && n.includes("small") ? "small" : "medium";
+    const { size: a, variant: r, disabled: b } = this, l = 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", z`
             <pie-spinner
@@ -569,7 +568,7 @@ const S = "pie-button", j = class j extends Tt(mt) {
                 variant="${m}">
             </pie-spinner>`;
   }
-  renderAnchor(n) {
+  renderAnchor(a) {
     const {
       href: r,
       iconPlacement: b,
@@ -581,20 +580,20 @@ const S = "pie-button", j = class j extends Tt(mt) {
                 href="${K(r)}"
                 rel="${K(l)}"
                 target="${K(m)}"
-                class="${vt(n)}">
+                class="${vt(a)}">
                 ${b === "leading" ? z`<slot name="icon"></slot>` : F}
                 <slot></slot>
                 ${b === "trailing" ? z`<slot name="icon"></slot>` : F}
             </a>`;
   }
-  renderButton(n) {
+  renderButton(a) {
     const {
       disabled: r,
       iconPlacement: b,
       isLoading: l,
       type: m
     } = this, f = {
-      ...n,
+      ...a,
       "is-loading": l
     };
     return z`
@@ -611,7 +610,7 @@ const S = "pie-button", j = class j extends Tt(mt) {
   }
   render() {
     const {
-      isFullWidth: n,
+      isFullWidth: a,
       isResponsive: r,
       responsiveSize: b,
       size: l,
@@ -619,7 +618,7 @@ const S = "pie-button", j = class j extends Tt(mt) {
       variant: f
     } = this, M = {
       "o-btn": !0,
-      "o-btn--fullWidth": n,
+      "o-btn--fullWidth": a,
       "o-btn--responsive": r,
       [`o-btn--${b}`]: !!(r && b),
       [`o-btn--${f}`]: !0,
@@ -628,8 +627,8 @@ const S = "pie-button", j = class j extends Tt(mt) {
     return m === "a" ? this.renderAnchor(M) : this.renderButton(M);
   }
   focus() {
-    var n, r;
-    (r = (n = this.shadowRoot) == null ? void 0 : n.querySelector("button")) == null || r.focus();
+    var a, r;
+    (r = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button")) == null || r.focus();
   }
 };
 j.styles = Lt(Wt);

package/dist/react.d.ts

@@ -128,9 +128,9 @@ declare class PieButton_2 extends PieButton_base implements ButtonProps {
     disconnectedCallback(): void;
     updated(changedProperties: PropertyValues<this>): void;
     tag: "button" | "a";
-    size: "xsmall" | "medium" | "large" | "small-productive" | "small-expressive";
+    size: "xsmall" | "small-productive" | "small-expressive" | "medium" | "large";
     type: "button" | "submit" | "reset";
-    variant: "secondary" | "inverse" | "primary" | "primary-alternative" | "outline" | "outline-inverse" | "ghost" | "ghost-inverse" | "destructive" | "destructive-ghost";
+    variant: "primary" | "primary-alternative" | "secondary" | "outline" | "outline-inverse" | "ghost" | "inverse" | "ghost-inverse" | "destructive" | "destructive-ghost";
     iconPlacement: "leading" | "trailing";
     disabled: boolean;
     isLoading: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "PIE design system button built using web components",
   "repository": {
     "type": "git",
@@ -39,7 +39,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.19.0",
+    "@justeattakeaway/pie-components-config": "0.19.1",
     "@justeattakeaway/pie-css": "0.16.0",
     "@justeattakeaway/pie-monorepo-utils": "0.5.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.3",
@@ -53,8 +53,8 @@
     "dist/*.js"
   ],
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "1.1.0",
-    "@justeattakeaway/pie-webc-core": "0.25.0",
+    "@justeattakeaway/pie-spinner": "1.1.1",
+    "@justeattakeaway/pie-webc-core": "0.25.1",
     "element-internals-polyfill": "1.3.11"
   }
 }

package/declaration.d.ts

@@ -1,9 +0,0 @@
-declare module '*.scss' {
-    const content: Record<string, string>;
-    export default content;
-}
-
-declare module '*.scss?inline' {
-    const content: Record<string, string>;
-    export default content;
-}