@justeattakeaway/pie-button - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20250207102928 to 0.0.0-snapshot-release-20250228081546

custom-elements.json

@@ -51,5 +51,5 @@ {
           "type": {
-            "text": "[\n    'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',\n    'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',\n]"
+            "text": "[\n    'primary', 'primary-alternative', 'secondary', 'outline', 'outline-inverse', 'ghost',\n    'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',\n]"
           },
-          "default": "[\n    'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',\n    'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',\n]"
+          "default": "[\n    'primary', 'primary-alternative', 'secondary', 'outline', 'outline-inverse', 'ghost',\n    'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',\n]"
         },
@@ -56,0 +56,0 @@ {

dist/index.d.ts

@@ -130,3 +130,3 @@ import { ClassInfo } from 'lit/directives/class-map.js';
     type: "button" | "submit" | "reset";
-    variant: "secondary" | "inverse" | "primary" | "outline" | "outline-inverse" | "ghost" | "ghost-inverse" | "destructive" | "destructive-ghost";
+    variant: "secondary" | "inverse" | "primary" | "primary-alternative" | "outline" | "outline-inverse" | "ghost" | "ghost-inverse" | "destructive" | "destructive-ghost";
     iconPlacement: "leading" | "trailing";
@@ -184,4 +184,4 @@ disabled: boolean;
 
-export declare const variants: readonly ["primary", "secondary", "outline", "outline-inverse", "ghost", "inverse", "ghost-inverse", "destructive", "destructive-ghost"];
+export declare const variants: readonly ["primary", "primary-alternative", "secondary", "outline", "outline-inverse", "ghost", "inverse", "ghost-inverse", "destructive", "destructive-ghost"];
 
 export { }

dist/index.js

@@ -8,4 +8,4 @@ import { LitElement as At, html as z, nothing as F, unsafeCSS as It } from "lit";
 (function() {
-  (function(k) {
-    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 = {
+  (function(E) {
+    const n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__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",
@@ -53,13 +53,13 @@ ariaAutoComplete: "aria-autocomplete",
       role: "role"
-    }, pt = (e, t) => {
-      for (let o in T) {
-        t[o] = null;
-        let i = null;
-        const a = T[o];
-        Object.defineProperty(t, o, {
+    }, mt = (e, t) => {
+      for (let i in T) {
+        t[i] = null;
+        let o = null;
+        const a = T[i];
+        Object.defineProperty(t, i, {
           get() {
-            return i;
+            return o;
           },
           set(s) {
-            i = s, e.isConnected ? e.setAttribute(a, s) : I.set(e, t);
+            o = s, e.isConnected ? e.setAttribute(a, s) : I.set(e, t);
           }
@@ -70,7 +70,7 @@ });
     function X(e) {
-      const t = d.get(e), { form: o } = t;
-      it(e, o, t), ot(e, t.labels);
+      const t = d.get(e), { form: i } = t;
+      ot(e, i, t), it(e, t.labels);
     }
     const Y = (e, t = !1) => {
-      const o = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
+      const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
         acceptNode(s) {
@@ -80,12 +80,12 @@ return d.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
       });
-      let i = o.nextNode();
+      let o = i.nextNode();
       const a = !t || e.disabled;
-      for (; i; )
-        i.formDisabledCallback && a && $(i, e.disabled), i = o.nextNode();
+      for (; o; )
+        o.formDisabledCallback && a && $(o, e.disabled), o = i.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 = d.get(o), a = j.get(o);
-          i.setFormValue(a);
+        const i = t.target;
+        if (t.attributeName === "disabled" && (i.constructor.formAssociated ? $(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && Y(i)), t.attributeName === "name" && i.constructor.formAssociated) {
+          const o = d.get(i), a = j.get(i);
+          o.setFormValue(a);
         }
@@ -96,45 +96,45 @@ }
       e.forEach((t) => {
-        const { addedNodes: o, removedNodes: i } = t, a = Array.from(o), s = Array.from(i);
+        const { addedNodes: i, removedNodes: o } = t, a = Array.from(i), s = Array.from(o);
         a.forEach((l) => {
-          var h;
+          var u;
           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]);
+            const p = I.get(l);
+            Object.keys(T).filter((f) => p[f] !== null).forEach((f) => {
+              l.setAttribute(T[f], p[f]);
             }), I.delete(l);
           }
           if (L.has(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);
+            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);
           }
           if (l.localName === "form") {
-            const m = E.get(l), w = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
+            const p = k.get(l), w = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
               acceptNode(B) {
-                return d.has(B) && B.constructor.formAssociated && !(m && m.has(B)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+                return d.has(B) && B.constructor.formAssociated && !(p && p.has(B)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
               }
             });
-            let g = w.nextNode();
-            for (; g; )
-              X(g), g = w.nextNode();
+            let f = w.nextNode();
+            for (; f; )
+              X(f), f = w.nextNode();
           }
-          l.localName === "fieldset" && ((h = V.observe) === null || h === void 0 || h.call(V, l, Z), Y(l, !0));
+          l.localName === "fieldset" && ((u = V.observe) === null || u === void 0 || u.call(V, l, Z), Y(l, !0));
         }), s.forEach((l) => {
-          const h = d.get(l);
-          h && b.get(h) && tt(h), M.has(l) && M.get(l).disconnect();
+          const u = d.get(l);
+          u && b.get(u) && tt(u), M.has(l) && M.get(l).disconnect();
         });
       });
     }
-    function mt(e) {
+    function pt(e) {
       e.forEach((t) => {
-        const { removedNodes: o } = t;
-        o.forEach((i) => {
+        const { removedNodes: i } = t;
+        i.forEach((o) => {
           const a = J.get(t.target);
-          d.has(i) && rt(i), a.disconnect();
+          d.has(o) && nt(o), a.disconnect();
         });
       });
     }
-    const ut = (e) => {
-      var t, o;
-      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);
+    const ht = (e) => {
+      var t, i;
+      const o = new MutationObserver(pt);
+      !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (i = o.observe) === null || i === void 0 || i.call(o, e, { childList: !0 }), J.set(e, o);
     };
@@ -148,49 +148,49 @@ O() && new MutationObserver(_);
     }, tt = (e) => {
-      b.get(e).forEach((o) => {
-        o.remove();
+      b.get(e).forEach((i) => {
+        i.remove();
       }), b.set(e, []);
     }, 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;
-    }, ht = (e, t) => {
-      var o;
-      b.set(t, []), (o = V.observe) === null || o === void 0 || o.call(V, e, Z);
-    }, ot = (e, t) => {
+      const i = document.createElement("input");
+      return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), b.get(t).push(i), i;
+    }, ut = (e, t) => {
+      var i;
+      b.set(t, []), (i = V.observe) === null || i === void 0 || i.call(V, e, Z);
+    }, it = (e, t) => {
       if (t.length) {
-        Array.from(t).forEach((i) => i.addEventListener("click", e.click.bind(e)));
-        let o = t[0].id;
-        t[0].id || (o = `${t[0].htmlFor}_Label`, t[0].id = o), e.setAttribute("aria-labelledby", o);
+        Array.from(t).forEach((o) => o.addEventListener("click", e.click.bind(e)));
+        let i = t[0].id;
+        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), o = E.get(e) || [], i = Array.from(o).filter((s) => s.isConnected).map((s) => d.get(s).validity.valid), a = [...t, ...i].includes(!1);
+      const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = k.get(e) || [], o = Array.from(i).filter((s) => s.isConnected).map((s) => d.get(s).validity.valid), a = [...t, ...o].includes(!1);
       e.toggleAttribute("internals-invalid", a), e.toggleAttribute("internals-valid", !a);
+    }, gt = (e) => {
+      N(P(e.target));
     }, ft = (e) => {
       N(P(e.target));
-    }, gt = (e) => {
-      N(P(e.target));
     }, yt = (e) => {
-      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 a = E.get(e);
+      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 = k.get(e);
           if (e.noValidate)
             return;
-          a.size && Array.from(a).reverse().map((h) => d.get(h).reportValidity()).includes(!1) && o.preventDefault();
+          a.size && Array.from(a).reverse().map((u) => d.get(u).reportValidity()).includes(!1) && i.preventDefault();
         }
       });
     }, xt = (e) => {
-      const t = E.get(e.target);
-      t && t.size && t.forEach((o) => {
-        o.constructor.formAssociated && o.formResetCallback && o.formResetCallback.apply(o);
+      const t = k.get(e.target);
+      t && t.size && t.forEach((i) => {
+        i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
       });
-    }, it = (e, t, o) => {
+    }, ot = (e, t, i) => {
       if (t) {
-        const i = E.get(t);
-        if (i)
-          i.add(e);
+        const o = k.get(t);
+        if (o)
+          o.add(e);
         else {
           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);
+          a.add(e), k.set(t, a), yt(t), t.addEventListener("reset", xt), t.addEventListener("input", gt), t.addEventListener("change", ft);
         }
-        y.set(t, { ref: e, internals: o }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
+        y.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
           e.formAssociatedCallback.apply(e, [t]);
@@ -202,14 +202,14 @@ }, 0), N(t);
       return t && t.tagName !== "FORM" && (t = P(t)), t;
-    }, x = (e, t, o = DOMException) => {
+    }, x = (e, t, i = DOMException) => {
       if (!e.constructor.formAssociated)
-        throw new o(t);
-    }, nt = (e, t, o) => {
-      const i = E.get(e);
-      return i && i.size && i.forEach((a) => {
-        d.get(a)[o]() || (t = !1);
+        throw new i(t);
+    }, rt = (e, t, i) => {
+      const o = k.get(e);
+      return o && o.size && o.forEach((a) => {
+        d.get(a)[i]() || (t = !1);
       }), t;
-    }, rt = (e) => {
+    }, nt = (e) => {
       if (e.constructor.formAssociated) {
-        const t = d.get(e), { labels: o, form: i } = t;
-        ot(e, o), it(e, i, t);
+        const t = d.get(e), { labels: i, form: o } = t;
+        it(e, i), ot(e, o, t);
       }
@@ -225,6 +225,6 @@ };
     }
-    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) => {
+    const kt = (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), Et = (e, t, i) => (e.valid = zt(t), Object.keys(t).forEach((o) => e[o] = t[o]), i && N(i), e), zt = (e) => {
       let t = !0;
-      for (let o in e)
-        o !== "valid" && e[o] !== !1 && (t = !1);
+      for (let i in e)
+        i !== "valid" && e[i] !== !1 && (t = !1);
       return t;
@@ -247,6 +247,6 @@ }, D = /* @__PURE__ */ new WeakMap();
           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), a = `state${t}`;
-        return i.isConnected ? at(i, a) : setTimeout(() => {
-          at(i, a);
-        }), o;
+        const i = super.add(t), o = D.get(this), a = `state${t}`;
+        return o.isConnected ? at(o, a) : setTimeout(() => {
+          at(o, a);
+        }), i;
       }
@@ -259,16 +259,16 @@ clear() {
       delete(t) {
-        const o = super.delete(t), i = D.get(this);
-        return i.isConnected ? (i.toggleAttribute(`state${t}`, !1), i.part && i.part.remove(`state${t}`)) : setTimeout(() => {
-          i.toggleAttribute(`state${t}`, !1), i.part && i.part.remove(`state${t}`);
-        }), o;
+        const i = super.delete(t), o = D.get(this);
+        return o.isConnected ? (o.toggleAttribute(`state${t}`, !1), o.part && o.part.remove(`state${t}`)) : setTimeout(() => {
+          o.toggleAttribute(`state${t}`, !1), o.part && o.part.remove(`state${t}`);
+        }), i;
       }
     }
-    function st(e, t, o, i) {
-      if (o === "a" && !i) throw new TypeError("Private accessor was defined without a getter");
-      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, 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");
+      return i === "m" ? o : i === "a" ? o.call(e) : o ? o.value : t.get(e);
     }
-    function Mt(e, t, o, i, a) {
+    function Mt(e, t, i, o, 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;
+      return t.set(e, i), i;
     }
@@ -279,5 +279,5 @@ var C;
         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);
+        for (let i = 0; i < t.length; i++) {
+          let o = t[i];
+          this[i] = o, o.hasAttribute("name") && (this[o.getAttribute("name")] = o);
         }
@@ -301,12 +301,12 @@ Object.freeze(this);
       const e = HTMLFormElement.prototype.checkValidity;
-      HTMLFormElement.prototype.checkValidity = o;
+      HTMLFormElement.prototype.checkValidity = i;
       const t = HTMLFormElement.prototype.reportValidity;
-      HTMLFormElement.prototype.reportValidity = i;
-      function o(...s) {
+      HTMLFormElement.prototype.reportValidity = o;
+      function i(...s) {
         let l = e.apply(this, s);
-        return nt(this, l, "checkValidity");
+        return rt(this, l, "checkValidity");
       }
-      function i(...s) {
+      function o(...s) {
         let l = t.apply(this, s);
-        return nt(this, l, "reportValidity");
+        return rt(this, l, "reportValidity");
       }
@@ -316,7 +316,7 @@ const { get: a } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
         get(...s) {
-          const l = a.call(this, ...s), h = Array.from(E.get(this) || []);
-          if (h.length === 0)
+          const l = a.call(this, ...s), u = Array.from(k.get(this) || []);
+          if (u.length === 0)
             return l;
-          const m = Array.from(l).concat(h).sort((w, g) => w.compareDocumentPosition ? w.compareDocumentPosition(g) & 2 ? 1 : -1 : 0);
-          return new St(m);
+          const p = Array.from(l).concat(u).sort((w, f) => w.compareDocumentPosition ? w.compareDocumentPosition(f) & 2 ? 1 : -1 : 0);
+          return new St(p);
         }
@@ -332,12 +332,12 @@ });
           throw new TypeError("Illegal constructor");
-        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);
+        const i = t.getRootNode(), o = new wt();
+        this.states = new W(t), n.set(this, t), r.set(this, o), d.set(t, this), mt(t, this), ut(t, this), Object.seal(this), i instanceof DocumentFragment && ht(i);
       }
       checkValidity() {
-        const t = r.get(this);
+        const t = n.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 = n.get(this);
-        if (!o.valid) {
-          const i = new Event("invalid", {
+        const i = r.get(this);
+        if (!i.valid) {
+          const o = new Event("invalid", {
             bubbles: !1,
@@ -347,72 +347,72 @@ cancelable: !0,
           });
-          t.dispatchEvent(i);
+          t.dispatchEvent(o);
         }
-        return o.valid;
+        return i.valid;
       }
       get form() {
-        const t = r.get(this);
+        const t = n.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;
+        let i;
+        return t.constructor.formAssociated === !0 && (i = P(t)), i;
       }
       get labels() {
-        const t = r.get(this);
+        const t = n.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}"]`) : [];
+        const i = t.getAttribute("id"), o = t.getRootNode();
+        return o && i ? o.querySelectorAll(`[for="${i}"]`) : [];
       }
       reportValidity() {
-        const t = r.get(this);
+        const t = n.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)
+        const i = this.checkValidity(), o = G.get(this);
+        if (o && !t.constructor.formAssociated)
           throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
-        return !o && i && (t.focus(), i.focus()), o;
+        return !i && o && (t.focus(), o.focus()), i;
       }
       setFormValue(t) {
-        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;
+        const i = n.get(this);
+        if (x(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(([i, a]) => {
+        } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([o, a]) => {
           if (typeof a == "string") {
-            const s = et(o, this);
-            s.name = i, s.value = a;
+            const s = et(i, this);
+            s.name = o, s.value = a;
           }
         });
-        j.set(o, t);
+        j.set(i, t);
       }
-      setValidity(t, o, i) {
-        const a = r.get(this);
+      setValidity(t, i, o) {
+        const a = n.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 = n.get(this), l = {};
+        G.set(this, o);
+        const s = r.get(this), l = {};
         for (const w in t)
           l[w] = t[w];
-        Object.keys(l).length === 0 && Et(s);
-        const h = Object.assign(Object.assign({}, s), l);
-        delete h.valid;
-        const { valid: m } = kt(s, h, this.form);
-        if (!m && !o)
+        Object.keys(l).length === 0 && kt(s);
+        const u = Object.assign(Object.assign({}, s), l);
+        delete u.valid;
+        const { valid: p } = Et(s, u, this.form);
+        if (!p && !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.");
-        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);
+        h.set(this, p ? "" : i), a.isConnected ? (a.toggleAttribute("internals-invalid", !p), a.toggleAttribute("internals-valid", p), a.setAttribute("aria-invalid", `${!p}`)) : L.set(a, this);
       }
       get shadowRoot() {
-        const t = r.get(this), o = q.get(t);
-        return o || null;
+        const t = n.get(this), i = q.get(t);
+        return i || null;
       }
       get validationMessage() {
-        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);
+        const t = n.get(this);
+        return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), h.get(this);
       }
       get validity() {
-        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);
+        const t = n.get(this);
+        return x(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 = r.get(this);
+        const t = n.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"));
@@ -431,3 +431,3 @@ }
       customElements.define(t, e);
-      const o = new e();
+      const i = new e();
       return [
@@ -444,3 +444,3 @@ "shadowRoot",
         "reportValidity"
-      ].every((i) => i in o.internals);
+      ].every((o) => o in i.internals);
     }
@@ -450,4 +450,4 @@ let dt = !1, ct = !1;
       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;
+        const i = e.call(this, t);
+        return i.states = new W(this), i;
       }));
@@ -459,10 +459,10 @@ }
           const t = CustomElementRegistry.prototype.define;
