@justeattakeaway/pie-button 1.14.18 → 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 +168 -162
  4. package/dist/react.d.ts +9 -0
  5. package/package.json +3 -3
  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.18";
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",
@@ -509,13 +509,13 @@ const $t = ["button", "a"], Dt = ["xsmall", "small-productive", "small-expressiv
509
509
  isFullWidth: !1,
510
510
  isResponsive: !1
511
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, 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;
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.18",
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.9.0",
49
- "@justeattakeaway/pie-monorepo-utils": "0.9.10",
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",
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>