@justeattakeaway/pie-button 0.40.2 → 0.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +56 -55
  2. package/package.json +1 -1
  3. package/src/index.ts +9 -3
package/dist/index.js CHANGED
@@ -16,7 +16,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
16
16
  ], Lt = ["leading", "trailing"], Pt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Dt = ["post", "get", "dialog"], $t = ["_self", "_blank", "_parent", "_top"], Ft = `*,*:before,*:after{box-sizing:border-box}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]{border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--btn-icon-size: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--btn-icon-size: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--btn-icon-size: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--btn-icon-size);width:var(--btn-icon-size)}
17
17
  `;
18
18
  (function() {
19
- const p = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), S = {
19
+ const p = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), S = {
20
20
  ariaAtomic: "aria-atomic",
21
21
  ariaAutoComplete: "aria-autocomplete",
22
22
  ariaBusy: "aria-busy",
@@ -100,11 +100,11 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
100
100
  i.forEach((t) => {
101
101
  const { addedNodes: e, removedNodes: r } = t, o = Array.from(e), l = Array.from(r);
102
102
  o.forEach((n) => {
103
- var b;
103
+ var u;
104
104
  if (c.has(n) && n.constructor.formAssociated && U(n), k.has(n)) {
105
105
  const d = k.get(n);
106
- Object.keys(S).filter((y) => d[y] !== null).forEach((y) => {
107
- n.setAttribute(S[y], d[y]);
106
+ Object.keys(S).filter((w) => d[w] !== null).forEach((w) => {
107
+ n.setAttribute(S[w], d[w]);
108
108
  }), k.delete(n);
109
109
  }
110
110
  if (F.has(n)) {
@@ -112,19 +112,19 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
112
112
  n.setAttribute("internals-valid", d.validity.valid.toString()), n.setAttribute("internals-invalid", (!d.validity.valid).toString()), n.setAttribute("aria-invalid", (!d.validity.valid).toString()), F.delete(n);
113
113
  }
114
114
  if (n.localName === "form") {
115
- const d = g.get(n), x = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
115
+ const d = y.get(n), E = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
116
116
  acceptNode(O) {
117
117
  return c.has(O) && O.constructor.formAssociated && !(d && d.has(O)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
118
118
  }
119
119
  });
120
- let y = x.nextNode();
121
- for (; y; )
122
- U(y), y = x.nextNode();
120
+ let w = E.nextNode();
121
+ for (; w; )
122
+ U(w), w = E.nextNode();
123
123
  }
124
- n.localName === "fieldset" && ((b = z.observe) == null || b.call(z, n, G), j(n, !0));
124
+ n.localName === "fieldset" && ((u = z.observe) == null || u.call(z, n, G), j(n, !0));
125
125
  }), l.forEach((n) => {
126
- const b = c.get(n);
127
- b && a.get(b) && J(b), f.has(n) && f.get(n).disconnect();
126
+ const u = c.get(n);
127
+ u && a.get(u) && J(u), g.has(n) && g.get(n).disconnect();
128
128
  });
129
129
  });
130
130
  }
@@ -165,7 +165,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
165
165
  t[0].id || (e = `${t[0].htmlFor}_Label`, t[0].id = e), i.setAttribute("aria-labelledby", e);
166
166
  }
167
167
  }, A = (i) => {
168
- const t = Array.from(i.elements).filter((l) => !l.tagName.includes("-") && l.validity).map((l) => l.validity.valid), e = g.get(i) || [], r = Array.from(e).filter((l) => l.isConnected).map((l) => c.get(l).validity.valid), o = [...t, ...r].includes(!1);
168
+ const t = Array.from(i.elements).filter((l) => !l.tagName.includes("-") && l.validity).map((l) => l.validity.valid), e = y.get(i) || [], r = Array.from(e).filter((l) => l.isConnected).map((l) => c.get(l).validity.valid), o = [...t, ...r].includes(!1);
169
169
  i.toggleAttribute("internals-invalid", o), i.toggleAttribute("internals-valid", !o);
170
170
  }, lt = (i) => {
171
171
  A(I(i.target));
@@ -175,38 +175,38 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
175
175
  const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((e) => `${e}:not([disabled])`).map((e) => `${e}:not([form])${i.id ? `,${e}[form='${i.id}']` : ""}`).join(",");
176
176
  i.addEventListener("click", (e) => {
177
177
  if (e.target.closest(t)) {
178
- const o = g.get(i);
178
+ const o = y.get(i);
179
179
  if (i.noValidate)
180
180
  return;
181
- o.size && Array.from(o).reverse().map((b) => c.get(b).reportValidity()).includes(!1) && e.preventDefault();
181
+ o.size && Array.from(o).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && e.preventDefault();
182
182
  }
183
183
  });
184
184
  }, vt = (i) => {
185
- const t = g.get(i.target);
185
+ const t = y.get(i.target);
186
186
  t && t.size && t.forEach((e) => {
187
187
  e.constructor.formAssociated && e.formResetCallback && e.formResetCallback.apply(e);
188
188
  });
189
189
  }, Y = (i, t, e) => {
190
190
  if (t) {
191
- const r = g.get(t);
191
+ const r = y.get(t);
192
192
  if (r)
193
193
  r.add(i);
194
194
  else {
195
195
  const o = /* @__PURE__ */ new Set();
196
- o.add(i), g.set(t, o), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
196
+ o.add(i), y.set(t, o), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
197
197
  }
198
- E.set(t, { ref: i, internals: e }), i.constructor.formAssociated && i.formAssociatedCallback && setTimeout(() => {
198
+ f.set(t, { ref: i, internals: e }), i.constructor.formAssociated && i.formAssociatedCallback && setTimeout(() => {
199
199
  i.formAssociatedCallback.apply(i, [t]);
200
200
  }, 0), A(t);
201
201
  }
202
202
  }, I = (i) => {
203
203
  let t = i.parentNode;
204
204
  return t && t.tagName !== "FORM" && (t = I(t)), t;
205
- }, w = (i, t, e = DOMException) => {
205
+ }, x = (i, t, e = DOMException) => {
206
206
  if (!i.constructor.formAssociated)
207
207
  throw new e(t);
208
208
  }, Z = (i, t, e) => {
209
- const r = g.get(i);
209
+ const r = y.get(i);
210
210
  return r && r.size && r.forEach((o) => {
211
211
  c.get(o)[e]() || (t = !1);
212
212
  }), t;
@@ -317,10 +317,10 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
317
317
  const { get: o } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
318
318
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
319
319
  get(...l) {
320
- const n = o.call(this, ...l), b = Array.from(g.get(this) || []);
321
- if (b.length === 0)
320
+ const n = o.call(this, ...l), u = Array.from(y.get(this) || []);
321
+ if (u.length === 0)
322
322
  return n;
323
- const d = Array.from(n).concat(b).sort((x, y) => x.compareDocumentPosition ? x.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
323
+ const d = Array.from(n).concat(u).sort((E, w) => E.compareDocumentPosition ? E.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
324
324
  return new ft(d);
325
325
  }
326
326
  });
@@ -337,7 +337,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
337
337
  }
338
338
  checkValidity() {
339
339
  const t = p.get(this);
340
- if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
340
+ if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
341
341
  return !0;
342
342
  const e = s.get(this);
343
343
  if (!e.valid) {
@@ -352,19 +352,19 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
352
352
  }
353
353
  get form() {
354
354
  const t = p.get(this);
355
- w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
355
+ x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
356
356
  let e;
357
357
  return t.constructor.formAssociated === !0 && (e = I(t)), e;
358
358
  }
359
359
  get labels() {
360
360
  const t = p.get(this);
361
- w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
361
+ x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
362
362
  const e = t.getAttribute("id"), r = t.getRootNode();
363
363
  return r && e ? r.querySelectorAll(`[for="${e}"]`) : [];
364
364
  }
365
365
  reportValidity() {
366
366
  const t = p.get(this);
367
- if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
367
+ if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
368
368
  return !0;
369
369
  const e = this.checkValidity(), r = B.get(this);
370
370
  if (r && !t.constructor.formAssociated)
@@ -373,7 +373,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
373
373
  }
374
374
  setFormValue(t) {
375
375
  const e = p.get(this);
376
- if (w(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), J(this), t != null && !(t instanceof FormData)) {
376
+ if (x(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), J(this), t != null && !(t instanceof FormData)) {
377
377
  if (e.getAttribute("name")) {
378
378
  const r = Q(e, this);
379
379
  r.value = t;
@@ -389,19 +389,19 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
389
389
  }
390
390
  setValidity(t, e, r) {
391
391
  const o = p.get(this);
392
- if (w(o, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
392
+ if (x(o, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
393
393
  throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
394
394
  B.set(this, r);
395
395
  const l = s.get(this), n = {};
396
- for (const x in t)
397
- n[x] = t[x];
396
+ for (const E in t)
397
+ n[E] = t[E];
398
398
  Object.keys(n).length === 0 && mt(l);
399
- const b = { ...l, ...n };
400
- delete b.valid;
401
- const { valid: d } = pt(l, b, this.form);
399
+ const u = { ...l, ...n };
400
+ delete u.valid;
401
+ const { valid: d } = pt(l, u, this.form);
402
402
  if (!d && !e)
403
403
  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.");
404
- u.set(this, d ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !d), o.toggleAttribute("internals-valid", d), o.setAttribute("aria-invalid", `${!d}`)) : F.set(o, this);
404
+ b.set(this, d ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !d), o.toggleAttribute("internals-valid", d), o.setAttribute("aria-invalid", `${!d}`)) : F.set(o, this);
405
405
  }
406
406
  get shadowRoot() {
407
407
  const t = p.get(this), e = H.get(t);
@@ -409,15 +409,15 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
409
409
  }
410
410
  get validationMessage() {
411
411
  const t = p.get(this);
412
- return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), u.get(this);
412
+ return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), b.get(this);
413
413
  }
414
414
  get validity() {
415
415
  const t = p.get(this);
416
- return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), s.get(this);
416
+ return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), s.get(this);
417
417
  }
418
418
  get willValidate() {
419
419
  const t = p.get(this);
420
- 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"));
420
+ 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"));
421
421
  }
422
422
  }
423
423
  function yt() {
@@ -480,7 +480,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
480
480
  const r = t.apply(this, e);
481
481
  if (H.set(this, r), T()) {
482
482
  const o = new MutationObserver(_);
483
- window.ShadyDOM ? o.observe(this, P) : o.observe(r, P), f.set(this, o);
483
+ window.ShadyDOM ? o.observe(this, P) : o.observe(r, P), g.set(this, o);
484
484
  }
485
485
  return r;
486
486
  };
@@ -491,9 +491,9 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
491
491
  }
492
492
  })();