-          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), rt(this);
+          CustomElementRegistry.prototype.define = function(i, o, a) {
+            if (o.formAssociated) {
+              const s = o.prototype.connectedCallback;
+              o.prototype.connectedCallback = function() {
+                Q.has(this) || (Q.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), nt(this);
               };
             }
-            t.call(this, o, i, a);
+            t.call(this, i, o, a);
           };
@@ -479,4 +479,4 @@ }
         }), typeof Element < "u") {
-          let t = function(...i) {
-            const a = o.apply(this, i);
+          let t = function(...o) {
+            const a = i.apply(this, o);
             if (q.set(this, a), O()) {
@@ -488,3 +488,3 @@ const s = new MutationObserver(_);
           };
-          const o = Element.prototype.attachShadow;
+          const i = Element.prototype.attachShadow;
           Element.prototype.attachShadow = t;
@@ -495,3 +495,3 @@ }
     }
-    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;
+    return !!customElements.polyfillWrapFlushCallback || (Ft() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : bt(!1)), E.forceCustomStateSetPolyfill = H, E.forceElementInternalsPolyfill = bt, Object.defineProperty(E, "__esModule", { value: !0 }), E;
   })({});
@@ -501,2 +501,3 @@ })();
   "primary",
+  "primary-alternative",
   "secondary",
