@justeattakeaway/pie-button 1.9.3 → 1.10.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 (4) hide show
  1. package/dist/index.js +18 -18
  2. package/package.json +4 -4
  3. package/src/button.scss +16 -15
  4. package/src/index.ts +1 -1
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement as It, html as z, nothing as S, unsafeCSS as Lt } from "lit";
1
+ import { LitElement as It, html as M, nothing as S, unsafeCSS as Lt } from "lit";
2
2
  import { classMap as mt } from "lit/directives/class-map.js";
3
3
  import { ifDefined as O } from "lit/directives/if-defined.js";
4
4
  import { property as m } from "lit/decorators.js";
@@ -215,7 +215,7 @@ import "@justeattakeaway/pie-spinner";
215
215
  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);
216
216
  }
217
217
  }
218
- const Et = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), zt = (e, t, i) => (e.valid = Mt(t), Object.keys(t).forEach((o) => e[o] = t[o]), i && V(i), e), Mt = (e) => {
218
+ const Et = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), Mt = (e, t, i) => (e.valid = zt(t), Object.keys(t).forEach((o) => e[o] = t[o]), i && V(i), e), zt = (e) => {
219
219
  let t = !0;
220
220
  for (let i in e)
221
221
  i !== "valid" && e[i] !== !1 && (t = !1);
@@ -261,10 +261,10 @@ import "@justeattakeaway/pie-spinner";
261
261
  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");
262
262
  return t.set(e, i), i;
263
263
  }
