@justeattakeaway/pie-button 1.1.0 → 1.2.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 +96 -96
  2. package/package.json +2 -2
  3. package/src/button.scss +2 -1
package/dist/index.js CHANGED
@@ -6,7 +6,7 @@ import { FormControlMixin as Lt, validPropertyValues as A, defineCustomElement a
6
6
  import "@justeattakeaway/pie-spinner";
7
7
  (function() {
8
8
  (function(k) {
9
- const a = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), T = {
9
+ const r = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), T = {
10
10
  ariaAtomic: "aria-atomic",
11
11
  ariaAutoComplete: "aria-autocomplete",
12
12
  ariaBusy: "aria-busy",
@@ -53,13 +53,13 @@ import "@justeattakeaway/pie-spinner";
53
53
  for (let o in T) {
54
54
  t[o] = null;
55
55
  let i = null;
56
- const r = T[o];
56
+ const a = T[o];
57
57
  Object.defineProperty(t, o, {
58
58
  get() {
59
59
  return i;
60
60
  },
61
61
  set(s) {
62
- i = s, e.isConnected ? e.setAttribute(r, s) : I.set(e, t);
62
+ i = s, e.isConnected ? e.setAttribute(a, s) : I.set(e, t);
63
63
  }
64
64
  });
65
65
  }
@@ -75,23 +75,23 @@ import "@justeattakeaway/pie-spinner";
75
75
  }
76
76
  });
77
77
  let i = o.nextNode();
78
- const r = !t || e.disabled;
78
+ const a = !t || e.disabled;
79
79
  for (; i; )
80
- i.formDisabledCallback && r && $(i, e.disabled), i = o.nextNode();
80
+ i.formDisabledCallback && a && $(i, e.disabled), i = o.nextNode();
81
81
  }, Z = { attributes: !0, attributeFilter: ["disabled", "name"] }, V = O() ? new MutationObserver((e) => {
82
82
  for (const t of e) {
83
83
  const o = t.target;
84
84
  if (t.attributeName === "disabled" && (o.constructor.formAssociated ? $(o, o.hasAttribute("disabled")) : o.localName === "fieldset" && Y(o)), t.attributeName === "name" && o.constructor.formAssociated) {
85
- const i = d.get(o), r = j.get(o);
86
- i.setFormValue(r);
85
+ const i = d.get(o), a = j.get(o);
86
+ i.setFormValue(a);
87
87
  }
88
88
  }
89
89
  }) : {};
90
90
  function _(e) {
91
91
  e.forEach((t) => {
92
- const { addedNodes: o, removedNodes: i } = t, r = Array.from(o), s = Array.from(i);
93
- r.forEach((l) => {
94
- var u;
92
+ const { addedNodes: o, removedNodes: i } = t, a = Array.from(o), s = Array.from(i);
93
+ a.forEach((l) => {
94
+ var h;
95
95
  if (d.has(l) && l.constructor.formAssociated && X(l), I.has(l)) {
96
96
  const m = I.get(l);
97
97
  Object.keys(T).filter((g) => m[g] !== null).forEach((g) => {
@@ -112,10 +112,10 @@ import "@justeattakeaway/pie-spinner";
112
112
  for (; g; )
113
113
  X(g), g = w.nextNode();
114
114
  }
115
- l.localName === "fieldset" && ((u = V.observe) === null || u === void 0 || u.call(V, l, Z), Y(l, !0));
115
+ l.localName === "fieldset" && ((h = V.observe) === null || h === void 0 || h.call(V, l, Z), Y(l, !0));
116
116
  }), s.forEach((l) => {
117
- const u = d.get(l);
118
- u && b.get(u) && tt(u), M.has(l) && M.get(l).disconnect();
117
+ const h = d.get(l);
118
+ h && b.get(h) && tt(h), M.has(l) && M.get(l).disconnect();
119
119
  });
120
120
  });
121
121
  }
@@ -123,12 +123,12 @@ import "@justeattakeaway/pie-spinner";
123
123
  e.forEach((t) => {
124
124
  const { removedNodes: o } = t;
125
125
  o.forEach((i) => {
126
- const r = J.get(t.target);
127
- d.has(i) && rt(i), r.disconnect();
126
+ const a = J.get(t.target);
127
+ d.has(i) && rt(i), a.disconnect();
128
128
  });
129
129
  });
130
130
  }
131
- const ht = (e) => {
131
+ const ut = (e) => {
132
132
  var t, o;
133
133
  const i = new MutationObserver(mt);
134
134
  !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (o = i.observe) === null || o === void 0 || o.call(i, e, { childList: !0 }), J.set(e, i);
@@ -146,7 +146,7 @@ import "@justeattakeaway/pie-spinner";
146
146
  }, et = (e, t) => {
147
147
  const o = document.createElement("input");
148
148
  return o.type = "hidden", o.name = e.getAttribute("name"), e.after(o), b.get(t).push(o), o;
149
- }, ut = (e, t) => {
149
+ }, ht = (e, t) => {
150
150
  var o;
151
151
  b.set(t, []), (o = V.observe) === null || o === void 0 || o.call(V, e, Z);
152
152
  }, ot = (e, t) => {
@@ -156,8 +156,8 @@ import "@justeattakeaway/pie-spinner";
156
156
  t[0].id || (o = `${t[0].htmlFor}_Label`, t[0].id = o), e.setAttribute("aria-labelledby", o);
157
157
  }
158
158
  }, N = (e) => {
159
- const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), o = E.get(e) || [], i = Array.from(o).filter((s) => s.isConnected).map((s) => d.get(s).validity.valid), r = [...t, ...i].includes(!1);
160
- e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
159
+ const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), o = E.get(e) || [], i = Array.from(o).filter((s) => s.isConnected).map((s) => d.get(s).validity.valid), a = [...t, ...i].includes(!1);
160
+ e.toggleAttribute("internals-invalid", a), e.toggleAttribute("internals-valid", !a);
161
161
  }, ft = (e) => {
162
162
  N(P(e.target));
163
163
  }, gt = (e) => {
@@ -166,10 +166,10 @@ import "@justeattakeaway/pie-spinner";
166
166
  const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((o) => `${o}:not([disabled])`).map((o) => `${o}:not([form])${e.id ? `,${o}[form='${e.id}']` : ""}`).join(",");
167
167
  e.addEventListener("click", (o) => {
168
168
  if (o.target.closest(t)) {
169
- const r = E.get(e);
169
+ const a = E.get(e);
170
170
  if (e.noValidate)
171
171
  return;
172
- r.size && Array.from(r).reverse().map((u) => d.get(u).reportValidity()).includes(!1) && o.preventDefault();
172
+ a.size && Array.from(a).reverse().map((h) => d.get(h).reportValidity()).includes(!1) && o.preventDefault();
173
173
  }
174
174
  });
175
175
  }, xt = (e) => {
@@ -183,8 +183,8 @@ import "@justeattakeaway/pie-spinner";
183
183
  if (i)
184
184
  i.add(e);
185
185
  else {
186
- const r = /* @__PURE__ */ new Set();
187
- r.add(e), E.set(t, r), yt(t), t.addEventListener("reset", xt), t.addEventListener("input", ft), t.addEventListener("change", gt);
186
+ const a = /* @__PURE__ */ new Set();
187
+ a.add(e), E.set(t, a), yt(t), t.addEventListener("reset", xt), t.addEventListener("input", ft), t.addEventListener("change", gt);
188
188
  }
189
189
  y.set(t, { ref: e, internals: o }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
190
190
  e.formAssociatedCallback.apply(e, [t]);
@@ -198,8 +198,8 @@ import "@justeattakeaway/pie-spinner";
198
198
  throw new o(t);
199
199
  }, nt = (e, t, o) => {
200
200
  const i = E.get(e);
201
- return i && i.size && i.forEach((r) => {
202
- d.get(r)[o]() || (t = !1);
201
+ return i && i.size && i.forEach((a) => {
202
+ d.get(a)[o]() || (t = !1);
203
203
  }), t;
204
204
  }, rt = (e) => {
205
205
  if (e.constructor.formAssociated) {
@@ -236,9 +236,9 @@ import "@justeattakeaway/pie-spinner";
236
236
  add(t) {
237
237
  if (!/^--/.test(t) || typeof t != "string")
238
238
  throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
239
- const o = super.add(t), i = D.get(this), r = `state${t}`;
240
- return i.isConnected ? at(i, r) : setTimeout(() => {
241
- at(i, r);
239
+ const o = super.add(t), i = D.get(this), a = `state${t}`;
240
+ return i.isConnected ? at(i, a) : setTimeout(() => {
241
+ at(i, a);
242
242
  }), o;
243
243
  }
244
244
  clear() {
@@ -258,8 +258,8 @@ import "@justeattakeaway/pie-spinner";
258
258
  if (typeof t == "function" ? e !== t || !i : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
259
259
  return o === "m" ? i : o === "a" ? i.call(e) : i ? i.value : t.get(e);
260
260
  }
261
- function Mt(e, t, o, i, r) {
262
- if (typeof t == "function" ? e !== t || !r : !t.has(e)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
261
+ function Mt(e, t, o, i, a) {
262
+ 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");
263
263
  return t.set(e, o), o;
264
264
  }
265
265
  var C;
@@ -298,13 +298,13 @@ import "@justeattakeaway/pie-spinner";
298
298
  let l = t.apply(this, s);
299
299
  return nt(this, l, "reportValidity");
300
300
  }
301
- const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
301
+ const { get: a } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
302
302
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
303
303
  get(...s) {
304
- const l = r.call(this, ...s), u = Array.from(E.get(this) || []);
305
- if (u.length === 0)
304
+ const l = a.call(this, ...s), h = Array.from(E.get(this) || []);
305
+ if (h.length === 0)
306
306
  return l;
307
- const m = Array.from(l).concat(u).sort((w, g) => w.compareDocumentPosition ? w.compareDocumentPosition(g) & 2 ? 1 : -1 : 0);
307
+ const m = Array.from(l).concat(h).sort((w, g) => w.compareDocumentPosition ? w.compareDocumentPosition(g) & 2 ? 1 : -1 : 0);
308
308
  return new St(m);
309
309
  }
310
310
  });
@@ -317,10 +317,10 @@ import "@justeattakeaway/pie-spinner";
317
317
  if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
318
318
  throw new TypeError("Illegal constructor");
319
319
  const o = t.getRootNode(), i = new wt();
320
- this.states = new W(t), a.set(this, t), n.set(this, i), d.set(t, this), pt(t, this), ut(t, this), Object.seal(this), o instanceof DocumentFragment && ht(o);
320
+ this.states = new W(t), r.set(this, t), n.set(this, i), d.set(t, this), pt(t, this), ht(t, this), Object.seal(this), o instanceof DocumentFragment && ut(o);
321
321
  }
322
322
  checkValidity() {
323
- const t = a.get(this);
323
+ const t = r.get(this);
324
324
  if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
325
325
  return !0;
326
326
  const o = n.get(this);
@@ -335,19 +335,19 @@ import "@justeattakeaway/pie-spinner";
335
335
  return o.valid;
336
336
  }
337
337
  get form() {
338
- const t = a.get(this);
338
+ const t = r.get(this);
339
339
  x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
340
340
  let o;
341
341
  return t.constructor.formAssociated === !0 && (o = P(t)), o;
342
342
  }
343
343
  get labels() {
344
- const t = a.get(this);
344
+ const t = r.get(this);
345
345
  x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
346
346
  const o = t.getAttribute("id"), i = t.getRootNode();
347
347
  return i && o ? i.querySelectorAll(`[for="${o}"]`) : [];
348
348
  }
349
349
  reportValidity() {
350
- const t = a.get(this);
350
+ const t = r.get(this);
351
351
  if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
352
352
  return !0;
353
353
  const o = this.checkValidity(), i = G.get(this);
@@ -356,50 +356,50 @@ import "@justeattakeaway/pie-spinner";
356
356
  return !o && i && (t.focus(), i.focus()), o;
357
357
  }
358
358
  setFormValue(t) {
359
- const o = a.get(this);
359
+ const o = r.get(this);
360
360
  if (x(o, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), tt(this), t != null && !(t instanceof FormData)) {
361
361
  if (o.getAttribute("name")) {
362
362
  const i = et(o, this);
363
363
  i.value = t;
364
364
  }
365
- } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, r]) => {
366
- if (typeof r == "string") {
365
+ } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, a]) => {
366
+ if (typeof a == "string") {
367
367
  const s = et(o, this);
368
- s.name = i, s.value = r;
368
+ s.name = i, s.value = a;
369
369
  }
370
370
  });
371
371
  j.set(o, t);
372
372
  }
373
373
  setValidity(t, o, i) {
374
- const r = a.get(this);
375
- if (x(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
374
+ const a = r.get(this);
375
+ if (x(a, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
376
376
  throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
377
377
  G.set(this, i);
378
378
  const s = n.get(this), l = {};
379
379
  for (const w in t)
380
380
  l[w] = t[w];
381
381
  Object.keys(l).length === 0 && Et(s);
382
- const u = Object.assign(Object.assign({}, s), l);
383
- delete u.valid;
384
- const { valid: m } = kt(s, u, this.form);
382
+ const h = Object.assign(Object.assign({}, s), l);
383
+ delete h.valid;
384
+ const { valid: m } = kt(s, h, this.form);
385
385
  if (!m && !o)
386
386
  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.");
387
- h.set(this, m ? "" : o), r.isConnected ? (r.toggleAttribute("internals-invalid", !m), r.toggleAttribute("internals-valid", m), r.setAttribute("aria-invalid", `${!m}`)) : L.set(r, this);
387
+ u.set(this, m ? "" : o), a.isConnected ? (a.toggleAttribute("internals-invalid", !m), a.toggleAttribute("internals-valid", m), a.setAttribute("aria-invalid", `${!m}`)) : L.set(a, this);
388
388
  }
389
389
  get shadowRoot() {
390
- const t = a.get(this), o = q.get(t);
390
+ const t = r.get(this), o = q.get(t);
391
391
  return o || null;
392
392
  }
393
393
  get validationMessage() {
394
- const t = a.get(this);
395
- return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), h.get(this);
394
+ const t = r.get(this);
395
+ return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), u.get(this);
396
396
  }
397
397
  get validity() {
398
- const t = a.get(this);
398
+ const t = r.get(this);
399
399
  return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), n.get(this);
400
400
  }
401
401
  get willValidate() {
402
- const t = a.get(this);
402
+ const t = r.get(this);
403
403
  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"));
404
404
  }
405
405
  }
@@ -438,14 +438,14 @@ import "@justeattakeaway/pie-spinner";
438
438
  if (!dt) {
439
439
  if (dt = !0, typeof window < "u" && (window.ElementInternals = lt), typeof CustomElementRegistry < "u") {
440
440
  const t = CustomElementRegistry.prototype.define;
441
- CustomElementRegistry.prototype.define = function(o, i, r) {
441
+ CustomElementRegistry.prototype.define = function(o, i, a) {
442
442
  if (i.formAssociated) {
443
443
  const s = i.prototype.connectedCallback;
444
444
  i.prototype.connectedCallback = function() {
445
445
  Q.has(this) || (Q.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), rt(this);
446
446
  };
447
447
  }
448
- t.call(this, o, i, r);
448
+ t.call(this, o, i, a);
449
449
  };
450
450
  }
451
451
  if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
@@ -458,12 +458,12 @@ import "@justeattakeaway/pie-spinner";
458
458
  return new lt(this);
459
459
  }), typeof Element < "u") {
460
460
  let t = function(...i) {
461
- const r = o.apply(this, i);
462
- if (q.set(this, r), O()) {
461
+ const a = o.apply(this, i);
462
+ if (q.set(this, a), O()) {
463
463
  const s = new MutationObserver(_);
464
- window.ShadyDOM ? s.observe(this, R) : s.observe(r, R), M.set(this, s);
464
+ window.ShadyDOM ? s.observe(this, R) : s.observe(a, R), M.set(this, s);
465
465
  }
466
- return r;
466
+ return a;
467
467
  };
468
468
  const o = Element.prototype.attachShadow;
469
469
  Element.prototype.attachShadow = t;
@@ -494,36 +494,36 @@ const Vt = ["button", "a"], Nt = ["xsmall", "small-productive", "small-expressiv
494
494
  isLoading: !1,
495
495
  isFullWidth: !1,
496
496
  isResponsive: !1
497
- }, Rt = "*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--icon-display-override: block;--btn-padding-vertical-xsmall: 6px;--btn-padding-vertical-small: 8px;--btn-padding-vertical-medium: 10px;--btn-padding-vertical-large: 14px;--btn-padding-horizontal-small: var(--dt-spacing-b);--btn-padding-horizontal-medium: var(--dt-spacing-d);--btn-padding-horizontal-large: var(--dt-spacing-e);position:relative;display:inline-flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;inline-size:var(--btn-inline-size)}.o-btn.o-btn--primary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary:active:not(:disabled),.o-btn.o-btn--primary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn.o-btn--primary.o-btn--xsmall:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.is-loading:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}@media (min-width: 769px){.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive,.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive{--btn-bg-color: var(--dt-color-interactive-brand)}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}}.o-btn.o-btn--secondary{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--secondary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn.o-btn--secondary:active:not(:disabled),.o-btn.o-btn--secondary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn.o-btn--outline{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--outline:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--outline:active:not(:disabled),.o-btn.o-btn--outline.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn.o-btn--ghost:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--ghost:active:not(:disabled),.o-btn.o-btn--ghost.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--inverse{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--inverse:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn.o-btn--inverse:active:not(:disabled),.o-btn.o-btn--inverse.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn.o-btn--ghost-inverse,.o-btn.o-btn--outline-inverse{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--ghost-inverse:hover:not(:disabled),.o-btn.o-btn--outline-inverse:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn.o-btn--ghost-inverse:active:not(:disabled),.o-btn.o-btn--ghost-inverse.is-loading:not(:disabled),.o-btn.o-btn--outline-inverse:active:not(:disabled),.o-btn.o-btn--outline-inverse.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn.o-btn--outline-inverse{border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--destructive{--btn-bg-color: var(--dt-color-support-error)}.o-btn.o-btn--destructive:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn.o-btn--destructive:active:not(:disabled),.o-btn.o-btn--destructive.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn.o-btn--destructive-ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn.o-btn--destructive-ghost:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--destructive-ghost:active:not(:disabled),.o-btn.o-btn--destructive-ghost.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--xsmall{--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-small)}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-small) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--expressive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--xsmall.o-btn--outline,.o-btn.o-btn--xsmall.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-small)}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--outline.o-btn--responsive,.o-btn.o-btn--xsmall.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-small) - 1px) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--outline.o-btn--responsive.o-btn--expressive,.o-btn.o-btn--xsmall.o-btn--outline-inverse.o-btn--responsive.o-btn--expressive{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--small-expressive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-expressive.o-btn--outline,.o-btn.o-btn--small-expressive.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--outline.o-btn--responsive,.o-btn.o-btn--small-expressive.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-productive{--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-small) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-productive.o-btn--outline,.o-btn.o-btn--small-productive.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-small) - 1px) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--outline.o-btn--responsive,.o-btn.o-btn--small-productive.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--medium{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--medium.o-btn--outline,.o-btn.o-btn--medium.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--outline.o-btn--responsive,.o-btn.o-btn--medium.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--large{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large)}.o-btn.o-btn--large.o-btn--outline,.o-btn.o-btn--large.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large)}.o-btn.o-btn--fullWidth{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not(.o-btn--ghost,.o-btn--ghost-inverse,.o-btn--destructive-ghost){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled].o-btn--outline,.o-btn[disabled].o-btn--outline-inverse{border-color:var(--dt-color-disabled-01)!important}.o-btn.is-loading>*:not(pie-spinner){visibility:hidden}.o-btn.is-loading pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-btn-text{text-overflow:ellipsis;overflow:hidden}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}";
498
- var $t = Object.defineProperty, p = (k, a, n, b) => {
499
- for (var d = void 0, h = k.length - 1, y; h >= 0; h--)
500
- (y = k[h]) && (d = y(a, n, d) || d);
501
- return d && $t(a, n, d), d;
497
+ }, Rt = "*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-light);--icon-display-override: block;--btn-padding-vertical-xsmall: 6px;--btn-padding-vertical-small: 8px;--btn-padding-vertical-medium: 10px;--btn-padding-vertical-large: 14px;--btn-padding-horizontal-small: var(--dt-spacing-b);--btn-padding-horizontal-medium: var(--dt-spacing-d);--btn-padding-horizontal-large: var(--dt-spacing-e);position:relative;display:inline-flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;inline-size:var(--btn-inline-size)}.o-btn.o-btn--primary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary:active:not(:disabled),.o-btn.o-btn--primary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--btn-bg-color: var(--dt-color-interactive-primary);--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--primary.o-btn--xsmall:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.is-loading:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}@media (min-width: 769px){.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive,.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive{--btn-bg-color: var(--dt-color-interactive-brand)}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}}.o-btn.o-btn--secondary{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--secondary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn.o-btn--secondary:active:not(:disabled),.o-btn.o-btn--secondary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn.o-btn--outline{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--outline:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--outline:active:not(:disabled),.o-btn.o-btn--outline.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn.o-btn--ghost:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--ghost:active:not(:disabled),.o-btn.o-btn--ghost.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--inverse{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--inverse:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn.o-btn--inverse:active:not(:disabled),.o-btn.o-btn--inverse.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn.o-btn--ghost-inverse,.o-btn.o-btn--outline-inverse{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--ghost-inverse:hover:not(:disabled),.o-btn.o-btn--outline-inverse:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn.o-btn--ghost-inverse:active:not(:disabled),.o-btn.o-btn--ghost-inverse.is-loading:not(:disabled),.o-btn.o-btn--outline-inverse:active:not(:disabled),.o-btn.o-btn--outline-inverse.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn.o-btn--outline-inverse{border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--destructive{--btn-bg-color: var(--dt-color-support-error)}.o-btn.o-btn--destructive:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn.o-btn--destructive:active:not(:disabled),.o-btn.o-btn--destructive.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn.o-btn--destructive-ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn.o-btn--destructive-ghost:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--destructive-ghost:active:not(:disabled),.o-btn.o-btn--destructive-ghost.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--xsmall{--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-small)}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-small) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--expressive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--xsmall.o-btn--outline,.o-btn.o-btn--xsmall.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-small)}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--outline.o-btn--responsive,.o-btn.o-btn--xsmall.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-small) - 1px) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--outline.o-btn--responsive.o-btn--expressive,.o-btn.o-btn--xsmall.o-btn--outline-inverse.o-btn--responsive.o-btn--expressive{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--small-expressive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-expressive.o-btn--outline,.o-btn.o-btn--small-expressive.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--outline.o-btn--responsive,.o-btn.o-btn--small-expressive.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-productive{--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-small) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-productive.o-btn--outline,.o-btn.o-btn--small-productive.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-small) - 1px) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--outline.o-btn--responsive,.o-btn.o-btn--small-productive.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--medium{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--medium.o-btn--outline,.o-btn.o-btn--medium.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--outline.o-btn--responsive,.o-btn.o-btn--medium.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--large{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large)}.o-btn.o-btn--large.o-btn--outline,.o-btn.o-btn--large.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large)}.o-btn.o-btn--fullWidth{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not(.o-btn--ghost,.o-btn--ghost-inverse,.o-btn--destructive-ghost){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled].o-btn--outline,.o-btn[disabled].o-btn--outline-inverse{border-color:var(--dt-color-disabled-01)!important}.o-btn.is-loading>*:not(pie-spinner){visibility:hidden}.o-btn.is-loading pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-btn-text{text-overflow:ellipsis;overflow:hidden}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}";
498
+ var $t = Object.defineProperty, p = (k, r, n, b) => {
499
+ for (var d = void 0, u = k.length - 1, y; u >= 0; u--)
500
+ (y = k[u]) && (d = y(r, n, d) || d);
501
+ return d && $t(r, n, d), d;
502
502
  };
503
503
  const S = "pie-button", U = class U extends Lt(At) {
504
504
  constructor() {
505
- super(...arguments), this.tag = f.tag, this.size = f.size, this.type = f.type, this.variant = f.variant, this.iconPlacement = f.iconPlacement, this.disabled = f.disabled, this.isLoading = f.isLoading, this.isFullWidth = f.isFullWidth, this.isResponsive = f.isResponsive, this._handleFormKeyDown = (a) => {
506
- if (!(a.key !== "Enter" || this.type !== "submit" || this.disabled)) {
507
- if (a.target instanceof HTMLElement) {
508
- const n = a.target.tagName.toLowerCase();
505
+ super(...arguments), this.tag = f.tag, this.size = f.size, this.type = f.type, this.variant = f.variant, this.iconPlacement = f.iconPlacement, this.disabled = f.disabled, this.isLoading = f.isLoading, this.isFullWidth = f.isFullWidth, this.isResponsive = f.isResponsive, this._handleFormKeyDown = (r) => {
506
+ if (!(r.key !== "Enter" || this.type !== "submit" || this.disabled)) {
507
+ if (r.target instanceof HTMLElement) {
508
+ const n = r.target.tagName.toLowerCase();
509
509
  if (n === "button" || n === "pie-button")
510
510
  return;
511
511
  }
512
- a.preventDefault(), this._handleClick();
512
+ r.preventDefault(), this._handleClick();
513
513
  }
514
514
  };
515
515
  }
516
516
  connectedCallback() {
517
- var a;
518
- super.connectedCallback(), this.type === "submit" && ((a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown));
517
+ var r;
518
+ super.connectedCallback(), this.type === "submit" && ((r = this.form) == null || r.addEventListener("keydown", this._handleFormKeyDown));
519
519
  }
520
520
  disconnectedCallback() {
521
- var a;
522
- super.disconnectedCallback(), this.type === "submit" && ((a = this.form) == null || a.removeEventListener("keydown", this._handleFormKeyDown));
521
+ var r;
522
+ super.disconnectedCallback(), this.type === "submit" && ((r = this.form) == null || r.removeEventListener("keydown", this._handleFormKeyDown));
523
523
  }
524
- updated(a) {
524
+ updated(r) {
525
525
  var n, b;
526
- a.has("type") && (this.type === "submit" ? (n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown) : (b = this.form) == null || b.removeEventListener("keydown", this._handleFormKeyDown));
526
+ r.has("type") && (this.type === "submit" ? (n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown) : (b = this.form) == null || b.removeEventListener("keydown", this._handleFormKeyDown));
527
527
  }
528
528
  /**
529
529
  * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
@@ -533,10 +533,10 @@ const S = "pie-button", U = class U extends Lt(At) {
533
533
  *
534
534
  * TODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin.
535
535
  */
536
- _simulateNativeButtonClick(a) {
536
+ _simulateNativeButtonClick(r) {
537
537
  if (!this.form) return;
538
538
  const n = document.createElement("button");
539
- n.type = a, n.style.position = "absolute", n.style.width = "1px", n.style.height = "1px", n.style.padding = "0", n.style.margin = "-1px", n.style.overflow = "hidden", n.style.border = "0", n.style.whiteSpace = "nowrap", a === "submit" && (this.name && (n.name = this.name), this.value && (n.value = this.value), this.formaction && n.setAttribute("formaction", this.formaction), this.formenctype && n.setAttribute("formenctype", this.formenctype), this.formmethod && n.setAttribute("formmethod", this.formmethod), this.formnovalidate && n.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && n.setAttribute("formtarget", this.formtarget)), this.form.append(n), n.click(), n.remove();
539
+ n.type = r, n.style.position = "absolute", n.style.width = "1px", n.style.height = "1px", n.style.padding = "0", n.style.margin = "-1px", n.style.overflow = "hidden", n.style.border = "0", n.style.whiteSpace = "nowrap", r === "submit" && (this.name && (n.name = this.name), this.value && (n.value = this.value), this.formaction && n.setAttribute("formaction", this.formaction), this.formenctype && n.setAttribute("formenctype", this.formenctype), this.formmethod && n.setAttribute("formmethod", this.formmethod), this.formnovalidate && n.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && n.setAttribute("formtarget", this.formtarget)), this.form.append(n), n.click(), n.remove();
540
540
  }
541
541
  _handleClick() {
542
542
  this.form && (this.isLoading || this.tag === "button" && (this.type === "submit" ? (this.formnovalidate || this.form.reportValidity()) && this._simulateNativeButtonClick("submit") : this.type === "reset" && this._simulateNativeButtonClick("reset")));
@@ -547,47 +547,47 @@ const S = "pie-button", U = class U extends Lt(At) {
547
547
  * @private
548
548
  */
549
549
  renderSpinner() {
550
- const { size: a, variant: n, disabled: b } = this, d = a && a.includes("small") ? "small" : "medium";
551
- let h;
552
- return b ? h = n === "ghost-inverse" ? "inverse" : "secondary" : h = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", z`
550
+ const { size: r, variant: n, disabled: b } = this, d = r && r.includes("small") ? "small" : "medium";
551
+ let u;
552
+ return b ? u = n === "ghost-inverse" ? "inverse" : "secondary" : u = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", z`
553
553
  <pie-spinner
554
554
  size="${d}"
555
- variant="${h}">
555
+ variant="${u}">
556
556
  </pie-spinner>`;
557
557
  }
558
- renderAnchor(a) {
558
+ renderAnchor(r) {
559
559
  const {
560
560
  href: n,
561
561
  iconPlacement: b,
562
562
  rel: d,
563
- target: h
563
+ target: u
564
564
  } = this;
565
565
  return z`
566
566
  <a
567
567
  href="${K(n)}"
568
568
  rel="${K(d)}"
569
- target="${K(h)}"
570
- class="${vt(a)}">
569
+ target="${K(u)}"
570
+ class="${vt(r)}">
571
571
  ${b === "leading" ? z`<slot name="icon"></slot>` : F}
572
572
  <slot></slot>
573
573
  ${b === "trailing" ? z`<slot name="icon"></slot>` : F}
574
574
  </a>`;
575
575
  }
576
- renderButton(a) {
576
+ renderButton(r) {
577
577
  const {
578
578
  disabled: n,
579
579
  iconPlacement: b,
580
580
  isLoading: d,
581
- type: h
581
+ type: u
582
582
  } = this, y = {
583
- ...a,
583
+ ...r,
584
584
  "is-loading": d
585
585
  };
586
586
  return z`
587
587
  <button
588
588
  @click=${this._handleClick}
589
589
  class=${vt(y)}
590
- type=${h}
590
+ type=${u}
591
591
  ?disabled=${n}>
592
592
  ${d ? this.renderSpinner() : F}
593
593
  ${b === "leading" ? z`<slot name="icon"></slot>` : F}
@@ -597,25 +597,25 @@ const S = "pie-button", U = class U extends Lt(At) {
597
597
  }
598
598
  render() {
599
599
  const {
600
- isFullWidth: a,
600
+ isFullWidth: r,
601
601
  isResponsive: n,
602
602
  responsiveSize: b,
603
603
  size: d,
604
- tag: h,
604
+ tag: u,
605
605
  variant: y
606
606
  } = this, M = {
607
607
  "o-btn": !0,
608
- "o-btn--fullWidth": a,
608
+ "o-btn--fullWidth": r,
609
609
  "o-btn--responsive": n,
610
610
  [`o-btn--${b}`]: !!(n && b),
611
611
  [`o-btn--${y}`]: !0,
612
612
  [`o-btn--${d}`]: !0
613
613
  };
614
- return h === "a" ? this.renderAnchor(M) : this.renderButton(M);
614
+ return u === "a" ? this.renderAnchor(M) : this.renderButton(M);
615
615
  }
616
616
  focus() {
617
- var a, n;
618
- (n = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button")) == null || n.focus();
617
+ var r, n;
618
+ (n = (r = this.shadowRoot) == null ? void 0 : r.querySelector("button")) == null || n.focus();
619
619
  }
620
620
  };
621
621
  U.styles = It(Rt);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "PIE design system button built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -37,7 +37,7 @@
37
37
  "devDependencies": {
38
38
  "@custom-elements-manifest/analyzer": "0.9.0",
39
39
  "@justeattakeaway/pie-components-config": "0.18.0",
40
- "@justeattakeaway/pie-css": "0.13.1",
40
+ "@justeattakeaway/pie-css": "0.14.1",
41
41
  "@justeattakeaway/pie-wrapper-react": "0.14.2",
42
42
  "cem-plugin-module-file-extensions": "0.0.5"
43
43
  },
package/src/button.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  // The following values set to default background and color
25
25
  // currently this sets the primary button styles
26
26
  --btn-bg-color: var(--dt-color-interactive-brand);
27
- --btn-text-color: var(--dt-color-content-interactive-primary);
27
+ --btn-text-color: var(--dt-color-content-interactive-light);
28
28
  --icon-display-override: block;
29
29
 
30
30
  // Vertical and horizontal padding values for the button
@@ -131,6 +131,7 @@
131
131
  * update the button backgrounds so that the text is accessible
132
132
  **/
133
133
  --btn-bg-color: var(--dt-color-interactive-primary);
134
+ --btn-text-color: var(--dt-color-content-interactive-primary);
134
135
 
135
136
  @include p.button-interactive-states('--dt-color-interactive-primary', 'inverse');
136
137
  }