@justeattakeaway/pie-button 1.13.4 → 1.14.0

package/custom-elements.json

@@ -195,6 +195,14 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "aria",
+              "type": {
+                "text": "ButtonProps['aria']"
+              },
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "tag",

package/dist/index.d.ts

@@ -7,7 +7,15 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
 import { PropertyValues } from 'lit';
 import { TemplateResult } from 'lit';
 
+declare type AriaProps = {
+    label?: string;
+};
+
 export declare interface ButtonProps {
+    /**
+     * The ARIA attributes for the button element.
+     */
+    aria?: AriaProps;
     /**
      * Which HTML element to use when rendering the button.
      */
@@ -131,6 +139,7 @@ export declare class PieButton extends PieButton_base implements ButtonProps {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changedProperties: PropertyValues<this>): void;
+    aria: ButtonProps['aria'];
     tag: "button" | "a";
     size: "xsmall" | "small-productive" | "small-expressive" | "medium" | "large";
     type: "button" | "submit" | "reset";

package/dist/index.js

@@ -1,14 +1,14 @@
-import { LitElement as Tt, html as z, nothing as S, unsafeCSS as Vt } from "lit";
+import { LitElement as Tt, html as z, nothing as C, unsafeCSS as Vt } from "lit";
 import { classMap as mt } from "lit/directives/class-map.js";
-import { ifDefined as O } from "lit/directives/if-defined.js";
+import { ifDefined as M } from "lit/directives/if-defined.js";
 import { property as m } from "lit/decorators.js";
-import { DelegatesFocusMixin as Nt, FormControlMixin as Pt, validPropertyValues as C, safeCustomElement as Ot } from "@justeattakeaway/pie-webc-core";
+import { DelegatesFocusMixin as Nt, FormControlMixin as Ot, validPropertyValues as F, safeCustomElement as Pt } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-spinner";
 var pt = {}, ht;
 function _t() {
   return ht || (ht = 1, function() {
     (function(l) {
-      const r = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), L = {
+      const r = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), T = {
         ariaAtomic: "aria-atomic",
         ariaAutoComplete: "aria-autocomplete",
         ariaBusy: "aria-busy",
@@ -52,16 +52,16 @@ function _t() {
         ariaValueText: "aria-valuetext",
         role: "role"
       }, gt = (e, t) => {
-        for (let i in L) {
+        for (let i in T) {
           t[i] = null;
           let o = null;
-          const a = L[i];
+          const a = T[i];
           Object.defineProperty(t, i, {
             get() {
               return o;
             },
             set(n) {
-              o = n, e.isConnected ? e.setAttribute(a, n) : A.set(e, t);
+              o = n, e.isConnected ? e.setAttribute(a, n) : I.set(e, t);
             }
           });
         }
@@ -80,7 +80,7 @@ function _t() {
         const a = !t || e.disabled;
         for (; o; )
           o.formDisabledCallback && a && W(o, e.disabled), o = i.nextNode();
-      }, tt = { attributes: !0, attributeFilter: ["disabled", "name"] }, T = P() ? new MutationObserver((e) => {
+      }, tt = { attributes: !0, attributeFilter: ["disabled", "name"] }, V = P() ? new MutationObserver((e) => {
         for (const t of e) {
           const i = t.target;
           if (t.attributeName === "disabled" && (i.constructor.formAssociated ? W(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && Z(i)), t.attributeName === "name" && i.constructor.formAssociated) {
@@ -93,31 +93,31 @@ function _t() {
         e.forEach((t) => {
           const { addedNodes: i, removedNodes: o } = t, a = Array.from(i), n = Array.from(o);
           a.forEach((s) => {
-            var g;
-            if (d.has(s) && s.constructor.formAssociated && Y(s), A.has(s)) {
-              const h = A.get(s);
-              Object.keys(L).filter((y) => h[y] !== null).forEach((y) => {
-                s.setAttribute(L[y], h[y]);
-              }), A.delete(s);
-            }
-            if (I.has(s)) {
+            var u;
+            if (d.has(s) && s.constructor.formAssociated && Y(s), I.has(s)) {
               const h = I.get(s);
-              s.setAttribute("internals-valid", h.validity.valid.toString()), s.setAttribute("internals-invalid", (!h.validity.valid).toString()), s.setAttribute("aria-invalid", (!h.validity.valid).toString()), I.delete(s);
+              Object.keys(T).filter((x) => h[x] !== null).forEach((x) => {
+                s.setAttribute(T[x], h[x]);
+              }), I.delete(s);
+            }
+            if (L.has(s)) {
+              const h = L.get(s);
+              s.setAttribute("internals-valid", h.validity.valid.toString()), s.setAttribute("internals-invalid", (!h.validity.valid).toString()), s.setAttribute("aria-invalid", (!h.validity.valid).toString()), L.delete(s);
             }
             if (s.localName === "form") {
-              const h = E.get(s), w = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
-                acceptNode(U) {
-                  return d.has(U) && U.constructor.formAssociated && !(h && h.has(U)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+              const h = E.get(s), k = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
+                acceptNode(j) {
+                  return d.has(j) && j.constructor.formAssociated && !(h && h.has(j)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
                 }
               });
-              let y = w.nextNode();
-              for (; y; )
-                Y(y), y = w.nextNode();
+              let x = k.nextNode();
+              for (; x; )
+                Y(x), x = k.nextNode();
             }
-            s.localName === "fieldset" && ((g = T.observe) === null || g === void 0 || g.call(T, s, tt), Z(s, !0));
+            s.localName === "fieldset" && ((u = V.observe) === null || u === void 0 || u.call(V, s, tt), Z(s, !0));
           }), n.forEach((s) => {
-            const g = d.get(s);
-            g && p.get(g) && et(g), D.has(s) && D.get(s).disconnect();
+            const u = d.get(s);
+            u && p.get(u) && et(u), D.has(s) && D.get(s).disconnect();
           });
         });
       }
@@ -150,20 +150,20 @@ function _t() {
         return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), p.get(t).push(i), i;
       }, yt = (e, t) => {
         var i;
-        p.set(t, []), (i = T.observe) === null || i === void 0 || i.call(T, e, tt);
+        p.set(t, []), (i = V.observe) === null || i === void 0 || i.call(V, e, tt);
       }, ot = (e, t) => {
         if (t.length) {
           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);
         }
-      }, V = (e) => {
+      }, N = (e) => {
         const t = Array.from(e.elements).filter((n) => !n.tagName.includes("-") && n.validity).map((n) => n.validity.valid), i = E.get(e) || [], o = Array.from(i).filter((n) => n.isConnected).map((n) => d.get(n).validity.valid), a = [...t, ...o].includes(!1);
         e.toggleAttribute("internals-invalid", a), e.toggleAttribute("internals-valid", !a);
       }, xt = (e) => {
-        V(N(e.target));
+        N(O(e.target));
       }, wt = (e) => {
-        V(N(e.target));
+        N(O(e.target));
       }, kt = (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) => {
@@ -171,7 +171,7 @@ function _t() {
             const a = E.get(e);
             if (e.noValidate)
               return;
-            a.size && Array.from(a).reverse().map((g) => d.get(g).reportValidity()).includes(!1) && i.preventDefault();
+            a.size && Array.from(a).reverse().map((u) => d.get(u).reportValidity()).includes(!1) && i.preventDefault();
           }
         });
       }, Et = (e) => {
@@ -188,14 +188,14 @@ function _t() {
             const a = /* @__PURE__ */ new Set();
             a.add(e), E.set(t, a), kt(t), t.addEventListener("reset", Et), t.addEventListener("input", xt), t.addEventListener("change", wt);
           }
-          k.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
+          f.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
             e.formAssociatedCallback.apply(e, [t]);
-          }, 0), V(t);
+          }, 0), N(t);
         }
-      }, N = (e) => {
+      }, O = (e) => {
         let t = e.parentNode;
-        return t && t.tagName !== "FORM" && (t = N(t)), t;
-      }, x = (e, t, i = DOMException) => {
+        return t && t.tagName !== "FORM" && (t = O(t)), t;
+      }, w = (e, t, i = DOMException) => {
         if (!e.constructor.formAssociated)
           throw new i(t);
       }, at = (e, t, i) => {
@@ -217,7 +217,7 @@ function _t() {
           this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
         }
       }
-      const Mt = (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), St = (e, t, i) => (e.valid = Ct(t), Object.keys(t).forEach((o) => e[o] = t[o]), i && V(i), e), Ct = (e) => {
+      const Mt = (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), St = (e, t, i) => (e.valid = Ct(t), Object.keys(t).forEach((o) => e[o] = t[o]), i && N(i), e), Ct = (e) => {
         let t = !0;
         for (let i in e)
           i !== "valid" && e[i] !== !1 && (t = !1);
@@ -263,10 +263,10 @@ function _t() {
         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;
       }
-      var M;
+      var S;
       class At {
         constructor(t) {
-          M.set(this, void 0), Ft(this, M, t);
+          S.set(this, void 0), Ft(this, S, t);
           for (let i = 0; i < t.length; i++) {
             let o = t[i];
             this[i] = o, o.hasAttribute("name") && (this[o.getAttribute("name")] = o);
@@ -274,10 +274,10 @@ function _t() {
           Object.freeze(this);
         }
         get length() {
-          return lt(this, M, "f").length;
+          return lt(this, S, "f").length;
         }
-        [(M = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-          return lt(this, M, "f")[Symbol.iterator]();
+        [(S = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+          return lt(this, S, "f")[Symbol.iterator]();
         }
         item(t) {
           return this[t] == null ? null : this[t];
@@ -302,10 +302,10 @@ function _t() {
         const { get: a } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
         Object.defineProperty(HTMLFormElement.prototype, "elements", {
           get(...n) {
-            const s = a.call(this, ...n), g = Array.from(E.get(this) || []);
-            if (g.length === 0)
+            const s = a.call(this, ...n), u = Array.from(E.get(this) || []);
+            if (u.length === 0)
               return s;
-            const h = Array.from(s).concat(g).sort((w, y) => w.compareDocumentPosition ? w.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
+            const h = Array.from(s).concat(u).sort((k, x) => k.compareDocumentPosition ? k.compareDocumentPosition(x) & 2 ? 1 : -1 : 0);
             return new At(h);
           }
         });
@@ -318,13 +318,13 @@ function _t() {
           if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
             throw new TypeError("Illegal constructor");
           const i = t.getRootNode(), o = new zt();
-          this.states = new B(t), r.set(this, t), b.set(this, o), d.set(t, this), gt(t, this), yt(t, this), Object.seal(this), i instanceof DocumentFragment && ft(i);
+          this.states = new B(t), r.set(this, t), v.set(this, o), d.set(t, this), gt(t, this), yt(t, this), Object.seal(this), i instanceof DocumentFragment && ft(i);
         }
         checkValidity() {
           const t = r.get(this);
-          if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+          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 = b.get(this);
+          const i = v.get(this);
           if (!i.valid) {
             const o = new Event("invalid", {
               bubbles: !1,
@@ -337,19 +337,19 @@ function _t() {
         }
         get form() {
           const t = r.get(this);
-          x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
+          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 = N(t)), i;
+          return t.constructor.formAssociated === !0 && (i = O(t)), i;
         }
         get labels() {
           const t = r.get(this);
-          x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
+          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 = r.get(this);
-          if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+          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 = J.get(this);
           if (o && !t.constructor.formAssociated)
@@ -358,7 +358,7 @@ function _t() {
         }
         setFormValue(t) {
           const i = r.get(this);
-          if (x(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), et(this), t != null && !(t instanceof FormData)) {
+          if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), et(this), t != null && !(t instanceof FormData)) {
             if (i.getAttribute("name")) {
               const o = it(i, this);
               o.value = t;
@@ -373,19 +373,19 @@ function _t() {
         }
         setValidity(t, i, o) {
           const a = r.get(this);
-          if (x(a, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
+          if (w(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.");
           J.set(this, o);
-          const n = b.get(this), s = {};
-          for (const w in t)
-            s[w] = t[w];
+          const n = v.get(this), s = {};
+          for (const k in t)
+            s[k] = t[k];
           Object.keys(s).length === 0 && Mt(n);
-          const g = Object.assign(Object.assign({}, n), s);
-          delete g.valid;
-          const { valid: h } = St(n, g, this.form);
+          const u = Object.assign(Object.assign({}, n), s);
+          delete u.valid;
+          const { valid: h } = St(n, 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.");
-          f.set(this, h ? "" : i), a.isConnected ? (a.toggleAttribute("internals-invalid", !h), a.toggleAttribute("internals-valid", h), a.setAttribute("aria-invalid", `${!h}`)) : I.set(a, this);
+          g.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);
         }
         get shadowRoot() {
           const t = r.get(this), i = G.get(t);
@@ -393,15 +393,15 @@ function _t() {
         }
         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."), f.get(this);
+          return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), g.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."), b.get(this);
+          return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), v.get(this);
         }
         get willValidate() {
           const t = r.get(this);
-          return x(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
+          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"));
         }
       }
       function Lt() {
@@ -482,8 +482,8 @@ const _ = class _ extends Tt {
     this.getAttribute("v") || this.setAttribute("v", _.v);
   }
 };
-_.v = "1.13.4";
-let j = _;
+_.v = "1.14.0";
+let U = _;
 const Dt = ["button", "a"], Rt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Zt = ["productive", "expressive"], $t = ["submit", "button", "reset"], Wt = [
   "primary",
   "primary-alternative",
@@ -498,7 +498,7 @@ const Dt = ["button", "a"], Rt = ["xsmall", "small-productive", "small-expressiv
   "ghost-inverse-light",
   "destructive",
   "destructive-ghost"
-], Ht = ["leading", "trailing"], te = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], ee = ["post", "get", "dialog"], ie = ["_self", "_blank", "_parent", "_top"], u = {
+], Ht = ["leading", "trailing"], te = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], ee = ["post", "get", "dialog"], ie = ["_self", "_blank", "_parent", "_top"], y = {
   tag: "button",
   size: "medium",
   type: "submit",
@@ -509,15 +509,15 @@ const Dt = ["button", "a"], Rt = ["xsmall", "small-productive", "small-expressiv
   isFullWidth: !1,
   isResponsive: !1
 }, Bt = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}:host([isfullwidth]){display:block;width:100%}.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-solid);--btn-padding-vertical-xsmall: 6px;--btn-padding-vertical-small-expressive: 8px;--btn-padding-vertical-small-productive: 10px;--btn-padding-vertical-medium: 12px;--btn-padding-vertical-large: 16px;--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);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;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);inline-size:var(--btn-inline-size)}.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.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-solid)}.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--primary-alternative-dark{--int-states-mixin-bg-color: var(--dt-color-interactive-dark);--btn-text-color: var(--dt-color-content-interactive-light)}.o-btn.o-btn--primary-alternative-dark:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-dark-h), var(--dt-color-interactive-dark-s), calc(var(--dt-color-interactive-dark-l) + var(--hover-modifier)))}.o-btn.o-btn--primary-alternative-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary-alternative-dark.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-dark-h), var(--dt-color-interactive-dark-s), calc(var(--dt-color-interactive-dark-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--primary-alternative-dark: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-dark))}.o-btn.o-btn--primary-alternative-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary-alternative-dark.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-dark))}}.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-solid);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-interactive-secondary-solid)}.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--ghost-dark{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-dark-solid)}.o-btn.o-btn--ghost-dark: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-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-dark.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-dark: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-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-dark.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-solid)}.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--ghost-inverse-light{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-light-solid)}.o-btn.o-btn--ghost-inverse-light: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-light:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-inverse-light.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-light: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-light:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-inverse-light.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-solid)}.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-interactive-xs-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-xs-line-height) * 1px);--btn-icon-size: 16px;--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-interactive-s-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-s-line-height) * 1px);--btn-icon-size: 20px;--icon-size-override: 20px;padding:var(--btn-padding-vertical-small-productive) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--expressive{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 20px;--icon-size-override: 20px;padding:var(--btn-padding-vertical-small-expressive) 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-productive) - 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-small-expressive) - 1px) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--small-expressive{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 20px;--icon-size-override: 20px;padding:var(--btn-padding-vertical-small-expressive) 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-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--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-small-expressive) - 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-interactive-s-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-s-line-height) * 1px);--btn-icon-size: 20px;--icon-size-override: 20px;padding:var(--btn-padding-vertical-small-productive) 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-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--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-productive) - 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-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--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-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--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-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--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-solid) !important;cursor:not-allowed}.o-btn[disabled]:not(.o-btn--ghost,.o-btn--ghost-dark,.o-btn--ghost-inverse,.o-btn--ghost-inverse-light,.o-btn--destructive-ghost){--int-states-mixin-bg-color: var(--dt-color-disabled-01) !important;--btn-text-color: var(--dt-color-content-disabled) !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-text{text-overflow:ellipsis;overflow:hidden}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}";