264
- var M;
264
+ var z;
265
265
  class Ct {
266
266
  constructor(t) {
267
- M.set(this, void 0), St(this, M, t);
267
+ z.set(this, void 0), St(this, z, t);
268
268
  for (let i = 0; i < t.length; i++) {
269
269
  let o = t[i];
270
270
  this[i] = o, o.hasAttribute("name") && (this[o.getAttribute("name")] = o);
@@ -272,10 +272,10 @@ import "@justeattakeaway/pie-spinner";
272
272
  Object.freeze(this);
273
273
  }
274
274
  get length() {
275
- return lt(this, M, "f").length;
275
+ return lt(this, z, "f").length;
276
276
  }
277
- [(M = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
278
- return lt(this, M, "f")[Symbol.iterator]();
277
+ [(z = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
278
+ return lt(this, z, "f")[Symbol.iterator]();
279
279
  }
280
280
  item(t) {
281
281
  return this[t] == null ? null : this[t];
@@ -380,7 +380,7 @@ import "@justeattakeaway/pie-spinner";
380
380
  Object.keys(s).length === 0 && Et(n);
381
381
  const u = Object.assign(Object.assign({}, n), s);
382
382
  delete u.valid;
383
- const { valid: h } = zt(n, u, this.form);
383
+ const { valid: h } = Mt(n, u, this.form);
384
384
  if (!h && !i)
385
385
  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.");
386
386
  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);
@@ -478,7 +478,7 @@ const _ = class _ extends It {
478
478
  this.getAttribute("v") || this.setAttribute("v", _.v);
479
479
  }
480
480
  };
481
- _.v = "1.9.3";
481
+ _.v = "1.10.0";
482
482
  let j = _;
483
483
  const Pt = ["button", "a"], Ot = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Qt = ["productive", "expressive"], _t = ["submit", "button", "reset"], $t = [
484
484
  "primary",
@@ -501,7 +501,7 @@ const Pt = ["button", "a"], Ot = ["xsmall", "small-productive", "small-expressiv
501
501
  isLoading: !1,
502
502
  isFullWidth: !1,
503
503
  isResponsive: !1
504
- }, Rt = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}:host([isfullwidth]){display:block}.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: 8px;--btn-padding-vertical-medium: 10px;--btn-padding-vertical-large: 14px;--btn-padding-horizontal-small: var(--dt-spacing-b);--btn-padding-horizontal-medium: var(--dt-spacing-d);--btn-padding-horizontal-large: var(--dt-spacing-e);position:relative;display:inline-flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--int-states-mixin-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;inline-size:var(--btn-inline-size)}.o-btn.o-btn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}.o-btn.o-btn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}.o-btn.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--btn-text-color: var(--dt-color-content-interactive-primary-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--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--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--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-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-small)}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-small) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--expressive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--xsmall.o-btn--outline,.o-btn.o-btn--xsmall.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-small)}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--outline.o-btn--responsive,.o-btn.o-btn--xsmall.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-small) - 1px) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--outline.o-btn--responsive.o-btn--expressive,.o-btn.o-btn--xsmall.o-btn--outline-inverse.o-btn--responsive.o-btn--expressive{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--small-expressive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-expressive.o-btn--outline,.o-btn.o-btn--small-expressive.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--outline.o-btn--responsive,.o-btn.o-btn--small-expressive.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-productive{--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-small) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-productive.o-btn--outline,.o-btn.o-btn--small-productive.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-small) - 1px) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--outline.o-btn--responsive,.o-btn.o-btn--small-productive.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--medium{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--medium.o-btn--outline,.o-btn.o-btn--medium.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--outline.o-btn--responsive,.o-btn.o-btn--medium.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--large{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large)}.o-btn.o-btn--large.o-btn--outline,.o-btn.o-btn--large.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large)}.o-btn.o-btn--fullWidth{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled-solid) !important;cursor:not-allowed}.o-btn[disabled]:not(.o-btn--ghost,.o-btn--ghost-inverse,.o-btn--destructive-ghost){--int-states-mixin-bg-color: var(--dt-color-disabled-01) !important;--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:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-btn-text{text-overflow:ellipsis;overflow:hidden}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}";
504
+ }, Rt = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}:host([isfullwidth]){display:block}.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);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;inline-size:var(--btn-inline-size)}.o-btn.o-btn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}.o-btn.o-btn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}.o-btn.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--btn-text-color: var(--dt-color-content-interactive-primary-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--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--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--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);--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);--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);--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);--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);--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);--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);--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);--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);--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);--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-inverse,.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:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-btn-text{text-overflow:ellipsis;overflow:hidden}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}";
505
505
  var Wt = Object.defineProperty, Ht = Object.getOwnPropertyDescriptor, v = (l, r, b, p) => {
506
506
  for (var d = p > 1 ? void 0 : p ? Ht(r, b) : r, f = l.length - 1, k; f >= 0; f--)
507
507
  (k = l[f]) && (d = (p ? k(r, b, d) : k(d)) || d);
@@ -557,7 +557,7 @@ let c = class extends Tt(Vt(j)) {
557
557
  renderSpinner() {
558
558
  const { size: l, variant: r, disabled: b } = this, p = l && l.includes("small") ? "small" : "medium";
559
559
  let d;
560
- return b ? d = r === "ghost-inverse" ? "inverse" : "secondary" : d = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", z`
560
+ return b ? d = r === "ghost-inverse" ? "inverse" : "secondary" : d = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", M`
561
561
  <pie-spinner
562
562
  size="${p}"
563
563
  variant="${d}">
@@ -571,16 +571,16 @@ let c = class extends Tt(Vt(j)) {
571
571
  target: d,
572
572
  download: f
573
573
  } = this;
574
- return z`
574
+ return M`
575
575
  <a
576
576
  href="${O(r)}"
577
577
  rel="${O(p)}"
578
578
  target="${O(d)}"
579
- download="${O(this.download)}"
579
+ download="${O(f)}"
580
580
  class="${mt(l)}">
581
- ${b === "leading" ? z`<slot name="icon"></slot>` : S}
581
+ ${b === "leading" ? M`<slot name="icon"></slot>` : S}
582
582
  <slot></slot>
583
- ${b === "trailing" ? z`<slot name="icon"></slot>` : S}
583
+ ${b === "trailing" ? M`<slot name="icon"></slot>` : S}
584
584
  </a>`;
585
585
  }
586
586
  renderButton(l) {
@@ -593,16 +593,16 @@ let c = class extends Tt(Vt(j)) {
593
593
  ...l,
594
594
  "is-loading": p
595
595
  };
596
- return z`
596
+ return M`
597
597
  <button
598
598
  @click=${this._handleClick}
599
599
  class=${mt(f)}
600
600
  type=${d}
601
601
  ?disabled=${r}>
602
602
  ${p ? this.renderSpinner() : S}
603
- ${b === "leading" ? z`<slot name="icon"></slot>` : S}
603
+ ${b === "leading" ? M`<slot name="icon"></slot>` : S}
604
604
  <span class="o-btn-text"><slot></slot></span>
605
- ${b === "trailing" ? z`<slot name="icon"></slot>` : S}
605
+ ${b === "trailing" ? M`<slot name="icon"></slot>` : S}
606
606
  </button>`;
607
607
  }
608
608
  render() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "1.9.3",
3
+ "version": "1.10.0",
4
4
  "description": "PIE design system button built using web components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -46,7 +46,7 @@
46
46
  "devDependencies": {
47
47
  "@custom-elements-manifest/analyzer": "0.9.0",
48
48
  "@justeattakeaway/pie-components-config": "0.21.0",
49
- "@justeattakeaway/pie-css": "0.24.0",
49
+ "@justeattakeaway/pie-css": "0.25.0",
50
50
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
51
51
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
52
52
  "cem-plugin-module-file-extensions": "0.0.5"
@@ -59,8 +59,8 @@
59
59
  "dist/*.js"
60
60
  ],
61
61
  "dependencies": {
62
- "@justeattakeaway/pie-spinner": "1.3.4",
63
- "@justeattakeaway/pie-webc-core": "4.0.0",
62
+ "@justeattakeaway/pie-spinner": "1.3.5",
63
+ "@justeattakeaway/pie-webc-core": "5.0.0",
64
64
  "element-internals-polyfill": "1.3.11"
65
65
  }
66
66
  }
package/src/button.scss CHANGED
@@ -36,9 +36,10 @@
36
36
 
37
37
  // Vertical and horizontal padding values for the button
38
38
  --btn-padding-vertical-xsmall: 6px;
39
- --btn-padding-vertical-small: 8px;
40
- --btn-padding-vertical-medium: 10px;
41
- --btn-padding-vertical-large: 14px;
39
+ --btn-padding-vertical-small-expressive: 8px;
40
+ --btn-padding-vertical-small-productive: 10px;
41
+ --btn-padding-vertical-medium: 12px;
42
+ --btn-padding-vertical-large: 16px;
42
43
  --btn-padding-horizontal-small: var(--dt-spacing-b);
43
44
  --btn-padding-horizontal-medium: var(--dt-spacing-d);
44
45
  --btn-padding-horizontal-large: var(--dt-spacing-e);
@@ -49,24 +50,24 @@
49
50
  */
50
51
  @mixin button-size($size) {
51
52
  @if $size == 'xsmall' {
52
- --btn-font-size: #{p.font-size(--dt-font-size-14)};
53
- --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
53
+ --btn-font-size: #{p.font-size(--dt-font-interactive-xs-size)};
54
+ --btn-line-height: calc(var(--dt-font-interactive-xs-line-height) * 1px);
54
55
  --icon-size-override: 16px;
55
56
  } @else if $size == 'small-expressive' {
56
- --btn-font-size: #{p.font-size(--dt-font-size-20)};
57
- --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
57
+ --btn-font-size: #{p.font-size(--dt-font-interactive-l-size)};
58
+ --btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);
58
59
  --icon-size-override: 20px;
59
60
  } @else if $size == 'small-productive' {
60
- --btn-font-size: #{p.font-size(--dt-font-size-16)};
61
- --btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
61
+ --btn-font-size: #{p.font-size(--dt-font-interactive-s-size)};
62
+ --btn-line-height: calc(var(--dt-font-interactive-s-line-height) * 1px);
62
63
  --icon-size-override: 20px;
63
64
  } @else if $size == 'medium' {
64
- --btn-font-size: #{p.font-size(--dt-font-size-20)};
65
- --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
65
+ --btn-font-size: #{p.font-size(--dt-font-interactive-l-size)};
66
+ --btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);
66
67
  --icon-size-override: 24px;
67
68
  } @else if $size == 'large' {
68
- --btn-font-size: #{p.font-size(--dt-font-size-20)};
69
- --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
69
+ --btn-font-size: #{p.font-size(--dt-font-interactive-l-size)};
70
+ --btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);
70
71
  --icon-size-override: 24px;
