@justeattakeaway/pie-button 1.14.17 → 1.15.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 (7) hide show
  1. package/README.md +1 -1
  2. package/dist/index.d.ts +9 -0
  3. package/dist/index.js +169 -163
  4. package/dist/react.d.ts +9 -0
  5. package/package.json +5 -5
  6. package/src/defs.ts +12 -0
  7. package/src/index.ts +7 -1
package/README.md CHANGED
@@ -36,7 +36,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
36
36
  ### Properties
37
37
  | Prop | Options | Description | Default |
38
38
  |------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------|
39
- | `aria` | `{ label?: string }` | Sets ARIA attributes on the rendered button or anchor element. | `undefined` |
39
+ | `aria` | `{ label?: string }`, `{ description?: string }`, `{ haspopup?: boolean \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog" }`, `{ expanded?: boolean }` | Sets ARIA attributes on the rendered button or anchor element. `description` is applied as an `aria-description` attribute, so the text travels as a string and is not bound by IDREF resolution. `haspopup` announces that the button opens a popup, such as a dialog. `expanded` announces the toggle state for buttons that open and close a panel. | `undefined` |
40
40
  | `size` | `"xsmall"`, `"small-productive"`, `"small-expressive"`, `"medium"`, `"large"` | Sets the size of the button. | `"medium"` |
41
41
  | `isResponsive` | `true`, `false` | If true, uses the next larger size on wide viewports. | `false` |
42
42
  | `responsiveSize` | `"productive"`, `"expressive"` | Sets which `"small-"` size an xsmall button should grow to when `isResponsive` is true. | `"productive"` |
package/dist/index.d.ts CHANGED
@@ -9,6 +9,15 @@ import { TemplateResult } from 'lit';
9
9
 
10
10
  declare type AriaProps = {
11
11
  label?: string;
12
+ /**
13
+ * The accessible description for the button element. Rendered as an `aria-description`
14
+ * attribute, so the text travels as a string and is not bound by IDREF resolution.
15
+ */
16
+ description?: string;
17
+ /** The button's popup state, matching `aria-haspopup`. */
18
+ haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
19
+ /** The button's expanded state, matching `aria-expanded`. */
20
+ expanded?: boolean;
12
21
  };
13
22
 
