@justeattakeaway/pie-button 1.0.0 → 1.1.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 +193 -193
  2. package/package.json +1 -1
  3. package/src/button.scss +108 -20
  4. package/src/index.ts +1 -1
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { LitElement as At, html as M, nothing as F, unsafeCSS as It } from "lit";
1
+ import { LitElement as At, html as z, nothing as F, unsafeCSS as It } from "lit";
2
2
  import { classMap as vt } from "lit/directives/class-map.js";
3
3
  import { ifDefined as K } from "lit/directives/if-defined.js";
4
4
  import { property as v } from "lit/decorators.js";
@@ -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(), r = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), S = /* @__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 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 = {
10
10
  ariaAtomic: "aria-atomic",
11
11
  ariaAutoComplete: "aria-autocomplete",
12
12
  ariaBusy: "aria-busy",
@@ -49,88 +49,88 @@ import "@justeattakeaway/pie-spinner";
49
49
  ariaValueNow: "aria-valuenow",
50
50
  ariaValueText: "aria-valuetext",
51
51
  role: "role"
52
- }, ht = (e, t) => {
52
+ }, pt = (e, t) => {
53
53
  for (let o in T) {
54
54
  t[o] = null;
55
55
  let i = null;
56
- const n = T[o];
56
+ const r = 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(n, s) : I.set(e, t);
62
+ i = s, e.isConnected ? e.setAttribute(r, s) : I.set(e, t);
63
63
  }
64
64
  });
65
65
  }
66
66
  };
67
67
  function X(e) {
68
- const t = c.get(e), { form: o } = t;
68
+ const t = d.get(e), { form: o } = t;
69
69
  it(e, o, t), ot(e, t.labels);
70
70
  }
71
71
  const Y = (e, t = !1) => {
72
72
  const o = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
73
73
  acceptNode(s) {
74
- return c.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
74
+ return d.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
75
75
  }
76
76
  });
77
77
  let i = o.nextNode();
78
- const n = !t || e.disabled;
78
+ const r = !t || e.disabled;
79
79
  for (; i; )
80
- i.formDisabledCallback && n && $(i, e.disabled), i = o.nextNode();
80
+ i.formDisabledCallback && r && $(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 = c.get(o), n = j.get(o);
86
- i.setFormValue(n);
85
+ const i = d.get(o), r = j.get(o);
86
+ i.setFormValue(r);
87
87
  }
88
88
  }
89
89
  }) : {};
90
90
  function _(e) {
91
91
  e.forEach((t) => {
92
- const { addedNodes: o, removedNodes: i } = t, n = Array.from(o), s = Array.from(i);
93
- n.forEach((l) => {
92
+ const { addedNodes: o, removedNodes: i } = t, r = Array.from(o), s = Array.from(i);
93
+ r.forEach((l) => {
94
94
  var u;
95
- if (c.has(l) && l.constructor.formAssociated && X(l), I.has(l)) {
96
- const p = I.get(l);
97
- Object.keys(T).filter((g) => p[g] !== null).forEach((g) => {
98
- l.setAttribute(T[g], p[g]);
95
+ if (d.has(l) && l.constructor.formAssociated && X(l), I.has(l)) {
96
+ const m = I.get(l);
97
+ Object.keys(T).filter((g) => m[g] !== null).forEach((g) => {
98
+ l.setAttribute(T[g], m[g]);
99
99
  }), I.delete(l);
100
100
  }
101
101
  if (L.has(l)) {
102
- const p = L.get(l);
103
- l.setAttribute("internals-valid", p.validity.valid.toString()), l.setAttribute("internals-invalid", (!p.validity.valid).toString()), l.setAttribute("aria-invalid", (!p.validity.valid).toString()), L.delete(l);
102
+ const m = L.get(l);
103
+ l.setAttribute("internals-valid", m.validity.valid.toString()), l.setAttribute("internals-invalid", (!m.validity.valid).toString()), l.setAttribute("aria-invalid", (!m.validity.valid).toString()), L.delete(l);
104
104
  }
105
105
  if (l.localName === "form") {
106
- const p = E.get(l), x = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
106
+ const m = E.get(l), w = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
107
107
  acceptNode(B) {
108
- return c.has(B) && B.constructor.formAssociated && !(p && p.has(B)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
108
+ return d.has(B) && B.constructor.formAssociated && !(m && m.has(B)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
109
109
  }
110
110
  });
111
- let g = x.nextNode();
111
+ let g = w.nextNode();
112
112
  for (; g; )
113
- X(g), g = x.nextNode();
113
+ X(g), g = w.nextNode();
114
114
  }
115
115
  l.localName === "fieldset" && ((u = V.observe) === null || u === void 0 || u.call(V, l, Z), Y(l, !0));
116
116
  }), s.forEach((l) => {
117
- const u = c.get(l);
118
- u && b.get(u) && tt(u), S.has(l) && S.get(l).disconnect();
117
+ const u = d.get(l);
118
+ u && b.get(u) && tt(u), M.has(l) && M.get(l).disconnect();
119
119
  });
120
120
  });
121
121
  }
122
- function pt(e) {
122
+ function mt(e) {
123
123
  e.forEach((t) => {
124
124
  const { removedNodes: o } = t;
125
125
  o.forEach((i) => {
126
- const n = J.get(t.target);
127
- c.has(i) && nt(i), n.disconnect();
126
+ const r = J.get(t.target);
127
+ d.has(i) && rt(i), r.disconnect();
128
128
  });
129
129
  });
130
130
  }
131
- const mt = (e) => {
131
+ const ht = (e) => {
132
132
  var t, o;
133
- const i = new MutationObserver(pt);
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);
135
135
  };
136
136
  O() && new MutationObserver(_);
@@ -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) => c.get(s).validity.valid), n = [...t, ...i].includes(!1);
160
- e.toggleAttribute("internals-invalid", n), e.toggleAttribute("internals-valid", !n);
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);
161
161
  }, ft = (e) => {
162
162
  N(P(e.target));
163
163
  }, gt = (e) => {
@@ -166,13 +166,13 @@ 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 n = E.get(e);
169
+ const r = E.get(e);
170
170
  if (e.noValidate)
171
171
  return;
172
- n.size && Array.from(n).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && o.preventDefault();
172
+ r.size && Array.from(r).reverse().map((u) => d.get(u).reportValidity()).includes(!1) && o.preventDefault();
173
173
  }
174
174
  });
175
- }, wt = (e) => {
175
+ }, xt = (e) => {
176
176
  const t = E.get(e.target);
177
177
  t && t.size && t.forEach((o) => {
178
178
  o.constructor.formAssociated && o.formResetCallback && o.formResetCallback.apply(o);
@@ -183,8 +183,8 @@ import "@justeattakeaway/pie-spinner";
183
183
  if (i)
184
184
  i.add(e);
185
185
  else {
186
- const n = /* @__PURE__ */ new Set();
187
- n.add(e), E.set(t, n), yt(t), t.addEventListener("reset", wt), t.addEventListener("input", ft), t.addEventListener("change", gt);
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);
188
188
  }