71
72
  }
72
73
  }
@@ -84,10 +85,10 @@
84
85
  $verticalPadding: '--btn-padding-vertical-xsmall';
85
86
  $horizontalPadding: '--btn-padding-horizontal-small';
86
87
  } @else if $size == 'small-expressive' {
87
- $verticalPadding: '--btn-padding-vertical-xsmall';
88
+ $verticalPadding: '--btn-padding-vertical-small-expressive';
88
89
  $horizontalPadding: '--btn-padding-horizontal-medium';
89
90
  } @else if $size == 'small-productive' {
90
- $verticalPadding: '--btn-padding-vertical-small';
91
+ $verticalPadding: '--btn-padding-vertical-small-productive';
91
92
  $horizontalPadding: '--btn-padding-horizontal-medium';
92
93
  } @else if $size == 'medium' {
93
94
  $verticalPadding: '--btn-padding-vertical-medium';
package/src/index.ts CHANGED
@@ -247,7 +247,7 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
247
247
  href="${ifDefined(href)}"
248
248
  rel="${ifDefined(rel)}"
249
249
  target="${ifDefined(target)}"
250
- download="${ifDefined(this.download)}"
250
+ download="${ifDefined(download)}"
251
251
  class="${classMap(classes)}">
252
252
  ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
253
253
  <slot></slot>