@@ -510,3 +511,3 @@ "outline",
   "destructive-ghost"
-], _t = ["leading", "trailing"], Gt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Jt = ["post", "get", "dialog"], Qt = ["_self", "_blank", "_parent", "_top"], f = {
+], _t = ["leading", "trailing"], Gt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Jt = ["post", "get", "dialog"], Qt = ["_self", "_blank", "_parent", "_top"], g = {
   tag: "button",
@@ -521,18 +522,18 @@ size: "medium",
   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-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;
+}, 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);--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 $t = Object.defineProperty, m = (E, n, r, b) => {
+  for (var d = void 0, h = E.length - 1, y; h >= 0; h--)
+    (y = E[h]) && (d = y(n, r, d) || d);
+  return d && $t(n, r, d), d;
 };
 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 = (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")
+    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();
+          if (r === "button" || r === "pie-button")
             return;
         }
-        r.preventDefault(), this._handleClick();
+        n.preventDefault(), this._handleClick();
       }
@@ -542,12 +543,12 @@ };
   connectedCallback() {
-    var r;
-    super.connectedCallback(), this.type === "submit" && ((r = this.form) == null || r.addEventListener("keydown", this._handleFormKeyDown));
+    var n;
+    super.connectedCallback(), this.type === "submit" && ((n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown));
   }
   disconnectedCallback() {
-    var r;
-    super.disconnectedCallback(), this.type === "submit" && ((r = this.form) == null || r.removeEventListener("keydown", this._handleFormKeyDown));
+    var n;
+    super.disconnectedCallback(), this.type === "submit" && ((n = this.form) == null || n.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));
+  updated(n) {
+    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));
   }