189
189
  y.set(t, { ref: e, internals: o }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
190
190
  e.formAssociatedCallback.apply(e, [t]);
@@ -193,29 +193,29 @@ import "@justeattakeaway/pie-spinner";
193
193
  }, P = (e) => {
194
194
  let t = e.parentNode;
195
195
  return t && t.tagName !== "FORM" && (t = P(t)), t;
196
- }, w = (e, t, o = DOMException) => {
196
+ }, x = (e, t, o = DOMException) => {
197
197
  if (!e.constructor.formAssociated)
198
198
  throw new o(t);
199
- }, rt = (e, t, o) => {
199
+ }, nt = (e, t, o) => {
200
200
  const i = E.get(e);
201
- return i && i.size && i.forEach((n) => {
202
- c.get(n)[o]() || (t = !1);
201
+ return i && i.size && i.forEach((r) => {
202
+ d.get(r)[o]() || (t = !1);
203
203
  }), t;
204
- }, nt = (e) => {
204
+ }, rt = (e) => {
205
205
  if (e.constructor.formAssociated) {
206
- const t = c.get(e), { labels: o, form: i } = t;
206
+ const t = d.get(e), { labels: o, form: i } = t;
207
207
  ot(e, o), it(e, i, t);
208
208
  }
209
209
  };
210
210
  function O() {
211
211
  return typeof MutationObserver < "u";
212
212
  }
213
- class xt {
213
+ class wt {
214
214
  constructor() {
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), kt = (e, t, o) => (e.valid = Mt(t), Object.keys(t).forEach((i) => e[i] = t[i]), o && N(o), 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), kt = (e, t, o) => (e.valid = zt(t), Object.keys(t).forEach((i) => e[i] = t[i]), o && N(o), e), zt = (e) => {
219
219
  let t = !0;
220
220
  for (let o in e)
221
221
  o !== "valid" && e[o] !== !1 && (t = !1);
@@ -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), n = `state${t}`;
240
- return i.isConnected ? at(i, n) : setTimeout(() => {
241
- at(i, n);
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);
242
242
  }), o;
243
243
  }
244
244
  clear() {
@@ -258,14 +258,14 @@ 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 St(e, t, o, i, n) {
262
- if (typeof t == "function" ? e !== t || !n : !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, 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");
263
263
  return t.set(e, o), o;
264
264
  }
265
- var z;
266
- class Ct {
265
+ var C;
266
+ class St {
267
267
  constructor(t) {
268
- z.set(this, void 0), St(this, z, t);
268
+ C.set(this, void 0), Mt(this, C, t);
269
269
  for (let o = 0; o < t.length; o++) {
270
270
  let i = t[o];
271
271
  this[o] = i, i.hasAttribute("name") && (this[i.getAttribute("name")] = i);
@@ -273,10 +273,10 @@ import "@justeattakeaway/pie-spinner";
273
273
  Object.freeze(this);
274
274
  }
275
275
  get length() {
276
- return st(this, z, "f").length;
276
+ return st(this, C, "f").length;
277
277
  }
278
- [(z = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
279
- return st(this, z, "f")[Symbol.iterator]();
278
+ [(C = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
279
+ return st(this, C, "f")[Symbol.iterator]();
280
280
  }
281
281
  item(t) {
282
282
  return this[t] == null ? null : this[t];
@@ -285,27 +285,27 @@ import "@justeattakeaway/pie-spinner";
285
285
  return this[t] == null ? null : this[t];
286
286
  }
287
287
  }
288
- function zt() {
288
+ function Ct() {
289
289
  const e = HTMLFormElement.prototype.checkValidity;
290
290
  HTMLFormElement.prototype.checkValidity = o;
291
291
  const t = HTMLFormElement.prototype.reportValidity;
292
292
  HTMLFormElement.prototype.reportValidity = i;
293
293
  function o(...s) {
294
294
  let l = e.apply(this, s);
295
- return rt(this, l, "checkValidity");
295
+ return nt(this, l, "checkValidity");
296
296
  }
297
297
  function i(...s) {
298
298
  let l = t.apply(this, s);
299
- return rt(this, l, "reportValidity");
299
+ return nt(this, l, "reportValidity");
300
300
  }
301
- const { get: n } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
301
+ const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
302
302
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
303
303
  get(...s) {
304
- const l = n.call(this, ...s), u = Array.from(E.get(this) || []);
304
+ const l = r.call(this, ...s), u = Array.from(E.get(this) || []);
305
305
  if (u.length === 0)
306
306
  return l;
307
- const p = Array.from(l).concat(u).sort((x, g) => x.compareDocumentPosition ? x.compareDocumentPosition(g) & 2 ? 1 : -1 : 0);
308
- return new Ct(p);
307
+ const m = Array.from(l).concat(u).sort((w, g) => w.compareDocumentPosition ? w.compareDocumentPosition(g) & 2 ? 1 : -1 : 0);
308
+ return new St(m);
309
309
  }
310
310
  });
311
311
  }
@@ -316,14 +316,14 @@ import "@justeattakeaway/pie-spinner";
316
316
  constructor(t) {
317
317
  if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
318
318
  throw new TypeError("Illegal constructor");
319
- const o = t.getRootNode(), i = new xt();
320
- this.states = new W(t), a.set(this, t), r.set(this, i), c.set(t, this), ht(t, this), ut(t, this), Object.seal(this), o instanceof DocumentFragment && mt(o);
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);
321
321
  }
322
322
  checkValidity() {
323
323
  const t = a.get(this);
324
- if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
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
- const o = r.get(this);
326
+ const o = n.get(this);
327
327
  if (!o.valid) {
328
328
  const i = new Event("invalid", {
329
329
  bubbles: !1,
@@ -336,19 +336,19 @@ import "@justeattakeaway/pie-spinner";
336
336
  }
337
337
  get form() {
338
338
  const t = a.get(this);
339
- w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
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
344
  const t = a.get(this);
345
- w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
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
350
  const t = a.get(this);
351
- if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
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);
354
354
  if (i && !t.constructor.formAssociated)
@@ -357,34 +357,34 @@ import "@justeattakeaway/pie-spinner";
357
357
  }
358
358
  setFormValue(t) {
359
359
  const o = a.get(this);
360
- if (w(o, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), tt(this), t != null && !(t instanceof FormData)) {
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, n]) => {
366
- if (typeof n == "string") {
365
+ } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, r]) => {
366
+ if (typeof r == "string") {
367
367
  const s = et(o, this);
368
- s.name = i, s.value = n;
368
+ s.name = i, s.value = r;
369
369
  }
370
370
  });
371
371
  j.set(o, t);
372
372
  }
373
373
  setValidity(t, o, i) {
374
- const n = a.get(this);
375
- if (w(n, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
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)
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
- const s = r.get(this), l = {};
379
- for (const x in t)
380
- l[x] = t[x];
378
+ const s = n.get(this), l = {};
379
+ for (const w in t)
380
+ l[w] = t[w];
381
381
  Object.keys(l).length === 0 && Et(s);
382
382
  const u = Object.assign(Object.assign({}, s), l);
383
383
  delete u.valid;
384
- const { valid: p } = kt(s, u, this.form);
385
- if (!p && !o)
384
+ const { valid: m } = kt(s, u, this.form);
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
- m.set(this, p ? "" : o), n.isConnected ? (n.toggleAttribute("internals-invalid", !p), n.toggleAttribute("internals-valid", p), n.setAttribute("aria-invalid", `${!p}`)) : L.set(n, this);
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);
388
388
  }
389
389
  get shadowRoot() {
390
390
  const t = a.get(this), o = q.get(t);
@@ -392,15 +392,15 @@ import "@justeattakeaway/pie-spinner";
392
392
  }
393
393
  get validationMessage() {
394
394
  const t = a.get(this);
395
- return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), m.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);
396
396
  }
397
397
  get validity() {
398
398
  const t = a.get(this);
399
- return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), r.get(this);
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
402
  const t = a.get(this);
403
- return w(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
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
  }
406
406
  function Ft() {
@@ -427,25 +427,25 @@ import "@justeattakeaway/pie-spinner";
427
427
  "reportValidity"
428
428
  ].every((i) => i in o.internals);
429
429
  }
430
- let ct = !1, dt = !1;
430
+ let dt = !1, ct = !1;
431
431
  function H(e) {
432
- dt || (dt = !0, window.CustomStateSet = W, e && (HTMLElement.prototype.attachInternals = function(...t) {
432
+ ct || (ct = !0, window.CustomStateSet = W, e && (HTMLElement.prototype.attachInternals = function(...t) {
433
433
  const o = e.call(this, t);
434
434
  return o.states = new W(this), o;
435
435
  }));
436
436
  }
437
437
  function bt(e = !0) {
438
- if (!ct) {
439
- if (ct = !0, typeof window < "u" && (window.ElementInternals = lt), typeof CustomElementRegistry < "u") {
438
+ if (!dt) {
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, n) {
441
+ CustomElementRegistry.prototype.define = function(o, i, r) {
442
442
  if (i.formAssociated) {
443
443
  const s = i.prototype.connectedCallback;
444
444
  i.prototype.connectedCallback = function() {
445
- Q.has(this) || (Q.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), nt(this);
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, n);
448
+ t.call(this, o, i, r);
449
449
  };
450
450
  }
451
451
  if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
@@ -453,22 +453,22 @@ import "@justeattakeaway/pie-spinner";
453
453
  if (this.tagName.indexOf("-") === -1)
454
454
  throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
455
455
  } else return {};
456
- if (c.has(this))
456
+ if (d.has(this))
457
457
  throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
458
458
  return new lt(this);
459
459
  }), typeof Element < "u") {
460
460
  let t = function(...i) {
461
- const n = o.apply(this, i);
462
- if (q.set(this, n), O()) {
461
+ const r = o.apply(this, i);
462
+ if (q.set(this, r), O()) {
463
463
  const s = new MutationObserver(_);
464
- window.ShadyDOM ? s.observe(this, R) : s.observe(n, R), S.set(this, s);
464
+ window.ShadyDOM ? s.observe(this, R) : s.observe(r, R), M.set(this, s);
465
465
  }
466
- return n;
466
+ return r;
467
467
  };
468
468
  const o = Element.prototype.attachShadow;
469
469
  Element.prototype.attachShadow = t;
470
470
  }
471
- O() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, R), typeof HTMLFormElement < "u" && zt(), (e || typeof window < "u" && !window.CustomStateSet) && H();
471
+ O() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, R), typeof HTMLFormElement < "u" && Ct(), (e || typeof window < "u" && !window.CustomStateSet) && H();
472
472
  }
473
473
  }
474
474
  return !!customElements.polyfillWrapFlushCallback || (Ft() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : bt(!1)), k.forceCustomStateSetPolyfill = H, k.forceElementInternalsPolyfill = bt, Object.defineProperty(k, "__esModule", { value: !0 }), k;
@@ -494,19 +494,19 @@ 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);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:inline-flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-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:not([disabled]){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-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--responsive{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--expressive{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn.o-btn--small-expressive{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--responsive{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--small-productive{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--responsive{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--medium{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--responsive{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--large{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.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{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}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}";
498
- var $t = Object.defineProperty, h = (k, a, r, b) => {
499
- for (var c = void 0, m = k.length - 1, y; m >= 0; m--)
500
- (y = k[m]) && (c = y(a, r, c) || c);
501
- return c && $t(a, r, c), c;
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;
502
502
  };
503
- const C = "pie-button", U = class U extends Lt(At) {
503
+ const S = "pie-button", U = class U extends Lt(At) {
504
504
  constructor() {
505
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
506
  if (!(a.key !== "Enter" || this.type !== "submit" || this.disabled)) {
507
507
  if (a.target instanceof HTMLElement) {
508
- const r = a.target.tagName.toLowerCase();
509
- if (r === "button" || r === "pie-button")
508
+ const n = a.target.tagName.toLowerCase();
509
+ if (n === "button" || n === "pie-button")
510
510
  return;
511
511
  }
512
512
  a.preventDefault(), this._handleClick();
@@ -522,8 +522,8 @@ const C = "pie-button", U = class U extends Lt(At) {
522
522
  super.disconnectedCallback(), this.type === "submit" && ((a = this.form) == null || a.removeEventListener("keydown", this._handleFormKeyDown));
523
523
  }
524
524
  updated(a) {
525
- var r, b;
526
- a.has("type") && (this.type === "submit" ? (r = this.form) == null || r.addEventListener("keydown", this._handleFormKeyDown) : (b = this.form) == null || b.removeEventListener("keydown", this._handleFormKeyDown));
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));
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.
@@ -535,8 +535,8 @@ const C = "pie-button", U = class U extends Lt(At) {
535
535
  */
536
536
  _simulateNativeButtonClick(a) {
537
537
  if (!this.form) return;
538
- const r = document.createElement("button");
539
- r.type = a, r.style.position = "absolute", r.style.width = "1px", r.style.height = "1px", r.style.padding = "0", r.style.margin = "-1px", r.style.overflow = "hidden", r.style.border = "0", r.style.whiteSpace = "nowrap", a === "submit" && (this.name && (r.name = this.name), this.value && (r.value = this.value), this.formaction && r.setAttribute("formaction", this.formaction), this.formenctype && r.setAttribute("formenctype", this.formenctype), this.formmethod && r.setAttribute("formmethod", this.formmethod), this.formnovalidate && r.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && r.setAttribute("formtarget", this.formtarget)), this.form.append(r), r.click(), r.remove();
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();
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,147 +547,147 @@ const C = "pie-button", U = class U extends Lt(At) {
547
547
  * @private
548
548
  */
549
549
  renderSpinner() {
550
- const { size: a, variant: r, disabled: b } = this, c = a && a.includes("small") ? "small" : "medium";
551
- let m;
552
- return b ? m = r === "ghost-inverse" ? "inverse" : "secondary" : m = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", M`
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`
553
553
  <pie-spinner
554
- size="${c}"
555
- variant="${m}">
554
+ size="${d}"
555
+ variant="${h}">
556
556
  </pie-spinner>`;
557
557
  }
558
558
  renderAnchor(a) {
559
559
  const {
560
- href: r,
560
+ href: n,
561
561
  iconPlacement: b,
562
- rel: c,
563
- target: m
562
+ rel: d,
563
+ target: h
564
564
  } = this;
565
- return M`
565
+ return z`
566
566
  <a
567
- href="${K(r)}"
568
- rel="${K(c)}"
569
- target="${K(m)}"
567
+ href="${K(n)}"
568
+ rel="${K(d)}"
569
+ target="${K(h)}"
570
570
  class="${vt(a)}">
571
- ${b === "leading" ? M`<slot name="icon"></slot>` : F}
571
+ ${b === "leading" ? z`<slot name="icon"></slot>` : F}
572
572
  <slot></slot>
573
- ${b === "trailing" ? M`<slot name="icon"></slot>` : F}
573
+ ${b === "trailing" ? z`<slot name="icon"></slot>` : F}
574
574
  </a>`;
575
575
  }
576
576
  renderButton(a) {
577
577
  const {
578
- disabled: r,
578
+ disabled: n,
579
579
  iconPlacement: b,
580
- isLoading: c,
581
- type: m
580
+ isLoading: d,
581
+ type: h
582
582
  } = this, y = {
583
583
  ...a,
584
- "is-loading": c
584
+ "is-loading": d
585
585
  };
586
- return M`
586
+ return z`
587
587
  <button
588
588
  @click=${this._handleClick}
589
589
  class=${vt(y)}
590
- type=${m}
591
- ?disabled=${r}>
592
- ${c ? this.renderSpinner() : F}
593
- ${b === "leading" ? M`<slot name="icon"></slot>` : F}
594
- <slot></slot>
595
- ${b === "trailing" ? M`<slot name="icon"></slot>` : F}
590
+ type=${h}
591
+ ?disabled=${n}>
592
+ ${d ? this.renderSpinner() : F}
593
+ ${b === "leading" ? z`<slot name="icon"></slot>` : F}
594
+ <span class="o-btn-text"><slot></slot></span>
595
+ ${b === "trailing" ? z`<slot name="icon"></slot>` : F}
596
596
  </button>`;
597
597
  }
598
598
  render() {
599
599
  const {
600
600
  isFullWidth: a,
601
- isResponsive: r,
601
+ isResponsive: n,
602
602
  responsiveSize: b,
603
- size: c,
604
- tag: m,
603
+ size: d,
604
+ tag: h,
605
605
  variant: y
606
- } = this, S = {
606
+ } = this, M = {
607
607
  "o-btn": !0,
608
608
  "o-btn--fullWidth": a,
609
- "o-btn--responsive": r,
610
- [`o-btn--${b}`]: !!(r && b),
609
+ "o-btn--responsive": n,
610
+ [`o-btn--${b}`]: !!(n && b),
611
611
  [`o-btn--${y}`]: !0,
612
- [`o-btn--${c}`]: !0
612
+ [`o-btn--${d}`]: !0
613
613
  };
614
- return m === "a" ? this.renderAnchor(S) : this.renderButton(S);
614
+ return h === "a" ? this.renderAnchor(M) : this.renderButton(M);
615
615
  }
616
616
  focus() {
617
- var a, r;
618
- (r = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button")) == null || r.focus();
617
+ var a, n;
618
+ (n = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button")) == null || n.focus();
619
619
  }
620
620
  };
621
621
  U.styles = It(Rt);
622
- let d = U;
623
- h([
622
+ let c = U;
623
+ p([
624
624
  v({ type: String }),
625
- A(C, Vt, f.tag)
626
- ], d.prototype, "tag");
627
- h([
625
+ A(S, Vt, f.tag)
626
+ ], c.prototype, "tag");
627
+ p([
628
628
  v({ type: String }),
629
- A(C, Nt, f.size)
630
- ], d.prototype, "size");
631
- h([
629
+ A(S, Nt, f.size)
630
+ ], c.prototype, "size");
631
+ p([
632
632
  v({ type: String }),
633
- A(C, Pt, f.type)
634
- ], d.prototype, "type");
635
- h([
633
+ A(S, Pt, f.type)
634
+ ], c.prototype, "type");
635
+ p([
636
636
  v({ type: String }),
637
- A(C, Ot, f.variant)
638
- ], d.prototype, "variant");
639
- h([
637
+ A(S, Ot, f.variant)
638
+ ], c.prototype, "variant");
639
+ p([
640
640
  v({ type: String }),
641
- A(C, _t, f.iconPlacement)
642
- ], d.prototype, "iconPlacement");
643
- h([
641
+ A(S, _t, f.iconPlacement)
642
+ ], c.prototype, "iconPlacement");
643
+ p([
644
644
  v({ type: Boolean })
645
- ], d.prototype, "disabled");
646
- h([
645
+ ], c.prototype, "disabled");
646
+ p([
647
647
  v({ type: Boolean, reflect: !0 })
648
- ], d.prototype, "isLoading");
649
- h([
648
+ ], c.prototype, "isLoading");
649
+ p([
650
650
  v({ type: Boolean })
651
- ], d.prototype, "isFullWidth");
652
- h([
651
+ ], c.prototype, "isFullWidth");
652
+ p([
653
653
  v({ type: Boolean })
654
- ], d.prototype, "isResponsive");
655
- h([
654
+ ], c.prototype, "isResponsive");
655
+ p([
656
656
  v({ type: String })
657
- ], d.prototype, "name");
658
- h([
657
+ ], c.prototype, "name");
658
+ p([
659
659
  v({ type: String })
660
- ], d.prototype, "value");
661
- h([
660
+ ], c.prototype, "value");
661
+ p([
662
662
  v({ type: String })
663
- ], d.prototype, "formaction");
664
- h([
663
+ ], c.prototype, "formaction");
664
+ p([
665
665
  v({ type: String })
666
- ], d.prototype, "formenctype");
667
- h([
666
+ ], c.prototype, "formenctype");
667
+ p([
668
668
  v({ type: String })
669
- ], d.prototype, "formmethod");
670
- h([
669
+ ], c.prototype, "formmethod");
670
+ p([
671
671
  v({ type: Boolean })
672
- ], d.prototype, "formnovalidate");
673
- h([
672
+ ], c.prototype, "formnovalidate");
673
+ p([
674
674
  v({ type: String })
675
- ], d.prototype, "formtarget");
676
- h([
675
+ ], c.prototype, "formtarget");
676
+ p([
677
677
  v({ type: String })
678
- ], d.prototype, "responsiveSize");
679
- h([
678
+ ], c.prototype, "responsiveSize");
679
+ p([
680
680
  v({ type: String })
681
- ], d.prototype, "href");
682
- h([
681
+ ], c.prototype, "href");
682
+ p([
683
683
  v({ type: String })
684
- ], d.prototype, "rel");
685
- h([
684
+ ], c.prototype, "rel");
685
+ p([
686
686
  v({ type: String })
687
- ], d.prototype, "target");
688
- Tt(C, d);
687
+ ], c.prototype, "target");
688
+ Tt(S, c);
689
689
  export {
690
- d as PieButton,
690
+ c as PieButton,
691
691
  f as defaultProps,
692
692
  Gt as formEncodingtypes,
693
693
  Jt as formMethodTypes,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "PIE design system button built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/src/button.scss CHANGED
@@ -25,59 +25,83 @@
25
25
  // currently this sets the primary button styles
26
26
  --btn-bg-color: var(--dt-color-interactive-brand);
27
27
  --btn-text-color: var(--dt-color-content-interactive-primary);
28
-
29
- // Heights for the different button sizes
30
- --btn-height--xsmall: 32px;
31
- --btn-height--small: 40px;
32
- --btn-height--medium: 48px;
33
- --btn-height--large: 56px;
34
28
  --icon-display-override: block;
35
29
 
30
+ // Vertical and horizontal padding values for the button
31
+ --btn-padding-vertical-xsmall: 6px;
32
+ --btn-padding-vertical-small: 8px;
33
+ --btn-padding-vertical-medium: 10px;
34
+ --btn-padding-vertical-large: 14px;
35
+ --btn-padding-horizontal-small: var(--dt-spacing-b);
36
+ --btn-padding-horizontal-medium: var(--dt-spacing-d);
37
+ --btn-padding-horizontal-large: var(--dt-spacing-e);
38
+
36
39
  /**
37
40
  * Mixin for updating the button styles based on the size passed in.
38
41
  * Takes in the name of the size to be used.
39
42
  */
40
43
  @mixin button-size($size) {
41
44
  @if $size == 'xsmall' {
42
- --btn-height: var(--btn-height--xsmall);
43
- --btn-padding: 6px var(--dt-spacing-b);
44
45
  --btn-font-size: #{p.font-size(--dt-font-size-14)};
45
46
  --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
46
47
  --icon-size-override: 16px;
47
48
  } @else if $size == 'small-expressive' {
48
- --btn-height: var(--btn-height--small);
49
- --btn-padding: 6px var(--dt-spacing-d);
50
49
  --btn-font-size: #{p.font-size(--dt-font-size-20)};
51
50
  --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
52
51
  --icon-size-override: 20px;
53
52
  } @else if $size == 'small-productive' {
54
- --btn-height: var(--btn-height--small);
55
- --btn-padding: 8px var(--dt-spacing-d);
56
53
  --btn-font-size: #{p.font-size(--dt-font-size-16)};
57
54
  --btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
58
55
  --icon-size-override: 20px;
59
56
  } @else if $size == 'medium' {
60
- --btn-height: var(--btn-height--medium);
61
- --btn-padding: 10px var(--dt-spacing-e);
62
57
  --btn-font-size: #{p.font-size(--dt-font-size-20)};
63
58
  --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
64
59
  --icon-size-override: 24px;
65
60
  } @else if $size == 'large' {
66
- --btn-height: var(--btn-height--large);
67
- --btn-padding: 14px var(--dt-spacing-e);
68
61
  --btn-font-size: #{p.font-size(--dt-font-size-20)};
69
62
  --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
70
63
  --icon-size-override: 24px;
71
64
  }
72
65
  }
73
66
 
67
+ /**
68
+ * Mixin for applying the button padding based on the size passed in.
69
+ * $size: The name of the size to be used.
70
+ * $offsetPaddingForBorder: A boolean to specify whether the padding should be offset for a border
71
+ */
72
+ @mixin button-padding($size, $offsetPaddingForBorder: false) {
73
+ $verticalPadding: '';
74
+ $horizontalPadding: '';
75
+
76
+ @if $size == 'xsmall' {
77
+ $verticalPadding: '--btn-padding-vertical-xsmall';
78
+ $horizontalPadding: '--btn-padding-horizontal-small';
79
+ } @else if $size == 'small-expressive' {
80
+ $verticalPadding: '--btn-padding-vertical-xsmall';
81
+ $horizontalPadding: '--btn-padding-horizontal-medium';
82
+ } @else if $size == 'small-productive' {
83
+ $verticalPadding: '--btn-padding-vertical-small';
84
+ $horizontalPadding: '--btn-padding-horizontal-medium';
85
+ } @else if $size == 'medium' {
86
+ $verticalPadding: '--btn-padding-vertical-medium';
87
+ $horizontalPadding: '--btn-padding-horizontal-large';
88
+ } @else if $size == 'large' {
89
+ $verticalPadding: '--btn-padding-vertical-large';
90
+ $horizontalPadding: '--btn-padding-horizontal-large';
91
+ }
92
+
93
+ @if $offsetPaddingForBorder {
94
+ padding: calc(var(#{$verticalPadding}) - 1px) var(#{$horizontalPadding});
95
+ } @else {
96
+ padding: var(#{$verticalPadding}) var(#{$horizontalPadding});
97
+ }
98
+ }
99
+
74
100
  position: relative;
75
101
  display: inline-flex;
76
102
  gap: var(--dt-spacing-b);
77
103
  align-items: center;
78
104
  justify-content: center;
79
- height: var(--btn-height);
80
- padding: var(--btn-padding);
81
105
  border: none;
82
106
  border-radius: var(--btn-border-radius);
83
107
  outline: none;
@@ -167,7 +191,7 @@
167
191
  @include p.button-interactive-states('--dt-color-container-default', 'transparent');
168
192
  }
169
193
 
170
- &.o-btn--outline-inverse:not([disabled]) {
194
+ &.o-btn--outline-inverse {
171
195
  border: 1px solid var(--dt-color-border-strong);
172
196
  }
173
197
 
@@ -191,43 +215,98 @@
191
215
  // *********************
192
216
  &.o-btn--xsmall {
193
217
  @include button-size(xsmall);
218
+ @include button-padding(xsmall);
194
219
 
195
220
  @include responsive-wide {
196
221
  // productive is the default size when responsive is enabled
197
222
  @include button-size(small-productive);
223
+ @include button-padding(small-productive);
198
224
 
199
225
  &.o-btn--expressive {
200
226
  @include button-size(small-expressive);
227
+ @include button-padding(small-expressive);
228
+ }
229
+ }
230
+
231
+ &.o-btn--outline,
232
+ &.o-btn--outline-inverse {
233
+ @include button-padding(xsmall, true);
234
+
235
+ @include responsive-wide {
236
+ @include button-padding(small-productive, true);
237
+
238
+ &.o-btn--expressive {
239
+ @include button-padding(small-expressive, true);
240
+ }
201
241
  }
202
242
  }
203
243
  }
204
244
 
205
245
  &.o-btn--small-expressive {
206
246
  @include button-size(small-expressive);
247
+ @include button-padding(small-expressive);
207
248
 
208
249
  @include responsive-wide {
209
250
  @include button-size(medium);
251
+ @include button-padding(medium);
252
+ }
253
+
254
+ &.o-btn--outline,
255
+ &.o-btn--outline-inverse {
256
+ @include button-padding(small-expressive, true);
257
+
258
+ @include responsive-wide {
259
+ @include button-padding(medium, true);
260
+ }
210
261
  }
211
262
  }
212
263
 
213
264
  &.o-btn--small-productive {
214
265
  @include button-size(small-productive);
266
+ @include button-padding(small-productive);
215
267
 
216
268
  @include responsive-wide {
217
269
  @include button-size(medium);
270
+ @include button-padding(medium);
271
+ }
272
+
273
+ &.o-btn--outline,
274
+ &.o-btn--outline-inverse {
275
+ @include button-padding(small-productive, true);
276
+
277
+ @include responsive-wide {
278
+ @include button-padding(medium, true);
279
+ }
218
280
  }
219
281
  }
220
282
 
221
283
  &.o-btn--medium {
222
284
  @include button-size(medium);
285
+ @include button-padding(medium);
223
286
 
224
287
  @include responsive-wide {
225
288
  @include button-size(large);
289
+ @include button-padding(large);
290
+ }
291
+
292
+ &.o-btn--outline,
293
+ &.o-btn--outline-inverse {
294
+ @include button-padding(medium, true);
295
+
296
+ @include responsive-wide {
297
+ @include button-padding(large, true);
298
+ }
226
299
  }
227
300
  }
228
301
 
229
302
  &.o-btn--large {
230
303
  @include button-size(large);
304
+ @include button-padding(large);
305
+
306
+ &.o-btn--outline,
307
+ &.o-btn--outline-inverse {
308
+ @include button-padding(large, true);
309
+ }
231
310
  }
232
311
 
233
312
  // ******************************
@@ -251,7 +330,8 @@
251
330
  }
252
331
 
253
332
  // For outline variants, set the border to the disabled color
254
- &.o-btn--outline {
333
+ &.o-btn--outline,
334
+ &.o-btn--outline-inverse {
255
335
  border-color: var(--dt-color-disabled-01) !important;
256
336
  }
257
337
  }
@@ -277,6 +357,14 @@
277
357
  }
278
358
  }
279
359
 
360
+ // The inner span for the button text is needed to handle the text-overflow
361
+ // Without this, single word overflow wouldn't be possible in combination
362
+ // with display: flex.
363
+ .o-btn-text {
364
+ text-overflow: ellipsis;
365
+ overflow: hidden;
366
+ }
367
+
280
368
  // Used to size an SVG if one is passed in (when not using the component icons)
281
369
  ::slotted(svg) {
282
370
  height: var(--icon-size-override);
package/src/index.ts CHANGED
@@ -265,7 +265,7 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
265
265
  ?disabled=${disabled}>
266
266
  ${isLoading ? this.renderSpinner() : nothing}
267
267
  ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
268
- <slot></slot>
268
+ <span class="o-btn-text"><slot></slot></span>
269
269
  ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
270
270
  </button>`;
271
271
  }