@justeattakeaway/pie-button 0.48.0 → 0.49.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 (9) hide show
  1. package/custom-elements.json +105 -31
  2. package/dist/index.d.ts +36 -8
  3. package/dist/index.js +314 -272
  4. package/dist/react.d.ts +36 -8
  5. package/dist/react.js +14 -12
  6. package/package.json +4 -3
  7. package/src/button.scss +2 -1
  8. package/src/defs.ts +32 -1
  9. package/src/index.ts +101 -54
package/dist/index.js CHANGED
@@ -1,32 +1,12 @@
1
- import { LitElement as zt, html as P, nothing as K, unsafeCSS as Ft } from "lit";
2
- import { classMap as St } from "lit/directives/class-map.js";
3
- import { property as h } from "lit/decorators.js";
4
- import { FormControlMixin as At, validPropertyValues as O, defineCustomElement as It } from "@justeattakeaway/pie-webc-core";
1
+ import { LitElement as Ft, html as M, nothing as F, unsafeCSS as At } from "lit";
2
+ import { classMap as bt } from "lit/directives/class-map.js";
3
+ import { ifDefined as K } from "lit/directives/if-defined.js";
4
+ import { property as v } from "lit/decorators.js";
5
+ import { FormControlMixin as It, validPropertyValues as A, defineCustomElement as Tt } from "@justeattakeaway/pie-webc-core";
5
6
  import "@justeattakeaway/pie-spinner";