@@ -562,6 +563,6 @@ /**
    */
-  _simulateNativeButtonClick(r) {
+  _simulateNativeButtonClick(n) {
     if (!this.form) return;
-    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();
+    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();
   }
@@ -577,23 +578,23 @@ _handleClick() {
   renderSpinner() {
-    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`
+    const { size: n, variant: r, disabled: b } = this, d = n && n.includes("small") ? "small" : "medium";
+    let h;
+    return b ? h = r === "ghost-inverse" ? "inverse" : "secondary" : h = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", z`
             <pie-spinner
                 size="${d}"
-                variant="${u}">
+                variant="${h}">
             </pie-spinner>`;
   }
-  renderAnchor(r) {
+  renderAnchor(n) {
     const {
-      href: n,
+      href: r,
       iconPlacement: b,
       rel: d,
-      target: u
+      target: h
     } = this;
     return z`
             <a
-                href="${K(n)}"
+                href="${K(r)}"
                 rel="${K(d)}"
-                target="${K(u)}"
-                class="${vt(r)}">
+                target="${K(h)}"
+                class="${vt(n)}">
                 ${b === "leading" ? z`<slot name="icon"></slot>` : F}
@@ -604,10 +605,10 @@ <slot></slot>
   }
-  renderButton(r) {
+  renderButton(n) {
     const {
-      disabled: n,
+      disabled: r,
       iconPlacement: b,
       isLoading: d,
-      type: u
+      type: h
     } = this, y = {
-      ...r,
+      ...n,
       "is-loading": d
@@ -619,4 +620,4 @@ };
                 class=${vt(y)}
-                type=${u}
-                ?disabled=${n}>
+                type=${h}
+                ?disabled=${r}>
                     ${d ? this.renderSpinner() : F}
@@ -630,21 +631,21 @@ ${b === "leading" ? z`<slot name="icon"></slot>` : F}
     const {
-      isFullWidth: r,
-      isResponsive: n,
+      isFullWidth: n,
+      isResponsive: r,
       responsiveSize: b,
       size: d,
-      tag: u,
+      tag: h,
       variant: y
     } = this, M = {
       "o-btn": !0,
-      "o-btn--fullWidth": r,
-      "o-btn--responsive": n,
-      [`o-btn--${b}`]: !!(n && b),
+      "o-btn--fullWidth": n,
+      "o-btn--responsive": r,
+      [`o-btn--${b}`]: !!(r && b),
       [`o-btn--${y}`]: !0,
       [`o-btn--${d}`]: !0
     };
-    return u === "a" ? this.renderAnchor(M) : this.renderButton(M);
+    return h === "a" ? this.renderAnchor(M) : this.renderButton(M);
   }
   focus() {
-    var r, n;
-    (n = (r = this.shadowRoot) == null ? void 0 : r.querySelector("button")) == null || n.focus();
+    var n, r;
+    (r = (n = this.shadowRoot) == null ? void 0 : n.querySelector("button")) == null || r.focus();
   }
@@ -654,65 +655,65 @@ };
 let c = U;
-p([
+m([
   v({ type: String }),
-  A(S, Vt, f.tag)
+  A(S, Vt, g.tag)
 ], c.prototype, "tag");
-p([
+m([
   v({ type: String }),
-  A(S, Nt, f.size)
+  A(S, Nt, g.size)
 ], c.prototype, "size");
-p([
+m([
   v({ type: String }),
-  A(S, Pt, f.type)
+  A(S, Pt, g.type)
 ], c.prototype, "type");
-p([
+m([
   v({ type: String }),
-  A(S, Ot, f.variant)
+  A(S, Ot, g.variant)
 ], c.prototype, "variant");
-p([
+m([
   v({ type: String }),
-  A(S, _t, f.iconPlacement)
+  A(S, _t, g.iconPlacement)
 ], c.prototype, "iconPlacement");
-p([
+m([
   v({ type: Boolean })
 ], c.prototype, "disabled");
-p([
+m([
   v({ type: Boolean, reflect: !0 })
 ], c.prototype, "isLoading");
-p([
+m([
   v({ type: Boolean })
 ], c.prototype, "isFullWidth");
-p([
+m([
   v({ type: Boolean })
 ], c.prototype, "isResponsive");
-p([
+m([
   v({ type: String })
 ], c.prototype, "name");
-p([
+m([
   v({ type: String })
 ], c.prototype, "value");
-p([
+m([
   v({ type: String })
 ], c.prototype, "formaction");
-p([
+m([
   v({ type: String })
 ], c.prototype, "formenctype");
-p([
+m([
   v({ type: String })
 ], c.prototype, "formmethod");
-p([
+m([
   v({ type: Boolean })
 ], c.prototype, "formnovalidate");
-p([
+m([
   v({ type: String })
 ], c.prototype, "formtarget");
-p([
+m([
   v({ type: String })
 ], c.prototype, "responsiveSize");
-p([
+m([
   v({ type: String })
 ], c.prototype, "href");
-p([
+m([
   v({ type: String })
 ], c.prototype, "rel");
-p([
+m([
   v({ type: String })
@@ -723,3 +724,3 @@ ], c.prototype, "target");
   c as PieButton,
-  f as defaultProps,
+  g as defaultProps,
   Gt as formEncodingtypes,
@@ -726,0 +727,0 @@ Jt as formMethodTypes,

dist/react.d.ts

@@ -133,3 +133,3 @@ import { ClassInfo } from 'lit/directives/class-map.js';
     type: "button" | "submit" | "reset";
-    variant: "secondary" | "inverse" | "primary" | "outline" | "outline-inverse" | "ghost" | "ghost-inverse" | "destructive" | "destructive-ghost";
+    variant: "secondary" | "inverse" | "primary" | "primary-alternative" | "outline" | "outline-inverse" | "ghost" | "ghost-inverse" | "destructive" | "destructive-ghost";
     iconPlacement: "leading" | "trailing";
@@ -189,4 +189,4 @@ disabled: boolean;
 
-export declare const variants: readonly ["primary", "secondary", "outline", "outline-inverse", "ghost", "inverse", "ghost-inverse", "destructive", "destructive-ghost"];
+export declare const variants: readonly ["primary", "primary-alternative", "secondary", "outline", "outline-inverse", "ghost", "inverse", "ghost-inverse", "destructive", "destructive-ghost"];
 
 export { }

package.json

 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.0.0-snapshot-release-20250207102928",
+  "version": "0.0.0-snapshot-release-20250228081546",
   "description": "PIE design system button built using web components",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/justeattakeaway/pie",
+    "directory": "packages/components/pie-button"
+  },
+  "homepage": "https://pie.design/components/button/code/",
   "type": "module",
@@ -27,5 +33,2 @@ "main": "dist/index.js",
     "watch": "run -T vite build --watch",
-    "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test",
-    "test:browsers-setup": "npx playwright-lit-setup",
     "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
@@ -41,4 +44,4 @@ "test:browsers:ci": "yarn test:browsers",
     "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.14.1",
-    "@justeattakeaway/pie-wrapper-react": "0.14.2",
+    "@justeattakeaway/pie-css": "0.15.1",
+    "@justeattakeaway/pie-wrapper-react": "0.14.3",
     "cem-plugin-module-file-extensions": "0.0.5"
@@ -54,3 +57,3 @@ },
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "1.0.0",
+    "@justeattakeaway/pie-spinner": "1.0.1",
     "@justeattakeaway/pie-webc-core": "0.24.2",
@@ -57,0 +60,0 @@ "element-internals-polyfill": "1.3.11"

src/defs.ts

@@ -8,3 +8,3 @@ import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 export const variants = [
-    'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',
+    'primary', 'primary-alternative', 'secondary', 'outline', 'outline-inverse', 'ghost',
     'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',
@@ -11,0 +11,0 @@ ] as const;

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

120643

9.16%

Lines of code

2137

1.91%

Number of low quality alerts

1

-66.67%

Number of low supply chain risk alerts

1

-50%

Dependency changes

• + Added

  @justeattakeaway/pie-spinner@1.0.1
  (transitive)

• - Removed

  @justeattakeaway/pie-spinner@1.0.0
  (transitive)

• Updated

  @justeattakeaway/pie-spinner@1.0.1