14
23
  export declare interface ButtonProps {
package/dist/index.js CHANGED
@@ -1,14 +1,14 @@
1
- import { LitElement as Tt, html as z, nothing as C, unsafeCSS as Vt } from "lit";
1
+ import { LitElement as Tt, html as M, nothing as C, unsafeCSS as Vt } from "lit";
2
2
  import { classMap as mt } from "lit/directives/class-map.js";
3
- import { ifDefined as M } from "lit/directives/if-defined.js";
4
- import { property as m } from "lit/decorators.js";
5
- import { DelegatesFocusMixin as Nt, FormControlMixin as Ot, validPropertyValues as F, safeCustomElement as Pt } from "@justeattakeaway/pie-webc-core";
3
+ import { ifDefined as x } from "lit/directives/if-defined.js";
4
+ import { property as h } from "lit/decorators.js";
5
+ import { DelegatesFocusMixin as Nt, FormControlMixin as $t, validPropertyValues as F, safeCustomElement as Ot } from "@justeattakeaway/pie-webc-core";
6
6
  import "@justeattakeaway/pie-spinner";
7
7
  var pt = {}, ht;
8
- function _t() {
8
+ function Pt() {
9
9
  return ht || (ht = 1, (function() {
10
10
  (function(l) {
11
- const r = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), $ = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), T = {
11
+ const r = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), _ = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), Q = /* @__PURE__ */ new WeakMap(), X = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), T = {
12
12
  ariaAtomic: "aria-atomic",
13
13
  ariaAutoComplete: "aria-autocomplete",
14
14
  ariaBusy: "aria-busy",
@@ -80,7 +80,7 @@ function _t() {
80
80
  const a = !t || e.disabled;
81
81
  for (; o; )
82
82
  o.formDisabledCallback && a && W(o, e.disabled), o = i.nextNode();
83
- }, tt = { attributes: !0, attributeFilter: ["disabled", "name"] }, V = P() ? new MutationObserver((e) => {
83
+ }, tt = { attributes: !0, attributeFilter: ["disabled", "name"] }, V = O() ? new MutationObserver((e) => {
84
84
  for (const t of e) {
85
85
  const i = t.target;
86
86
  if (t.attributeName === "disabled" && (i.constructor.formAssociated ? W(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && Z(i)), t.attributeName === "name" && i.constructor.formAssociated) {
@@ -93,31 +93,31 @@ function _t() {
93
93
  e.forEach((t) => {
94
94
  const { addedNodes: i, removedNodes: o } = t, a = Array.from(i), n = Array.from(o);
95
95
  a.forEach((s) => {
96
- var u;
96
+ var f;
97
97
  if (d.has(s) && s.constructor.formAssociated && Y(s), I.has(s)) {
98
- const h = I.get(s);
99
- Object.keys(T).filter((x) => h[x] !== null).forEach((x) => {
100
- s.setAttribute(T[x], h[x]);
98
+ const u = I.get(s);
99
+ Object.keys(T).filter((w) => u[w] !== null).forEach((w) => {
100
+ s.setAttribute(T[w], u[w]);
101
101
  }), I.delete(s);
102
102
  }
103
103
  if (L.has(s)) {
104
- const h = L.get(s);
105
- s.setAttribute("internals-valid", h.validity.valid.toString()), s.setAttribute("internals-invalid", (!h.validity.valid).toString()), s.setAttribute("aria-invalid", (!h.validity.valid).toString()), L.delete(s);
104
+ const u = L.get(s);
105
+ s.setAttribute("internals-valid", u.validity.valid.toString()), s.setAttribute("internals-invalid", (!u.validity.valid).toString()), s.setAttribute("aria-invalid", (!u.validity.valid).toString()), L.delete(s);
106
106
  }
107
107
  if (s.localName === "form") {
108
- const h = E.get(s), k = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
108
+ const u = z.get(s), E = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
109
109
  acceptNode(j) {
110
- return d.has(j) && j.constructor.formAssociated && !(h && h.has(j)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
110
+ return d.has(j) && j.constructor.formAssociated && !(u && u.has(j)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
111
111
  }
112
112
  });
113
- let x = k.nextNode();
114
- for (; x; )
115
- Y(x), x = k.nextNode();
113
+ let w = E.nextNode();
114
+ for (; w; )
115
+ Y(w), w = E.nextNode();
116
116
  }
117
- s.localName === "fieldset" && ((u = V.observe) === null || u === void 0 || u.call(V, s, tt), Z(s, !0));
117
+ s.localName === "fieldset" && ((f = V.observe) === null || f === void 0 || f.call(V, s, tt), Z(s, !0));
118
118
  }), n.forEach((s) => {
119
- const u = d.get(s);
120
- u && p.get(u) && et(u), $.has(s) && $.get(s).disconnect();
119
+ const f = d.get(s);
120
+ f && g.get(f) && et(f), _.has(s) && _.get(s).disconnect();
121
121
  });
122
122
  });
123
123
  }
@@ -135,22 +135,22 @@ function _t() {
135
135
  const o = new MutationObserver(ut);
136
136
  !((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 }), Q.set(e, o);
137
137
  };
138
- P() && new MutationObserver(D);
138
+ O() && new MutationObserver(D);
139
139
  const R = {
140
140
  childList: !0,
141
141
  subtree: !0
142
142
  }, W = (e, t) => {
143
143
  e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
144
144
  }, et = (e) => {
145
- p.get(e).forEach((i) => {
145
+ g.get(e).forEach((i) => {
146
146
  i.remove();
147
- }), p.set(e, []);
147
+ }), g.set(e, []);
148
148
  }, it = (e, t) => {
149
149
  const i = document.createElement("input");
150
- return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), p.get(t).push(i), i;
150
+ return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), g.get(t).push(i), i;
151
151
  }, yt = (e, t) => {
152
152
  var i;
153
- p.set(t, []), (i = V.observe) === null || i === void 0 || i.call(V, e, tt);
153
+ g.set(t, []), (i = V.observe) === null || i === void 0 || i.call(V, e, tt);
154
154
  }, ot = (e, t) => {
155
155
  if (t.length) {
156
156
  Array.from(t).forEach((o) => o.addEventListener("click", e.click.bind(e)));
@@ -158,48 +158,48 @@ function _t() {
158
158
  t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
159
159
  }
160
160
  }, N = (e) => {
161
- const t = Array.from(e.elements).filter((n) => !n.tagName.includes("-") && n.validity).map((n) => n.validity.valid), i = E.get(e) || [], o = Array.from(i).filter((n) => n.isConnected).map((n) => d.get(n).validity.valid), a = [...t, ...o].includes(!1);
161
+ const t = Array.from(e.elements).filter((n) => !n.tagName.includes("-") && n.validity).map((n) => n.validity.valid), i = z.get(e) || [], o = Array.from(i).filter((n) => n.isConnected).map((n) => d.get(n).validity.valid), a = [...t, ...o].includes(!1);
162
162
  e.toggleAttribute("internals-invalid", a), e.toggleAttribute("internals-valid", !a);
163
163
  }, xt = (e) => {
164
- N(O(e.target));
164
+ N($(e.target));
165
165
  }, wt = (e) => {
166
- N(O(e.target));
166
+ N($(e.target));
167
167
  }, kt = (e) => {
168
168
  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(",");
169
169
  e.addEventListener("click", (i) => {
170
170
  if (i.target.closest(t)) {
171
- const a = E.get(e);
171
+ const a = z.get(e);
172
172
  if (e.noValidate)
173
173
  return;
174
- a.size && Array.from(a).reverse().map((u) => d.get(u).reportValidity()).includes(!1) && i.preventDefault();
174
+ a.size && Array.from(a).reverse().map((f) => d.get(f).reportValidity()).includes(!1) && i.preventDefault();
175
175
  }
176
176
  });
177
177
  }, Et = (e) => {
178
- const t = E.get(e.target);
178
+ const t = z.get(e.target);
179
179
  t && t.size && t.forEach((i) => {
180
180
  i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
181
181
  });
182
182
  }, rt = (e, t, i) => {
183
183
  if (t) {
184
- const o = E.get(t);
184
+ const o = z.get(t);
185
185
  if (o)
186
186
  o.add(e);
187
187
  else {
188
188
  const a = /* @__PURE__ */ new Set();
189
- a.add(e), E.set(t, a), kt(t), t.addEventListener("reset", Et), t.addEventListener("input", xt), t.addEventListener("change", wt);
189
+ a.add(e), z.set(t, a), kt(t), t.addEventListener("reset", Et), t.addEventListener("input", xt), t.addEventListener("change", wt);
190
190
  }
191
- f.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
191
+ v.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
192
192
  e.formAssociatedCallback.apply(e, [t]);
193
193
  }, 0), N(t);
194
194
  }
195
- }, O = (e) => {
195
+ }, $ = (e) => {
196
196
  let t = e.parentNode;
197
- return t && t.tagName !== "FORM" && (t = O(t)), t;
198
- }, w = (e, t, i = DOMException) => {
197
+ return t && t.tagName !== "FORM" && (t = $(t)), t;
198
+ }, k = (e, t, i = DOMException) => {
199
199
  if (!e.constructor.formAssociated)
200
200
  throw new i(t);
201
201
  }, at = (e, t, i) => {
202
- const o = E.get(e);
202
+ const o = z.get(e);
203
203
  return o && o.size && o.forEach((a) => {
204
204
  d.get(a)[i]() || (t = !1);
205
205
  }), t;
@@ -209,7 +209,7 @@ function _t() {
209
209
  ot(e, i), rt(e, o, t);
210
210
  }
211
211
  };
212
- function P() {
212
+ function O() {
213
213
  return typeof MutationObserver < "u";
214
214
  }
215
215
  class zt {
@@ -302,11 +302,11 @@ function _t() {
302
302
  const { get: a } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
303
303
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
304
304
  get(...n) {
305
- const s = a.call(this, ...n), u = Array.from(E.get(this) || []);
306
- if (u.length === 0)
305
+ const s = a.call(this, ...n), f = Array.from(z.get(this) || []);
306
+ if (f.length === 0)
307
307
  return s;
308
- const h = Array.from(s).concat(u).sort((k, x) => k.compareDocumentPosition ? k.compareDocumentPosition(x) & 2 ? 1 : -1 : 0);
309
- return new At(h);
308
+ const u = Array.from(s).concat(f).sort((E, w) => E.compareDocumentPosition ? E.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
309
+ return new At(u);
310
310
  }
311
311
  });
312
312
  }
@@ -318,13 +318,13 @@ function _t() {
318
318
  if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
319
319
  throw new TypeError("Illegal constructor");
320
320
  const i = t.getRootNode(), o = new zt();
321
- this.states = new B(t), r.set(this, t), v.set(this, o), d.set(t, this), gt(t, this), yt(t, this), Object.seal(this), i instanceof DocumentFragment && ft(i);
321
+ this.states = new B(t), r.set(this, t), p.set(this, o), d.set(t, this), gt(t, this), yt(t, this), Object.seal(this), i instanceof DocumentFragment && ft(i);
322
322
  }
323
323
  checkValidity() {
324
324
  const t = r.get(this);
325
- if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
325
+ if (k(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
326
326
  return !0;
327
- const i = v.get(this);
327
+ const i = p.get(this);
328
328
  if (!i.valid) {
329
329
  const o = new Event("invalid", {
330
330
  bubbles: !1,
@@ -337,19 +337,19 @@ function _t() {
337
337
  }
338
338
  get form() {
339
339
  const t = r.get(this);
340
- w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
340
+ k(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
341
341
  let i;
342
- return t.constructor.formAssociated === !0 && (i = O(t)), i;
342
+ return t.constructor.formAssociated === !0 && (i = $(t)), i;
343
343
  }
344
344
  get labels() {
345
345
  const t = r.get(this);
346
- w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
346
+ k(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
347
347
  const i = t.getAttribute("id"), o = t.getRootNode();
348
348
  return o && i ? o.querySelectorAll(`[for="${i}"]`) : [];
349
349
  }
350
350
  reportValidity() {
351
351
  const t = r.get(this);
352
- if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
352
+ if (k(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
353
353
  return !0;
354
354
  const i = this.checkValidity(), o = J.get(this);
355
355
  if (o && !t.constructor.formAssociated)
@@ -358,7 +358,7 @@ function _t() {
358
358
  }
359
359
  setFormValue(t) {
360
360
  const i = r.get(this);
361
- if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), et(this), t != null && !(t instanceof FormData)) {
361
+ if (k(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), et(this), t != null && !(t instanceof FormData)) {
362
362
  if (i.getAttribute("name")) {
363
363
  const o = it(i, this);
364
364
  o.value = t;
@@ -373,19 +373,19 @@ function _t() {
373
373
  }
374
374
  setValidity(t, i, o) {
375
375
  const a = r.get(this);
376
- if (w(a, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
376
+ if (k(a, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
377
377
  throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
378
378
  J.set(this, o);
379
- const n = v.get(this), s = {};
380
- for (const k in t)
381
- s[k] = t[k];
379
+ const n = p.get(this), s = {};
380
+ for (const E in t)
381
+ s[E] = t[E];
382
382
  Object.keys(s).length === 0 && Mt(n);
383
- const u = Object.assign(Object.assign({}, n), s);
384
- delete u.valid;
385
- const { valid: h } = St(n, u, this.form);
386
- if (!h && !i)
383
+ const f = Object.assign(Object.assign({}, n), s);
384
+ delete f.valid;
385
+ const { valid: u } = St(n, f, this.form);
386
+ if (!u && !i)
387
387
  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.");
388
- g.set(this, h ? "" : i), a.isConnected ? (a.toggleAttribute("internals-invalid", !h), a.toggleAttribute("internals-valid", h), a.setAttribute("aria-invalid", `${!h}`)) : L.set(a, this);
388
+ b.set(this, u ? "" : i), a.isConnected ? (a.toggleAttribute("internals-invalid", !u), a.toggleAttribute("internals-valid", u), a.setAttribute("aria-invalid", `${!u}`)) : L.set(a, this);
389
389
  }
390
390
  get shadowRoot() {
391
391
  const t = r.get(this), i = G.get(t);
@@ -393,15 +393,15 @@ function _t() {
393
393
  }
394
394
  get validationMessage() {
395
395
  const t = r.get(this);
396
- return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), g.get(this);
396
+ return k(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), b.get(this);
397
397
  }
398
398
  get validity() {
399
399
  const t = r.get(this);
400
- return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), v.get(this);
400
+ return k(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), p.get(this);
401
401
  }
402
402
  get willValidate() {
403
403
  const t = r.get(this);
404
- 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"));
404
+ return k(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"));
405
405
  }
406
406
  }
407
407
  function Lt() {
@@ -460,31 +460,31 @@ function _t() {
460
460
  }), typeof Element < "u") {
461
461
  let t = function(...o) {
462
462
  const a = i.apply(this, o);
463
- if (G.set(this, a), P()) {
463
+ if (G.set(this, a), O()) {
464
464
  const n = new MutationObserver(D);
465
- window.ShadyDOM ? n.observe(this, R) : n.observe(a, R), $.set(this, n);
465
+ window.ShadyDOM ? n.observe(this, R) : n.observe(a, R), _.set(this, n);
466
466
  }
467
467
  return a;
468
468
  };
469
469
  const i = Element.prototype.attachShadow;
470
470
  Element.prototype.attachShadow = t;
471
471
  }
472
- P() && typeof document < "u" && new MutationObserver(D).observe(document.documentElement, R), typeof HTMLFormElement < "u" && It(), (e || typeof window < "u" && !window.CustomStateSet) && K();
472
+ O() && typeof document < "u" && new MutationObserver(D).observe(document.documentElement, R), typeof HTMLFormElement < "u" && It(), (e || typeof window < "u" && !window.CustomStateSet) && K();
473
473
  }
474
474
  }
475
475
  return !!customElements.polyfillWrapFlushCallback || (Lt() ? typeof window < "u" && !window.CustomStateSet && K(HTMLElement.prototype.attachInternals) : vt(!1)), l.forceCustomStateSetPolyfill = K, l.forceElementInternalsPolyfill = vt, Object.defineProperty(l, "__esModule", { value: !0 }), l;
476
476
  })({});
477
477
  })()), pt;
478
478
  }
479
- _t();
480
- const _ = class _ extends Tt {
479
+ Pt();
480
+ const P = class P extends Tt {
481
481
  willUpdate() {
482
- this.getAttribute("v") || this.setAttribute("v", _.v);
482
+ this.getAttribute("v") || this.setAttribute("v", P.v);
483
483
  }
484
484
  };
485
- _.v = "1.14.17";
486
- let U = _;
487
- const $t = ["button", "a"], Dt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Zt = ["productive", "expressive"], Rt = ["submit", "button", "reset"], Wt = [
485
+ P.v = "1.15.0";
486
+ let U = P;
487
+ const _t = ["button", "a"], Dt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Zt = ["productive", "expressive"], Rt = ["submit", "button", "reset"], Wt = [
488
488
  "primary",
489
489
  "primary-alternative",
490
490
  "primary-alternative-dark",
@@ -508,14 +508,14 @@ const $t = ["button", "a"], Dt = ["xsmall", "small-productive", "small-expressiv
508
508
  isLoading: !1,
509
509
  isFullWidth: !1,
510
510
  isResponsive: !1
511
- }, Bt = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}:host([isfullwidth]){display:block;width:100%}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--int-states-mixin-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-light-solid);--btn-padding-vertical-xsmall: 6px;--btn-padding-vertical-small-expressive: 8px;--btn-padding-vertical-small-productive: 10px;--btn-padding-vertical-medium: 12px;--btn-padding-vertical-large: 16px;--btn-padding-horizontal-small: var(--dt-spacing-b);--btn-padding-horizontal-medium: var(--dt-spacing-d);--btn-padding-horizontal-large: var(--dt-spacing-e);position:relative;display:inline-flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--int-states-mixin-bg-color);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;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);inline-size:var(--btn-inline-size)}.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 ::slotted(.c-pieIcon){pointer-events:none}@media(hover:hover){.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)){@media(hover:hover){.o-btn.o-btn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}}.o-btn.o-btn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}.o-btn.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--btn-text-color: var(--dt-color-content-interactive-primary-solid)}@media(hover:hover){.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)){@media(hover:hover){.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)}}@media(min-width:769px)and (hover:hover){.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)))}}@media(min-width:769px){.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)){@media(min-width:769px)and (hover:hover){.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled,.is-disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}}.o-btn.o-btn--primary-alternative{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--btn-text-color: var(--dt-color-content-interactive-primary)}@media(hover:hover){.o-btn.o-btn--primary-alternative:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}}.o-btn.o-btn--primary-alternative:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary-alternative.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.o-btn.o-btn--primary-alternative:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary))}}.o-btn.o-btn--primary-alternative:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary-alternative.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-interactive-primary))}}.o-btn.o-btn--primary-alternative-dark{--int-states-mixin-bg-color: var(--dt-color-interactive-dark);--btn-text-color: var(--dt-color-content-interactive-light)}@media(hover:hover){.o-btn.o-btn--primary-alternative-dark:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-dark-h), var(--dt-color-interactive-dark-s), calc(var(--dt-color-interactive-dark-l) + var(--hover-modifier)))}}.o-btn.o-btn--primary-alternative-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary-alternative-dark.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-dark-h), var(--dt-color-interactive-dark-s), calc(var(--dt-color-interactive-dark-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.o-btn.o-btn--primary-alternative-dark: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-dark))}}.o-btn.o-btn--primary-alternative-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary-alternative-dark.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-dark))}}.o-btn.o-btn--secondary{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}@media(hover:hover){.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)){@media(hover:hover){.o-btn.o-btn--secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-secondary))}}.o-btn.o-btn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--secondary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-secondary))}}.o-btn.o-btn--outline{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary-solid);border:1px solid var(--dt-color-border-strong)}@media(hover:hover){.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)){@media(hover:hover){.o-btn.o-btn--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}}.o-btn.o-btn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--outline.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-btn.o-btn--ghost{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary-solid)}@media(hover:hover){.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)){@media(hover:hover){.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--ghost-dark{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-dark-solid)}@media(hover:hover){.o-btn.o-btn--ghost-dark: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-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-dark.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)){@media(hover:hover){.o-btn.o-btn--ghost-dark: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-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-dark.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)}@media(hover:hover){.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)){@media(hover:hover){.o-btn.o-btn--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-inverse))}}.o-btn.o-btn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-inverse))}}.o-btn.o-btn--ghost-inverse,.o-btn.o-btn--outline-inverse{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary-solid)}@media(hover:hover){.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)){@media(hover:hover){.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--ghost-inverse-light{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-light-solid)}@media(hover:hover){.o-btn.o-btn--ghost-inverse-light: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-light:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-inverse-light.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)){@media(hover:hover){.o-btn.o-btn--ghost-inverse-light: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-light:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-inverse-light.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)}@media(hover:hover){.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)){@media(hover:hover){.o-btn.o-btn--destructive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error))}}.o-btn.o-btn--destructive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--destructive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error))}}.o-btn.o-btn--destructive-ghost{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error-solid)}@media(hover:hover){.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)){@media(hover:hover){.o-btn.o-btn--destructive-ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}}.o-btn.o-btn--destructive-ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--destructive-ghost.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-btn.o-btn--xsmall{--btn-font-size: calc(var(--dt-font-interactive-xs-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-xs-line-height) * 1px);--btn-icon-size: 16px;--icon-size-override: 16px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-small)}@media(min-width:769px){.o-btn.o-btn--xsmall.o-btn--responsive{--btn-font-size: calc(var(--dt-font-interactive-s-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-s-line-height) * 1px);--btn-icon-size: 20px;--icon-size-override: 20px;padding:var(--btn-padding-vertical-small-productive) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--expressive{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 20px;--icon-size-override: 20px;padding:var(--btn-padding-vertical-small-expressive) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--xsmall.o-btn--outline,.o-btn.o-btn--xsmall.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-small)}@media(min-width:769px){.o-btn.o-btn--xsmall.o-btn--outline.o-btn--responsive,.o-btn.o-btn--xsmall.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-small-productive) - 1px) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--outline.o-btn--responsive.o-btn--expressive,.o-btn.o-btn--xsmall.o-btn--outline-inverse.o-btn--responsive.o-btn--expressive{padding:calc(var(--btn-padding-vertical-small-expressive) - 1px) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--small-expressive{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 20px;--icon-size-override: 20px;padding:var(--btn-padding-vertical-small-expressive) var(--btn-padding-horizontal-medium)}@media(min-width:769px){.o-btn.o-btn--small-expressive.o-btn--responsive{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-expressive.o-btn--outline,.o-btn.o-btn--small-expressive.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-small-expressive) - 1px) var(--btn-padding-horizontal-medium)}@media(min-width:769px){.o-btn.o-btn--small-expressive.o-btn--outline.o-btn--responsive,.o-btn.o-btn--small-expressive.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-productive{--btn-font-size: calc(var(--dt-font-interactive-s-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-s-line-height) * 1px);--btn-icon-size: 20px;--icon-size-override: 20px;padding:var(--btn-padding-vertical-small-productive) var(--btn-padding-horizontal-medium)}@media(min-width:769px){.o-btn.o-btn--small-productive.o-btn--responsive{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-productive.o-btn--outline,.o-btn.o-btn--small-productive.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-small-productive) - 1px) var(--btn-padding-horizontal-medium)}@media(min-width:769px){.o-btn.o-btn--small-productive.o-btn--outline.o-btn--responsive,.o-btn.o-btn--small-productive.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--medium{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}@media(min-width:769px){.o-btn.o-btn--medium.o-btn--responsive{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--icon-size-override: 24px;padding:var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--medium.o-btn--outline,.o-btn.o-btn--medium.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}@media(min-width:769px){.o-btn.o-btn--medium.o-btn--outline.o-btn--responsive,.o-btn.o-btn--medium.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--large{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--icon-size-override: 24px;padding:var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large)}.o-btn.o-btn--large.o-btn--outline,.o-btn.o-btn--large.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large)}.o-btn.o-btn--fullWidth{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled-solid) !important;cursor:not-allowed}.o-btn[disabled]:not(.o-btn--ghost,.o-btn--ghost-dark,.o-btn--ghost-inverse,.o-btn--ghost-inverse-light,.o-btn--destructive-ghost){--int-states-mixin-bg-color: var(--dt-color-disabled-01) !important;--btn-text-color: var(--dt-color-content-disabled) !important}.o-btn[disabled].o-btn--outline,.o-btn[disabled].o-btn--outline-inverse{border-color:var(--dt-color-disabled-01)!important}.o-btn.is-loading>*:not(pie-spinner){visibility:hidden}.o-btn-text{text-overflow:ellipsis;overflow:hidden}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}";
512
- var Kt = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, b = (l, r, v, p) => {
513
- for (var d = p > 1 ? void 0 : p ? jt(r, v) : r, g = l.length - 1, f; g >= 0; g--)
514
- (f = l[g]) && (d = (p ? f(r, v, d) : f(d)) || d);
515
- return p && d && Kt(r, v, d), d;
511
+ }, Bt = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}:host([isfullwidth]){display:block;width:100%}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--int-states-mixin-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-light-solid);--btn-padding-vertical-xsmall: 6px;--btn-padding-vertical-small-expressive: 8px;--btn-padding-vertical-small-productive: 10px;--btn-padding-vertical-medium: 12px;--btn-padding-vertical-large: 16px;--btn-padding-horizontal-small: var(--dt-spacing-b);--btn-padding-horizontal-medium: var(--dt-spacing-d);--btn-padding-horizontal-large: var(--dt-spacing-e);position:relative;display:inline-flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--int-states-mixin-bg-color);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;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);inline-size:var(--btn-inline-size)}.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 ::slotted(.c-pieIcon){pointer-events:none}@media(hover:hover){.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)){@media(hover:hover){.o-btn.o-btn--primary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}}.o-btn.o-btn--primary:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}.o-btn.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--btn-text-color: var(--dt-color-content-interactive-primary-solid)}@media(hover:hover){.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)){@media(hover:hover){.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);--btn-text-color: var(--dt-color-content-interactive-light-solid)}}@media(min-width:769px)and (hover:hover){.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)))}}@media(min-width:769px){.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)){@media(min-width:769px)and (hover:hover){.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand))}}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled,.is-disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand))}}}.o-btn.o-btn--primary-alternative{--int-states-mixin-bg-color: var(--dt-color-interactive-primary);--btn-text-color: var(--dt-color-content-interactive-primary)}@media(hover:hover){.o-btn.o-btn--primary-alternative:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}}.o-btn.o-btn--primary-alternative:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary-alternative.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.o-btn.o-btn--primary-alternative:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary))}}.o-btn.o-btn--primary-alternative:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary-alternative.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-interactive-primary))}}.o-btn.o-btn--primary-alternative-dark{--int-states-mixin-bg-color: var(--dt-color-interactive-dark);--btn-text-color: var(--dt-color-content-interactive-light)}@media(hover:hover){.o-btn.o-btn--primary-alternative-dark:hover:not(:disabled,.is-disabled,.is-dismissible){--hover-modifier: var(--dt-color-hover-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-dark-h), var(--dt-color-interactive-dark-s), calc(var(--dt-color-interactive-dark-l) + var(--hover-modifier)))}}.o-btn.o-btn--primary-alternative-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary-alternative-dark.is-loading:not(:disabled,.is-disabled){--active-modifier: var(--dt-color-active-02);--int-states-mixin-bg-color: hsl(var(--dt-color-interactive-dark-h), var(--dt-color-interactive-dark-s), calc(var(--dt-color-interactive-dark-l) + var(--active-modifier)))}@supports (background-color: color-mix(in srgb,black,white)){@media(hover:hover){.o-btn.o-btn--primary-alternative-dark: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-dark))}}.o-btn.o-btn--primary-alternative-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--primary-alternative-dark.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-dark))}}.o-btn.o-btn--secondary{--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}@media(hover:hover){.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)){@media(hover:hover){.o-btn.o-btn--secondary:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-secondary))}}.o-btn.o-btn--secondary:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--secondary.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-secondary))}}.o-btn.o-btn--outline{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary-solid);border:1px solid var(--dt-color-border-strong)}@media(hover:hover){.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)){@media(hover:hover){.o-btn.o-btn--outline:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}}.o-btn.o-btn--outline:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--outline.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-btn.o-btn--ghost{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary-solid)}@media(hover:hover){.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)){@media(hover:hover){.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--ghost-dark{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-dark-solid)}@media(hover:hover){.o-btn.o-btn--ghost-dark: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-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-dark.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)){@media(hover:hover){.o-btn.o-btn--ghost-dark: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-dark:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-dark.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)}@media(hover:hover){.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)){@media(hover:hover){.o-btn.o-btn--inverse:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-inverse))}}.o-btn.o-btn--inverse:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--inverse.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-inverse))}}.o-btn.o-btn--ghost-inverse,.o-btn.o-btn--outline-inverse{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary-solid)}@media(hover:hover){.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)){@media(hover:hover){.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--ghost-inverse-light{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-light-solid)}@media(hover:hover){.o-btn.o-btn--ghost-inverse-light: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-light:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-inverse-light.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)){@media(hover:hover){.o-btn.o-btn--ghost-inverse-light: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-light:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--ghost-inverse-light.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)}@media(hover:hover){.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)){@media(hover:hover){.o-btn.o-btn--destructive:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error))}}.o-btn.o-btn--destructive:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--destructive.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error))}}.o-btn.o-btn--destructive-ghost{--int-states-mixin-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error-solid)}@media(hover:hover){.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)){@media(hover:hover){.o-btn.o-btn--destructive-ghost:hover:not(:disabled,.is-disabled,.is-dismissible){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent))}}.o-btn.o-btn--destructive-ghost:active:not(:disabled,.is-disabled,.is-dismissible),.o-btn.o-btn--destructive-ghost.is-loading:not(:disabled,.is-disabled){--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent))}}.o-btn.o-btn--xsmall{--btn-font-size: calc(var(--dt-font-interactive-xs-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-xs-line-height) * 1px);--btn-icon-size: 16px;--icon-size-override: 16px;padding:var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-small)}@media(min-width:769px){.o-btn.o-btn--xsmall.o-btn--responsive{--btn-font-size: calc(var(--dt-font-interactive-s-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-s-line-height) * 1px);--btn-icon-size: 20px;--icon-size-override: 20px;padding:var(--btn-padding-vertical-small-productive) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--expressive{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 20px;--icon-size-override: 20px;padding:var(--btn-padding-vertical-small-expressive) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--xsmall.o-btn--outline,.o-btn.o-btn--xsmall.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-small)}@media(min-width:769px){.o-btn.o-btn--xsmall.o-btn--outline.o-btn--responsive,.o-btn.o-btn--xsmall.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-small-productive) - 1px) var(--btn-padding-horizontal-medium)}.o-btn.o-btn--xsmall.o-btn--outline.o-btn--responsive.o-btn--expressive,.o-btn.o-btn--xsmall.o-btn--outline-inverse.o-btn--responsive.o-btn--expressive{padding:calc(var(--btn-padding-vertical-small-expressive) - 1px) var(--btn-padding-horizontal-medium)}}.o-btn.o-btn--small-expressive{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 20px;--icon-size-override: 20px;padding:var(--btn-padding-vertical-small-expressive) var(--btn-padding-horizontal-medium)}@media(min-width:769px){.o-btn.o-btn--small-expressive.o-btn--responsive{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-expressive.o-btn--outline,.o-btn.o-btn--small-expressive.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-small-expressive) - 1px) var(--btn-padding-horizontal-medium)}@media(min-width:769px){.o-btn.o-btn--small-expressive.o-btn--outline.o-btn--responsive,.o-btn.o-btn--small-expressive.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-productive{--btn-font-size: calc(var(--dt-font-interactive-s-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-s-line-height) * 1px);--btn-icon-size: 20px;--icon-size-override: 20px;padding:var(--btn-padding-vertical-small-productive) var(--btn-padding-horizontal-medium)}@media(min-width:769px){.o-btn.o-btn--small-productive.o-btn--responsive{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--small-productive.o-btn--outline,.o-btn.o-btn--small-productive.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-small-productive) - 1px) var(--btn-padding-horizontal-medium)}@media(min-width:769px){.o-btn.o-btn--small-productive.o-btn--outline.o-btn--responsive,.o-btn.o-btn--small-productive.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--medium{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--icon-size-override: 24px;padding:var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large)}@media(min-width:769px){.o-btn.o-btn--medium.o-btn--responsive{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--icon-size-override: 24px;padding:var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--medium.o-btn--outline,.o-btn.o-btn--medium.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large)}@media(min-width:769px){.o-btn.o-btn--medium.o-btn--outline.o-btn--responsive,.o-btn.o-btn--medium.o-btn--outline-inverse.o-btn--responsive{padding:calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large)}}.o-btn.o-btn--large{--btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);--btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);--btn-icon-size: 24px;--icon-size-override: 24px;padding:var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large)}.o-btn.o-btn--large.o-btn--outline,.o-btn.o-btn--large.o-btn--outline-inverse{padding:calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large)}.o-btn.o-btn--fullWidth{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled-solid) !important;cursor:not-allowed}.o-btn[disabled]:not(.o-btn--ghost,.o-btn--ghost-dark,.o-btn--ghost-inverse,.o-btn--ghost-inverse-light,.o-btn--destructive-ghost){--int-states-mixin-bg-color: var(--dt-color-disabled-01) !important;--btn-text-color: var(--dt-color-content-disabled) !important}.o-btn[disabled].o-btn--outline,.o-btn[disabled].o-btn--outline-inverse{border-color:var(--dt-color-disabled-01)!important}.o-btn.is-loading>*:not(pie-spinner){visibility:hidden}.o-btn-text{text-overflow:ellipsis;overflow:hidden}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}";
512
+ var Kt = Object.defineProperty, jt = Object.getOwnPropertyDescriptor, m = (l, r, p, g) => {
513
+ for (var d = g > 1 ? void 0 : g ? jt(r, p) : r, b = l.length - 1, v; b >= 0; b--)
514
+ (v = l[b]) && (d = (g ? v(r, p, d) : v(d)) || d);
515
+ return g && d && Kt(r, p, d), d;
516
516
  };
