@justeattakeaway/pie-button 0.36.1 → 0.37.0

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
-import type { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
 
 export declare interface ButtonProps {
     /**
@@ -118,6 +118,12 @@ export declare class PieButton extends LitElement implements ButtonProps {
     private _simulateNativeButtonClick;
     private _handleClick;
     private _handleFormKeyDown;
+    /**
+     * Template for the loading state
+     *
+     * @private
+     */
+    private renderSpinner;
     render(): TemplateResult<1>;
     focus(): void;
     static styles: CSSResult;

package/dist/index.js

@@ -1,25 +1,25 @@
-import { unsafeCSS as wt, LitElement as Et, html as O, nothing as ot } from "lit";
-import { property as f } from "lit/decorators.js";
-const N = (d, n, a) => function(m, y) {
-  const b = `#${y}`;
-  Object.defineProperty(m, y, {
+import { unsafeCSS as st, LitElement as lt, html as M, nothing as P } from "lit";
+import { property as b } from "lit/decorators.js";
+const _ = (c, a, i) => function(v, p) {
+  const h = `#${p}`;
+  Object.defineProperty(v, p, {
     get() {
-      return this[b];
+      return this[h];
     },
-    set(p) {
-      const L = this[b];
-      n.includes(p) ? this[b] = p : (console.error(
-        `<${d}> Invalid value "${p}" provided for property "${y}".`,
-        `Must be one of: ${n.join(" | ")}.`,
-        `Falling back to default value: "${a}"`
-      ), this[b] = a), this.requestUpdate(y, L);
+    set(u) {
+      const L = this[h];
+      a.includes(u) ? this[h] = u : (console.error(
+        `<${c}> Invalid value "${u}" provided for property "${p}".`,
+        `Must be one of: ${a.join(" | ")}.`,
+        `Falling back to default value: "${i}"`
+      ), this[h] = i), this.requestUpdate(p, L);
     }
   });
 };
-function xt(d, n) {
-  customElements.get(d) ? console.warn(`PIE Web Component: "${d}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(d, n);
+function Ct(c, a) {
+  customElements.get(c) ? console.warn(`PIE Web Component: "${c}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(c, a);
 }
-const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Mt = ["submit", "button", "reset"], Ct = [
+const Ft = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Lt = ["submit", "button", "reset"], At = [
   "primary",
   "secondary",
   "outline",
@@ -29,10 +29,10 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
   "ghost-inverse",
   "destructive",
   "destructive-ghost"
-], Lt = ["leading", "trailing"], St = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Vt = ["post", "get", "dialog"], Nt = ["_self", "_blank", "_parent", "_top"], Ft = `*,*: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-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--btn-height: var(--btn-height--medium);--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;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;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-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[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-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)))}.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-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);--btn-icon-size: 16px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-expressive],.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-icon-size: 20px;--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)}.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)}.o-btn[size=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);--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)}
+], It = ["leading", "trailing"], Ht = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], jt = ["post", "get", "dialog"], Bt = ["_self", "_blank", "_parent", "_top"], Tt = `*,*:before,*:after{box-sizing:border-box}.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-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--btn-height: var(--btn-height--medium);--btn-icon-size: 24px;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;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;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-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[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-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)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.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)}.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)}.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)}.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)}.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-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);--btn-icon-size: 16px}.o-btn[size=small-expressive],.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-icon-size: 20px}.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)}.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)}.o-btn[size=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)}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] 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(--btn-icon-size);width:var(--btn-icon-size)}
 `;
 (function() {
-  const d = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), A = {
+  const c = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), i = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), T = {
     ariaAtomic: "aria-atomic",
     ariaAutoComplete: "aria-autocomplete",
     ariaBusy: "aria-busy",
@@ -74,196 +74,196 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     ariaValueNow: "aria-valuenow",
     ariaValueText: "aria-valuetext",
     role: "role"
-  }, it = (r, t) => {
-    for (let e in A) {
+  }, dt = (r, t) => {
+    for (let e in T) {
       t[e] = null;
       let o = null;
-      const i = A[e];
+      const n = T[e];
       Object.defineProperty(t, e, {
         get() {
           return o;
         },
-        set(l) {
-          o = l, r.isConnected ? r.setAttribute(i, l) : F.set(r, t);
+        set(d) {
+          o = d, r.isConnected ? r.setAttribute(n, d) : A.set(r, t);
         }
       });
     }
   };
-  function K(r) {
-    const t = c.get(r), { form: e } = t;
-    Q(r, e, t), J(r, t.labels);
+  function G(r) {
+    const t = s.get(r), { form: e } = t;
+    tt(r, e, t), Z(r, t.labels);
   }
-  const q = (r, t = !1) => {
+  const J = (r, t = !1) => {
     const e = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
-      acceptNode(l) {
-        return c.has(l) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+      acceptNode(d) {
+        return s.has(d) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
       }
     });
     let o = e.nextNode();
-    const i = !t || r.disabled;
+    const n = !t || r.disabled;
     for (; o; )
-      o.formDisabledCallback && i && $(o, r.disabled), o = e.nextNode();
-  }, U = { attributes: !0, attributeFilter: ["disabled", "name"] }, k = S() ? new MutationObserver((r) => {
+      o.formDisabledCallback && n && R(o, r.disabled), o = e.nextNode();
+  }, Q = { attributes: !0, attributeFilter: ["disabled", "name"] }, k = $() ? 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" && q(e)), t.attributeName === "name" && e.constructor.formAssociated) {
-        const o = c.get(e), i = L.get(e);
-        o.setFormValue(i);
+      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? R(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && J(e)), t.attributeName === "name" && e.constructor.formAssociated) {
+        const o = s.get(e), n = L.get(e);
+        o.setFormValue(n);
       }
     }
   }) : {};
-  function P(r) {
+  function O(r) {
     r.forEach((t) => {
-      const { addedNodes: e, removedNodes: o } = t, i = Array.from(e), l = Array.from(o);
-      i.forEach((s) => {
-        var u;
-        if (c.has(s) && s.constructor.formAssociated && K(s), F.has(s)) {
-          const v = F.get(s);
-          Object.keys(A).filter((w) => v[w] !== null).forEach((w) => {
-            s.setAttribute(A[w], v[w]);
-          }), F.delete(s);
+      const { addedNodes: e, removedNodes: o } = t, n = Array.from(e), d = Array.from(o);
+      n.forEach((l) => {
+        var g;
+        if (s.has(l) && l.constructor.formAssociated && G(l), A.has(l)) {
+          const m = A.get(l);
+          Object.keys(T).filter((w) => m[w] !== null).forEach((w) => {
+            l.setAttribute(T[w], m[w]);
+          }), A.delete(l);
         }
-        if (z.has(s)) {
-          const v = z.get(s);
-          s.setAttribute("internals-valid", v.validity.valid.toString()), s.setAttribute("internals-invalid", (!v.validity.valid).toString()), s.setAttribute("aria-invalid", (!v.validity.valid).toString()), z.delete(s);
+        if (I.has(l)) {
+          const m = I.get(l);
+          l.setAttribute("internals-valid", m.validity.valid.toString()), l.setAttribute("internals-invalid", (!m.validity.valid).toString()), l.setAttribute("aria-invalid", (!m.validity.valid).toString()), I.delete(l);
         }
-        if (s.localName === "form") {
-          const v = p.get(s), x = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
-            acceptNode(rt) {
-              return c.has(rt) && !(v && v.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+        if (l.localName === "form") {
+          const m = u.get(l), E = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
+            acceptNode(nt) {
+              return s.has(nt) && !(m && m.has(nt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
             }
           });
-          let w = x.nextNode();
+          let w = E.nextNode();
           for (; w; )
-            K(w), w = x.nextNode();
+            G(w), w = E.nextNode();
         }
-        s.localName === "fieldset" && ((u = k.observe) == null || u.call(k, s, U), q(s, !0));
-      }), l.forEach((s) => {
-        const u = c.get(s);
-        u && a.get(u) && j(u), b.has(s) && b.get(s).disconnect();
+        l.localName === "fieldset" && ((g = k.observe) == null || g.call(k, l, Q), J(l, !0));
+      }), d.forEach((l) => {
+        const g = s.get(l);
+        g && i.get(g) && X(g), h.has(l) && h.get(l).disconnect();
       });
     });
   }
-  function at(r) {
+  function vt(r) {
     r.forEach((t) => {
       const { removedNodes: e } = t;
       e.forEach((o) => {
-        const i = H.get(t.target);
-        c.has(o) && Y(o), i.disconnect();
+        const n = q.get(t.target);
+        s.has(o) && rt(o), n.disconnect();
       });
     });
   }
-  const nt = (r) => {
+  const ht = (r) => {
     var e;
-    const t = new MutationObserver(at);
-    (e = t.observe) == null || e.call(t, r, { childList: !0 }), H.set(r, t);
+    const t = new MutationObserver(vt);
+    (e = t.observe) == null || e.call(t, r, { childList: !0 }), q.set(r, t);
   };
-  S() && new MutationObserver(P);
-  const _ = {
+  $() && new MutationObserver(O);
+  const D = {
     childList: !0,
     subtree: !0
-  }, $ = (r, t) => {
+  }, R = (r, t) => {
     r.toggleAttribute("internals-disabled", t), t ? r.setAttribute("aria-disabled", "true") : r.removeAttribute("aria-disabled"), r.formDisabledCallback && r.formDisabledCallback.apply(r, [t]);
-  }, j = (r) => {
-    a.get(r).forEach((e) => {
+  }, X = (r) => {
+    i.get(r).forEach((e) => {
       e.remove();
-    }), a.set(r, []);
-  }, G = (r, t) => {
+    }), i.set(r, []);
+  }, Y = (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) => {
+    return e.type = "hidden", e.name = r.getAttribute("name"), r.after(e), i.get(t).push(e), e;
+  }, pt = (r, t) => {
     var e;
-    a.set(t, []), (e = k.observe) == null || e.call(k, r, U);
-  }, J = (r, t) => {
+    i.set(t, []), (e = k.observe) == null || e.call(k, r, Q);
+  }, Z = (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((l) => !l.tagName.includes("-") && l.validity).map((l) => l.validity.valid), e = p.get(r) || [], o = Array.from(e).filter((l) => l.isConnected).map((l) => c.get(l).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) => {
+  }, S = (r) => {
+    const t = Array.from(r.elements).filter((d) => !d.tagName.includes("-") && d.validity).map((d) => d.validity.valid), e = u.get(r) || [], o = Array.from(e).filter((d) => d.isConnected).map((d) => s.get(d).validity.valid), n = [...t, ...o].includes(!1);
+    r.toggleAttribute("internals-invalid", n), r.toggleAttribute("internals-valid", !n);
+  }, mt = (r) => {
+    S(V(r.target));
+  }, ut = (r) => {
+    S(V(r.target));
+  }, bt = (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 = p.get(r);
+        const n = u.get(r);
         if (r.noValidate)
           return;
-        i.size && Array.from(i).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && e.preventDefault();
+        n.size && Array.from(n).reverse().map((g) => s.get(g).reportValidity()).includes(!1) && e.preventDefault();
       }
     });
-  }, vt = (r) => {
-    const t = p.get(r.target);
+  }, ft = (r) => {
+    const t = u.get(r.target);
     t && t.size && t.forEach((e) => {
       e.constructor.formAssociated && e.formResetCallback && e.formResetCallback.apply(e);
     });
-  }, Q = (r, t, e) => {
+  }, tt = (r, t, e) => {
     if (t) {
-      const o = p.get(t);
+      const o = u.get(t);
       if (o)
         o.add(r);
       else {
-        const i = /* @__PURE__ */ new Set();
-        i.add(r), p.set(t, i), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
+        const n = /* @__PURE__ */ new Set();
+        n.add(r), u.set(t, n), bt(t), t.addEventListener("reset", ft), t.addEventListener("input", mt), t.addEventListener("change", ut);
       }
-      y.set(t, { ref: r, internals: e }), r.constructor.formAssociated && r.formAssociatedCallback && setTimeout(() => {
+      p.set(t, { ref: r, internals: e }), r.constructor.formAssociated && r.formAssociatedCallback && setTimeout(() => {
         r.formAssociatedCallback.apply(r, [t]);
-      }, 0), I(t);
+      }, 0), S(t);
     }
-  }, T = (r) => {
+  }, V = (r) => {
     let t = r.parentNode;
-    return t && t.tagName !== "FORM" && (t = T(t)), t;
-  }, E = (r, t, e = DOMException) => {
+    return t && t.tagName !== "FORM" && (t = V(t)), t;
+  }, x = (r, t, e = DOMException) => {
     if (!r.constructor.formAssociated)
       throw new e(t);
-  }, X = (r, t, e) => {
-    const o = p.get(r);
-    return o && o.size && o.forEach((i) => {
-      c.get(i)[e]() || (t = !1);
+  }, et = (r, t, e) => {
+    const o = u.get(r);
+    return o && o.size && o.forEach((n) => {
+      s.get(n)[e]() || (t = !1);
     }), t;
-  }, Y = (r) => {
+  }, rt = (r) => {
     if (r.constructor.formAssociated) {
-      const t = c.get(r), { labels: e, form: o } = t;
-      J(r, e), Q(r, o, t);
+      const t = s.get(r), { labels: e, form: o } = t;
+      Z(r, e), tt(r, o, t);
     }
   };
-  function S() {
+  function $() {
     return typeof MutationObserver < "u";
   }
-  class ht {
+  class gt {
     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 pt = (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) => {
+  const yt = (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), wt = (r, t, e) => (r.valid = xt(t), Object.keys(t).forEach((o) => r[o] = t[o]), e && S(e), r), xt = (r) => {
     let t = !0;
     for (let e in r)
       e !== "valid" && r[e] !== !1 && (t = !1);
     return t;
-  }, D = /* @__PURE__ */ new WeakMap();
-  function Z(r, t) {
+  }, W = /* @__PURE__ */ new WeakMap();
+  function ot(r, t) {
     r.toggleAttribute(t, !0), r.part && r.part.add(t);
   }
-  class V extends Set {
+  class N extends Set {
     static get isPolyfilled() {
       return !0;
     }
     constructor(t) {
       if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
         throw new TypeError("Illegal constructor");
-      D.set(this, t);
+      W.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 = D.get(this), i = `state${t}`;
-      return o.isConnected ? Z(o, i) : setTimeout(() => {
-        Z(o, i);
+      const e = super.add(t), o = W.get(this), n = `state${t}`;
+      return o.isConnected ? ot(o, n) : setTimeout(() => {
+        ot(o, n);
       }), e;
     }
     clear() {
@@ -272,32 +272,32 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       super.clear();
     }
     delete(t) {
-      const e = super.delete(t), o = D.get(this);
+      const e = super.delete(t), o = W.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) {
+  function it(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) {
+  function Et(r, t, e, o, n) {
     if (o === "m")
       throw new TypeError("Private method is not writable");
-    if (o === "a" && !i)
+    if (o === "a" && !n)
       throw new TypeError("Private accessor was defined without a setter");
-    if (typeof t == "function" ? r !== t || !i : !t.has(r))
+    if (typeof t == "function" ? r !== t || !n : !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;
+    return o === "a" ? n.call(r, e) : n ? n.value = e : t.set(r, e), e;
   }
-  var M;
-  class ft {
+  var z;
+  class kt {
     constructor(t) {
-      M.set(this, void 0), ut(this, M, t, "f");
+      z.set(this, void 0), Et(this, z, 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);
@@ -305,10 +305,10 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       Object.freeze(this);
     }
     get length() {
-      return tt(this, M, "f").length;
+      return it(this, z, "f").length;
     }
-    [(M = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-      return tt(this, M, "f")[Symbol.iterator]();
+    [(z = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+      return it(this, z, "f")[Symbol.iterator]();
     }
     item(t) {
       return this[t] == null ? null : this[t];
@@ -317,45 +317,45 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       return this[t] == null ? null : this[t];
     }
   }
-  function gt() {
+  function Mt() {
     const r = HTMLFormElement.prototype.checkValidity;
     HTMLFormElement.prototype.checkValidity = e;
     const t = HTMLFormElement.prototype.reportValidity;
     HTMLFormElement.prototype.reportValidity = o;
-    function e(...l) {
-      let s = r.apply(this, l);
-      return X(this, s, "checkValidity");
+    function e(...d) {
+      let l = r.apply(this, d);
+      return et(this, l, "checkValidity");
     }
-    function o(...l) {
-      let s = t.apply(this, l);
-      return X(this, s, "reportValidity");
+    function o(...d) {
+      let l = t.apply(this, d);
+      return et(this, l, "reportValidity");
     }
-    const { get: i } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
+    const { get: n } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
     Object.defineProperty(HTMLFormElement.prototype, "elements", {
-      get(...l) {
-        const s = i.call(this, ...l), u = Array.from(p.get(this) || []);
-        if (u.length === 0)
-          return s;
-        const v = Array.from(s).concat(u).sort((x, w) => x.compareDocumentPosition ? x.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
-        return new ft(v);
+      get(...d) {
+        const l = n.call(this, ...d), g = Array.from(u.get(this) || []);
+        if (g.length === 0)
+          return l;
+        const m = Array.from(l).concat(g).sort((E, w) => E.compareDocumentPosition ? E.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
+        return new kt(m);
       }
     });
   }
-  class et {
+  class at {
     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 ht();
-      this.states = new V(t), d.set(this, t), n.set(this, o), c.set(t, this), it(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && nt(e);
+      const e = t.getRootNode(), o = new gt();
+      this.states = new N(t), c.set(this, t), a.set(this, o), s.set(t, this), dt(t, this), pt(t, this), Object.seal(this), e instanceof DocumentFragment && ht(e);
     }
     checkValidity() {
-      const t = d.get(this);
-      if (E(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+      const t = c.get(this);
+      if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
         return !0;
-      const e = n.get(this);
+      const e = a.get(this);
       if (!e.valid) {
         const o = new Event("invalid", {
           bubbles: !1,
@@ -367,76 +367,76 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       return e.valid;
     }
     get form() {
-      const t = d.get(this);
-      E(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
+      const t = c.get(this);
+      x(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;
+      return t.constructor.formAssociated === !0 && (e = V(t)), e;
     }
     get labels() {
-      const t = d.get(this);
-      E(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
+      const t = c.get(this);
+      x(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 = d.get(this);
-      if (E(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+      const t = c.get(this);
+      if (x(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 = W.get(this);
+      const e = this.checkValidity(), o = K.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 = d.get(this);
-      if (E(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), j(this), t != null && !(t instanceof FormData)) {
+      const e = c.get(this);
+      if (x(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), X(this), t != null && !(t instanceof FormData)) {
         if (e.getAttribute("name")) {
-          const o = G(e, this);
+          const o = Y(e, this);
           o.value = t;
         }
       } else
-        t != null && t instanceof FormData && Array.from(t).reverse().forEach(([o, i]) => {
-          if (typeof i == "string") {
-            const l = G(e, this);
-            l.name = o, l.value = i;
+        t != null && t instanceof FormData && Array.from(t).reverse().forEach(([o, n]) => {
+          if (typeof n == "string") {
+            const d = Y(e, this);
+            d.name = o, d.value = n;
           }
         });
       L.set(e, t);
     }
     setValidity(t, e, o) {
-      const i = d.get(this);
-      if (E(i, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
+      const n = c.get(this);
+      if (x(n, "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.");
-      W.set(this, o);
-      const l = n.get(this), s = {};
-      for (const x in t)
-        s[x] = t[x];
-      Object.keys(s).length === 0 && pt(l);
-      const u = { ...l, ...s };
-      delete u.valid;
-      const { valid: v } = mt(l, u, this.form);
-      if (!v && !e)
+      K.set(this, o);
+      const d = a.get(this), l = {};
+      for (const E in t)
+        l[E] = t[E];
+      Object.keys(l).length === 0 && yt(d);
+      const g = { ...d, ...l };
+      delete g.valid;
+      const { valid: m } = wt(d, g, this.form);
+      if (!m && !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, v ? "" : e), i.isConnected ? (i.toggleAttribute("internals-invalid", !v), i.toggleAttribute("internals-valid", v), i.setAttribute("aria-invalid", `${!v}`)) : z.set(i, this);
+      v.set(this, m ? "" : e), n.isConnected ? (n.toggleAttribute("internals-invalid", !m), n.toggleAttribute("internals-valid", m), n.setAttribute("aria-invalid", `${!m}`)) : I.set(n, this);
     }
     get shadowRoot() {
-      const t = d.get(this), e = R.get(t);
+      const t = c.get(this), e = B.get(t);
       return e || null;
     }
     get validationMessage() {
-      const t = d.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);
+      const t = c.get(this);
+      return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), v.get(this);
     }
     get validity() {
-      const t = d.get(this);
-      return E(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), n.get(this);
+      const t = c.get(this);
+      return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), a.get(this);
     }
     get willValidate() {
-      const t = d.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"));
+      const t = c.get(this);
+      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"));
     }
   }
-  function yt() {
+  function zt() {
     if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
       return !1;
     class r extends HTMLElement {
@@ -460,23 +460,23 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       "reportValidity"
     ].every((o) => o in e.internals);
   }
-  if (yt()) {
+  if (zt()) {
     if (typeof window < "u" && !window.CustomStateSet) {
-      window.CustomStateSet = V;
+      window.CustomStateSet = N;
       const r = HTMLElement.prototype.attachInternals;
       HTMLElement.prototype.attachInternals = function(...t) {
         const e = r.call(this, t);
-        return e.states = new V(this), e;
+        return e.states = new N(this), e;
       };
     }
   } else {
-    if (typeof window < "u" && (window.ElementInternals = et), typeof CustomElementRegistry < "u") {
+    if (typeof window < "u" && (window.ElementInternals = at), typeof CustomElementRegistry < "u") {
       const r = CustomElementRegistry.prototype.define;
       CustomElementRegistry.prototype.define = function(t, e, o) {
         if (e.formAssociated) {
-          const i = e.prototype.connectedCallback;
+          const n = 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);
+            U.has(this) || (U.set(this, !0), this.hasAttribute("disabled") && R(this, !0)), n != null && n.apply(this), rt(this);
           };
         }
         r.call(this, t, e, o);
@@ -488,40 +488,98 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
           throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
       } else
         return {};
-      if (c.has(this))
+      if (s.has(this))
         throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
-      return new et(this);
+      return new at(this);
     }), typeof Element < "u") {
       let r = function(...e) {
         const o = t.apply(this, e);
-        if (R.set(this, o), S()) {
-          const i = new MutationObserver(P);
-          window.ShadyDOM ? i.observe(this, _) : i.observe(o, _), b.set(this, i);
+        if (B.set(this, o), $()) {
+          const n = new MutationObserver(O);
+          window.ShadyDOM ? n.observe(this, D) : n.observe(o, D), h.set(this, n);
         }
         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);
+    $() && typeof document < "u" && new MutationObserver(O).observe(document.documentElement, D), typeof HTMLFormElement < "u" && Mt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = N);
   }
 })();
-var zt = Object.defineProperty, At = Object.getOwnPropertyDescriptor, g = (d, n, a, c) => {
-  for (var m = c > 1 ? void 0 : c ? At(n, a) : n, y = d.length - 1, b; y >= 0; y--)
-    (b = d[y]) && (m = (c ? b(n, a, m) : b(m)) || m);
-  return c && m && zt(n, a, m), m;
+const ct = (c, a, i) => function(s, v) {
+  const p = `#${v}`;
+  Object.defineProperty(s, v, {
+    get() {
+      return this[p];
+    },
+    set(h) {
+      const u = this[p];
+      a.includes(h) ? this[p] = h : (console.error(
+        `<${c}> Invalid value "${h}" provided for property "${v}".`,
+        `Must be one of: ${a.join(" | ")}.`,
+        `Falling back to default value: "${i}"`
+      ), this[p] = i), this.requestUpdate(v, u);
+    }
+  });
+};
+function St(c, a) {
+  customElements.get(c) ? console.warn(`PIE Web Component: "${c}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(c, a);
+}
+const Vt = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-spinner{--spinner-size: 24px;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), .35);block-size:var(--spinner-size);inline-size:var(--spinner-size);border-radius:var(--dt-radius-rounded-e);border-width:calc(var(--spinner-size) / 8);border-style:solid;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);will-change:transform;animation:rotate360 1.15s linear infinite;--spinner-base-color-h: var(--dt-color-content-brand-h);--spinner-base-color-s: var(--dt-color-content-brand-s);--spinner-base-color-l: var(--dt-color-content-brand-l)}.c-spinner[variant=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)}.c-spinner[variant=inverse]{--spinner-base-color-h: var(--dt-color-content-inverse-h);--spinner-base-color-s: var(--dt-color-content-inverse-s);--spinner-base-color-l: var(--dt-color-content-inverse-l)}.c-spinner[size=xs]{--spinner-size: 16px}.c-spinner[size=s]{--spinner-size: 20px}.c-spinner[size=l]{--spinner-size: 32px}.c-spinner[size=xl]{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}
+`, $t = ["xs", "s", "m", "l", "xl"], Nt = ["brand", "secondary", "inverse"];
+var Pt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, H = (c, a, i, s) => {
+  for (var v = s > 1 ? void 0 : s ? _t(a, i) : a, p = c.length - 1, h; p >= 0; p--)
+    (h = c[p]) && (v = (s ? h(a, i, v) : h(v)) || v);
+  return s && v && Pt(a, i, v), v;
+};
+const j = "pie-spinner";
+class C extends lt {
+  constructor() {
+    super(...arguments), this.size = "m", this.variant = "brand";
+  }
+  render() {
+    const { variant: a, size: i, aria: s } = this;
+    return M`
+            <div 
+                data-test-id="pie-spinner"
+                class="c-spinner"
+                role="status"
+                aria-live="polite"
+                size="${i}"
+                variant="${a}">
+                   ${s != null && s.label ? M`<span class="c-spinner-label">${s.label}</span>` : P}
+                </div>`;
+  }
+}
+C.styles = st(Vt);
+H([
+  b({ type: Object })
+], C.prototype, "aria", 2);
+H([
+  b(),
+  ct(j, $t, "m")
+], C.prototype, "size", 2);
+H([
+  b(),
+  ct(j, Nt, "brand")
+], C.prototype, "variant", 2);
+St(j, C);
+var Ot = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, y = (c, a, i, s) => {
+  for (var v = s > 1 ? void 0 : s ? Dt(a, i) : a, p = c.length - 1, h; p >= 0; p--)
+    (h = c[p]) && (v = (s ? h(a, i, v) : h(v)) || v);
+  return s && v && Ot(a, i, v), v;
 };
-const C = "pie-button";
-class h extends Et {
+const F = "pie-button";
+class f extends lt {
   constructor() {
-    super(), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this._handleFormKeyDown = (n) => {
-      if (!(n.key !== "Enter" || this.type !== "submit" || this.disabled)) {
-        if (n.target instanceof HTMLElement) {
-          const a = n.target.tagName.toLowerCase();
-          if (a === "button" || a === "pie-button")
+    super(), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this._handleFormKeyDown = (a) => {
+      if (!(a.key !== "Enter" || this.type !== "submit" || this.disabled)) {
+        if (a.target instanceof HTMLElement) {
+          const i = a.target.tagName.toLowerCase();
+          if (i === "button" || i === "pie-button")
             return;
         }
-        n.preventDefault(), this._handleClick();
+        a.preventDefault(), this._handleClick();
       }
     }, this._internals = this.attachInternals();
   }
@@ -529,16 +587,16 @@ class h extends Et {
     return this._internals.form;
   }
   connectedCallback() {
-    var n;
-    super.connectedCallback(), this.type === "submit" && ((n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown));
+    var a;
+    super.connectedCallback(), this.type === "submit" && ((a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown));
   }
   disconnectedCallback() {
-    var n;
-    super.disconnectedCallback(), this.type === "submit" && ((n = this.form) == null || n.removeEventListener("keydown", this._handleFormKeyDown));
+    var a;
+    super.disconnectedCallback(), this.type === "submit" && ((a = this.form) == null || a.removeEventListener("keydown", this._handleFormKeyDown));
   }
-  updated(n) {
-    var a, c;
-    super.updated(n), n.has("type") && (this.type === "submit" ? (a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown) : (c = this.form) == null || c.removeEventListener("keydown", this._handleFormKeyDown));
+  updated(a) {
+    var i, s;
+    super.updated(a), a.has("type") && (this.type === "submit" ? (i = this.form) == null || i.addEventListener("keydown", this._handleFormKeyDown) : (s = this.form) == null || s.removeEventListener("keydown", this._handleFormKeyDown));
   }
   /**
    * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
@@ -548,101 +606,115 @@ class h extends Et {
    *
    * TODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin.
    */
-  _simulateNativeButtonClick(n) {
+  _simulateNativeButtonClick(a) {
     if (!this.form)
       return;
-    const a = document.createElement("button");
-    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();
+    const i = document.createElement("button");
+    i.type = a, i.style.position = "absolute", i.style.width = "1px", i.style.height = "1px", i.style.padding = "0", i.style.margin = "-1px", i.style.overflow = "hidden", i.style.border = "0", i.style.whiteSpace = "nowrap", a === "submit" && (this.name && (i.name = this.name), this.value && (i.value = this.value), this.formaction && i.setAttribute("formaction", this.formaction), this.formenctype && i.setAttribute("formenctype", this.formenctype), this.formmethod && i.setAttribute("formmethod", this.formmethod), this.formnovalidate && i.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && i.setAttribute("formtarget", this.formtarget)), this.form.append(i), i.click(), i.remove();
   }
   _handleClick() {
     !this.isLoading && this.form && (this.type === "submit" && (this.formnovalidate || this.form.reportValidity()) && this._simulateNativeButtonClick("submit"), this.type === "reset" && this._simulateNativeButtonClick("reset"));
   }
+  /**
+   * Template for the loading state
+   *
+   * @private
+   */
+  renderSpinner() {
+    const a = this.size.includes("small") ? "s" : "m", s = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary";
+    return M`
+                    <pie-spinner
+                        size="${a}"
+                        variant="${s}"
+                    </pie-spinner>`;
+  }
   render() {
     const {
-      type: n,
-      disabled: a,
-      isFullWidth: c,
-      variant: m,
-      size: y,
-      isLoading: b,
-      iconPlacement: p
+      type: a,
+      disabled: i,
+      isFullWidth: s,
+      variant: v,
+      size: p,
+      isLoading: h,
+      iconPlacement: u
     } = this;
-    return O`
+    return M`
             <button
                 @click=${this._handleClick}
                 class="o-btn"
-                type=${n}
-                variant=${m}
-                size=${y}
-                ?disabled=${a}
-                ?isFullWidth=${c}
-                ?isLoading=${b}>
-                    ${p === "leading" ? O`<slot name="icon"></slot>` : ot}
+                type=${a}
+                variant=${v}
+                size=${p}
+                ?disabled=${i}
+                ?isFullWidth=${s}
+                ?isLoading=${h}>
+                    ${h ? this.renderSpinner() : P}
+                    ${u === "leading" ? M`<slot name="icon"></slot>` : P}
                     <slot></slot>
-                    ${p === "trailing" ? O`<slot name="icon"></slot>` : ot}
+                    ${u === "trailing" ? M`<slot name="icon"></slot>` : P}
             </button>`;
   }
   focus() {
-    var n, a;
-    (a = (n = this.shadowRoot) == null ? void 0 : n.querySelector("button")) == null || a.focus();
+    var a, i;
+    (i = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button")) == null || i.focus();
   }
 }
-h.formAssociated = !0;
-h.styles = wt(Ft);
-g([
-  f(),
-  N(C, kt, "medium")
-], h.prototype, "size", 2);
-g([
-  f(),
-  N(C, Mt, "submit")
-], h.prototype, "type", 2);
-g([
-  f(),
-  N(C, Ct, "primary")
-], h.prototype, "variant", 2);
-g([
-  f({ type: String }),
-  N(C, Lt, "leading")
-], h.prototype, "iconPlacement", 2);
-g([
-  f({ type: Boolean })
-], h.prototype, "disabled", 2);
-g([
-  f({ type: Boolean, reflect: !0 })
-], h.prototype, "isLoading", 2);
-g([
-  f({ type: Boolean })
-], h.prototype, "isFullWidth", 2);
-g([
-  f({ type: String })
-], h.prototype, "name", 2);
-g([
-  f({ type: String })
-], h.prototype, "value", 2);
-g([
-  f()
-], h.prototype, "formaction", 2);
-g([
-  f()
-], h.prototype, "formenctype", 2);
-g([
-  f()
-], h.prototype, "formmethod", 2);
-g([
-  f({ type: Boolean })
-], h.prototype, "formnovalidate", 2);
-g([
-  f()
-], h.prototype, "formtarget", 2);
-xt(C, h);
+f.formAssociated = !0;
+f.styles = st(Tt);
+y([
+  b(),
+  _(F, Ft, "medium")
+], f.prototype, "size", 2);
+y([
+  b(),
+  _(F, Lt, "submit")
+], f.prototype, "type", 2);
+y([
+  b(),
+  _(F, At, "primary")
+], f.prototype, "variant", 2);
+y([
+  b({ type: String }),
+  _(F, It, "leading")
+], f.prototype, "iconPlacement", 2);
+y([
+  b({ type: Boolean })
+], f.prototype, "disabled", 2);
+y([
+  b({ type: Boolean, reflect: !0 })
+], f.prototype, "isLoading", 2);
+y([
+  b({ type: Boolean })
+], f.prototype, "isFullWidth", 2);
+y([
+  b({ type: String })
+], f.prototype, "name", 2);
+y([
+  b({ type: String })
+], f.prototype, "value", 2);
+y([
+  b()
+], f.prototype, "formaction", 2);
+y([
+  b()
+], f.prototype, "formenctype", 2);
+y([
+  b()
+], f.prototype, "formmethod", 2);
+y([
+  b({ type: Boolean })
+], f.prototype, "formnovalidate", 2);
+y([
+  b()
+], f.prototype, "formtarget", 2);
+Ct(F, f);
 export {
-  h as PieButton,
-  St as formEncodingtypes,
-  Vt as formMethodTypes,
-  Nt as formTargetTypes,
-  Lt as iconPlacements,
-  kt as sizes,
-  Mt as types,
-  Ct as variants
+  f as PieButton,
+  Ht as formEncodingtypes,
+  jt as formMethodTypes,
+  Bt as formTargetTypes,
+  It as iconPlacements,
+  Ft as sizes,
+  Lt as types,
+  At as variants
 };

package/dist/react.d.ts

@@ -2,7 +2,7 @@ import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
 import type { ReactWebComponent } from '@lit-labs/react';
-import type { TemplateResult } from 'lit-html';
+import type { TemplateResult } from 'lit';
 
 export declare interface ButtonProps {
     /**
@@ -121,6 +121,12 @@ declare class PieButton_2 extends LitElement implements ButtonProps {
     private _simulateNativeButtonClick;
     private _handleClick;
     private _handleFormKeyDown;
+    /**
+     * Template for the loading state
+     *
+     * @private
+     */
+    private renderSpinner;
     render(): TemplateResult<1>;
     focus(): void;
     static styles: CSSResult;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.36.1",
+  "version": "0.37.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -28,10 +28,7 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeat/pie-design-tokens": "5.8.2",
-    "@justeattakeaway/pie-components-config": "0.4.0",
-    "@justeattakeaway/pie-css": "0.7.0",
-    "@justeattakeaway/pie-webc-core": "0.11.0"
+    "@justeattakeaway/pie-components-config": "0.4.0"
   },
   "volta": {
     "extends": "../../../package.json"
@@ -40,6 +37,8 @@
     "dist/*.js"
   ],
   "dependencies": {
+    "@justeattakeaway/pie-spinner": "0.2.1",
+    "@justeattakeaway/pie-webc-core": "0.11.0",
     "element-internals-polyfill": "1.3.8"
   }
 }

package/src/button.scss

@@ -6,27 +6,6 @@
     box-sizing: border-box;
 }
 
-/**
-* Shorthand mixin for updating the HSL custom properties for the loading spinner.
-* Takes in the name of the color to be split into its HSL components.
-*/
-@mixin spinner-base-colors($color) {
-    --spinner-base-color-h: var(#{$color}-h);
-    --spinner-base-color-s: var(#{$color}-s);
-    --spinner-base-color-l: var(#{$color}-l);
-}
-
-// Spin animation for loading state
-@keyframes rotate360 {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-
 // Base button styles
 .o-btn {
     // Custom Property Declarations
@@ -57,26 +36,6 @@
     // Set icon size to the medium button icon size (the default state)
     --btn-icon-size: 24px;
 
-    // Spinner size defaults - currently set for the medium button size (the default state)
-    --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 colors - currently set for the primary button styles
-    @include spinner-base-colors(--dt-color-content-interactive-primary);
-
-    --spinner-left-color-opacity: 0.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 animations
-    --spinner-animation-duration: 1.15s;
-    --spinner-animation-timing-function: linear;
-    --spinner-animation-iteration-count: infinite;
-
     position: relative;
     display: flex;
     gap: var(--dt-spacing-b);
@@ -121,7 +80,6 @@
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
         @include p.button-interactive-states('--dt-color-interactive-secondary');
-        @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
     &[variant='outline'] {
@@ -133,7 +91,6 @@
         // use black as the background color for hover and inverse,
         // as this variant uses a shade of transparent black showing through the container background
         @include p.button-interactive-states('--dt-color-black', 'transparent');
-        @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
     &[variant='ghost'] {
@@ -143,7 +100,6 @@
         // use black as the background color for hover and inverse,
         // as this variant uses a shade of transparent black showing through the container background
         @include p.button-interactive-states('--dt-color-black', 'transparent');
-        @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
     &[variant='inverse'] {
@@ -151,7 +107,6 @@
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
         @include p.button-interactive-states('--dt-color-interactive-inverse');
-        @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
     &[variant='ghost-inverse'],
@@ -181,7 +136,6 @@
         // use black as the background color for hover and inverse,
         // as this variant uses a shade of transparent black showing through the container background
         @include p.button-interactive-states('--dt-color-black', 'transparent');
-        @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
     // Additional modifiers
@@ -211,16 +165,12 @@
         --btn-font-size: #{p.font-size(--dt-font-size-14)};
         --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);
     }
 
     &[size='small-expressive'],
     &[size='small-productive'] {
         --btn-height: var(--btn-height--small);
         --btn-icon-size: 20px;
-        --spinner-size: var(--spinner-size-s);
-        --spinner-border-width: var(--spinner-border-width-s);
     }
 
     &[size='small-expressive'] {
@@ -244,34 +194,15 @@
         --btn-padding: 14px var(--dt-spacing-e);
         --btn-font-size: #{p.font-size(--dt-font-size-20)};
         --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);
     }
 
     &[isLoading] {
-        &:before {
-            content: '';
-
-            // Centre the spinner over the top of the button text
-            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);
+        & > *:not(pie-spinner) {
+            visibility: hidden;
         }
 
-        & > * {
-            visibility: hidden;
+        pie-spinner {
+            position: absolute;
         }
     }
 

package/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    LitElement, html, unsafeCSS, nothing, PropertyValues,
+    LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
 } from 'lit';
 import { property } from 'lit/decorators.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
@@ -8,6 +8,7 @@ import {
 } from './defs';
 import styles from './button.scss?inline';
 import 'element-internals-polyfill';
+import '@justeattakeaway/pie-spinner';
 
 // Valid values available to consumers
 export * from './defs';
@@ -196,6 +197,23 @@ export class PieButton extends LitElement implements ButtonProps {
         this._handleClick();
     };
 
+    /**
+     * Template for the loading state
+     *
+     * @private
+     */
+    private renderSpinner (): TemplateResult {
+        const spinnerSize = this.size.includes('small') ? 's' : 'm'; // includes("small") matches for any small size value and xsmall
+        const inverseVariants: Array<ButtonProps['variant']> = ['primary', 'destructive', 'outline-inverse', 'ghost-inverse'];
+        const spinnerVariant = inverseVariants.includes(this.variant) ? 'inverse' : 'secondary';
+
+        return html`
+                    <pie-spinner
+                        size="${spinnerSize}"
+                        variant="${spinnerVariant}"
+                    </pie-spinner>`;
+    }
+
     render () {
         const {
             type,
@@ -217,6 +235,7 @@ export class PieButton extends LitElement implements ButtonProps {
                 ?disabled=${disabled}
                 ?isFullWidth=${isFullWidth}
                 ?isLoading=${isLoading}>
+                    ${isLoading ? this.renderSpinner() : nothing}
                     ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
                     <slot></slot>
                     ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}