6
- const Tt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Kt = ["productive", "expressive"], Lt = ["submit", "button", "reset"], Vt = [
7
- "primary",
8
- "secondary",
9
- "outline",
10
- "outline-inverse",
11
- "ghost",
12
- "inverse",
13
- "ghost-inverse",
14
- "destructive",
15
- "destructive-ghost"
16
- ], Nt = ["leading", "trailing"], jt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Ut = ["post", "get", "dialog"], qt = ["_self", "_blank", "_parent", "_top"], f = {
17
- size: "medium",
18
- type: "submit",
19
- variant: "primary",
20
- iconPlacement: "leading",
21
- disabled: !1,
22
- isLoading: !1,
23
- isFullWidth: !1,
24
- isResponsive: !1
25
- }, Pt = `*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;inline-size:var(--btn-inline-size)}.o-btn.o-btn--primary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary:active:not(:disabled),.o-btn.o-btn--primary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn.o-btn--primary.o-btn--xsmall:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.is-loading:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}@media (min-width: 769px){.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive,.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive{--btn-bg-color: var(--dt-color-interactive-brand)}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}}.o-btn.o-btn--secondary{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--secondary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn.o-btn--secondary:active:not(:disabled),.o-btn.o-btn--secondary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn.o-btn--outline{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--outline:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--outline:active:not(:disabled),.o-btn.o-btn--outline.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn.o-btn--ghost:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--ghost:active:not(:disabled),.o-btn.o-btn--ghost.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--inverse{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--inverse:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn.o-btn--inverse:active:not(:disabled),.o-btn.o-btn--inverse.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn.o-btn--ghost-inverse,.o-btn.o-btn--outline-inverse{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--ghost-inverse:hover:not(:disabled),.o-btn.o-btn--outline-inverse:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn.o-btn--ghost-inverse:active:not(:disabled),.o-btn.o-btn--ghost-inverse.is-loading:not(:disabled),.o-btn.o-btn--outline-inverse:active:not(:disabled),.o-btn.o-btn--outline-inverse.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn.o-btn--outline-inverse:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--destructive{--btn-bg-color: var(--dt-color-support-error)}.o-btn.o-btn--destructive:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn.o-btn--destructive:active:not(:disabled),.o-btn.o-btn--destructive.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn.o-btn--destructive-ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn.o-btn--destructive-ghost:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--destructive-ghost:active:not(:disabled),.o-btn.o-btn--destructive-ghost.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--xsmall{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--responsive{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--expressive{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn.o-btn--small-expressive{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--responsive{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--small-productive{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--responsive{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--medium{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--responsive{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--large{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.o-btn.o-btn--fullWidth{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not(.o-btn--ghost,.o-btn--ghost-inverse,.o-btn--destructive-ghost){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled].o-btn--outline{border-color:var(--dt-color-disabled-01)!important}.o-btn.is-loading>*:not(pie-spinner){visibility:hidden}.o-btn.is-loading pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}
26
- `;
27
7
  (function() {
28
- (function(k) {
29
- const n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), I = {
8
+ (function(E) {
9
+ const a = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), J = /* @__PURE__ */ new WeakMap(), T = /* @__PURE__ */ new WeakMap(), L = {
30
10
  ariaAtomic: "aria-atomic",
31
11
  ariaAutoComplete: "aria-autocomplete",
32
12
  ariaBusy: "aria-busy",
@@ -69,26 +49,26 @@ const Tt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
69
49
  ariaValueNow: "aria-valuenow",
70
50
  ariaValueText: "aria-valuetext",
71
51
  role: "role"
72
- }, dt = (e, t) => {
73
- for (let o in I) {
52
+ }, vt = (e, t) => {
53
+ for (let o in L) {
74
54
  t[o] = null;
75
55
  let i = null;
76
- const r = I[o];
56
+ const r = L[o];
77
57
  Object.defineProperty(t, o, {
78
58
  get() {
79
59
  return i;
80
60
  },
81
61
  set(s) {
82
- i = s, e.isConnected ? e.setAttribute(r, s) : C.set(e, t);
62
+ i = s, e.isConnected ? e.setAttribute(r, s) : I.set(e, t);
83
63
  }
84
64
  });
85
65
  }
86
66
  };
87
- function J(e) {
67
+ function Q(e) {
88
68
  const t = c.get(e), { form: o } = t;
89
- et(e, o, t), tt(e, t.labels);
69
+ ot(e, o, t), et(e, t.labels);
90
70
  }
91
- const Q = (e, t = !1) => {
71
+ const X = (e, t = !1) => {
92
72
  const o = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
93
73
  acceptNode(s) {
94
74
  return c.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
@@ -97,12 +77,12 @@ const Tt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
97
77
  let i = o.nextNode();
98
78
  const r = !t || e.disabled;
99
79
  for (; i; )
100
- i.formDisabledCallback && r && D(i, e.disabled), i = o.nextNode();
101
- }, X = { attributes: !0, attributeFilter: ["disabled", "name"] }, T = N() ? new MutationObserver((e) => {
80
+ i.formDisabledCallback && r && $(i, e.disabled), i = o.nextNode();
81
+ }, Y = { attributes: !0, attributeFilter: ["disabled", "name"] }, V = O() ? new MutationObserver((e) => {
102
82
  for (const t of e) {
103
83
  const o = t.target;
104
- if (t.attributeName === "disabled" && (o.constructor.formAssociated ? D(o, o.hasAttribute("disabled")) : o.localName === "fieldset" && Q(o)), t.attributeName === "name" && o.constructor.formAssociated) {
105
- const i = c.get(o), r = z.get(o);
84
+ if (t.attributeName === "disabled" && (o.constructor.formAssociated ? $(o, o.hasAttribute("disabled")) : o.localName === "fieldset" && X(o)), t.attributeName === "name" && o.constructor.formAssociated) {
85
+ const i = c.get(o), r = j.get(o);
106
86
  i.setFormValue(r);
107
87
  }
108
88
  }
@@ -111,154 +91,154 @@ const Tt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
111
91
  e.forEach((t) => {
112
92
  const { addedNodes: o, removedNodes: i } = t, r = Array.from(o), s = Array.from(i);
113
93
  r.forEach((l) => {
114
- var m;
115
- if (c.has(l) && l.constructor.formAssociated && J(l), C.has(l)) {
116
- const d = C.get(l);
117
- Object.keys(I).filter((y) => d[y] !== null).forEach((y) => {
118
- l.setAttribute(I[y], d[y]);
119
- }), C.delete(l);
94
+ var u;
95
+ if (c.has(l) && l.constructor.formAssociated && Q(l), I.has(l)) {
96
+ const p = I.get(l);
97
+ Object.keys(L).filter((y) => p[y] !== null).forEach((y) => {
98
+ l.setAttribute(L[y], p[y]);
99
+ }), I.delete(l);
120
100
  }
121
- if (A.has(l)) {
122
- const d = A.get(l);
123
- l.setAttribute("internals-valid", d.validity.valid.toString()), l.setAttribute("internals-invalid", (!d.validity.valid).toString()), l.setAttribute("aria-invalid", (!d.validity.valid).toString()), A.delete(l);
101
+ if (T.has(l)) {
102
+ const p = T.get(l);
103
+ l.setAttribute("internals-valid", p.validity.valid.toString()), l.setAttribute("internals-invalid", (!p.validity.valid).toString()), l.setAttribute("aria-invalid", (!p.validity.valid).toString()), T.delete(l);
124
104
  }
125
105
  if (l.localName === "form") {
126
- const d = g.get(l), E = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
106
+ const p = k.get(l), x = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
127
107
  acceptNode(B) {
128
- return c.has(B) && B.constructor.formAssociated && !(d && d.has(B)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
108
+ return c.has(B) && B.constructor.formAssociated && !(p && p.has(B)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
129
109
  }
130
110
  });
131
- let y = E.nextNode();
111
+ let y = x.nextNode();
132
112
  for (; y; )
133
- J(y), y = E.nextNode();
113
+ Q(y), y = x.nextNode();
134
114
  }
135
- l.localName === "fieldset" && ((m = T.observe) === null || m === void 0 || m.call(T, l, X), Q(l, !0));
115
+ l.localName === "fieldset" && ((u = V.observe) === null || u === void 0 || u.call(V, l, Y), X(l, !0));
136
116
  }), s.forEach((l) => {
137
- const m = c.get(l);
138
- m && v.get(m) && Y(m), M.has(l) && M.get(l).disconnect();
117
+ const u = c.get(l);
118
+ u && d.get(u) && Z(u), S.has(l) && S.get(l).disconnect();
139
119
  });
140
120
  });
141
121
  }
142
- function bt(e) {
122
+ function ht(e) {
143
123
  e.forEach((t) => {
144
124
  const { removedNodes: o } = t;
145
125
  o.forEach((i) => {
146
- const r = q.get(t.target);
147
- c.has(i) && it(i), r.disconnect();
126
+ const r = G.get(t.target);
127
+ c.has(i) && rt(i), r.disconnect();
148
128
  });
149
129
  });
150
130
  }
151
- const vt = (e) => {
131
+ const pt = (e) => {
152
132
  var t, o;
153
- const i = new MutationObserver(bt);
154
- !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (o = i.observe) === null || o === void 0 || o.call(i, e, { childList: !0 }), q.set(e, i);
133
+ const i = new MutationObserver(ht);
134
+ !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (o = i.observe) === null || o === void 0 || o.call(i, e, { childList: !0 }), G.set(e, i);
155
135
  };
156
- N() && new MutationObserver(_);
136
+ O() && new MutationObserver(_);
157
137
  const R = {
158
138
  childList: !0,
159
139
  subtree: !0
160
- }, D = (e, t) => {
140
+ }, $ = (e, t) => {
161
141
  e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
162
- }, Y = (e) => {
163
- v.get(e).forEach((o) => {
142
+ }, Z = (e) => {
143
+ d.get(e).forEach((o) => {
164
144
  o.remove();
165
- }), v.set(e, []);
166
- }, Z = (e, t) => {
145
+ }), d.set(e, []);
146
+ }, tt = (e, t) => {
167
147
  const o = document.createElement("input");
168
- return o.type = "hidden", o.name = e.getAttribute("name"), e.after(o), v.get(t).push(o), o;
169
- }, ht = (e, t) => {
148
+ return o.type = "hidden", o.name = e.getAttribute("name"), e.after(o), d.get(t).push(o), o;
149
+ }, mt = (e, t) => {
170
150
  var o;
171
- v.set(t, []), (o = T.observe) === null || o === void 0 || o.call(T, e, X);
172
- }, tt = (e, t) => {
151
+ d.set(t, []), (o = V.observe) === null || o === void 0 || o.call(V, e, Y);
152
+ }, et = (e, t) => {
173
153
  if (t.length) {
174
154
  Array.from(t).forEach((i) => i.addEventListener("click", e.click.bind(e)));
175
155
  let o = t[0].id;
176
156
  t[0].id || (o = `${t[0].htmlFor}_Label`, t[0].id = o), e.setAttribute("aria-labelledby", o);
177
157
  }
178
- }, L = (e) => {
179
- const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), o = g.get(e) || [], i = Array.from(o).filter((s) => s.isConnected).map((s) => c.get(s).validity.valid), r = [...t, ...i].includes(!1);
158
+ }, N = (e) => {
159
+ const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), o = k.get(e) || [], i = Array.from(o).filter((s) => s.isConnected).map((s) => c.get(s).validity.valid), r = [...t, ...i].includes(!1);
180
160
  e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
181
- }, pt = (e) => {
182
- L(V(e.target));
183
- }, mt = (e) => {
184
- L(V(e.target));
185
161
  }, ut = (e) => {
162
+ N(P(e.target));
163
+ }, ft = (e) => {
164
+ N(P(e.target));
165
+ }, gt = (e) => {
186
166
  const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((o) => `${o}:not([disabled])`).map((o) => `${o}:not([form])${e.id ? `,${o}[form='${e.id}']` : ""}`).join(",");
187
167
  e.addEventListener("click", (o) => {
188
168
  if (o.target.closest(t)) {
189
- const r = g.get(e);
169
+ const r = k.get(e);
190
170
  if (e.noValidate)
191
171
  return;
192
- r.size && Array.from(r).reverse().map((m) => c.get(m).reportValidity()).includes(!1) && o.preventDefault();
172
+ r.size && Array.from(r).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && o.preventDefault();
193
173
  }
194
174
  });
195
- }, ft = (e) => {
196
- const t = g.get(e.target);
175
+ }, yt = (e) => {
176
+ const t = k.get(e.target);
197
177
  t && t.size && t.forEach((o) => {
198
178
  o.constructor.formAssociated && o.formResetCallback && o.formResetCallback.apply(o);
199
179
  });
200
- }, et = (e, t, o) => {
180
+ }, ot = (e, t, o) => {
201
181
  if (t) {
202
- const i = g.get(t);
182
+ const i = k.get(t);
203
183
  if (i)
204
184
  i.add(e);
205
185
  else {
206
186
  const r = /* @__PURE__ */ new Set();
207
- r.add(e), g.set(t, r), ut(t), t.addEventListener("reset", ft), t.addEventListener("input", pt), t.addEventListener("change", mt);
187
+ r.add(e), k.set(t, r), gt(t), t.addEventListener("reset", yt), t.addEventListener("input", ut), t.addEventListener("change", ft);
208
188
  }
209
- w.set(t, { ref: e, internals: o }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
189
+ g.set(t, { ref: e, internals: o }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
210
190
  e.formAssociatedCallback.apply(e, [t]);
211
- }, 0), L(t);
191
+ }, 0), N(t);
212
192
  }
213
- }, V = (e) => {
193
+ }, P = (e) => {
214
194
  let t = e.parentNode;
215
- return t && t.tagName !== "FORM" && (t = V(t)), t;
216
- }, x = (e, t, o = DOMException) => {
195
+ return t && t.tagName !== "FORM" && (t = P(t)), t;
196
+ }, w = (e, t, o = DOMException) => {
217
197
  if (!e.constructor.formAssociated)
218
198
  throw new o(t);
219
- }, ot = (e, t, o) => {
220
- const i = g.get(e);
199
+ }, it = (e, t, o) => {
200
+ const i = k.get(e);
221
201
  return i && i.size && i.forEach((r) => {
222
202
  c.get(r)[o]() || (t = !1);
223
203
  }), t;
224
- }, it = (e) => {
204
+ }, rt = (e) => {
225
205
  if (e.constructor.formAssociated) {
226
206
  const t = c.get(e), { labels: o, form: i } = t;
227
- tt(e, o), et(e, i, t);
207
+ et(e, o), ot(e, i, t);
228
208
  }
229
209
  };
230
- function N() {
210
+ function O() {
231
211
  return typeof MutationObserver < "u";
232
212
  }
233
- class gt {
213
+ class wt {
234
214
  constructor() {
235
215
  this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
236
216
  }
237
217
  }
238
- const yt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), wt = (e, t, o) => (e.valid = xt(t), Object.keys(t).forEach((i) => e[i] = t[i]), o && L(o), e), xt = (e) => {
218
+ const xt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), Et = (e, t, o) => (e.valid = kt(t), Object.keys(t).forEach((i) => e[i] = t[i]), o && N(o), e), kt = (e) => {
239
219
  let t = !0;
240
220
  for (let o in e)
241
221
  o !== "valid" && e[o] !== !1 && (t = !1);
242
222
  return t;
243
- }, W = /* @__PURE__ */ new WeakMap();
244
- function rt(e, t) {
223
+ }, D = /* @__PURE__ */ new WeakMap();
224
+ function nt(e, t) {
245
225
  e.toggleAttribute(t, !0), e.part && e.part.add(t);
246
226
  }
247
- class $ extends Set {
227
+ class W extends Set {
248
228
  static get isPolyfilled() {
249
229
  return !0;
250
230
  }
251
231
  constructor(t) {
252
232
  if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
253
233
  throw new TypeError("Illegal constructor");
254
- W.set(this, t);
234
+ D.set(this, t);
255
235
  }
256
236
  add(t) {
257
237
  if (!/^--/.test(t) || typeof t != "string")
258
238
  throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
259
- const o = super.add(t), i = W.get(this), r = `state${t}`;
260
- return i.isConnected ? rt(i, r) : setTimeout(() => {
261
- rt(i, r);
239
+ const o = super.add(t), i = D.get(this), r = `state${t}`;
240
+ return i.isConnected ? nt(i, r) : setTimeout(() => {
241
+ nt(i, r);
262
242
  }), o;
263
243
  }
264
244
  clear() {
@@ -267,20 +247,20 @@ const Tt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
267
247
  super.clear();
268
248
  }
269
249
  delete(t) {
270
- const o = super.delete(t), i = W.get(this);
250
+ const o = super.delete(t), i = D.get(this);
271
251
  return i.isConnected ? (i.toggleAttribute(`state${t}`, !1), i.part && i.part.remove(`state${t}`)) : setTimeout(() => {
272
252
  i.toggleAttribute(`state${t}`, !1), i.part && i.part.remove(`state${t}`);
273
253
  }), o;
274
254
  }
275
255
  }
276
- function nt(e, t, o, i) {
256
+ function at(e, t, o, i) {
277
257
  if (o === "a" && !i)
278
258
  throw new TypeError("Private accessor was defined without a getter");
279
259
  if (typeof t == "function" ? e !== t || !i : !t.has(e))
280
260
  throw new TypeError("Cannot read private member from an object whose class did not declare it");
281
261
  return o === "m" ? i : o === "a" ? i.call(e) : i ? i.value : t.get(e);
282
262
  }
283
- function Et(e, t, o, i, r) {
263
+ function Mt(e, t, o, i, r) {
284
264
  if (i === "m")
285
265
  throw new TypeError("Private method is not writable");
286
266
  if (i === "a" && !r)
@@ -289,10 +269,10 @@ const Tt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
289
269
  throw new TypeError("Cannot write private member to an object whose class did not declare it");
290
270
  return i === "a" ? r.call(e, o) : r ? r.value = o : t.set(e, o), o;
291
271
  }
292
- var F;
293
- class kt {
272
+ var z;
273
+ class St {
294
274
  constructor(t) {
295
- F.set(this, void 0), Et(this, F, t, "f");
275
+ z.set(this, void 0), Mt(this, z, t, "f");
296
276
  for (let o = 0; o < t.length; o++) {
297
277
  let i = t[o];
298
278
  this[o] = i, i.hasAttribute("name") && (this[i.getAttribute("name")] = i);
@@ -300,10 +280,10 @@ const Tt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
300
280
  Object.freeze(this);
301
281
  }
302
282
  get length() {
303
- return nt(this, F, "f").length;
283
+ return at(this, z, "f").length;
304
284
  }
305
- [(F = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
306
- return nt(this, F, "f")[Symbol.iterator]();
285
+ [(z = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
286
+ return at(this, z, "f")[Symbol.iterator]();
307
287
  }
308
288
  item(t) {
309
289
  return this[t] == null ? null : this[t];
@@ -312,45 +292,45 @@ const Tt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
312
292
  return this[t] == null ? null : this[t];
313
293
  }
314
294
  }
315
- function Mt() {
295
+ function Ct() {
316
296
  const e = HTMLFormElement.prototype.checkValidity;
317
297
  HTMLFormElement.prototype.checkValidity = o;
318
298
  const t = HTMLFormElement.prototype.reportValidity;
319
299
  HTMLFormElement.prototype.reportValidity = i;
320
300
  function o(...s) {
321
301
  let l = e.apply(this, s);
322
- return ot(this, l, "checkValidity");
302
+ return it(this, l, "checkValidity");
323
303
  }
324
304
  function i(...s) {
325
305
  let l = t.apply(this, s);
326
- return ot(this, l, "reportValidity");
306
+ return it(this, l, "reportValidity");
327
307
  }
328
308
  const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
329
309
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
330
310
  get(...s) {
331
- const l = r.call(this, ...s), m = Array.from(g.get(this) || []);
332
- if (m.length === 0)
311
+ const l = r.call(this, ...s), u = Array.from(k.get(this) || []);
312
+ if (u.length === 0)
333
313
  return l;
334
- const d = Array.from(l).concat(m).sort((E, y) => E.compareDocumentPosition ? E.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
335
- return new kt(d);
314
+ const p = Array.from(l).concat(u).sort((x, y) => x.compareDocumentPosition ? x.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
315
+ return new St(p);
336
316
  }
337
317
  });
338
318
  }
339
- class at {
319
+ class st {
340
320
  static get isPolyfilled() {
341
321
  return !0;
342
322
  }
343
323
  constructor(t) {
344
324
  if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
345
325
  throw new TypeError("Illegal constructor");
346
- const o = t.getRootNode(), i = new gt();
347
- this.states = new $(t), n.set(this, t), a.set(this, i), c.set(t, this), dt(t, this), ht(t, this), Object.seal(this), o instanceof DocumentFragment && vt(o);
326
+ const o = t.getRootNode(), i = new wt();
327
+ this.states = new W(t), a.set(this, t), n.set(this, i), c.set(t, this), vt(t, this), mt(t, this), Object.seal(this), o instanceof DocumentFragment && pt(o);
348
328
  }
349
329
  checkValidity() {
350
- const t = n.get(this);
351
- if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
330
+ const t = a.get(this);
331
+ if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
352
332
  return !0;
353
- const o = a.get(this);
333
+ const o = n.get(this);
354
334
  if (!o.valid) {
355
335
  const i = new Event("invalid", {
356
336
  bubbles: !1,
@@ -362,76 +342,76 @@ const Tt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
362
342
  return o.valid;
363
343
  }
364
344
  get form() {
365
- const t = n.get(this);
366
- x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
345
+ const t = a.get(this);
346
+ w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
367
347
  let o;
368
- return t.constructor.formAssociated === !0 && (o = V(t)), o;
348
+ return t.constructor.formAssociated === !0 && (o = P(t)), o;
369
349
  }
370
350
  get labels() {
371
- const t = n.get(this);
372
- x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
351
+ const t = a.get(this);
352
+ w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
373
353
  const o = t.getAttribute("id"), i = t.getRootNode();
374
354
  return i && o ? i.querySelectorAll(`[for="${o}"]`) : [];
375
355
  }
376
356
  reportValidity() {
377
- const t = n.get(this);
378
- if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
357
+ const t = a.get(this);
358
+ if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
379
359
  return !0;
380
- const o = this.checkValidity(), i = U.get(this);
360
+ const o = this.checkValidity(), i = q.get(this);
381
361
  if (i && !t.constructor.formAssociated)
382
362
  throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
383
363
  return !o && i && (t.focus(), i.focus()), o;
384
364
  }
385
365
  setFormValue(t) {
386
- const o = n.get(this);
387
- if (x(o, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Y(this), t != null && !(t instanceof FormData)) {
366
+ const o = a.get(this);
367
+ if (w(o, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Z(this), t != null && !(t instanceof FormData)) {
388
368
  if (o.getAttribute("name")) {
389
- const i = Z(o, this);
369
+ const i = tt(o, this);
390
370
  i.value = t;
391
371
  }
392
372
  } else
393
373
  t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, r]) => {
394
374
  if (typeof r == "string") {
395
- const s = Z(o, this);
375
+ const s = tt(o, this);
396
376
  s.name = i, s.value = r;
397
377
  }
398
378
  });
399
- z.set(o, t);
379
+ j.set(o, t);
400
380
  }
401
381
  setValidity(t, o, i) {
402
- const r = n.get(this);
403
- if (x(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
382
+ const r = a.get(this);
383
+ if (w(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
404
384
  throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
405
- U.set(this, i);
406
- const s = a.get(this), l = {};
407
- for (const E in t)
408
- l[E] = t[E];
409
- Object.keys(l).length === 0 && yt(s);
410
- const m = Object.assign(Object.assign({}, s), l);
411
- delete m.valid;
412
- const { valid: d } = wt(s, m, this.form);
413
- if (!d && !o)
385
+ q.set(this, i);
386
+ const s = n.get(this), l = {};
387
+ for (const x in t)
388
+ l[x] = t[x];
389
+ Object.keys(l).length === 0 && xt(s);
390
+ const u = Object.assign(Object.assign({}, s), l);
391
+ delete u.valid;
392
+ const { valid: p } = Et(s, u, this.form);
393
+ if (!p && !o)
414
394
  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.");
415
- u.set(this, d ? "" : o), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : A.set(r, this);
395
+ m.set(this, p ? "" : o), r.isConnected ? (r.toggleAttribute("internals-invalid", !p), r.toggleAttribute("internals-valid", p), r.setAttribute("aria-invalid", `${!p}`)) : T.set(r, this);
416
396
  }
417
397
  get shadowRoot() {
418
- const t = n.get(this), o = j.get(t);
398
+ const t = a.get(this), o = U.get(t);
419
399
  return o || null;
420
400
  }
421
401
  get validationMessage() {
422
- const t = n.get(this);
423
- return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), u.get(this);
402
+ const t = a.get(this);
403
+ return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), m.get(this);
424
404
  }
425
405
  get validity() {
426
- const t = n.get(this);
427
- return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), a.get(this);
406
+ const t = a.get(this);
407
+ return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), n.get(this);
428
408
  }
429
409
  get willValidate() {
430
- const t = n.get(this);
431
- return x(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
410
+ const t = a.get(this);
411
+ 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"));
432
412
  }
433
413
  }
434
- function Ct() {
414
+ function zt() {
435
415
  if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
436
416
  return !1;
437
417
  class e extends HTMLElement {
@@ -455,22 +435,22 @@ const Tt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
455
435
  "reportValidity"
456
436
  ].every((i) => i in o.internals);
457
437
  }
458
- let st = !1, lt = !1;
438
+ let lt = !1, ct = !1;
459
439
  function H(e) {
460
- lt || (lt = !0, window.CustomStateSet = $, e && (HTMLElement.prototype.attachInternals = function(...t) {
440
+ ct || (ct = !0, window.CustomStateSet = W, e && (HTMLElement.prototype.attachInternals = function(...t) {
461
441
  const o = e.call(this, t);
462
- return o.states = new $(this), o;
442
+ return o.states = new W(this), o;
463
443
  }));
464
444
  }
465
- function ct(e = !0) {
466
- if (!st) {
467
- if (st = !0, typeof window < "u" && (window.ElementInternals = at), typeof CustomElementRegistry < "u") {
445
+ function dt(e = !0) {
446
+ if (!lt) {
447
+ if (lt = !0, typeof window < "u" && (window.ElementInternals = st), typeof CustomElementRegistry < "u") {
468
448
  const t = CustomElementRegistry.prototype.define;
469
449
  CustomElementRegistry.prototype.define = function(o, i, r) {
470
450
  if (i.formAssociated) {
471
451
  const s = i.prototype.connectedCallback;
472
452
  i.prototype.connectedCallback = function() {
473
- G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), s != null && s.apply(this), it(this);
453
+ J.has(this) || (J.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), s != null && s.apply(this), rt(this);
474
454
  };
475
455
  }
476
456
  t.call(this, o, i, r);
@@ -484,55 +464,77 @@ const Tt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
484
464
  return {};
485
465
  if (c.has(this))
486
466
  throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
487
- return new at(this);
467
+ return new st(this);
488
468
  }), typeof Element < "u") {
489
469
  let t = function(...i) {
490
470
  const r = o.apply(this, i);
491
- if (j.set(this, r), N()) {
471
+ if (U.set(this, r), O()) {
492
472
  const s = new MutationObserver(_);
493
- window.ShadyDOM ? s.observe(this, R) : s.observe(r, R), M.set(this, s);
473
+ window.ShadyDOM ? s.observe(this, R) : s.observe(r, R), S.set(this, s);
494
474
  }
495
475
  return r;
496
476
  };
497
477
  const o = Element.prototype.attachShadow;
498
478
  Element.prototype.attachShadow = t;
499
479
  }
500
- N() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, R), typeof HTMLFormElement < "u" && Mt(), (e || typeof window < "u" && !window.CustomStateSet) && H();
480
+ O() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, R), typeof HTMLFormElement < "u" && Ct(), (e || typeof window < "u" && !window.CustomStateSet) && H();
501
481
  }
502
482
  }
503
- return !!customElements.polyfillWrapFlushCallback || (Ct() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : ct(!1)), k.forceCustomStateSetPolyfill = H, k.forceElementInternalsPolyfill = ct, Object.defineProperty(k, "__esModule", { value: !0 }), k;
483
+ return !!customElements.polyfillWrapFlushCallback || (zt() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : dt(!1)), E.forceCustomStateSetPolyfill = H, E.forceElementInternalsPolyfill = dt, Object.defineProperty(E, "__esModule", { value: !0 }), E;
504
484
  })({});
505
485
  })();
506
- var Ot = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, p = (k, n, a, v) => {
507
- for (var c = v > 1 ? void 0 : v ? _t(n, a) : n, u = k.length - 1, w; u >= 0; u--)
508
- (w = k[u]) && (c = (v ? w(n, a, c) : w(c)) || c);
509
- return v && c && Ot(n, a, c), c;
486
+ const Lt = ["button", "a"], Vt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], qt = ["productive", "expressive"], Nt = ["submit", "button", "reset"], Pt = [
487
+ "primary",
488
+ "secondary",
489
+ "outline",
490
+ "outline-inverse",
491
+ "ghost",
492
+ "inverse",
493
+ "ghost-inverse",
494
+ "destructive",
495
+ "destructive-ghost"
496
+ ], Ot = ["leading", "trailing"], Gt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Jt = ["post", "get", "dialog"], Qt = ["_self", "_blank", "_parent", "_top"], f = {
497
+ tag: "button",
498
+ size: "medium",
499
+ type: "submit",
500
+ variant: "primary",
501
+ iconPlacement: "leading",
502
+ disabled: !1,
503
+ isLoading: !1,
504
+ isFullWidth: !1,
505
+ isResponsive: !1
506
+ }, _t = `*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:inline-flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;text-decoration:none;inline-size:var(--btn-inline-size)}.o-btn.o-btn--primary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary:active:not(:disabled),.o-btn.o-btn--primary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn.o-btn--primary.o-btn--xsmall:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.is-loading:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}@media (min-width: 769px){.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive,.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive{--btn-bg-color: var(--dt-color-interactive-brand)}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}}.o-btn.o-btn--secondary{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--secondary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn.o-btn--secondary:active:not(:disabled),.o-btn.o-btn--secondary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn.o-btn--outline{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--outline:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--outline:active:not(:disabled),.o-btn.o-btn--outline.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn.o-btn--ghost:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--ghost:active:not(:disabled),.o-btn.o-btn--ghost.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--inverse{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--inverse:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn.o-btn--inverse:active:not(:disabled),.o-btn.o-btn--inverse.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn.o-btn--ghost-inverse,.o-btn.o-btn--outline-inverse{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--ghost-inverse:hover:not(:disabled),.o-btn.o-btn--outline-inverse:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn.o-btn--ghost-inverse:active:not(:disabled),.o-btn.o-btn--ghost-inverse.is-loading:not(:disabled),.o-btn.o-btn--outline-inverse:active:not(:disabled),.o-btn.o-btn--outline-inverse.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn.o-btn--outline-inverse:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--destructive{--btn-bg-color: var(--dt-color-support-error)}.o-btn.o-btn--destructive:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn.o-btn--destructive:active:not(:disabled),.o-btn.o-btn--destructive.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn.o-btn--destructive-ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn.o-btn--destructive-ghost:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--destructive-ghost:active:not(:disabled),.o-btn.o-btn--destructive-ghost.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--xsmall{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--responsive{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--expressive{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn.o-btn--small-expressive{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--responsive{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--small-productive{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--responsive{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--medium{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--responsive{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--large{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.o-btn.o-btn--fullWidth{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not(.o-btn--ghost,.o-btn--ghost-inverse,.o-btn--destructive-ghost){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled].o-btn--outline{border-color:var(--dt-color-disabled-01)!important}.o-btn.is-loading>*:not(pie-spinner){visibility:hidden}.o-btn.is-loading pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}
507
+ `;
508
+ var Rt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, h = (E, a, n, d) => {
509
+ for (var c = d > 1 ? void 0 : d ? $t(a, n) : a, m = E.length - 1, g; m >= 0; m--)
510
+ (g = E[m]) && (c = (d ? g(a, n, c) : g(c)) || c);
511
+ return d && c && Rt(a, n, c), c;
510
512
  };
511
- const S = "pie-button";
512
- class b extends At(zt) {
513
+ const C = "pie-button";
514
+ class b extends It(Ft) {
513
515
  constructor() {
514
- super(...arguments), this.size = f.size, this.type = f.type, this.variant = f.variant, this.iconPlacement = f.iconPlacement, this.disabled = f.disabled, this.isLoading = f.isLoading, this.isFullWidth = f.isFullWidth, this.isResponsive = f.isResponsive, this._handleFormKeyDown = (n) => {
515
- if (!(n.key !== "Enter" || this.type !== "submit" || this.disabled)) {
516
- if (n.target instanceof HTMLElement) {
517
- const a = n.target.tagName.toLowerCase();
518
- if (a === "button" || a === "pie-button")
516
+ super(...arguments), this.tag = f.tag, this.size = f.size, this.type = f.type, this.variant = f.variant, this.iconPlacement = f.iconPlacement, this.disabled = f.disabled, this.isLoading = f.isLoading, this.isFullWidth = f.isFullWidth, this.isResponsive = f.isResponsive, this._handleFormKeyDown = (a) => {
517
+ if (!(a.key !== "Enter" || this.type !== "submit" || this.disabled)) {
518
+ if (a.target instanceof HTMLElement) {
519
+ const n = a.target.tagName.toLowerCase();
520
+ if (n === "button" || n === "pie-button")
519
521
  return;
520
522
  }
521
- n.preventDefault(), this._handleClick();
523
+ a.preventDefault(), this._handleClick();
522
524
  }
523
525
  };
524
526
  }
525
527
  connectedCallback() {
526
- var n;
527
- super.connectedCallback(), this.type === "submit" && ((n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown));
528
+ var a;
529
+ super.connectedCallback(), this.type === "submit" && ((a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown));
528
530
  }
529
531
  disconnectedCallback() {
530
- var n;
531
- super.disconnectedCallback(), this.type === "submit" && ((n = this.form) == null || n.removeEventListener("keydown", this._handleFormKeyDown));
532
+ var a;
533
+ super.disconnectedCallback(), this.type === "submit" && ((a = this.form) == null || a.removeEventListener("keydown", this._handleFormKeyDown));
532
534
  }
533
- updated(n) {
534
- var a, v;
535
- super.updated(n), n.has("type") && (this.type === "submit" ? (a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown) : (v = this.form) == null || v.removeEventListener("keydown", this._handleFormKeyDown));
535
+ updated(a) {
536
+ var n, d;
537
+ a.has("type") && (this.type === "submit" ? (n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown) : (d = this.form) == null || d.removeEventListener("keydown", this._handleFormKeyDown));
536
538
  }
537
539
  /**
538
540
  * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
@@ -542,14 +544,14 @@ class b extends At(zt) {
542
544
  *
543
545
  * TODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin.
544
546
  */
545
- _simulateNativeButtonClick(n) {
547
+ _simulateNativeButtonClick(a) {
546
548
  if (!this.form)
547
549
  return;
548
- const a = document.createElement("button");
549
- a.type = n, a.style.position = "absolute", a.style.width = "1px", a.style.height = "1px", a.style.padding = "0", a.style.margin = "-1px", a.style.overflow = "hidden", a.style.border = "0", a.style.whiteSpace = "nowrap", n === "submit" && (this.name && (a.name = this.name), this.value && (a.value = this.value), this.formaction && a.setAttribute("formaction", this.formaction), this.formenctype && a.setAttribute("formenctype", this.formenctype), this.formmethod && a.setAttribute("formmethod", this.formmethod), this.formnovalidate && a.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && a.setAttribute("formtarget", this.formtarget)), this.form.append(a), a.click(), a.remove();
550
+ const n = document.createElement("button");
551
+ n.type = a, n.style.position = "absolute", n.style.width = "1px", n.style.height = "1px", n.style.padding = "0", n.style.margin = "-1px", n.style.overflow = "hidden", n.style.border = "0", n.style.whiteSpace = "nowrap", a === "submit" && (this.name && (n.name = this.name), this.value && (n.value = this.value), this.formaction && n.setAttribute("formaction", this.formaction), this.formenctype && n.setAttribute("formenctype", this.formenctype), this.formmethod && n.setAttribute("formmethod", this.formmethod), this.formnovalidate && n.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && n.setAttribute("formtarget", this.formtarget)), this.form.append(n), n.click(), n.remove();
550
552
  }
551
553
  _handleClick() {
552
- !this.isLoading && this.form && (this.type === "submit" && (this.formnovalidate || this.form.reportValidity()) && this._simulateNativeButtonClick("submit"), this.type === "reset" && this._simulateNativeButtonClick("reset"));
554
+ this.form && (this.isLoading || this.tag === "button" && (this.type === "submit" ? (this.formnovalidate || this.form.reportValidity()) && this._simulateNativeButtonClick("submit") : this.type === "reset" && this._simulateNativeButtonClick("reset")));
553
555
  }
554
556
  /**
555
557
  * Template for the loading state
@@ -557,114 +559,154 @@ class b extends At(zt) {
557
559
  * @private
558
560
  */
559
561
  renderSpinner() {
560
- const { size: n, variant: a, disabled: v } = this, c = n && n.includes("small") ? "small" : "medium";
561
- let u;
562
- return v ? u = a === "ghost-inverse" ? "inverse" : "secondary" : u = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", P`
563
- <pie-spinner
564
- size="${c}"
565
- variant="${u}">
566
- </pie-spinner>`;
562
+ const { size: a, variant: n, disabled: d } = this, c = a && a.includes("small") ? "small" : "medium";
563
+ let m;
564
+ return d ? m = n === "ghost-inverse" ? "inverse" : "secondary" : m = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", M`
565
+ <pie-spinner
566
+ size="${c}"
567
+ variant="${m}">
568
+ </pie-spinner>`;
567
569
  }
568
- render() {
570
+ renderAnchor(a) {
569
571
  const {
570
- type: n,
571
- disabled: a,
572
- isFullWidth: v,
573
- variant: c,
574
- size: u,
575
- isLoading: w,
576
- isResponsive: M,
577
- iconPlacement: g,
578
- responsiveSize: z
579
- } = this, C = {
580
- "o-btn": !0,
581
- "o-btn--fullWidth": v,
582
- "o-btn--responsive": M,
583
- [`o-btn--${z}`]: !!(M && z),
584
- [`o-btn--${c}`]: !0,
585
- [`o-btn--${u}`]: !0,
586
- "is-loading": w
572
+ href: n,
573
+ iconPlacement: d,
574
+ rel: c,
575
+ target: m
576
+ } = this;
577
+ return M`
578
+ <a
579
+ href="${K(n)}"
580
+ rel="${K(c)}"
581
+ target="${K(m)}"
582
+ class="${bt(a)}">
583
+ ${d === "leading" ? M`<slot name="icon"></slot>` : F}
584
+ <slot></slot>
585
+ ${d === "trailing" ? M`<slot name="icon"></slot>` : F}
586
+ </a>`;
587
+ }
588
+ renderButton(a) {
589
+ const {
590
+ disabled: n,
591
+ iconPlacement: d,
592
+ isLoading: c,
593
+ type: m
594
+ } = this, g = {
595
+ ...a,
596
+ "is-loading": c
587
597
  };
588
- return P`
598
+ return M`
589
599
  <button
590
600
  @click=${this._handleClick}
591
- class=${St(C)}
592
- type=${n || "submit"}
593
- ?disabled=${a}>
594
- ${w ? this.renderSpinner() : K}
595
- ${g === "leading" ? P`<slot name="icon"></slot>` : K}
601
+ class=${bt(g)}
602
+ type=${m}
603
+ ?disabled=${n}>
604
+ ${c ? this.renderSpinner() : F}
605
+ ${d === "leading" ? M`<slot name="icon"></slot>` : F}
596
606
  <slot></slot>
597
- ${g === "trailing" ? P`<slot name="icon"></slot>` : K}
607
+ ${d === "trailing" ? M`<slot name="icon"></slot>` : F}
598
608
  </button>`;
599
609
  }
610
+ render() {
611
+ const {
612
+ isFullWidth: a,
613
+ isResponsive: n,
614
+ responsiveSize: d,
615
+ size: c,
616
+ tag: m,
617
+ variant: g
618
+ } = this, S = {
619
+ "o-btn": !0,
620
+ "o-btn--fullWidth": a,
621
+ "o-btn--responsive": n,
622
+ [`o-btn--${d}`]: !!(n && d),
623
+ [`o-btn--${g}`]: !0,
624
+ [`o-btn--${c}`]: !0
625
+ };
626
+ return m === "a" ? this.renderAnchor(S) : this.renderButton(S);
627
+ }
600
628
  focus() {
601
- var n, a;
602
- (a = (n = this.shadowRoot) == null ? void 0 : n.querySelector("button")) == null || a.focus();
629
+ var a, n;
630
+ (n = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button")) == null || n.focus();
603
631
  }
604
632
  }
605
- b.styles = Ft(Pt);
606
- p([
607
- h(),
608
- O(S, Tt, f.size)
633
+ b.styles = At(_t);
634
+ h([
635
+ v({ type: String }),
636
+ A(C, Lt, f.tag)
637
+ ], b.prototype, "tag", 2);
638
+ h([
639
+ v({ type: String }),
640
+ A(C, Vt, f.size)
609
641
  ], b.prototype, "size", 2);
610
- p([
611
- h(),
612
- O(S, Lt, f.type)
642
+ h([
643
+ v({ type: String }),
644
+ A(C, Nt, f.type)
613
645
  ], b.prototype, "type", 2);
614
- p([
615
- h(),
616
- O(S, Vt, f.variant)
646
+ h([
647
+ v({ type: String }),
648
+ A(C, Pt, f.variant)
617
649
  ], b.prototype, "variant", 2);
618
- p([
619
- h({ type: String }),
620
- O(S, Nt, f.iconPlacement)
650
+ h([
651
+ v({ type: String }),
652
+ A(C, Ot, f.iconPlacement)
621
653
  ], b.prototype, "iconPlacement", 2);
622
- p([
623
- h({ type: Boolean })
654
+ h([
655
+ v({ type: Boolean })
624
656
  ], b.prototype, "disabled", 2);
625
- p([
626
- h({ type: Boolean, reflect: !0 })
657
+ h([
658
+ v({ type: Boolean, reflect: !0 })
627
659
  ], b.prototype, "isLoading", 2);
628
- p([
629
- h({ type: Boolean })
660
+ h([
661
+ v({ type: Boolean })
630
662
  ], b.prototype, "isFullWidth", 2);
631
- p([
632
- h({ type: Boolean })
663
+ h([
664
+ v({ type: Boolean })
633
665
  ], b.prototype, "isResponsive", 2);
634
- p([
635
- h({ type: String })
666
+ h([
667
+ v({ type: String })
636
668
  ], b.prototype, "name", 2);
637
- p([
638
- h({ type: String })
669
+ h([
670
+ v({ type: String })
639
671
  ], b.prototype, "value", 2);
640
- p([
641
- h()
672
+ h([
673
+ v({ type: String })
642
674
  ], b.prototype, "formaction", 2);
643
- p([
644
- h()
675
+ h([
676
+ v({ type: String })
645
677
  ], b.prototype, "formenctype", 2);
646
- p([
647
- h()
678
+ h([
679
+ v({ type: String })
648
680
  ], b.prototype, "formmethod", 2);
649
- p([
650
- h({ type: Boolean })
681
+ h([
682
+ v({ type: Boolean })
651
683
  ], b.prototype, "formnovalidate", 2);
652
- p([
653
- h()
684
+ h([
685
+ v({ type: String })
654
686
  ], b.prototype, "formtarget", 2);
655
- p([
656
- h({ type: String })
687
+ h([
688
+ v({ type: String })
657
689
  ], b.prototype, "responsiveSize", 2);
658
- It(S, b);
690
+ h([
691
+ v({ type: String })
692
+ ], b.prototype, "href", 2);
693
+ h([
694
+ v({ type: String })
695
+ ], b.prototype, "rel", 2);
696
+ h([
697
+ v({ type: String })
698
+ ], b.prototype, "target", 2);
699
+ Tt(C, b);
659
700
  export {
660
701
  b as PieButton,
661
702
  f as defaultProps,
662
- jt as formEncodingtypes,
663
- Ut as formMethodTypes,
664
- qt as formTargetTypes,
665
- Nt as iconPlacements,
666
- Kt as responsiveSizes,
667
- Tt as sizes,
668
- Lt as types,
669
- Vt as variants
703
+ Gt as formEncodingtypes,
704
+ Jt as formMethodTypes,
705
+ Qt as formTargetTypes,
706
+ Ot as iconPlacements,
707
+ qt as responsiveSizes,
708
+ Vt as sizes,
709
+ Lt as tags,
710
+ Nt as types,
711
+ Pt as variants
670
712
  };