517
517
  const A = "pie-button";
518
- let c = class extends Nt(Ot(U)) {
518
+ let c = class extends Nt($t(U)) {
519
519
  constructor() {
520
520
  super(...arguments), this.tag = y.tag, this.size = y.size, this.type = y.type, this.variant = y.variant, this.iconPlacement = y.iconPlacement, this.disabled = y.disabled, this.isLoading = y.isLoading, this.isFullWidth = y.isFullWidth, this.isResponsive = y.isResponsive, this._handleFormKeyDown = (l) => {
521
521
  if (!(l.key !== "Enter" || this.type !== "submit" || this.disabled)) {
@@ -537,8 +537,8 @@ let c = class extends Nt(Ot(U)) {
537
537
  super.disconnectedCallback(), this.type === "submit" && ((l = this.form) == null || l.removeEventListener("keydown", this._handleFormKeyDown));
538
538
  }
539
539
  updated(l) {
540
- var r, v;
541
- l.has("type") && (this.type === "submit" ? (r = this.form) == null || r.addEventListener("keydown", this._handleFormKeyDown) : (v = this.form) == null || v.removeEventListener("keydown", this._handleFormKeyDown));
540
+ var r, p;
541
+ l.has("type") && (this.type === "submit" ? (r = this.form) == null || r.addEventListener("keydown", this._handleFormKeyDown) : (p = this.form) == null || p.removeEventListener("keydown", this._handleFormKeyDown));
542
542
  }
543
543
  /**
544
544
  * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
@@ -562,156 +562,162 @@ let c = class extends Nt(Ot(U)) {
562
562
  * @private
563
563
  */
564
564
  renderSpinner() {
565
- const { size: l, variant: r, disabled: v } = this, p = l && l.includes("small") ? "small" : "medium";
565
+ const { size: l, variant: r, disabled: p } = this, g = l && l.includes("small") ? "small" : "medium";
566
566
  let d;
567
- return v ? d = r === "ghost-inverse" ? "inverse" : "secondary" : d = ["primary", "destructive", "outline-inverse", "ghost-inverse", "ghost-inverse-light"].includes(this.variant) ? "inverse" : "secondary", z`
567
+ return p ? d = r === "ghost-inverse" ? "inverse" : "secondary" : d = ["primary", "destructive", "outline-inverse", "ghost-inverse", "ghost-inverse-light"].includes(this.variant) ? "inverse" : "secondary", M`
568
568
  <pie-spinner
569
569
  isCentered
570
- size="${p}"
570
+ size="${g}"
571
571
  variant="${d}">
572
572
  </pie-spinner>`;
573
573
  }
574
574
  renderAnchor(l) {
575
575
  const {
576
576
  href: r,
577
- iconPlacement: v,
578
- rel: p,
577
+ iconPlacement: p,
578
+ rel: g,
579
579
  target: d,
580
- download: g,
581
- aria: f
580
+ download: b,
581
+ aria: v
582
582
  } = this;
583
- return z`
583
+ return M`
584
584
  <a
585
- href="${M(r)}"
586
- rel="${M(p)}"
587
- target="${M(d)}"
588
- download="${M(g)}"
585
+ href="${x(r)}"
586
+ rel="${x(g)}"
587
+ target="${x(d)}"
588
+ download="${x(b)}"
589
589
  part="base"
590
- aria-label="${M(f == null ? void 0 : f.label)}"
590
+ aria-label="${x(v == null ? void 0 : v.label)}"
591
+ aria-description="${x(v == null ? void 0 : v.description)}"
592
+ aria-haspopup="${x(v == null ? void 0 : v.haspopup)}"
593
+ aria-expanded="${x(v == null ? void 0 : v.expanded)}"
591
594
  class="${mt(l)}">
592
- ${v === "leading" ? z`<slot name="icon"></slot>` : C}
595
+ ${p === "leading" ? M`<slot name="icon"></slot>` : C}
593
596
  <slot></slot>
594
- ${v === "trailing" ? z`<slot name="icon"></slot>` : C}
597
+ ${p === "trailing" ? M`<slot name="icon"></slot>` : C}
595
598
  </a>`;
596
599
  }
597
600
  renderButton(l) {
598
601
  const {
599
602
  disabled: r,
600
- iconPlacement: v,
601
- isLoading: p,
603
+ iconPlacement: p,
604
+ isLoading: g,
602
605
  type: d,
603
- aria: g
604
- } = this, f = {
606
+ aria: b
607
+ } = this, v = {
605
608
  ...l,
606
- "is-loading": p
609
+ "is-loading": g
607
610
  };
608
- return z`
611
+ return M`
609
612
  <button
610
613
  @click=${this._handleClick}
611
- class=${mt(f)}
614
+ class=${mt(v)}
612
615
  part="base"
613
616
  type=${d}
614
617
  ?disabled=${r}
615
- aria-label="${M(g == null ? void 0 : g.label)}">
616
- ${p ? this.renderSpinner() : C}
617
- ${v === "leading" ? z`<slot name="icon"></slot>` : C}
618
+ aria-label="${x(b == null ? void 0 : b.label)}"
619
+ aria-description="${x(b == null ? void 0 : b.description)}"
620
+ aria-haspopup="${x(b == null ? void 0 : b.haspopup)}"
621
+ aria-expanded="${x(b == null ? void 0 : b.expanded)}">
622
+ ${g ? this.renderSpinner() : C}
623
+ ${p === "leading" ? M`<slot name="icon"></slot>` : C}
618
624
  <span class="o-btn-text"><slot></slot></span>
619
- ${v === "trailing" ? z`<slot name="icon"></slot>` : C}
625
+ ${p === "trailing" ? M`<slot name="icon"></slot>` : C}
620
626
  </button>`;
621
627
  }
622
628
  render() {
623
629
  const {
624
630
  isFullWidth: l,
625
631
  isResponsive: r,
626
- responsiveSize: v,
627
- size: p,
632
+ responsiveSize: p,
633
+ size: g,
628
634
  tag: d,
629
- variant: g
630
- } = this, f = {
635
+ variant: b
636
+ } = this, v = {
631
637
  "o-btn": !0,
632
638
  "o-btn--fullWidth": l,
633
639
  "o-btn--responsive": r,
634
- [`o-btn--${v}`]: !!(r && v),
635
- [`o-btn--${g}`]: !0,
636
- [`o-btn--${p}`]: !0
640
+ [`o-btn--${p}`]: !!(r && p),
641
+ [`o-btn--${b}`]: !0,
642
+ [`o-btn--${g}`]: !0
637
643
  };
638
- return d === "a" ? this.renderAnchor(f) : this.renderButton(f);
644
+ return d === "a" ? this.renderAnchor(v) : this.renderButton(v);
639
645
  }
640
646
  };
641
647
  c.styles = Vt(Bt);
642
- b([
643
- m({ type: Object })
648
+ m([
649
+ h({ type: Object })
644
650
  ], c.prototype, "aria", 2);
645
- b([
646
- m({ type: String }),
647
- F(A, $t, y.tag)
651
+ m([
652
+ h({ type: String }),
653
+ F(A, _t, y.tag)
648
654
  ], c.prototype, "tag", 2);
649
- b([
650
- m({ type: String }),
655
+ m([
656
+ h({ type: String }),
651
657
  F(A, Dt, y.size)
652
658
  ], c.prototype, "size", 2);
653
- b([
654
- m({ type: String }),
659
+ m([
660
+ h({ type: String }),
655
661
  F(A, Rt, y.type)
656
662
  ], c.prototype, "type", 2);
657
- b([
658
- m({ type: String }),
663
+ m([
664
+ h({ type: String }),
659
665
  F(A, Wt, y.variant)
660
666
  ], c.prototype, "variant", 2);
661
- b([
662
- m({ type: String }),
667
+ m([
668
+ h({ type: String }),
663
669
  F(A, Ht, y.iconPlacement)
664
670
  ], c.prototype, "iconPlacement", 2);
665
- b([
666
- m({ type: Boolean })
671
+ m([
672
+ h({ type: Boolean })
667
673
  ], c.prototype, "disabled", 2);
668
- b([
669
- m({ type: Boolean, reflect: !0 })
674
+ m([
675
+ h({ type: Boolean, reflect: !0 })
670
676
  ], c.prototype, "isLoading", 2);
671
- b([
672
- m({ type: Boolean, reflect: !0 })
677
+ m([
678
+ h({ type: Boolean, reflect: !0 })
673
679
  ], c.prototype, "isFullWidth", 2);
674
- b([
675
- m({ type: Boolean })
680
+ m([
681
+ h({ type: Boolean })
676
682
  ], c.prototype, "isResponsive", 2);
677
- b([
678
- m({ type: String })
683
+ m([
684
+ h({ type: String })
679
685
  ], c.prototype, "name", 2);
680
- b([
681
- m({ type: String })
686
+ m([
687
+ h({ type: String })
682
688
  ], c.prototype, "value", 2);
683
- b([
684
- m({ type: String })
689
+ m([
690
+ h({ type: String })
685
691
  ], c.prototype, "formaction", 2);
686
- b([
687
- m({ type: String })
692
+ m([
693
+ h({ type: String })
688
694
  ], c.prototype, "formenctype", 2);
689
- b([
690
- m({ type: String })
695
+ m([
696
+ h({ type: String })
691
697
  ], c.prototype, "formmethod", 2);
692
- b([
693
- m({ type: Boolean })
698
+ m([
699
+ h({ type: Boolean })
694
700
  ], c.prototype, "formnovalidate", 2);
695
- b([
696
- m({ type: String })
701
+ m([
702
+ h({ type: String })
697
703
  ], c.prototype, "formtarget", 2);
698
- b([
699
- m({ type: String })
704
+ m([
705
+ h({ type: String })
700
706
  ], c.prototype, "responsiveSize", 2);
701
- b([
702
- m({ type: String })
707
+ m([
708
+ h({ type: String })
703
709
  ], c.prototype, "href", 2);
704
- b([
705
- m({ type: String })
710
+ m([
711
+ h({ type: String })
706
712
  ], c.prototype, "rel", 2);
707
- b([
708
- m({ type: String })
713
+ m([
714
+ h({ type: String })
709
715
  ], c.prototype, "target", 2);
710
- b([
711
- m({ type: String })
716
+ m([
717
+ h({ type: String })
712
718
  ], c.prototype, "download", 2);
713
- c = b([
714
- Pt("pie-button")
719
+ c = m([
720
+ Ot("pie-button")
715
721
  ], c);
716
722
  export {
717
723
  c as PieButton,
@@ -722,7 +728,7 @@ export {
722
728
  Ht as iconPlacements,
723
729
  Zt as responsiveSizes,
724
730
  Dt as sizes,
725
- $t as tags,
731
+ _t as tags,
726
732
  Rt as types,
727
733
  Wt as variants
728
734
  };
package/dist/react.d.ts CHANGED
@@ -10,6 +10,15 @@ import { TemplateResult } from 'lit';
10
10
 
11
11
  declare type AriaProps = {
12
12
  label?: string;
13
+ /**
14
+ * The accessible description for the button element. Rendered as an `aria-description`
15
+ * attribute, so the text travels as a string and is not bound by IDREF resolution.
16
+ */
17
+ description?: string;
18
+ /** The button's popup state, matching `aria-haspopup`. */
19
+ haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
20
+ /** The button's expanded state, matching `aria-expanded`. */
21
+ expanded?: boolean;
13
22
  };
14
23
 
15
24
  export declare interface ButtonProps {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "1.14.17",
3
+ "version": "1.15.0",
4
4
  "description": "PIE design system button built using web components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -45,8 +45,8 @@
45
45
  "license": "Apache-2.0",
46
46
  "devDependencies": {
47
47
  "@justeattakeaway/pie-components-config": "0.21.4",
48
- "@justeattakeaway/pie-css": "1.8.0",
49
- "@justeattakeaway/pie-monorepo-utils": "0.9.9",
48
+ "@justeattakeaway/pie-css": "1.9.1",
49
+ "@justeattakeaway/pie-monorepo-utils": "0.9.11",
50
50
  "@justeattakeaway/pie-wrapper-react": "0.14.5"
51
51
  },
52
52
  "customElements": "custom-elements.json",
@@ -54,8 +54,8 @@
54
54
  "dist/*.js"
55
55
  ],
56
56
  "dependencies": {
57
- "@justeattakeaway/pie-spinner": "1.5.9",
58
- "@justeattakeaway/pie-webc-core": "21.0.0",
57
+ "@justeattakeaway/pie-spinner": "1.5.10",
58
+ "@justeattakeaway/pie-webc-core": "22.0.0",
59
59
  "element-internals-polyfill": "1.3.11"
60
60
  }
61
61
  }
package/src/defs.ts CHANGED
@@ -14,6 +14,18 @@ export type Variant = typeof variants[number];
14
14
 
15
15
  type AriaProps = {
16
16
  label?: string;
17
+
18
+ /**
19
+ * The accessible description for the button element. Rendered as an `aria-description`
20
+ * attribute, so the text travels as a string and is not bound by IDREF resolution.
21
+ */
22
+ description?: string;
23
+
24
+ /** The button's popup state, matching `aria-haspopup`. */
25
+ haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
26
+
27
+ /** The button's expanded state, matching `aria-expanded`. */
28
+ expanded?: boolean;
17
29
  };
18
30
 
19
31
  export const formEncodingtypes = ['application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain'] as const;
package/src/index.ts CHANGED
@@ -254,6 +254,9 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
254
254
  download="${ifDefined(download)}"
255
255
  part="base"
256
256
  aria-label="${ifDefined(aria?.label)}"
257
+ aria-description="${ifDefined(aria?.description)}"
258
+ aria-haspopup="${ifDefined(aria?.haspopup)}"
259
+ aria-expanded="${ifDefined(aria?.expanded)}"
257
260
  class="${classMap(classes)}">
258
261
  ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
259
262
  <slot></slot>
@@ -278,7 +281,10 @@ export class PieButton extends DelegatesFocusMixin(FormControlMixin(PieElement))
278
281
  part="base"
279
282
  type=${type}
280
283
  ?disabled=${disabled}
281
- aria-label="${ifDefined(aria?.label)}">
284
+ aria-label="${ifDefined(aria?.label)}"
285
+ aria-description="${ifDefined(aria?.description)}"
286
+ aria-haspopup="${ifDefined(aria?.haspopup)}"
287
+ aria-expanded="${ifDefined(aria?.expanded)}">
282
288
  ${isLoading ? this.renderSpinner() : nothing}
283
289
  ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
284
290
  <span class="o-btn-text"><slot></slot></span>