@justeattakeaway/pie-button 0.31.0 → 0.32.0

package/dist/index.js

@@ -1,22 +1,21 @@
-import { unsafeCSS as g, LitElement as f, html as p, nothing as h } from "lit";
-import { property as c } from "lit/decorators.js";
-const b = (v, r, t) => function(o, e) {
-  const i = `#${e}`;
-  Object.defineProperty(o, e, {
+import { unsafeCSS as wt, LitElement as Et, html as R, nothing as ot } from "lit";
+import { property as f } from "lit/decorators.js";
+const N = (v, c, a) => function(m, y) {
+  const b = `#${y}`;
+  Object.defineProperty(m, y, {
     get() {
-      return this[i];
+      return this[b];
     },
-    set(l) {
-      const m = this[i];
-      r.includes(l) ? this[i] = l : (console.error(
-        `<${v}> Invalid value "${l}" provided for property "${e}".`,
-        `Must be one of: ${r.join(" | ")}.`,
-        `Falling back to default value: "${t}"`
-      ), this[i] = t), this.requestUpdate(e, m);
+    set(h) {
+      const A = this[b];
+      c.includes(h) ? this[b] = h : (console.error(
+        `<${v}> Invalid value "${h}" provided for property "${y}".`,
+        `Must be one of: ${c.join(" | ")}.`,
+        `Falling back to default value: "${a}"`
+      ), this[b] = a), this.requestUpdate(y, A);
     }
   });
-}, u = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--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);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-icon-size: 24px;--spinner-size-s: 20px;--spinner-size-m: 24px;--spinner-border-width-s: 2.5px;--spinner-border-width-m: 3px;--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m);--spinner-base-color-h: var(--dt-color-content-interactive-primary-h);--spinner-base-color-s: var(--dt-color-content-interactive-primary-s);--spinner-base-color-l: var(--dt-color-content-interactive-primary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;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;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=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[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]: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[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--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[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--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)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=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[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]: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[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=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[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]: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[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=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[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]: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[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=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[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]: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[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=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[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]: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[variant=outline-inverse]{border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=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[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]: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[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=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[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]: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[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=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);--btn-icon-size: 16px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-expressive]{--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);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-productive]{--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);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=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);--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m)}.o-btn[isLoading]:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count)}.o-btn[isLoading]>*{visibility:hidden}.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(--btn-icon-size);width:var(--btn-icon-size)}
-`, y = ["xsmall", "small-productive", "small-expressive", "medium", "large"], z = ["submit", "button", "reset", "menu"], x = [
+}, xt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Mt = ["submit", "button", "reset"], kt = [
   "primary",
   "secondary",
   "outline",
@@ -26,77 +25,599 @@ const b = (v, r, t) => function(o, e) {
   "ghost-inverse",
   "destructive",
   "destructive-ghost"
-], w = ["leading", "trailing"];
-var k = Object.defineProperty, L = Object.getOwnPropertyDescriptor, s = (v, r, t, a) => {
-  for (var o = a > 1 ? void 0 : a ? L(r, t) : r, e = v.length - 1, i; e >= 0; e--)
-    (i = v[e]) && (o = (a ? i(r, t, o) : i(o)) || o);
-  return a && o && k(r, t, o), o;
+], zt = ["leading", "trailing"], Tt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], St = ["post", "get", "dialog"], Vt = ["_self", "_blank", "_parent", "_top"], At = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--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);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-icon-size: 24px;--spinner-size-s: 20px;--spinner-size-m: 24px;--spinner-border-width-s: 2.5px;--spinner-border-width-m: 3px;--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m);--spinner-base-color-h: var(--dt-color-content-interactive-primary-h);--spinner-base-color-s: var(--dt-color-content-interactive-primary-s);--spinner-base-color-l: var(--dt-color-content-interactive-primary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;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;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=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[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]: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[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--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[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--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)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=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[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]: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[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=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[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]: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[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=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[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]: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[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=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[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]: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[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=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[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]: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[variant=outline-inverse]{border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=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[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]: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[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=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[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]: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[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=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);--btn-icon-size: 16px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-expressive]{--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);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-productive]{--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);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=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);--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m)}.o-btn[isLoading]:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count)}.o-btn[isLoading]>*{visibility:hidden}.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(--btn-icon-size);width:var(--btn-icon-size)}
+`;
+(function() {
+  const v = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), C = {
+    ariaAtomic: "aria-atomic",
+    ariaAutoComplete: "aria-autocomplete",
+    ariaBusy: "aria-busy",
+    ariaChecked: "aria-checked",
+    ariaColCount: "aria-colcount",
+    ariaColIndex: "aria-colindex",
+    ariaColIndexText: "aria-colindextext",
+    ariaColSpan: "aria-colspan",
+    ariaCurrent: "aria-current",
+    ariaDisabled: "aria-disabled",
+    ariaExpanded: "aria-expanded",
+    ariaHasPopup: "aria-haspopup",
+    ariaHidden: "aria-hidden",
+    ariaInvalid: "aria-invalid",
+    ariaKeyShortcuts: "aria-keyshortcuts",
+    ariaLabel: "aria-label",
+    ariaLevel: "aria-level",
+    ariaLive: "aria-live",
+    ariaModal: "aria-modal",
+    ariaMultiLine: "aria-multiline",
+    ariaMultiSelectable: "aria-multiselectable",
+    ariaOrientation: "aria-orientation",
+    ariaPlaceholder: "aria-placeholder",
+    ariaPosInSet: "aria-posinset",
+    ariaPressed: "aria-pressed",
+    ariaReadOnly: "aria-readonly",
+    ariaRelevant: "aria-relevant",
+    ariaRequired: "aria-required",
+    ariaRoleDescription: "aria-roledescription",
+    ariaRowCount: "aria-rowcount",
+    ariaRowIndex: "aria-rowindex",
+    ariaRowIndexText: "aria-rowindextext",
+    ariaRowSpan: "aria-rowspan",
+    ariaSelected: "aria-selected",
+    ariaSetSize: "aria-setsize",
+    ariaSort: "aria-sort",
+    ariaValueMax: "aria-valuemax",
+    ariaValueMin: "aria-valuemin",
+    ariaValueNow: "aria-valuenow",
+    ariaValueText: "aria-valuetext",
+    role: "role"
+  }, it = (r, t) => {
+    for (let e in C) {
+      t[e] = null;
+      let o = null;
+      const i = C[e];
+      Object.defineProperty(t, e, {
+        get() {
+          return o;
+        },
+        set(s) {
+          o = s, r.isConnected ? r.setAttribute(i, s) : F.set(r, t);
+        }
+      });
+    }
+  };
+  function q(r) {
+    const t = l.get(r), { form: e } = t;
+    Q(r, e, t), J(r, t.labels);
+  }
+  const U = (r, t = !1) => {
+    const e = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
+      acceptNode(s) {
+        return l.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+      }
+    });
+    let o = e.nextNode();
+    const i = !t || r.disabled;
+    for (; o; )
+      o.formDisabledCallback && i && $(o, r.disabled), o = e.nextNode();
+  }, j = { attributes: !0, attributeFilter: ["disabled", "name"] }, M = S() ? new MutationObserver((r) => {
+    for (const t of r) {
+      const e = t.target;
+      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && U(e)), t.attributeName === "name" && e.constructor.formAssociated) {
+        const o = l.get(e), i = A.get(e);
+        o.setFormValue(i);
+      }
+    }
+  }) : {};
+  function P(r) {
+    r.forEach((t) => {
+      const { addedNodes: e, removedNodes: o } = t, i = Array.from(e), s = Array.from(o);
+      i.forEach((n) => {
+        var u;
+        if (l.has(n) && n.constructor.formAssociated && q(n), F.has(n)) {
+          const d = F.get(n);
+          Object.keys(C).filter((w) => d[w] !== null).forEach((w) => {
+            n.setAttribute(C[w], d[w]);
+          }), F.delete(n);
+        }
+        if (L.has(n)) {
+          const d = L.get(n);
+          n.setAttribute("internals-valid", d.validity.valid.toString()), n.setAttribute("internals-invalid", (!d.validity.valid).toString()), n.setAttribute("aria-invalid", (!d.validity.valid).toString()), L.delete(n);
+        }
+        if (n.localName === "form") {
+          const d = h.get(n), x = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
+            acceptNode(rt) {
+              return l.has(rt) && !(d && d.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+            }
+          });
+          let w = x.nextNode();
+          for (; w; )
+            q(w), w = x.nextNode();
+        }
+        n.localName === "fieldset" && ((u = M.observe) == null || u.call(M, n, j), U(n, !0));
+      }), s.forEach((n) => {
+        const u = l.get(n);
+        u && a.get(u) && K(u), b.has(n) && b.get(n).disconnect();
+      });
+    });
+  }
+  function at(r) {
+    r.forEach((t) => {
+      const { removedNodes: e } = t;
+      e.forEach((o) => {
+        const i = D.get(t.target);
+        l.has(o) && Y(o), i.disconnect();
+      });
+    });
+  }
+  const nt = (r) => {
+    var e;
+    const t = new MutationObserver(at);
+    (e = t.observe) == null || e.call(t, r, { childList: !0 }), D.set(r, t);
+  };
+  S() && new MutationObserver(P);
+  const _ = {
+    childList: !0,
+    subtree: !0
+  }, $ = (r, t) => {
+    r.toggleAttribute("internals-disabled", t), t ? r.setAttribute("aria-disabled", "true") : r.removeAttribute("aria-disabled"), r.formDisabledCallback && r.formDisabledCallback.apply(r, [t]);
+  }, K = (r) => {
+    a.get(r).forEach((e) => {
+      e.remove();
+    }), a.set(r, []);
+  }, G = (r, t) => {
+    const e = document.createElement("input");
+    return e.type = "hidden", e.name = r.getAttribute("name"), r.after(e), a.get(t).push(e), e;
+  }, st = (r, t) => {
+    var e;
+    a.set(t, []), (e = M.observe) == null || e.call(M, r, j);
+  }, J = (r, t) => {
+    if (t.length) {
+      Array.from(t).forEach((o) => o.addEventListener("click", r.click.bind(r)));
+      let e = t[0].id;
+      t[0].id || (e = `${t[0].htmlFor}_Label`, t[0].id = e), r.setAttribute("aria-labelledby", e);
+    }
+  }, I = (r) => {
+    const t = Array.from(r.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), e = h.get(r) || [], o = Array.from(e).filter((s) => s.isConnected).map((s) => l.get(s).validity.valid), i = [...t, ...o].includes(!1);
+    r.toggleAttribute("internals-invalid", i), r.toggleAttribute("internals-valid", !i);
+  }, lt = (r) => {
+    I(T(r.target));
+  }, ct = (r) => {
+    I(T(r.target));
+  }, dt = (r) => {
+    const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((e) => `${e}:not([disabled])`).map((e) => `${e}:not([form])${r.id ? `,${e}[form='${r.id}']` : ""}`).join(",");
+    r.addEventListener("click", (e) => {
+      if (e.target.closest(t)) {
+        const i = h.get(r);
+        if (r.noValidate)
+          return;
+        i.size && Array.from(i).reverse().map((u) => l.get(u).reportValidity()).includes(!1) && e.preventDefault();
+      }
+    });
+  }, vt = (r) => {
+    const t = h.get(r.target);
+    t && t.size && t.forEach((e) => {
+      e.constructor.formAssociated && e.formResetCallback && e.formResetCallback.apply(e);
+    });
+  }, Q = (r, t, e) => {
+    if (t) {
+      const o = h.get(t);
+      if (o)
+        o.add(r);
+      else {
+        const i = /* @__PURE__ */ new Set();
+        i.add(r), h.set(t, i), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
+      }
+      y.set(t, { ref: r, internals: e }), r.constructor.formAssociated && r.formAssociatedCallback && setTimeout(() => {
+        r.formAssociatedCallback.apply(r, [t]);
+      }, 0), I(t);
+    }
+  }, T = (r) => {
+    let t = r.parentNode;
+    return t && t.tagName !== "FORM" && (t = T(t)), t;
+  }, E = (r, t, e = DOMException) => {
+    if (!r.constructor.formAssociated)
+      throw new e(t);
+  }, X = (r, t, e) => {
+    const o = h.get(r);
+    return o && o.size && o.forEach((i) => {
+      l.get(i)[e]() || (t = !1);
+    }), t;
+  }, Y = (r) => {
+    if (r.constructor.formAssociated) {
+      const t = l.get(r), { labels: e, form: o } = t;
+      J(r, e), Q(r, o, t);
+    }
+  };
+  function S() {
+    return typeof MutationObserver < "u";
+  }
+  class pt {
+    constructor() {
+      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);
+    }
+  }
+  const ht = (r) => (r.badInput = !1, r.customError = !1, r.patternMismatch = !1, r.rangeOverflow = !1, r.rangeUnderflow = !1, r.stepMismatch = !1, r.tooLong = !1, r.tooShort = !1, r.typeMismatch = !1, r.valid = !0, r.valueMissing = !1, r), mt = (r, t, e) => (r.valid = bt(t), Object.keys(t).forEach((o) => r[o] = t[o]), e && I(e), r), bt = (r) => {
+    let t = !0;
+    for (let e in r)
+      e !== "valid" && r[e] !== !1 && (t = !1);
+    return t;
+  }, O = /* @__PURE__ */ new WeakMap();
+  function Z(r, t) {
+    r.toggleAttribute(t, !0), r.part && r.part.add(t);
+  }
+  class V extends Set {
+    static get isPolyfilled() {
+      return !0;
+    }
+    constructor(t) {
+      if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
+        throw new TypeError("Illegal constructor");
+      O.set(this, t);
+    }
+    add(t) {
+      if (!/^--/.test(t) || typeof t != "string")
+        throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
+      const e = super.add(t), o = O.get(this), i = `state${t}`;
+      return o.isConnected ? Z(o, i) : setTimeout(() => {
+        Z(o, i);
+      }), e;
+    }
+    clear() {
+      for (let [t] of this.entries())
+        this.delete(t);
+      super.clear();
+    }
+    delete(t) {
+      const e = super.delete(t), o = O.get(this);
+      return o.isConnected ? (o.toggleAttribute(`state${t}`, !1), o.part && o.part.remove(`state${t}`)) : setTimeout(() => {
+        o.toggleAttribute(`state${t}`, !1), o.part && o.part.remove(`state${t}`);
+      }), e;
+    }
+  }
+  function tt(r, t, e, o) {
+    if (e === "a" && !o)
+      throw new TypeError("Private accessor was defined without a getter");
+    if (typeof t == "function" ? r !== t || !o : !t.has(r))
+      throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return e === "m" ? o : e === "a" ? o.call(r) : o ? o.value : t.get(r);
+  }
+  function ut(r, t, e, o, i) {
+    if (o === "m")
+      throw new TypeError("Private method is not writable");
+    if (o === "a" && !i)
+      throw new TypeError("Private accessor was defined without a setter");
+    if (typeof t == "function" ? r !== t || !i : !t.has(r))
+      throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return o === "a" ? i.call(r, e) : i ? i.value = e : t.set(r, e), e;
+  }
+  var k;
+  class ft {
+    constructor(t) {
+      k.set(this, void 0), ut(this, k, t, "f");
+      for (let e = 0; e < t.length; e++) {
+        let o = t[e];
+        this[e] = o, o.hasAttribute("name") && (this[o.getAttribute("name")] = o);
+      }
+      Object.freeze(this);
+    }
+    get length() {
+      return tt(this, k, "f").length;
+    }
+    [(k = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+      return tt(this, k, "f")[Symbol.iterator]();
+    }
+    item(t) {
+      return this[t] == null ? null : this[t];
+    }
+    namedItem(t) {
+      return this[t] == null ? null : this[t];
+    }
+  }
+  function gt() {
+    const r = HTMLFormElement.prototype.checkValidity;
+    HTMLFormElement.prototype.checkValidity = e;
+    const t = HTMLFormElement.prototype.reportValidity;
+    HTMLFormElement.prototype.reportValidity = o;
+    function e(...s) {
+      let n = r.apply(this, s);
+      return X(this, n, "checkValidity");
+    }
+    function o(...s) {
+      let n = t.apply(this, s);
+      return X(this, n, "reportValidity");
+    }
+    const { get: i } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
+    Object.defineProperty(HTMLFormElement.prototype, "elements", {
+      get(...s) {
+        const n = i.call(this, ...s), u = Array.from(h.get(this) || []);
+        if (u.length === 0)
+          return n;
+        const d = Array.from(n).concat(u).sort((x, w) => x.compareDocumentPosition ? x.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
+        return new ft(d);
+      }
+    });
+  }
+  class et {
+    static get isPolyfilled() {
+      return !0;
+    }
+    constructor(t) {
+      if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
+        throw new TypeError("Illegal constructor");
+      const e = t.getRootNode(), o = new pt();
+      this.states = new V(t), v.set(this, t), c.set(this, o), l.set(t, this), it(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && nt(e);
+    }
+    checkValidity() {
+      const t = v.get(this);
+      if (E(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+        return !0;
+      const e = c.get(this);
+      if (!e.valid) {
+        const o = new Event("invalid", {
+          bubbles: !1,
+          cancelable: !0,
+          composed: !1
+        });
+        t.dispatchEvent(o);
+      }
+      return e.valid;
+    }
+    get form() {
+      const t = v.get(this);
+      E(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
+      let e;
+      return t.constructor.formAssociated === !0 && (e = T(t)), e;
+    }
+    get labels() {
+      const t = v.get(this);
+      E(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
+      const e = t.getAttribute("id"), o = t.getRootNode();
+      return o && e ? o.querySelectorAll(`[for="${e}"]`) : [];
+    }
+    reportValidity() {
+      const t = v.get(this);
+      if (E(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+        return !0;
+      const e = this.checkValidity(), o = H.get(this);
+      if (o && !t.constructor.formAssociated)
+        throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
+      return !e && o && (t.focus(), o.focus()), e;
+    }
+    setFormValue(t) {
+      const e = v.get(this);
+      if (E(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), K(this), t != null && !(t instanceof FormData)) {
+        if (e.getAttribute("name")) {
+          const o = G(e, this);
+          o.value = t;
+        }
+      } else
+        t != null && t instanceof FormData && Array.from(t).reverse().forEach(([o, i]) => {
+          if (typeof i == "string") {
+            const s = G(e, this);
+            s.name = o, s.value = i;
+          }
+        });
+      A.set(e, t);
+    }
+    setValidity(t, e, o) {
+      const i = v.get(this);
+      if (E(i, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
+        throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
+      H.set(this, o);
+      const s = c.get(this), n = {};
+      for (const x in t)
+        n[x] = t[x];
+      Object.keys(n).length === 0 && ht(s);
+      const u = { ...s, ...n };
+      delete u.valid;
+      const { valid: d } = mt(s, u, this.form);
+      if (!d && !e)
+        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.");
+      m.set(this, d ? "" : e), i.isConnected ? (i.toggleAttribute("internals-invalid", !d), i.toggleAttribute("internals-valid", d), i.setAttribute("aria-invalid", `${!d}`)) : L.set(i, this);
+    }
+    get shadowRoot() {
+      const t = v.get(this), e = W.get(t);
+      return e || null;
+    }
+    get validationMessage() {
+      const t = v.get(this);
+      return E(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), m.get(this);
+    }
+    get validity() {
+      const t = v.get(this);
+      return E(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), c.get(this);
+    }
+    get willValidate() {
+      const t = v.get(this);
+      return E(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"));
+    }
+  }
+  function yt() {
+    if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
+      return !1;
+    class r extends HTMLElement {
+      constructor() {
+        super(), this.internals = this.attachInternals();
+      }
+    }
+    const t = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, "")}`;
+    customElements.define(t, r);
+    const e = new r();
+    return [
+      "shadowRoot",
+      "form",
+      "willValidate",
+      "validity",
+      "validationMessage",
+      "labels",
+      "setFormValue",
+      "setValidity",
+      "checkValidity",
+      "reportValidity"
+    ].every((o) => o in e.internals);
+  }
+  if (yt()) {
+    if (typeof window < "u" && !window.CustomStateSet) {
+      window.CustomStateSet = V;
+      const r = HTMLElement.prototype.attachInternals;
+      HTMLElement.prototype.attachInternals = function(...t) {
+        const e = r.call(this, t);
+        return e.states = new V(this), e;
+      };
+    }
+  } else {
+    if (typeof window < "u" && (window.ElementInternals = et), typeof CustomElementRegistry < "u") {
+      const r = CustomElementRegistry.prototype.define;
+      CustomElementRegistry.prototype.define = function(t, e, o) {
+        if (e.formAssociated) {
+          const i = e.prototype.connectedCallback;
+          e.prototype.connectedCallback = function() {
+            B.has(this) || (B.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), i != null && i.apply(this), Y(this);
+          };
+        }
+        r.call(this, t, e, o);
+      };
+    }
+    if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
+      if (this.tagName) {
+        if (this.tagName.indexOf("-") === -1)
+          throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
+      } else
+        return {};
+      if (l.has(this))
+        throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
+      return new et(this);
+    }), typeof Element < "u") {
+      let r = function(...e) {
+        const o = t.apply(this, e);
+        if (W.set(this, o), S()) {
+          const i = new MutationObserver(P);
+          window.ShadyDOM ? i.observe(this, _) : i.observe(o, _), b.set(this, i);
+        }
+        return o;
+      };
+      const t = Element.prototype.attachShadow;
+      Element.prototype.attachShadow = r;
+    }
+    S() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" && gt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
+  }
+})();
+var Ft = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, g = (v, c, a, l) => {
+  for (var m = l > 1 ? void 0 : l ? Lt(c, a) : c, y = v.length - 1, b; y >= 0; y--)
+    (b = v[y]) && (m = (l ? b(c, a, m) : b(m)) || m);
+  return l && m && Ft(c, a, m), m;
 };
-const d = "pie-button";
-class n extends f {
+const z = "pie-button";
+class p extends Et {
   constructor() {
-    super(...arguments), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1;
+    super(), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this._internals = this.attachInternals();
+  }
+  get form() {
+    return this._internals.form;
+  }
+  /**
+   * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
+   * This is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM
+   * should be neglible, however this should be monitored.
+   * This is the only viable way of guaranteeing native button behaviour when using a web component in place of an actual HTML button.
+   *
+   * TODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin.
+   */
+  _simulateNativeButtonClick(c) {
+    if (!this.form)
+      return;
+    const a = document.createElement("button");
+    a.type = c, 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", c === "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();
+  }
+  _handleClick() {
+    !this.isLoading && this.form && (this.type === "submit" && (this.formnovalidate || this.form.reportValidity()) && this._simulateNativeButtonClick("submit"), this.type === "reset" && this._simulateNativeButtonClick("reset"));
   }
   render() {
     const {
-      type: r,
-      disabled: t,
-      isFullWidth: a,
-      variant: o,
-      size: e,
-      isLoading: i,
-      iconPlacement: l
+      type: c,
+      disabled: a,
+      isFullWidth: l,
+      variant: m,
+      size: y,
+      isLoading: b,
+      iconPlacement: h
     } = this;
-    return p`
+    return R`
             <button
+                @click=${this._handleClick}
                 class="o-btn"
-                type=${r}
-                variant=${o}
-                size=${e}
-                ?disabled=${t}
-                ?isFullWidth=${a}
-                ?isLoading=${i}>
-                    ${l === "leading" ? p`<slot name="icon"></slot>` : h}
+                type=${c}
+                variant=${m}
+                size=${y}
+                ?disabled=${a}
+                ?isFullWidth=${l}
+                ?isLoading=${b}>
+                    ${h === "leading" ? R`<slot name="icon"></slot>` : ot}
                     <slot></slot>
-                    ${l === "trailing" ? p`<slot name="icon"></slot>` : h}
+                    ${h === "trailing" ? R`<slot name="icon"></slot>` : ot}
             </button>`;
   }
   focus() {
-    var r, t;
-    (t = (r = this.shadowRoot) == null ? void 0 : r.querySelector("button")) == null || t.focus();
+    var c, a;
+    (a = (c = this.shadowRoot) == null ? void 0 : c.querySelector("button")) == null || a.focus();
   }
 }
-n.styles = g(u);
-s([
-  c(),
-  b(d, y, "medium")
-], n.prototype, "size", 2);
-s([
-  c(),
-  b(d, z, "submit")
-], n.prototype, "type", 2);
-s([
-  c(),
-  b(d, x, "primary")
-], n.prototype, "variant", 2);
-s([
-  c({ type: String }),
-  b(d, w, "leading")
-], n.prototype, "iconPlacement", 2);
-s([
-  c({ type: Boolean })
-], n.prototype, "disabled", 2);
-s([
-  c({ type: Boolean, reflect: !0 })
-], n.prototype, "isLoading", 2);
-s([
-  c({ type: Boolean })
-], n.prototype, "isFullWidth", 2);
-customElements.define(d, n);
+p.formAssociated = !0;
+p.styles = wt(At);
+g([
+  f(),
+  N(z, xt, "medium")
+], p.prototype, "size", 2);
+g([
+  f(),
+  N(z, Mt, "submit")
+], p.prototype, "type", 2);
+g([
+  f(),
+  N(z, kt, "primary")
+], p.prototype, "variant", 2);
+g([
+  f({ type: String }),
+  N(z, zt, "leading")
+], p.prototype, "iconPlacement", 2);
+g([
+  f({ type: Boolean })
+], p.prototype, "disabled", 2);
+g([
+  f({ type: Boolean, reflect: !0 })
+], p.prototype, "isLoading", 2);
+g([
+  f({ type: Boolean })
+], p.prototype, "isFullWidth", 2);
+g([
+  f({ type: String })
+], p.prototype, "name", 2);
+g([
+  f({ type: String })
+], p.prototype, "value", 2);
+g([
+  f()
+], p.prototype, "formaction", 2);
+g([
+  f()
+], p.prototype, "formenctype", 2);
+g([
+  f()
+], p.prototype, "formmethod", 2);
+g([
+  f({ type: Boolean })
+], p.prototype, "formnovalidate", 2);
+g([
+  f()
+], p.prototype, "formtarget", 2);
+customElements.define(z, p);
 export {
-  n as PieButton,
-  w as iconPlacements,
-  y as sizes,
-  z as types,
-  x as variants
+  p as PieButton,
+  Tt as formEncodingtypes,
+  St as formMethodTypes,
+  Vt as formTargetTypes,
+  zt as iconPlacements,
+  xt as sizes,
+  Mt as types,
+  kt as variants
 };