-var Kt = Object.defineProperty, Ut = Object.getOwnPropertyDescriptor, v = (l, r, b, p) => {
-  for (var d = p > 1 ? void 0 : p ? Ut(r, b) : r, f = l.length - 1, k; f >= 0; f--)
-    (k = l[f]) && (d = (p ? k(r, b, d) : k(d)) || d);
-  return p && d && Kt(r, b, d), d;
+var Kt = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, b = (l, r, v, p) => {
+  for (var d = p > 1 ? void 0 : p ? jt(r, v) : r, g = l.length - 1, f; g >= 0; g--)
+    (f = l[g]) && (d = (p ? f(r, v, d) : f(d)) || d);
+  return p && d && Kt(r, v, d), d;
 };
-const F = "pie-button";
-let c = class extends Nt(Pt(j)) {
+const A = "pie-button";
+let c = class extends Nt(Ot(U)) {
   constructor() {
-    super(...arguments), this.tag = u.tag, this.size = u.size, this.type = u.type, this.variant = u.variant, this.iconPlacement = u.iconPlacement, this.disabled = u.disabled, this.isLoading = u.isLoading, this.isFullWidth = u.isFullWidth, this.isResponsive = u.isResponsive, this._handleFormKeyDown = (l) => {
+    super(...arguments), this.tag = y.tag, this.size = y.size, this.type = y.type, this.variant = y.variant, this.iconPlacement = y.iconPlacement, this.disabled = y.disabled, this.isLoading = y.isLoading, this.isFullWidth = y.isFullWidth, this.isResponsive = y.isResponsive, this._handleFormKeyDown = (l) => {
       if (!(l.key !== "Enter" || this.type !== "submit" || this.disabled)) {
         if (l.target instanceof HTMLElement) {
           const r = l.target.tagName.toLowerCase();
@@ -537,8 +537,8 @@ let c = class extends Nt(Pt(j)) {
     super.disconnectedCallback(), this.type === "submit" && ((l = this.form) == null || l.removeEventListener("keydown", this._handleFormKeyDown));
   }
   updated(l) {
-    var r, b;
-    l.has("type") && (this.type === "submit" ? (r = this.form) == null || r.addEventListener("keydown", this._handleFormKeyDown) : (b = this.form) == null || b.removeEventListener("keydown", this._handleFormKeyDown));
+    var r, v;
+    l.has("type") && (this.type === "submit" ? (r = this.form) == null || r.addEventListener("keydown", this._handleFormKeyDown) : (v = this.form) == null || v.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.
@@ -562,9 +562,9 @@ let c = class extends Nt(Pt(j)) {
    * @private
    */
   renderSpinner() {
-    const { size: l, variant: r, disabled: b } = this, p = l && l.includes("small") ? "small" : "medium";
+    const { size: l, variant: r, disabled: v } = this, p = l && l.includes("small") ? "small" : "medium";
     let d;
-    return b ? d = r === "ghost-inverse" ? "inverse" : "secondary" : d = ["primary", "destructive", "outline-inverse", "ghost-inverse", "ghost-inverse-light"].includes(this.variant) ? "inverse" : "secondary", z`
+    return v ? d = r === "ghost-inverse" ? "inverse" : "secondary" : d = ["primary", "destructive", "outline-inverse", "ghost-inverse", "ghost-inverse-light"].includes(this.variant) ? "inverse" : "secondary", z`
             <pie-spinner
                 size="${p}"
                 variant="${d}">
@@ -573,29 +573,32 @@ let c = class extends Nt(Pt(j)) {
   renderAnchor(l) {
     const {
       href: r,
-      iconPlacement: b,
+      iconPlacement: v,
       rel: p,
       target: d,
-      download: f
+      download: g,
+      aria: f
     } = this;
     return z`
             <a
-                href="${O(r)}"
-                rel="${O(p)}"
-                target="${O(d)}"
-                download="${O(f)}"
+                href="${M(r)}"
+                rel="${M(p)}"
+                target="${M(d)}"
+                download="${M(g)}"
+                aria-label="${M(f == null ? void 0 : f.label)}"
                 class="${mt(l)}">
-                ${b === "leading" ? z`<slot name="icon"></slot>` : S}
+                ${v === "leading" ? z`<slot name="icon"></slot>` : C}
                 <slot></slot>
-                ${b === "trailing" ? z`<slot name="icon"></slot>` : S}
+                ${v === "trailing" ? z`<slot name="icon"></slot>` : C}
             </a>`;
   }
   renderButton(l) {
     const {
       disabled: r,
-      iconPlacement: b,
+      iconPlacement: v,
       isLoading: p,
-      type: d
+      type: d,
+      aria: g
     } = this, f = {
       ...l,
       "is-loading": p
@@ -605,107 +608,111 @@ let c = class extends Nt(Pt(j)) {
                 @click=${this._handleClick}
                 class=${mt(f)}
                 type=${d}
-                ?disabled=${r}>
-                    ${p ? this.renderSpinner() : S}
-                    ${b === "leading" ? z`<slot name="icon"></slot>` : S}
+                ?disabled=${r}
+                aria-label="${M(g == null ? void 0 : g.label)}">
+                    ${p ? this.renderSpinner() : C}
+                    ${v === "leading" ? z`<slot name="icon"></slot>` : C}
                     <span class="o-btn-text"><slot></slot></span>
-                    ${b === "trailing" ? z`<slot name="icon"></slot>` : S}
+                    ${v === "trailing" ? z`<slot name="icon"></slot>` : C}
             </button>`;
   }
   render() {
     const {
       isFullWidth: l,
       isResponsive: r,
-      responsiveSize: b,
+      responsiveSize: v,
       size: p,
       tag: d,
-      variant: f
-    } = this, k = {
+      variant: g
+    } = this, f = {
       "o-btn": !0,
       "o-btn--fullWidth": l,
       "o-btn--responsive": r,
-      [`o-btn--${b}`]: !!(r && b),
-      [`o-btn--${f}`]: !0,
+      [`o-btn--${v}`]: !!(r && v),
+      [`o-btn--${g}`]: !0,
       [`o-btn--${p}`]: !0
     };
-    return d === "a" ? this.renderAnchor(k) : this.renderButton(k);
+    return d === "a" ? this.renderAnchor(f) : this.renderButton(f);
   }
 };
 c.styles = Vt(Bt);
-v([
+b([
+  m({ type: Object })
+], c.prototype, "aria", 2);
+b([
   m({ type: String }),
-  C(F, Dt, u.tag)
+  F(A, Dt, y.tag)
 ], c.prototype, "tag", 2);
-v([
+b([
   m({ type: String }),
-  C(F, Rt, u.size)
+  F(A, Rt, y.size)
 ], c.prototype, "size", 2);
-v([
+b([
   m({ type: String }),
-  C(F, $t, u.type)
+  F(A, $t, y.type)
 ], c.prototype, "type", 2);
-v([
+b([
   m({ type: String }),
-  C(F, Wt, u.variant)
+  F(A, Wt, y.variant)
 ], c.prototype, "variant", 2);
-v([
+b([
   m({ type: String }),
-  C(F, Ht, u.iconPlacement)
+  F(A, Ht, y.iconPlacement)
 ], c.prototype, "iconPlacement", 2);
-v([
+b([
   m({ type: Boolean })
 ], c.prototype, "disabled", 2);
-v([
+b([
   m({ type: Boolean, reflect: !0 })
 ], c.prototype, "isLoading", 2);
-v([
+b([
   m({ type: Boolean, reflect: !0 })
 ], c.prototype, "isFullWidth", 2);
-v([
+b([
   m({ type: Boolean })
 ], c.prototype, "isResponsive", 2);
-v([
+b([
   m({ type: String })
 ], c.prototype, "name", 2);
-v([
+b([
   m({ type: String })
 ], c.prototype, "value", 2);
-v([
+b([
   m({ type: String })
 ], c.prototype, "formaction", 2);
-v([
+b([
   m({ type: String })
 ], c.prototype, "formenctype", 2);
-v([
+b([
   m({ type: String })
 ], c.prototype, "formmethod", 2);
-v([
+b([
   m({ type: Boolean })
 ], c.prototype, "formnovalidate", 2);
-v([
+b([
   m({ type: String })
 ], c.prototype, "formtarget", 2);
-v([
+b([
   m({ type: String })
 ], c.prototype, "responsiveSize", 2);
-v([
+b([
   m({ type: String })
 ], c.prototype, "href", 2);
-v([
+b([
   m({ type: String })
 ], c.prototype, "rel", 2);
-v([
+b([
   m({ type: String })
 ], c.prototype, "target", 2);
-v([
+b([
   m({ type: String })
 ], c.prototype, "download", 2);
-c = v([
-  Ot("pie-button")
+c = b([
+  Pt("pie-button")
 ], c);
 export {
   c as PieButton,
-  u as defaultProps,
+  y as defaultProps,
   te as formEncodingtypes,
   ee as formMethodTypes,
   ie as formTargetTypes,

package/dist/react.d.ts

@@ -8,7 +8,15 @@ import { PropertyValues } from 'lit';
 import * as React_2 from 'react';
 import { TemplateResult } from 'lit';
 
+declare type AriaProps = {
+    label?: string;
+};
+
 export declare interface ButtonProps {
+    /**
+     * The ARIA attributes for the button element.
+     */
+    aria?: AriaProps;
     /**
      * Which HTML element to use when rendering the button.
      */
@@ -134,6 +142,7 @@ declare class PieButton_2 extends PieButton_base implements ButtonProps {
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changedProperties: PropertyValues<this>): void;
+    aria: ButtonProps['aria'];
     tag: "button" | "a";
     size: "xsmall" | "small-productive" | "small-expressive" | "medium" | "large";
     type: "button" | "submit" | "reset";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "1.13.4",
+  "version": "1.14.0",
   "description": "PIE design system button built using web components",
   "repository": {
     "type": "git",
@@ -30,7 +30,7 @@
   "scripts": {
     "build": "run -T vite build",
     "build:react-wrapper": "npx build-react-wrapper",
-    "create:manifest": "yarn cem analyze --litelement",
+    "create:manifest": "run -T cem analyze --litelement",
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "run -T eslint . --fix",
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
@@ -44,12 +44,10 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "1.1.0",
+    "@justeattakeaway/pie-components-config": "0.21.1",
+    "@justeattakeaway/pie-css": "1.1.1",
     "@justeattakeaway/pie-monorepo-utils": "0.9.0",
-    "@justeattakeaway/pie-wrapper-react": "0.14.4",
-    "cem-plugin-module-file-extensions": "0.0.5"
+    "@justeattakeaway/pie-wrapper-react": "0.14.4"
   },
   "volta": {
     "extends": "../../../package.json"
@@ -59,7 +57,7 @@
     "dist/*.js"
   ],
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "1.4.13",
+    "@justeattakeaway/pie-spinner": "1.4.14",
     "@justeattakeaway/pie-webc-core": "14.0.1",
     "element-internals-polyfill": "1.3.11"
   }

package/src/defs.ts

@@ -12,11 +12,20 @@ export const iconPlacements = ['leading', 'trailing'] as const;
 
 export type Variant = typeof variants[number];
 
+type AriaProps = {
+    label?: string;
+};
+
 export const formEncodingtypes = ['application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain'] as const;
 export const formMethodTypes = ['post', 'get', 'dialog'] as const;
 export const formTargetTypes = ['_self', '_blank', '_parent', '_top'] as const;
 
 export interface ButtonProps {
+    /**
+     * The ARIA attributes for the button element.
+     */
+    aria?: AriaProps;
+
     /**
      * Which HTML element to use when rendering the button.
      */

package/src/index.ts

@@ -58,6 +58,9 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
         }
     }
 
+    @property({ type: Object })
+    public aria: ButtonProps['aria'];
+
     @property({ type: String })
     @validPropertyValues(componentSelector, tags, defaultProps.tag)
     public tag = defaultProps.tag;
@@ -239,7 +242,7 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
 
     renderAnchor (classes: ClassInfo) {
         const {
-            href, iconPlacement, rel, target, download,
+            href, iconPlacement, rel, target, download, aria,
         } = this;
 
         return html`
@@ -248,6 +251,7 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
                 rel="${ifDefined(rel)}"
                 target="${ifDefined(target)}"
                 download="${ifDefined(download)}"
+                aria-label="${ifDefined(aria?.label)}"
                 class="${classMap(classes)}">
                 ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
                 <slot></slot>
@@ -257,7 +261,7 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
 
     renderButton (classes: ClassInfo) {
         const {
-            disabled, iconPlacement, isLoading, type,
+            disabled, iconPlacement, isLoading, type, aria,
         } = this;
 
         const buttonClasses = {
@@ -270,7 +274,8 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
                 @click=${this._handleClick}
                 class=${classMap(buttonClasses)}
                 type=${type}
-                ?disabled=${disabled}>
+                ?disabled=${disabled}
+                aria-label="${ifDefined(aria?.label)}">
                     ${isLoading ? this.renderSpinner() : nothing}
                     ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
                     <span class="o-btn-text"><slot></slot></span>