@justeattakeaway/pie-button 1.1.0 → 1.3.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 +235 -235
  2. package/package.json +2 -5
  3. package/src/button.scss +24 -31
package/dist/index.js CHANGED
@@ -5,8 +5,8 @@ import { property as v } from "lit/decorators.js";
5
5
  import { FormControlMixin as Lt, validPropertyValues as A, defineCustomElement as Tt } from "@justeattakeaway/pie-webc-core";
6
6
  import "@justeattakeaway/pie-spinner";
7
7
  (function() {
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 = {
8
+ (function(E) {
9
+ const n = /* @__PURE__ */ new WeakMap(), r = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__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,68 +49,68 @@ import "@justeattakeaway/pie-spinner";
49
49
  ariaValueNow: "aria-valuenow",
50
50
  ariaValueText: "aria-valuetext",
51
51
  role: "role"
52
- }, pt = (e, t) => {
53
- for (let o in T) {
54
- t[o] = null;
55
- let i = null;
56
- const r = T[o];
57
- Object.defineProperty(t, o, {
52
+ }, mt = (e, t) => {
53
+ for (let i in T) {
54
+ t[i] = null;
55
+ let o = null;
56
+ const a = T[i];
57
+ Object.defineProperty(t, i, {
58
58
  get() {
59
- return i;
59
+ return o;
60
60
  },
61
61
  set(s) {
62
- i = s, e.isConnected ? e.setAttribute(r, s) : I.set(e, t);
62
+ o = s, e.isConnected ? e.setAttribute(a, s) : I.set(e, t);
63
63
  }
64
64
  });
65
65
  }
66
66
  };
67
67
  function X(e) {
68
- const t = d.get(e), { form: o } = t;
69
- it(e, o, t), ot(e, t.labels);
68
+ const t = d.get(e), { form: i } = t;
69
+ ot(e, i, t), it(e, t.labels);
70
70
  }
71
71
  const Y = (e, t = !1) => {
72
- const o = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
72
+ const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
73
73
  acceptNode(s) {
74
74
  return d.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
75
75
  }
76
76
  });
77
- let i = o.nextNode();
78
- const r = !t || e.disabled;
79
- for (; i; )
80
- i.formDisabledCallback && r && $(i, e.disabled), i = o.nextNode();
77
+ let o = i.nextNode();
78
+ const a = !t || e.disabled;
79
+ for (; o; )
80
+ o.formDisabledCallback && a && $(o, e.disabled), o = i.nextNode();
81
81
  }, Z = { attributes: !0, attributeFilter: ["disabled", "name"] }, V = O() ? new MutationObserver((e) => {
82
82
  for (const t of e) {
83
- const o = t.target;
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);
83
+ const i = t.target;
84
+ if (t.attributeName === "disabled" && (i.constructor.formAssociated ? $(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && Y(i)), t.attributeName === "name" && i.constructor.formAssociated) {
85
+ const o = d.get(i), a = j.get(i);
86
+ o.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) => {
92
+ const { addedNodes: i, removedNodes: o } = t, a = Array.from(i), s = Array.from(o);
93
+ a.forEach((l) => {
94
94
  var u;
95
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]);
96
+ const p = I.get(l);
97
+ Object.keys(T).filter((f) => p[f] !== null).forEach((f) => {
98
+ l.setAttribute(T[f], p[f]);
99
99
  }), I.delete(l);
100
100
  }
101
101
  if (L.has(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);
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);
104
104
  }
105
105
  if (l.localName === "form") {
106
- const m = E.get(l), w = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
106
+ const p = k.get(l), w = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
107
107
  acceptNode(B) {
108
- return d.has(B) && B.constructor.formAssociated && !(m && m.has(B)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
108
+ return d.has(B) && B.constructor.formAssociated && !(p && p.has(B)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
109
109
  }
110
110
  });
111
- let g = w.nextNode();
112
- for (; g; )
113
- X(g), g = w.nextNode();
111
+ let f = w.nextNode();
112
+ for (; f; )
113
+ X(f), f = 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) => {
@@ -119,19 +119,19 @@ import "@justeattakeaway/pie-spinner";
119
119
  });
120
120
  });
121
121
  }
122
- function mt(e) {
122
+ function pt(e) {
123
123
  e.forEach((t) => {
124
- const { removedNodes: o } = t;
125
- o.forEach((i) => {
126
- const r = J.get(t.target);
127
- d.has(i) && rt(i), r.disconnect();
124
+ const { removedNodes: i } = t;
125
+ i.forEach((o) => {
126
+ const a = J.get(t.target);
127
+ d.has(o) && nt(o), a.disconnect();
128
128
  });
129
129
  });
130
130
  }
131
131
  const ht = (e) => {
132
- var t, o;
133
- const i = new MutationObserver(mt);
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);
132
+ var t, i;
133
+ const o = new MutationObserver(pt);
134
+ !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (i = o.observe) === null || i === void 0 || i.call(o, e, { childList: !0 }), J.set(e, o);
135
135
  };
136
136
  O() && new MutationObserver(_);
137
137
  const R = {
@@ -140,71 +140,71 @@ import "@justeattakeaway/pie-spinner";
140
140
  }, $ = (e, t) => {
141
141
  e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
142
142
  }, tt = (e) => {
143
- b.get(e).forEach((o) => {
144
- o.remove();
143
+ b.get(e).forEach((i) => {
144
+ i.remove();
145
145
  }), b.set(e, []);
146
146
  }, et = (e, t) => {
147
- const o = document.createElement("input");
148
- return o.type = "hidden", o.name = e.getAttribute("name"), e.after(o), b.get(t).push(o), o;
147
+ const i = document.createElement("input");
148
+ return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), b.get(t).push(i), i;
149
149
  }, ut = (e, t) => {
150
- var o;
151
- b.set(t, []), (o = V.observe) === null || o === void 0 || o.call(V, e, Z);
152
- }, ot = (e, t) => {
150
+ var i;
151
+ b.set(t, []), (i = V.observe) === null || i === void 0 || i.call(V, e, Z);
152
+ }, it = (e, t) => {
153
153
  if (t.length) {
154
- Array.from(t).forEach((i) => i.addEventListener("click", e.click.bind(e)));
155
- let o = t[0].id;
156
- t[0].id || (o = `${t[0].htmlFor}_Label`, t[0].id = o), e.setAttribute("aria-labelledby", o);
154
+ Array.from(t).forEach((o) => o.addEventListener("click", e.click.bind(e)));
155
+ let i = t[0].id;
156
+ t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
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);
161
- }, ft = (e) => {
162
- N(P(e.target));
159
+ const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = k.get(e) || [], o = Array.from(i).filter((s) => s.isConnected).map((s) => d.get(s).validity.valid), a = [...t, ...o].includes(!1);
160
+ e.toggleAttribute("internals-invalid", a), e.toggleAttribute("internals-valid", !a);
163
161
  }, gt = (e) => {
164
162
  N(P(e.target));
163
+ }, ft = (e) => {
164
+ N(P(e.target));
165
165
  }, yt = (e) => {
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
- e.addEventListener("click", (o) => {
168
- if (o.target.closest(t)) {
169
- const r = E.get(e);
166
+ const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${e.id ? `,${i}[form='${e.id}']` : ""}`).join(",");
167
+ e.addEventListener("click", (i) => {
168
+ if (i.target.closest(t)) {
169
+ const a = k.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((u) => d.get(u).reportValidity()).includes(!1) && i.preventDefault();
173
173
  }
174
174
  });
175
175
  }, xt = (e) => {
176
- const t = E.get(e.target);
177
- t && t.size && t.forEach((o) => {
178
- o.constructor.formAssociated && o.formResetCallback && o.formResetCallback.apply(o);
176
+ const t = k.get(e.target);
177
+ t && t.size && t.forEach((i) => {
178
+ i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
179
179
  });
180
- }, it = (e, t, o) => {
180
+ }, ot = (e, t, i) => {
181
181
  if (t) {
182
- const i = E.get(t);
183
- if (i)
184
- i.add(e);
182
+ const o = k.get(t);
183
+ if (o)
184
+ o.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), k.set(t, a), yt(t), t.addEventListener("reset", xt), t.addEventListener("input", gt), t.addEventListener("change", ft);
188
188
  }
189
- y.set(t, { ref: e, internals: o }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
189
+ y.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
190
190
  e.formAssociatedCallback.apply(e, [t]);
191
191
  }, 0), N(t);
192
192
  }
193
193
  }, P = (e) => {
194
194
  let t = e.parentNode;
195
195
  return t && t.tagName !== "FORM" && (t = P(t)), t;
196
- }, x = (e, t, o = DOMException) => {
196
+ }, x = (e, t, i = DOMException) => {
197
197
  if (!e.constructor.formAssociated)
198
- throw new o(t);
199
- }, nt = (e, t, o) => {
200
- const i = E.get(e);
201
- return i && i.size && i.forEach((r) => {
202
- d.get(r)[o]() || (t = !1);
198
+ throw new i(t);
199
+ }, rt = (e, t, i) => {
200
+ const o = k.get(e);
201
+ return o && o.size && o.forEach((a) => {
202
+ d.get(a)[i]() || (t = !1);
203
203
  }), t;
204
- }, rt = (e) => {
204
+ }, nt = (e) => {
205
205
  if (e.constructor.formAssociated) {
206
- const t = d.get(e), { labels: o, form: i } = t;
207
- ot(e, o), it(e, i, t);
206
+ const t = d.get(e), { labels: i, form: o } = t;
207
+ it(e, i), ot(e, o, t);
208
208
  }
209
209
  };
210
210
  function O() {
@@ -215,10 +215,10 @@ import "@justeattakeaway/pie-spinner";
215
215
  this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
216
216
  }
217
217
  }
218
- const Et = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), kt = (e, t, o) => (e.valid = zt(t), Object.keys(t).forEach((i) => e[i] = t[i]), o && N(o), e), zt = (e) => {
218
+ const kt = (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), Et = (e, t, i) => (e.valid = zt(t), Object.keys(t).forEach((o) => e[o] = t[o]), i && N(i), e), zt = (e) => {
219
219
  let t = !0;
220
- for (let o in e)
221
- o !== "valid" && e[o] !== !1 && (t = !1);
220
+ for (let i in e)
221
+ i !== "valid" && e[i] !== !1 && (t = !1);
222
222
  return t;
223
223
  }, D = /* @__PURE__ */ new WeakMap();
224
224
  function at(e, t) {
@@ -236,10 +236,10 @@ 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);
242
- }), o;
239
+ const i = super.add(t), o = D.get(this), a = `state${t}`;
240
+ return o.isConnected ? at(o, a) : setTimeout(() => {
241
+ at(o, a);
242
+ }), i;
243
243
  }
244
244
  clear() {
245
245
  for (let [t] of this.entries())
@@ -247,28 +247,28 @@ import "@justeattakeaway/pie-spinner";
247
247
  super.clear();
248
248
  }
249
249
  delete(t) {
250
- const o = super.delete(t), i = D.get(this);
251
- return i.isConnected ? (i.toggleAttribute(`state${t}`, !1), i.part && i.part.remove(`state${t}`)) : setTimeout(() => {
252
- i.toggleAttribute(`state${t}`, !1), i.part && i.part.remove(`state${t}`);
253
- }), o;
250
+ const i = super.delete(t), o = D.get(this);
251
+ return o.isConnected ? (o.toggleAttribute(`state${t}`, !1), o.part && o.part.remove(`state${t}`)) : setTimeout(() => {
252
+ o.toggleAttribute(`state${t}`, !1), o.part && o.part.remove(`state${t}`);
253
+ }), i;
254
254
  }
255
255
  }
256
- function st(e, t, o, i) {
257
- if (o === "a" && !i) throw new TypeError("Private accessor was defined without a getter");
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
- return o === "m" ? i : o === "a" ? i.call(e) : i ? i.value : t.get(e);
256
+ function st(e, t, i, o) {
257
+ if (i === "a" && !o) throw new TypeError("Private accessor was defined without a getter");
258
+ if (typeof t == "function" ? e !== t || !o : !t.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
259
+ return i === "m" ? o : i === "a" ? o.call(e) : o ? o.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");
263
- return t.set(e, o), o;
261
+ function Mt(e, t, i, o, 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
+ return t.set(e, i), i;
264
264
  }
265
265
  var C;
266
266
  class St {
267
267
  constructor(t) {
268
268
  C.set(this, void 0), Mt(this, C, t);
269
- for (let o = 0; o < t.length; o++) {
270
- let i = t[o];
271
- this[o] = i, i.hasAttribute("name") && (this[i.getAttribute("name")] = i);
269
+ for (let i = 0; i < t.length; i++) {
270
+ let o = t[i];
271
+ this[i] = o, o.hasAttribute("name") && (this[o.getAttribute("name")] = o);
272
272
  }
273
273
  Object.freeze(this);
274
274
  }
@@ -287,25 +287,25 @@ import "@justeattakeaway/pie-spinner";
287
287
  }
288
288
  function Ct() {
289
289
  const e = HTMLFormElement.prototype.checkValidity;
290
- HTMLFormElement.prototype.checkValidity = o;
290
+ HTMLFormElement.prototype.checkValidity = i;
291
291
  const t = HTMLFormElement.prototype.reportValidity;
292
- HTMLFormElement.prototype.reportValidity = i;
293
- function o(...s) {
292
+ HTMLFormElement.prototype.reportValidity = o;
293
+ function i(...s) {
294
294
  let l = e.apply(this, s);
295
- return nt(this, l, "checkValidity");
295
+ return rt(this, l, "checkValidity");
296
296
  }
297
- function i(...s) {
297
+ function o(...s) {
298
298
  let l = t.apply(this, s);
299
- return nt(this, l, "reportValidity");
299
+ return rt(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) || []);
304
+ const l = a.call(this, ...s), u = Array.from(k.get(this) || []);
305
305
  if (u.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);
308
- return new St(m);
307
+ const p = Array.from(l).concat(u).sort((w, f) => w.compareDocumentPosition ? w.compareDocumentPosition(f) & 2 ? 1 : -1 : 0);
308
+ return new St(p);
309
309
  }
310
310
  });
311
311
  }
@@ -316,90 +316,90 @@ 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 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);
319
+ const i = t.getRootNode(), o = new wt();
320
+ this.states = new W(t), n.set(this, t), r.set(this, o), d.set(t, this), mt(t, this), ut(t, this), Object.seal(this), i instanceof DocumentFragment && ht(i);
321
321
  }
322
322
  checkValidity() {
323
- const t = a.get(this);
323
+ const t = n.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
- const o = n.get(this);
327
- if (!o.valid) {
328
- const i = new Event("invalid", {
326
+ const i = r.get(this);
327
+ if (!i.valid) {
328
+ const o = new Event("invalid", {
329
329
  bubbles: !1,
330
330
  cancelable: !0,
331
331
  composed: !1
332
332
  });
333
- t.dispatchEvent(i);
333
+ t.dispatchEvent(o);
334
334
  }
335
- return o.valid;
335
+ return i.valid;
336
336
  }
337
337
  get form() {
338
- const t = a.get(this);
338
+ const t = n.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
- let o;
341
- return t.constructor.formAssociated === !0 && (o = P(t)), o;
340
+ let i;
341
+ return t.constructor.formAssociated === !0 && (i = P(t)), i;
342
342
  }
343
343
  get labels() {
344
- const t = a.get(this);
344
+ const t = n.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
- const o = t.getAttribute("id"), i = t.getRootNode();
347
- return i && o ? i.querySelectorAll(`[for="${o}"]`) : [];
346
+ const i = t.getAttribute("id"), o = t.getRootNode();
347
+ return o && i ? o.querySelectorAll(`[for="${i}"]`) : [];
348
348
  }
349
349
  reportValidity() {
350
- const t = a.get(this);
350
+ const t = n.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
- const o = this.checkValidity(), i = G.get(this);
354
- if (i && !t.constructor.formAssociated)
353
+ const i = this.checkValidity(), o = G.get(this);
354
+ if (o && !t.constructor.formAssociated)
355
355
  throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
356
- return !o && i && (t.focus(), i.focus()), o;
356
+ return !i && o && (t.focus(), o.focus()), i;
357
357
  }
358
358
  setFormValue(t) {
359
- const o = a.get(this);
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
- if (o.getAttribute("name")) {
362
- const i = et(o, this);
363
- i.value = t;
359
+ const i = n.get(this);
360
+ if (x(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), tt(this), t != null && !(t instanceof FormData)) {
361
+ if (i.getAttribute("name")) {
362
+ const o = et(i, this);
363
+ o.value = t;
364
364
  }
365
- } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, r]) => {
366
- if (typeof r == "string") {
367
- const s = et(o, this);
368
- s.name = i, s.value = r;
365
+ } else t != null && t instanceof FormData && Array.from(t).reverse().forEach(([o, a]) => {
366
+ if (typeof a == "string") {
367
+ const s = et(i, this);
368
+ s.name = o, s.value = a;
369
369
  }
370
370
  });
371
- j.set(o, t);
371
+ j.set(i, t);
372
372
  }
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)
373
+ setValidity(t, i, o) {
374
+ const a = n.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
- G.set(this, i);
378
- const s = n.get(this), l = {};
377
+ G.set(this, o);
378
+ const s = r.get(this), l = {};
379
379
  for (const w in t)
380
380
  l[w] = t[w];
381
- Object.keys(l).length === 0 && Et(s);
381
+ Object.keys(l).length === 0 && kt(s);
382
382
  const u = Object.assign(Object.assign({}, s), l);
383
383
  delete u.valid;
384
- const { valid: m } = kt(s, u, this.form);
385
- if (!m && !o)
384
+ const { valid: p } = Et(s, u, this.form);
385
+ if (!p && !i)
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
+ h.set(this, p ? "" : i), a.isConnected ? (a.toggleAttribute("internals-invalid", !p), a.toggleAttribute("internals-valid", p), a.setAttribute("aria-invalid", `${!p}`)) : L.set(a, this);
388
388
  }
389
389
  get shadowRoot() {
390
- const t = a.get(this), o = q.get(t);
391
- return o || null;
390
+ const t = n.get(this), i = q.get(t);
391
+ return i || null;
392
392
  }
393
393
  get validationMessage() {
394
- const t = a.get(this);
394
+ const t = n.get(this);
395
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
- const t = a.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);
398
+ const t = n.get(this);
399
+ return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), r.get(this);
400
400
  }
401
401
  get willValidate() {
402
- const t = a.get(this);
402
+ const t = n.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
  }
@@ -413,7 +413,7 @@ import "@justeattakeaway/pie-spinner";
413
413
  }
414
414
  const t = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, "")}`;
415
415
  customElements.define(t, e);
416
- const o = new e();
416
+ const i = new e();
417
417
  return [
418
418
  "shadowRoot",
419
419
  "form",
@@ -425,27 +425,27 @@ import "@justeattakeaway/pie-spinner";
425
425
  "setValidity",
426
426
  "checkValidity",
427
427
  "reportValidity"
428
- ].every((i) => i in o.internals);
428
+ ].every((o) => o in i.internals);
429
429
  }
430
430
  let dt = !1, ct = !1;
431
431
  function H(e) {
432
432
  ct || (ct = !0, window.CustomStateSet = W, e && (HTMLElement.prototype.attachInternals = function(...t) {
433
- const o = e.call(this, t);
434
- return o.states = new W(this), o;
433
+ const i = e.call(this, t);
434
+ return i.states = new W(this), i;
435
435
  }));
436
436
  }
437
437
  function bt(e = !0) {
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) {
442
- if (i.formAssociated) {
443
- const s = i.prototype.connectedCallback;
444
- i.prototype.connectedCallback = function() {
445
- Q.has(this) || (Q.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), rt(this);
441
+ CustomElementRegistry.prototype.define = function(i, o, a) {
442
+ if (o.formAssociated) {
443
+ const s = o.prototype.connectedCallback;
444
+ o.prototype.connectedCallback = function() {
445
+ Q.has(this) || (Q.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), nt(this);
446
446
  };
447
447
  }
448
- t.call(this, o, i, r);
448
+ t.call(this, i, o, a);
449
449
  };
450
450
  }
451
451
  if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
@@ -457,21 +457,21 @@ import "@justeattakeaway/pie-spinner";
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
- let t = function(...i) {
461
- const r = o.apply(this, i);
462
- if (q.set(this, r), O()) {
460
+ let t = function(...o) {
461
+ const a = i.apply(this, o);
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
- const o = Element.prototype.attachShadow;
468
+ const i = Element.prototype.attachShadow;
469
469
  Element.prototype.attachShadow = t;
470
470
  }
471
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
- 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;
474
+ return !!customElements.polyfillWrapFlushCallback || (Ft() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : bt(!1)), E.forceCustomStateSetPolyfill = H, E.forceElementInternalsPolyfill = bt, Object.defineProperty(E, "__esModule", { value: !0 }), E;
475
475
  })({});
476
476
  })();
477
477
  const Vt = ["button", "a"], Nt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], qt = ["productive", "expressive"], Pt = ["submit", "button", "reset"], Ot = [
@@ -484,7 +484,7 @@ const Vt = ["button", "a"], Nt = ["xsmall", "small-productive", "small-expressiv
484
484
  "ghost-inverse",
485
485
  "destructive",
486
486
  "destructive-ghost"
487
- ], _t = ["leading", "trailing"], Gt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Jt = ["post", "get", "dialog"], Qt = ["_self", "_blank", "_parent", "_top"], f = {
487
+ ], _t = ["leading", "trailing"], Gt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Jt = ["post", "get", "dialog"], Qt = ["_self", "_blank", "_parent", "_top"], g = {
488
488
  tag: "button",
489
489
  size: "medium",
490
490
  type: "submit",
@@ -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);--int-states-mixin-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(--int-states-mixin-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;inline-size:var(--btn-inline-size)}.o-btn.o-btn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}.o-btn.o-btn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}.o-btn.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--primary.o-btn--xsmall:hover:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--xsmall.is-loading:not(:disabled,.is-disabled),.o-btn.o-btn--primary.o-btn--small-productive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--primary.o-btn--xsmall:hover:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary))}.o-btn.o-btn--primary.o-btn--xsmall:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--xsmall.is-loading:not(:disabled,.is-disabled),.o-btn.o-btn--primary.o-btn--small-productive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-interactive-primary))}}@media (min-width: 769px){.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive,.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive{--int-states-mixin-bg-color: var(--dt-color-interactive-brand)}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled,.is-disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled,.is-disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}}.o-btn.o-btn--secondary{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn.o-btn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--secondary.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-secondary))}.o-btn.o-btn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--secondary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-secondary))}}.o-btn.o-btn--outline{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-btn.o-btn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--outline.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-btn.o-btn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--outline.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-btn.o-btn--ghost{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn.o-btn--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-btn.o-btn--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-btn.o-btn--ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-btn.o-btn--inverse{--int-states-mixin-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn.o-btn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-inverse))}.o-btn.o-btn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-inverse))}}.o-btn.o-btn--ghost-inverse,.o-btn.o-btn--outline-inverse{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--ghost-inverse:hover:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--outline-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier))}.o-btn.o-btn--ghost-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-inverse.is-loading:not(:disabled,.is-disabled),.o-btn.o-btn--outline-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--outline-inverse.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--ghost-inverse:hover:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--outline-inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent))}.o-btn.o-btn--ghost-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-inverse.is-loading:not(:disabled,.is-disabled),.o-btn.o-btn--outline-inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--outline-inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-transparent))}}.o-btn.o-btn--outline-inverse{border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--destructive{--int-states-mixin-bg-color: var(--dt-color-support-error)}.o-btn.o-btn--destructive:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn.o-btn--destructive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--destructive.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--int-states-mixin-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--destructive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error))}.o-btn.o-btn--destructive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--destructive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error))}}.o-btn.o-btn--destructive-ghost{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn.o-btn--destructive-ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)))}.o-btn.o-btn--destructive-ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--destructive-ghost.is-loading:not(:disabled,.is-disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));--int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){.o-btn.o-btn--destructive-ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}.o-btn.o-btn--destructive-ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--destructive-ghost.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-btn.o-btn--xsmall{--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-small)}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-small) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--expressive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--xsmall.o-btn--outline,.o-btn.o-btn--xsmall.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-small)}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--outline.o-btn--responsive,.o-btn.o-btn--xsmall.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-small) - 1px) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--outline.o-btn--responsive.o-btn--expressive,.o-btn.o-btn--xsmall.o-btn--outline-inverse.o-btn--responsive.o-btn--expressive{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--small-expressive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-expressive.o-btn--outline,.o-btn.o-btn--small-expressive.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--outline.o-btn--responsive,.o-btn.o-btn--small-expressive.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-productive{--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px;padding:var(--btn-padding-vertical-small) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-productive.o-btn--outline,.o-btn.o-btn--small-productive.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-small) - 1px) var(--btn-padding-horizontal-medium)}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--outline.o-btn--responsive,.o-btn.o-btn--small-productive.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--medium{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--responsive{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--medium.o-btn--outline,.o-btn.o-btn--medium.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--outline.o-btn--responsive,.o-btn.o-btn--medium.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--large{--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px;padding:var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large)}.o-btn.o-btn--large.o-btn--outline,.o-btn.o-btn--large.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large)}.o-btn.o-btn--fullWidth{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not(.o-btn--ghost,.o-btn--ghost-inverse,.o-btn--destructive-ghost){--int-states-mixin-bg-color: var(--dt-color-disabled-01) !important}.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, m = (E, n, r, b) => {
499
+ for (var d = void 0, h = E.length - 1, y; h >= 0; h--)
500
+ (y = E[h]) && (d = y(n, r, d) || d);
501
+ return d && $t(n, r, 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();
509
- if (n === "button" || n === "pie-button")
505
+ super(...arguments), this.tag = g.tag, this.size = g.size, this.type = g.type, this.variant = g.variant, this.iconPlacement = g.iconPlacement, this.disabled = g.disabled, this.isLoading = g.isLoading, this.isFullWidth = g.isFullWidth, this.isResponsive = g.isResponsive, this._handleFormKeyDown = (n) => {
506
+ if (!(n.key !== "Enter" || this.type !== "submit" || this.disabled)) {
507
+ if (n.target instanceof HTMLElement) {
508
+ const r = n.target.tagName.toLowerCase();
509
+ if (r === "button" || r === "pie-button")
510
510
  return;
511
511
  }
512
- a.preventDefault(), this._handleClick();
512
+ n.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 n;
518
+ super.connectedCallback(), this.type === "submit" && ((n = this.form) == null || n.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 n;
522
+ super.disconnectedCallback(), this.type === "submit" && ((n = this.form) == null || n.removeEventListener("keydown", this._handleFormKeyDown));
523
523
  }
524
- updated(a) {
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));
524
+ updated(n) {
525
+ var r, b;
526
+ n.has("type") && (this.type === "submit" ? (r = this.form) == null || r.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(n) {
537
537
  if (!this.form) return;
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();
538
+ const r = document.createElement("button");
539
+ r.type = n, 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", n === "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();
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,40 +547,40 @@ 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";
550
+ const { size: n, variant: r, disabled: b } = this, d = n && n.includes("small") ? "small" : "medium";
551
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`
552
+ return b ? h = r === "ghost-inverse" ? "inverse" : "secondary" : h = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", z`
553
553
  <pie-spinner
554
554
  size="${d}"
555
555
  variant="${h}">
556
556
  </pie-spinner>`;
557
557
  }
558
- renderAnchor(a) {
558
+ renderAnchor(n) {
559
559
  const {
560
- href: n,
560
+ href: r,
561
561
  iconPlacement: b,
562
562
  rel: d,
563
563
  target: h
564
564
  } = this;
565
565
  return z`
566
566
  <a
567
- href="${K(n)}"
567
+ href="${K(r)}"
568
568
  rel="${K(d)}"
569
569
  target="${K(h)}"
570
- class="${vt(a)}">
570
+ class="${vt(n)}">
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(n) {
577
577
  const {
578
- disabled: n,
578
+ disabled: r,
579
579
  iconPlacement: b,
580
580
  isLoading: d,
581
581
  type: h
582
582
  } = this, y = {
583
- ...a,
583
+ ...n,
584
584
  "is-loading": d
585
585
  };
586
586
  return z`
@@ -588,7 +588,7 @@ const S = "pie-button", U = class U extends Lt(At) {
588
588
  @click=${this._handleClick}
589
589
  class=${vt(y)}
590
590
  type=${h}
591
- ?disabled=${n}>
591
+ ?disabled=${r}>
592
592
  ${d ? this.renderSpinner() : F}
593
593
  ${b === "leading" ? z`<slot name="icon"></slot>` : F}
594
594
  <span class="o-btn-text"><slot></slot></span>
@@ -597,98 +597,98 @@ const S = "pie-button", U = class U extends Lt(At) {
597
597
  }
598
598
  render() {
599
599
  const {
600
- isFullWidth: a,
601
- isResponsive: n,
600
+ isFullWidth: n,
601
+ isResponsive: r,
602
602
  responsiveSize: b,
603
603
  size: d,
604
604
  tag: h,
605
605
  variant: y
606
606
  } = this, M = {
607
607
  "o-btn": !0,
608
- "o-btn--fullWidth": a,
609
- "o-btn--responsive": n,
610
- [`o-btn--${b}`]: !!(n && b),
608
+ "o-btn--fullWidth": n,
609
+ "o-btn--responsive": r,
610
+ [`o-btn--${b}`]: !!(r && b),
611
611
  [`o-btn--${y}`]: !0,
612
612
  [`o-btn--${d}`]: !0
613
613
  };
614
614
  return h === "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 n, r;
618
+ (r = (n = this.shadowRoot) == null ? void 0 : n.querySelector("button")) == null || r.focus();
619
619
  }
620
620
  };
621
621
  U.styles = It(Rt);
622
622
  let c = U;
623
- p([
623
+ m([
624
624
  v({ type: String }),
625
- A(S, Vt, f.tag)
625
+ A(S, Vt, g.tag)
626
626
  ], c.prototype, "tag");
627
- p([
627
+ m([
628
628
  v({ type: String }),
629
- A(S, Nt, f.size)
629
+ A(S, Nt, g.size)
630
630
  ], c.prototype, "size");
631
- p([
631
+ m([
632
632
  v({ type: String }),
633
- A(S, Pt, f.type)
633
+ A(S, Pt, g.type)
634
634
  ], c.prototype, "type");
635
- p([
635
+ m([
636
636
  v({ type: String }),
637
- A(S, Ot, f.variant)
637
+ A(S, Ot, g.variant)
638
638
  ], c.prototype, "variant");
639
- p([
639
+ m([
640
640
  v({ type: String }),
641
- A(S, _t, f.iconPlacement)
641
+ A(S, _t, g.iconPlacement)
642
642
  ], c.prototype, "iconPlacement");
643
- p([
643
+ m([
644
644
  v({ type: Boolean })
645
645
  ], c.prototype, "disabled");
646
- p([
646
+ m([
647
647
  v({ type: Boolean, reflect: !0 })
648
648
  ], c.prototype, "isLoading");
649
- p([
649
+ m([
650
650
  v({ type: Boolean })
651
651
  ], c.prototype, "isFullWidth");
652
- p([
652
+ m([
653
653
  v({ type: Boolean })
654
654
  ], c.prototype, "isResponsive");
655
- p([
655
+ m([
656
656
  v({ type: String })
657
657
  ], c.prototype, "name");
658
- p([
658
+ m([
659
659
  v({ type: String })
660
660
  ], c.prototype, "value");
661
- p([
661
+ m([
662
662
  v({ type: String })
663
663
  ], c.prototype, "formaction");
664
- p([
664
+ m([
665
665
  v({ type: String })
666
666
  ], c.prototype, "formenctype");
667
- p([
667
+ m([
668
668
  v({ type: String })
669
669
  ], c.prototype, "formmethod");
670
- p([
670
+ m([
671
671
  v({ type: Boolean })
672
672
  ], c.prototype, "formnovalidate");
673
- p([
673
+ m([
674
674
  v({ type: String })
675
675
  ], c.prototype, "formtarget");
676
- p([
676
+ m([
677
677
  v({ type: String })
678
678
  ], c.prototype, "responsiveSize");
679
- p([
679
+ m([
680
680
  v({ type: String })
681
681
  ], c.prototype, "href");
682
- p([
682
+ m([
683
683
  v({ type: String })
684
684
  ], c.prototype, "rel");
685
- p([
685
+ m([
686
686
  v({ type: String })
687
687
  ], c.prototype, "target");
688
688
  Tt(S, c);
689
689
  export {
690
690
  c as PieButton,
691
- f as defaultProps,
691
+ g as defaultProps,
692
692
  Gt as formEncodingtypes,
693
693
  Jt as formMethodTypes,
694
694
  Qt as formTargetTypes,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "1.1.0",
3
+ "version": "1.3.0",
4
4
  "description": "PIE design system button built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -24,9 +24,6 @@
24
24
  "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
25
25
  "lint:style:fix": "yarn lint:style --fix",
26
26
  "watch": "run -T vite build --watch",
27
- "test": "echo \"Error: no test specified\" && exit 0",
28
- "test:ci": "yarn test",
29
- "test:browsers-setup": "npx playwright-lit-setup",
30
27
  "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
31
28
  "test:browsers:ci": "yarn test:browsers",
32
29
  "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_BUTTON} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
@@ -37,7 +34,7 @@
37
34
  "devDependencies": {
38
35
  "@custom-elements-manifest/analyzer": "0.9.0",
39
36
  "@justeattakeaway/pie-components-config": "0.18.0",
40
- "@justeattakeaway/pie-css": "0.13.1",
37
+ "@justeattakeaway/pie-css": "0.15.0",
41
38
  "@justeattakeaway/pie-wrapper-react": "0.14.2",
42
39
  "cem-plugin-module-file-extensions": "0.0.5"
43
40
  },
package/src/button.scss CHANGED
@@ -23,8 +23,8 @@
23
23
 
24
24
  // The following values set to default background and color
25
25
  // currently this sets the primary button styles
26
- --btn-bg-color: var(--dt-color-interactive-brand);
27
- --btn-text-color: var(--dt-color-content-interactive-primary);
26
+ --int-states-mixin-bg-color: var(--dt-color-interactive-brand);
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
@@ -105,7 +105,7 @@
105
105
  border: none;
106
106
  border-radius: var(--btn-border-radius);
107
107
  outline: none;
108
- background-color: var(--btn-bg-color);
108
+ background-color: var(--int-states-mixin-bg-color);
109
109
  font-family: var(--btn-font-family);
110
110
  font-size: var(--btn-font-size);
111
111
  font-weight: var(--btn-font-weight);
@@ -122,7 +122,7 @@
122
122
  // Button Variant Modifiers
123
123
  // ************************
124
124
  &.o-btn--primary {
125
- @include p.button-interactive-states('--dt-color-interactive-brand');
125
+ @include p.interactive-states('--dt-color-interactive-brand');
126
126
 
127
127
  &.o-btn--xsmall,
128
128
  &.o-btn--small-productive {
@@ -130,9 +130,10 @@
130
130
  * Where the font-size is smaller,
131
131
  * update the button backgrounds so that the text is accessible
132
132
  **/
133
- --btn-bg-color: var(--dt-color-interactive-primary);
133
+ --int-states-mixin-bg-color: var(--dt-color-interactive-primary);
134
+ --btn-text-color: var(--dt-color-content-interactive-primary);
134
135
 
135
- @include p.button-interactive-states('--dt-color-interactive-primary', 'inverse');
136
+ @include p.interactive-states('--dt-color-interactive-primary', 'inverse', '02');
136
137
  }
137
138
 
138
139
  // This is to handle the background colour change getting overridden above, but then being put in responsive mode
@@ -140,55 +141,49 @@
140
141
  &.o-btn--xsmall.o-btn--expressive,
141
142
  &.o-btn--small-productive {
142
143
  @include responsive-wide {
143
- --btn-bg-color: var(--dt-color-interactive-brand);
144
+ --int-states-mixin-bg-color: var(--dt-color-interactive-brand);
144
145
 
145
- @include p.button-interactive-states('--dt-color-interactive-brand');
146
+ @include p.interactive-states('--dt-color-interactive-brand');
146
147
  }
147
148
  }
148
149
  }
149
150
 
150
151
  &.o-btn--secondary {
151
- --btn-bg-color: var(--dt-color-interactive-secondary);
152
+ --int-states-mixin-bg-color: var(--dt-color-interactive-secondary);
152
153
  --btn-text-color: var(--dt-color-content-interactive-secondary);
153
154
 
154
- @include p.button-interactive-states('--dt-color-interactive-secondary');
155
+ @include p.interactive-states('--dt-color-interactive-secondary');
155
156
  }
156
157
 
157
158
  &.o-btn--outline {
158
- --btn-bg-color: transparent;
159
+ --int-states-mixin-bg-color: transparent;
159
160
  --btn-text-color: var(--dt-color-content-interactive-secondary);
160
161
 
161
162
  border: 1px solid var(--dt-color-border-strong);
162
163
 
163
- // use black as the background color for hover and inverse,
164
- // as this variant uses a shade of transparent black showing through the container background
165
- @include p.button-interactive-states('--dt-color-black', 'transparent');
164
+ @include p.interactive-states('--dt-color-transparent', 'transparent', '01');
166
165
  }
167
166
 
168
167
  &.o-btn--ghost {
169
- --btn-bg-color: transparent;
168
+ --int-states-mixin-bg-color: transparent;
170
169
  --btn-text-color: var(--dt-color-content-link);
171
170
 
172
- // use black as the background color for hover and inverse,
173
- // as this variant uses a shade of transparent black showing through the container background
174
- @include p.button-interactive-states('--dt-color-black', 'transparent');
171
+ @include p.interactive-states('--dt-color-transparent', 'transparent', '01');
175
172
  }
176
173
 
177
174
  &.o-btn--inverse {
178
- --btn-bg-color: var(--dt-color-interactive-inverse);
175
+ --int-states-mixin-bg-color: var(--dt-color-interactive-inverse);
179
176
  --btn-text-color: var(--dt-color-content-interactive-secondary);
180
177
 
181
- @include p.button-interactive-states('--dt-color-interactive-inverse');
178
+ @include p.interactive-states('--dt-color-interactive-inverse');
182
179
  }
183
180
 
184
181
  &.o-btn--ghost-inverse,
185
182
  &.o-btn--outline-inverse {
186
- --btn-bg-color: transparent;
183
+ --int-states-mixin-bg-color: transparent;
187
184
  --btn-text-color: var(--dt-color-content-interactive-primary);
188
185
 
189
- // use white as the background color for hover and inverse,
190
- // as these variants use a shade of transparent white showing through the container background
191
- @include p.button-interactive-states('--dt-color-container-default', 'transparent');
186
+ @include p.interactive-states('--dt-color-transparent', 'transparent-inverse', '02');
192
187
  }
193
188
 
194
189
  &.o-btn--outline-inverse {
@@ -196,18 +191,16 @@
196
191
  }
197
192
 
198
193
  &.o-btn--destructive {
199
- --btn-bg-color: var(--dt-color-support-error);
194
+ --int-states-mixin-bg-color: var(--dt-color-support-error);
200
195
 
201
- @include p.button-interactive-states('--dt-color-support-error');
196
+ @include p.interactive-states('--dt-color-support-error');
202
197
  }
203
198
 
204
199
  &.o-btn--destructive-ghost {
205
- --btn-bg-color: transparent;
200
+ --int-states-mixin-bg-color: transparent;
206
201
  --btn-text-color: var(--dt-color-content-interactive-error);
207
202
 
208
- // use black as the background color for hover and inverse,
209
- // as this variant uses a shade of transparent black showing through the container background
210
- @include p.button-interactive-states('--dt-color-black', 'transparent');
203
+ @include p.interactive-states('--dt-color-transparent', 'transparent', '01');
211
204
  }
212
205
 
213
206
  // *********************
@@ -326,7 +319,7 @@
326
319
 
327
320
  // For every variant (except ghost variants) set the disabled background color
328
321
  &:not(.o-btn--ghost, .o-btn--ghost-inverse, .o-btn--destructive-ghost) {
329
- --btn-bg-color: var(--dt-color-disabled-01) !important;
322
+ --int-states-mixin-bg-color: var(--dt-color-disabled-01) !important;
330
323
  }
331
324
 
332
325
  // For outline variants, set the border to the disabled color