493
493
  var St = Object.defineProperty, At = Object.getOwnPropertyDescriptor, m = (p, s, a, c) => {
494
- for (var u = c > 1 ? void 0 : c ? At(s, a) : s, E = p.length - 1, f; E >= 0; E--)
495
- (f = p[E]) && (u = (c ? f(s, a, u) : f(u)) || u);
496
- return c && u && St(s, a, u), u;
494
+ for (var b = c > 1 ? void 0 : c ? At(s, a) : s, f = p.length - 1, g; f >= 0; f--)
495
+ (g = p[f]) && (b = (c ? g(s, a, b) : g(b)) || b);
496
+ return c && b && St(s, a, b), b;
497
497
  };
498
498
  const L = "pie-button";
499
499
  class v extends xt {
@@ -547,11 +547,12 @@ class v extends xt {
547
547
  * @private
548
548
  */
549
549
  renderSpinner() {
550
- const s = this.size.includes("small") ? "small" : "medium", c = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary";
551
- return N`
550
+ const { size: s, variant: a, disabled: c } = this, b = s.includes("small") ? "small" : "medium";
551
+ let f;
552
+ return c ? f = a === "ghost-inverse" ? "inverse" : "secondary" : f = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", N`
552
553
  <pie-spinner
553
- size="${s}"
554
- variant="${c}"
554
+ size="${b}"
555
+ variant="${f}"
555
556
  </pie-spinner>`;
556
557
  }
557
558
  render() {
@@ -559,10 +560,10 @@ class v extends xt {
559
560
  type: s,
560
561
  disabled: a,
561
562
  isFullWidth: c,
562
- variant: u,
563
- size: E,
564
- isLoading: f,
565
- isResponsive: g,
563
+ variant: b,
564
+ size: f,
565
+ isLoading: g,
566
+ isResponsive: y,
566
567
  iconPlacement: M,
567
568
  responsiveSize: k
568
569
  } = this;
@@ -571,14 +572,14 @@ class v extends xt {
571
572
  @click=${this._handleClick}
572
573
  class="o-btn"
573
574
  type=${s}
574
- variant=${u}
575
- size=${E}
575
+ variant=${b}
576
+ size=${f}
576
577
  responsiveSize=${Et(k)}
577
578
  ?disabled=${a}
578
579
  ?isFullWidth=${c}
579
- ?isResponsive=${g}
580
- ?isLoading=${f}>
581
- ${f ? this.renderSpinner() : W}
580
+ ?isResponsive=${y}
581
+ ?isLoading=${g}>
582
+ ${g ? this.renderSpinner() : W}
582
583
  ${M === "leading" ? N`<slot name="icon"></slot>` : W}
583
584
  <slot></slot>
584
585
  ${M === "trailing" ? N`<slot name="icon"></slot>` : W}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "0.40.2",
3
+ "version": "0.41.0",
4
4
  "description": "PIE design system button built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/src/index.ts CHANGED
@@ -210,9 +210,15 @@ export class PieButton extends LitElement implements ButtonProps {
210
210
  * @private
211
211
  */
212
212
  private renderSpinner (): TemplateResult {
213
- const spinnerSize = this.size.includes('small') ? 'small' : 'medium'; // includes("small") matches for any small size value and xsmall
214
- const inverseVariants: Array<ButtonProps['variant']> = ['primary', 'destructive', 'outline-inverse', 'ghost-inverse'];
215
- const spinnerVariant = inverseVariants.includes(this.variant) ? 'inverse' : 'secondary';
213
+ const { size, variant, disabled } = this;
214
+ const spinnerSize = size.includes('small') ? 'small' : 'medium'; // includes("small") matches for any small size value and xsmall
215
+ let spinnerVariant;
216
+ if (disabled) {
217
+ spinnerVariant = variant === 'ghost-inverse' ? 'inverse' : 'secondary';
218
+ } else {
219
+ const inverseVariants: ButtonProps['variant'][] = ['primary', 'destructive', 'outline-inverse', 'ghost-inverse'];
220
+ spinnerVariant = inverseVariants.includes(this.variant) ? 'inverse' : 'secondary';
221
+ }
216
222
 
217
223
  return html`
218
224
  <pie-spinner