@justeattakeaway/pie-button 0.36.1 → 0.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +7 -1
  2. package/dist/index.js +360 -288
  3. package/dist/react.d.ts +7 -1
  4. package/package.json +4 -5
  5. package/src/button.scss +4 -73
  6. package/src/index.ts +20 -1
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { CSSResult } from 'lit';
2
2
  import type { LitElement } from 'lit';
3
3
  import type { PropertyValues } from 'lit';
4
- import type { TemplateResult } from 'lit-html';
4
+ import type { TemplateResult } from 'lit';
5
5
 
6
6
  export declare interface ButtonProps {
7
7
  /**
@@ -118,6 +118,12 @@ export declare class PieButton extends LitElement implements ButtonProps {
118
118
  private _simulateNativeButtonClick;
119
119
  private _handleClick;
120
120
  private _handleFormKeyDown;
121
+ /**
122
+ * Template for the loading state
123
+ *
124
+ * @private
125
+ */
126
+ private renderSpinner;
121
127
  render(): TemplateResult<1>;
122
128
  focus(): void;
123
129
  static styles: CSSResult;
package/dist/index.js CHANGED
@@ -1,25 +1,25 @@
1
- import { unsafeCSS as wt, LitElement as Et, html as O, nothing as ot } from "lit";
2
- import { property as f } from "lit/decorators.js";
3
- const N = (d, n, a) => function(m, y) {
4
- const b = `#${y}`;
5
- Object.defineProperty(m, y, {
1
+ import { unsafeCSS as st, LitElement as lt, html as M, nothing as P } from "lit";
2
+ import { property as b } from "lit/decorators.js";
3
+ const _ = (c, a, i) => function(v, p) {
4
+ const h = `#${p}`;
5
+ Object.defineProperty(v, p, {
6
6
  get() {
7
- return this[b];
7
+ return this[h];
8
8
  },
9
- set(p) {
10
- const L = this[b];
11
- n.includes(p) ? this[b] = p : (console.error(
12
- `<${d}> Invalid value "${p}" provided for property "${y}".`,
13
- `Must be one of: ${n.join(" | ")}.`,
14
- `Falling back to default value: "${a}"`
15
- ), this[b] = a), this.requestUpdate(y, L);
9
+ set(u) {
10
+ const L = this[h];
11
+ a.includes(u) ? this[h] = u : (console.error(
12
+ `<${c}> Invalid value "${u}" provided for property "${p}".`,
13
+ `Must be one of: ${a.join(" | ")}.`,
14
+ `Falling back to default value: "${i}"`
15
+ ), this[h] = i), this.requestUpdate(p, L);
16
16
  }
17
17
  });
18
18
  };
19
- function xt(d, n) {
20
- 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);
19
+ function Ct(c, a) {
20
+ 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);
21
21
  }
22
- const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Mt = ["submit", "button", "reset"], Ct = [
22
+ const Ft = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Lt = ["submit", "button", "reset"], At = [
23
23
  "primary",
24
24
  "secondary",
25
25
  "outline",
@@ -29,10 +29,10 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
29
29
  "ghost-inverse",
30
30
  "destructive",
31
31
  "destructive-ghost"
32
- ], 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)}
32
+ ], 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)}
33
33
  `;
34
34
  (function() {
35
- 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 = {
35
+ 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 = {
36
36
  ariaAtomic: "aria-atomic",
37
37
  ariaAutoComplete: "aria-autocomplete",
38
38
  ariaBusy: "aria-busy",
@@ -74,196 +74,196 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
74
74
  ariaValueNow: "aria-valuenow",
75
75
  ariaValueText: "aria-valuetext",
76
76
  role: "role"
77
- }, it = (r, t) => {
78
- for (let e in A) {
77
+ }, dt = (r, t) => {
78
+ for (let e in T) {
79
79
  t[e] = null;
80
80
  let o = null;
81
- const i = A[e];
81
+ const n = T[e];
82
82
  Object.defineProperty(t, e, {
83
83
  get() {
84
84
  return o;
85
85
  },
86
- set(l) {
87
- o = l, r.isConnected ? r.setAttribute(i, l) : F.set(r, t);
86
+ set(d) {
87
+ o = d, r.isConnected ? r.setAttribute(n, d) : A.set(r, t);
88
88
  }
89
89
  });
90
90
  }
91
91
  };
92
- function K(r) {
93
- const t = c.get(r), { form: e } = t;
94
- Q(r, e, t), J(r, t.labels);
92
+ function G(r) {
93
+ const t = s.get(r), { form: e } = t;
94
+ tt(r, e, t), Z(r, t.labels);
95
95
  }
96
- const q = (r, t = !1) => {
96
+ const J = (r, t = !1) => {
97
97
  const e = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
98
- acceptNode(l) {
99
- return c.has(l) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
98
+ acceptNode(d) {
99
+ return s.has(d) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
100
100
  }
101
101
  });
102
102
  let o = e.nextNode();
103
- const i = !t || r.disabled;
103
+ const n = !t || r.disabled;
104
104
  for (; o; )
105
- o.formDisabledCallback && i && $(o, r.disabled), o = e.nextNode();
106
- }, U = { attributes: !0, attributeFilter: ["disabled", "name"] }, k = S() ? new MutationObserver((r) => {
105
+ o.formDisabledCallback && n && R(o, r.disabled), o = e.nextNode();
106
+ }, Q = { attributes: !0, attributeFilter: ["disabled", "name"] }, k = $() ? new MutationObserver((r) => {
107
107
  for (const t of r) {
108
108
  const e = t.target;
109
- if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && q(e)), t.attributeName === "name" && e.constructor.formAssociated) {
110
- const o = c.get(e), i = L.get(e);
111
- o.setFormValue(i);
109
+ if (t.attributeName === "disabled" && (e.constructor.formAssociated ? R(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && J(e)), t.attributeName === "name" && e.constructor.formAssociated) {
110
+ const o = s.get(e), n = L.get(e);
111
+ o.setFormValue(n);
112
112
  }
113
113
  }
114
114
  }) : {};
115
- function P(r) {
115
+ function O(r) {
116
116
  r.forEach((t) => {
117
- const { addedNodes: e, removedNodes: o } = t, i = Array.from(e), l = Array.from(o);
118
- i.forEach((s) => {
119
- var u;
120
- if (c.has(s) && s.constructor.formAssociated && K(s), F.has(s)) {
121
- const v = F.get(s);
122
- Object.keys(A).filter((w) => v[w] !== null).forEach((w) => {
123
- s.setAttribute(A[w], v[w]);
124
- }), F.delete(s);
117
+ const { addedNodes: e, removedNodes: o } = t, n = Array.from(e), d = Array.from(o);
118
+ n.forEach((l) => {
119
+ var g;
120
+ if (s.has(l) && l.constructor.formAssociated && G(l), A.has(l)) {
121
+ const m = A.get(l);
122
+ Object.keys(T).filter((w) => m[w] !== null).forEach((w) => {
123
+ l.setAttribute(T[w], m[w]);
124
+ }), A.delete(l);
125
125
  }
126
- if (z.has(s)) {
127
- const v = z.get(s);
128
- 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);
126
+ if (I.has(l)) {
127
+ const m = I.get(l);
128
+ 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);
129
129
  }
130
- if (s.localName === "form") {
131
- const v = p.get(s), x = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
132
- acceptNode(rt) {
133
- return c.has(rt) && !(v && v.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
130
+ if (l.localName === "form") {
131
+ const m = u.get(l), E = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
132
+ acceptNode(nt) {
133
+ return s.has(nt) && !(m && m.has(nt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
134
134
  }
135
135
  });
136
- let w = x.nextNode();
136
+ let w = E.nextNode();
137
137
  for (; w; )
138
- K(w), w = x.nextNode();
138
+ G(w), w = E.nextNode();
139
139
  }
140
- s.localName === "fieldset" && ((u = k.observe) == null || u.call(k, s, U), q(s, !0));
141
- }), l.forEach((s) => {
142
- const u = c.get(s);
143
- u && a.get(u) && j(u), b.has(s) && b.get(s).disconnect();
140
+ l.localName === "fieldset" && ((g = k.observe) == null || g.call(k, l, Q), J(l, !0));
141
+ }), d.forEach((l) => {
142
+ const g = s.get(l);
143
+ g && i.get(g) && X(g), h.has(l) && h.get(l).disconnect();
144
144
  });
145
145
  });
146
146
  }
147
- function at(r) {
147
+ function vt(r) {
148
148
  r.forEach((t) => {
149
149
  const { removedNodes: e } = t;
150
150
  e.forEach((o) => {
151
- const i = H.get(t.target);
152
- c.has(o) && Y(o), i.disconnect();
151
+ const n = q.get(t.target);
152
+ s.has(o) && rt(o), n.disconnect();
153
153
  });
154
154
  });
155
155
  }
156
- const nt = (r) => {
156
+ const ht = (r) => {
157
157
  var e;
158
- const t = new MutationObserver(at);
159
- (e = t.observe) == null || e.call(t, r, { childList: !0 }), H.set(r, t);
158
+ const t = new MutationObserver(vt);
159
+ (e = t.observe) == null || e.call(t, r, { childList: !0 }), q.set(r, t);
160
160
  };
161
- S() && new MutationObserver(P);
162
- const _ = {
161
+ $() && new MutationObserver(O);
162
+ const D = {
163
163
  childList: !0,
164
164
  subtree: !0
165
- }, $ = (r, t) => {
165
+ }, R = (r, t) => {
166
166
  r.toggleAttribute("internals-disabled", t), t ? r.setAttribute("aria-disabled", "true") : r.removeAttribute("aria-disabled"), r.formDisabledCallback && r.formDisabledCallback.apply(r, [t]);
167
- }, j = (r) => {
168
- a.get(r).forEach((e) => {
167
+ }, X = (r) => {
168
+ i.get(r).forEach((e) => {
169
169
  e.remove();
170
- }), a.set(r, []);
171
- }, G = (r, t) => {
170
+ }), i.set(r, []);
171
+ }, Y = (r, t) => {
172
172
  const e = document.createElement("input");
173
- return e.type = "hidden", e.name = r.getAttribute("name"), r.after(e), a.get(t).push(e), e;
174
- }, st = (r, t) => {
173
+ return e.type = "hidden", e.name = r.getAttribute("name"), r.after(e), i.get(t).push(e), e;
174
+ }, pt = (r, t) => {
175
175
  var e;
176
- a.set(t, []), (e = k.observe) == null || e.call(k, r, U);
177
- }, J = (r, t) => {
176
+ i.set(t, []), (e = k.observe) == null || e.call(k, r, Q);
177
+ }, Z = (r, t) => {
178
178
  if (t.length) {
179
179
  Array.from(t).forEach((o) => o.addEventListener("click", r.click.bind(r)));
180
180
  let e = t[0].id;
181
181
  t[0].id || (e = `${t[0].htmlFor}_Label`, t[0].id = e), r.setAttribute("aria-labelledby", e);
182
182
  }
183
- }, I = (r) => {
184
- 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);
185
- r.toggleAttribute("internals-invalid", i), r.toggleAttribute("internals-valid", !i);
186
- }, lt = (r) => {
187
- I(T(r.target));
188
- }, ct = (r) => {
189
- I(T(r.target));
190
- }, dt = (r) => {
183
+ }, S = (r) => {
184
+ 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);
185
+ r.toggleAttribute("internals-invalid", n), r.toggleAttribute("internals-valid", !n);
186
+ }, mt = (r) => {
187
+ S(V(r.target));
188
+ }, ut = (r) => {
189
+ S(V(r.target));
190
+ }, bt = (r) => {
191
191
  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(",");
192
192
  r.addEventListener("click", (e) => {
193
193
  if (e.target.closest(t)) {
194
- const i = p.get(r);
194
+ const n = u.get(r);
195
195
  if (r.noValidate)
196
196
  return;
197
- i.size && Array.from(i).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && e.preventDefault();
197
+ n.size && Array.from(n).reverse().map((g) => s.get(g).reportValidity()).includes(!1) && e.preventDefault();
198
198
  }
199
199
  });
200
- }, vt = (r) => {
201
- const t = p.get(r.target);
200
+ }, ft = (r) => {
201
+ const t = u.get(r.target);
202
202
  t && t.size && t.forEach((e) => {
203
203
  e.constructor.formAssociated && e.formResetCallback && e.formResetCallback.apply(e);
204
204
  });
205
- }, Q = (r, t, e) => {
205
+ }, tt = (r, t, e) => {
206
206
  if (t) {
207
- const o = p.get(t);
207
+ const o = u.get(t);
208
208
  if (o)
209
209
  o.add(r);
210
210
  else {
211
- const i = /* @__PURE__ */ new Set();
212
- i.add(r), p.set(t, i), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
211
+ const n = /* @__PURE__ */ new Set();
212
+ n.add(r), u.set(t, n), bt(t), t.addEventListener("reset", ft), t.addEventListener("input", mt), t.addEventListener("change", ut);
213
213
  }
214
- y.set(t, { ref: r, internals: e }), r.constructor.formAssociated && r.formAssociatedCallback && setTimeout(() => {
214
+ p.set(t, { ref: r, internals: e }), r.constructor.formAssociated && r.formAssociatedCallback && setTimeout(() => {
215
215
  r.formAssociatedCallback.apply(r, [t]);
216
- }, 0), I(t);
216
+ }, 0), S(t);
217
217
  }
218
- }, T = (r) => {
218
+ }, V = (r) => {
219
219
  let t = r.parentNode;
220
- return t && t.tagName !== "FORM" && (t = T(t)), t;
221
- }, E = (r, t, e = DOMException) => {
220
+ return t && t.tagName !== "FORM" && (t = V(t)), t;
221
+ }, x = (r, t, e = DOMException) => {
222
222
  if (!r.constructor.formAssociated)
223
223
  throw new e(t);
224
- }, X = (r, t, e) => {
225
- const o = p.get(r);
226
- return o && o.size && o.forEach((i) => {
227
- c.get(i)[e]() || (t = !1);
224
+ }, et = (r, t, e) => {
225
+ const o = u.get(r);
226
+ return o && o.size && o.forEach((n) => {
227
+ s.get(n)[e]() || (t = !1);
228
228
  }), t;
229
- }, Y = (r) => {
229
+ }, rt = (r) => {
230
230
  if (r.constructor.formAssociated) {
231
- const t = c.get(r), { labels: e, form: o } = t;
232
- J(r, e), Q(r, o, t);
231
+ const t = s.get(r), { labels: e, form: o } = t;
232
+ Z(r, e), tt(r, o, t);
233
233
  }
234
234
  };
235
- function S() {
235
+ function $() {
236
236
  return typeof MutationObserver < "u";
237
237
  }
238
- class ht {
238
+ class gt {
239
239
  constructor() {
240
240
  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);
241
241
  }
242
242
  }
243
- 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) => {
243
+ 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) => {
244
244
  let t = !0;
245
245
  for (let e in r)
246
246
  e !== "valid" && r[e] !== !1 && (t = !1);
247
247
  return t;
248
- }, D = /* @__PURE__ */ new WeakMap();
249
- function Z(r, t) {
248
+ }, W = /* @__PURE__ */ new WeakMap();
249
+ function ot(r, t) {
250
250
  r.toggleAttribute(t, !0), r.part && r.part.add(t);
251
251
  }
252
- class V extends Set {
252
+ class N extends Set {
253
253
  static get isPolyfilled() {
254
254
  return !0;
255
255
  }
256
256
  constructor(t) {
257
257
  if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
258
258
  throw new TypeError("Illegal constructor");
259
- D.set(this, t);
259
+ W.set(this, t);
260
260
  }
261
261
  add(t) {
262
262
  if (!/^--/.test(t) || typeof t != "string")
263
263
  throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
264
- const e = super.add(t), o = D.get(this), i = `state${t}`;
265
- return o.isConnected ? Z(o, i) : setTimeout(() => {
266
- Z(o, i);
264
+ const e = super.add(t), o = W.get(this), n = `state${t}`;
265
+ return o.isConnected ? ot(o, n) : setTimeout(() => {
266
+ ot(o, n);
267
267
  }), e;
268
268
  }
269
269
  clear() {
@@ -272,32 +272,32 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
272
272
  super.clear();
273
273
  }
274
274
  delete(t) {
275
- const e = super.delete(t), o = D.get(this);
275
+ const e = super.delete(t), o = W.get(this);
276
276
  return o.isConnected ? (o.toggleAttribute(`state${t}`, !1), o.part && o.part.remove(`state${t}`)) : setTimeout(() => {
277
277
  o.toggleAttribute(`state${t}`, !1), o.part && o.part.remove(`state${t}`);
278
278
  }), e;
279
279
  }
280
280
  }
281
- function tt(r, t, e, o) {
281
+ function it(r, t, e, o) {
282
282
  if (e === "a" && !o)
283
283
  throw new TypeError("Private accessor was defined without a getter");
284
284
  if (typeof t == "function" ? r !== t || !o : !t.has(r))
285
285
  throw new TypeError("Cannot read private member from an object whose class did not declare it");
286
286
  return e === "m" ? o : e === "a" ? o.call(r) : o ? o.value : t.get(r);
287
287
  }
288
- function ut(r, t, e, o, i) {
288
+ function Et(r, t, e, o, n) {
289
289
  if (o === "m")
290
290
  throw new TypeError("Private method is not writable");
291
- if (o === "a" && !i)
291
+ if (o === "a" && !n)
292
292
  throw new TypeError("Private accessor was defined without a setter");
293
- if (typeof t == "function" ? r !== t || !i : !t.has(r))
293
+ if (typeof t == "function" ? r !== t || !n : !t.has(r))
294
294
  throw new TypeError("Cannot write private member to an object whose class did not declare it");
295
- return o === "a" ? i.call(r, e) : i ? i.value = e : t.set(r, e), e;
295
+ return o === "a" ? n.call(r, e) : n ? n.value = e : t.set(r, e), e;
296
296
  }
297
- var M;
298
- class ft {
297
+ var z;
298
+ class kt {
299
299
  constructor(t) {
300
- M.set(this, void 0), ut(this, M, t, "f");
300
+ z.set(this, void 0), Et(this, z, t, "f");
301
301
  for (let e = 0; e < t.length; e++) {
302
302
  let o = t[e];
303
303
  this[e] = o, o.hasAttribute("name") && (this[o.getAttribute("name")] = o);
@@ -305,10 +305,10 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
305
305
  Object.freeze(this);
306
306
  }
307
307
  get length() {
308
- return tt(this, M, "f").length;
308
+ return it(this, z, "f").length;
309
309
  }
310
- [(M = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
311
- return tt(this, M, "f")[Symbol.iterator]();
310
+ [(z = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
311
+ return it(this, z, "f")[Symbol.iterator]();
312
312
  }
313
313
  item(t) {
314
314
  return this[t] == null ? null : this[t];
@@ -317,45 +317,45 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
317
317
  return this[t] == null ? null : this[t];
318
318
  }
319
319
  }
320
- function gt() {
320
+ function Mt() {
321
321
  const r = HTMLFormElement.prototype.checkValidity;
322
322
  HTMLFormElement.prototype.checkValidity = e;
323
323
  const t = HTMLFormElement.prototype.reportValidity;
324
324
  HTMLFormElement.prototype.reportValidity = o;
325
- function e(...l) {
326
- let s = r.apply(this, l);
327
- return X(this, s, "checkValidity");
325
+ function e(...d) {
326
+ let l = r.apply(this, d);
327
+ return et(this, l, "checkValidity");
328
328
  }
329
- function o(...l) {
330
- let s = t.apply(this, l);
331
- return X(this, s, "reportValidity");
329
+ function o(...d) {
330
+ let l = t.apply(this, d);
331
+ return et(this, l, "reportValidity");
332
332
  }
333
- const { get: i } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
333
+ const { get: n } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
334
334
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
335
- get(...l) {
336
- const s = i.call(this, ...l), u = Array.from(p.get(this) || []);
337
- if (u.length === 0)
338
- return s;
339
- const v = Array.from(s).concat(u).sort((x, w) => x.compareDocumentPosition ? x.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
340
- return new ft(v);
335
+ get(...d) {
336
+ const l = n.call(this, ...d), g = Array.from(u.get(this) || []);
337
+ if (g.length === 0)
338
+ return l;
339
+ const m = Array.from(l).concat(g).sort((E, w) => E.compareDocumentPosition ? E.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
340
+ return new kt(m);
341
341
  }
342
342
  });
343
343
  }
344
- class et {
344
+ class at {
345
345
  static get isPolyfilled() {
346
346
  return !0;
347
347
  }
348
348
  constructor(t) {
349
349
  if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
350
350
  throw new TypeError("Illegal constructor");
351
- const e = t.getRootNode(), o = new ht();
352
- 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);
351
+ const e = t.getRootNode(), o = new gt();
352
+ 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);
353
353
  }
354
354
  checkValidity() {
355
- const t = d.get(this);
356
- if (E(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
355
+ const t = c.get(this);
356
+ if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
357
357
  return !0;
358
- const e = n.get(this);
358
+ const e = a.get(this);
359
359
  if (!e.valid) {
360
360
  const o = new Event("invalid", {
361
361
  bubbles: !1,
@@ -367,76 +367,76 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
367
367
  return e.valid;
368
368
  }
369
369
  get form() {
370
- const t = d.get(this);
371
- E(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
370
+ const t = c.get(this);
371
+ x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
372
372
  let e;
373
- return t.constructor.formAssociated === !0 && (e = T(t)), e;
373
+ return t.constructor.formAssociated === !0 && (e = V(t)), e;
374
374
  }
375
375
  get labels() {
376
- const t = d.get(this);
377
- E(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
376
+ const t = c.get(this);
377
+ x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
378
378
  const e = t.getAttribute("id"), o = t.getRootNode();
379
379
  return o && e ? o.querySelectorAll(`[for="${e}"]`) : [];
380
380
  }
381
381
  reportValidity() {
382
- const t = d.get(this);
383
- if (E(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
382
+ const t = c.get(this);
383
+ if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
384
384
  return !0;
385
- const e = this.checkValidity(), o = W.get(this);
385
+ const e = this.checkValidity(), o = K.get(this);
386
386
  if (o && !t.constructor.formAssociated)
387
387
  throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
388
388
  return !e && o && (t.focus(), o.focus()), e;
389
389
  }
390
390
  setFormValue(t) {
391
- const e = d.get(this);
392
- 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)) {
391
+ const e = c.get(this);
392
+ 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)) {
393
393
  if (e.getAttribute("name")) {
394
- const o = G(e, this);
394
+ const o = Y(e, this);
395
395
  o.value = t;
396
396
  }
397
397
  } else
398
- t != null && t instanceof FormData && Array.from(t).reverse().forEach(([o, i]) => {
399
- if (typeof i == "string") {
400
- const l = G(e, this);
401
- l.name = o, l.value = i;
398
+ t != null && t instanceof FormData && Array.from(t).reverse().forEach(([o, n]) => {
399
+ if (typeof n == "string") {
400
+ const d = Y(e, this);
401
+ d.name = o, d.value = n;
402
402
  }
403
403
  });
404
404
  L.set(e, t);
405
405
  }
406
406
  setValidity(t, e, o) {
407
- const i = d.get(this);
408
- if (E(i, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
407
+ const n = c.get(this);
408
+ if (x(n, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
409
409
  throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
410
- W.set(this, o);
411
- const l = n.get(this), s = {};
412
- for (const x in t)
413
- s[x] = t[x];
414
- Object.keys(s).length === 0 && pt(l);
415
- const u = { ...l, ...s };
416
- delete u.valid;
417
- const { valid: v } = mt(l, u, this.form);
418
- if (!v && !e)
410
+ K.set(this, o);
411
+ const d = a.get(this), l = {};
412
+ for (const E in t)
413
+ l[E] = t[E];
414
+ Object.keys(l).length === 0 && yt(d);
415
+ const g = { ...d, ...l };
416
+ delete g.valid;
417
+ const { valid: m } = wt(d, g, this.form);
418
+ if (!m && !e)
419
419
  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.");
420
- 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);
420
+ 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);
421
421
  }
422
422
  get shadowRoot() {
423
- const t = d.get(this), e = R.get(t);
423
+ const t = c.get(this), e = B.get(t);
424
424
  return e || null;
425
425
  }
426
426
  get validationMessage() {
427
- const t = d.get(this);
428
- return E(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), m.get(this);
427
+ const t = c.get(this);
428
+ return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), v.get(this);
429
429
  }
430
430
  get validity() {
431
- const t = d.get(this);
432
- return E(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), n.get(this);
431
+ const t = c.get(this);
432
+ return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), a.get(this);
433
433
  }
434
434
  get willValidate() {
435
- const t = d.get(this);
436
- 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"));
435
+ const t = c.get(this);
436
+ 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"));
437
437
  }
438
438
  }
439
- function yt() {
439
+ function zt() {
440
440
  if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
441
441
  return !1;
442
442
  class r extends HTMLElement {
@@ -460,23 +460,23 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
460
460
  "reportValidity"
461
461
  ].every((o) => o in e.internals);
462
462
  }
463
- if (yt()) {
463
+ if (zt()) {
464
464
  if (typeof window < "u" && !window.CustomStateSet) {
465
- window.CustomStateSet = V;
465
+ window.CustomStateSet = N;
466
466
  const r = HTMLElement.prototype.attachInternals;
467
467
  HTMLElement.prototype.attachInternals = function(...t) {
468
468
  const e = r.call(this, t);
469
- return e.states = new V(this), e;
469
+ return e.states = new N(this), e;
470
470
  };
471
471
  }
472
472
  } else {
473
- if (typeof window < "u" && (window.ElementInternals = et), typeof CustomElementRegistry < "u") {
473
+ if (typeof window < "u" && (window.ElementInternals = at), typeof CustomElementRegistry < "u") {
474
474
  const r = CustomElementRegistry.prototype.define;
475
475
  CustomElementRegistry.prototype.define = function(t, e, o) {
476
476
  if (e.formAssociated) {
477
- const i = e.prototype.connectedCallback;
477
+ const n = e.prototype.connectedCallback;
478
478
  e.prototype.connectedCallback = function() {
479
- B.has(this) || (B.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), i != null && i.apply(this), Y(this);
479
+ U.has(this) || (U.set(this, !0), this.hasAttribute("disabled") && R(this, !0)), n != null && n.apply(this), rt(this);
480
480
  };
481
481
  }
482
482
  r.call(this, t, e, o);
@@ -488,40 +488,98 @@ const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
488
488
  throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
489
489
  } else
490
490
  return {};
491
- if (c.has(this))
491
+ if (s.has(this))
492
492
  throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
493
- return new et(this);
493
+ return new at(this);
494
494
  }), typeof Element < "u") {
495
495
  let r = function(...e) {
496
496
  const o = t.apply(this, e);
497
- if (R.set(this, o), S()) {
498
- const i = new MutationObserver(P);
499
- window.ShadyDOM ? i.observe(this, _) : i.observe(o, _), b.set(this, i);
497
+ if (B.set(this, o), $()) {
498
+ const n = new MutationObserver(O);
499
+ window.ShadyDOM ? n.observe(this, D) : n.observe(o, D), h.set(this, n);
500
500
  }
501
501
  return o;
502
502
  };
503
503
  const t = Element.prototype.attachShadow;
504
504
  Element.prototype.attachShadow = r;
505
505
  }
506
- S() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" && gt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
506
+ $() && typeof document < "u" && new MutationObserver(O).observe(document.documentElement, D), typeof HTMLFormElement < "u" && Mt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = N);
507
507
  }
508
508
  })();
509
- var zt = Object.defineProperty, At = Object.getOwnPropertyDescriptor, g = (d, n, a, c) => {
510
- for (var m = c > 1 ? void 0 : c ? At(n, a) : n, y = d.length - 1, b; y >= 0; y--)
511
- (b = d[y]) && (m = (c ? b(n, a, m) : b(m)) || m);
512
- return c && m && zt(n, a, m), m;
509
+ const ct = (c, a, i) => function(s, v) {
510
+ const p = `#${v}`;
511
+ Object.defineProperty(s, v, {
512
+ get() {
513
+ return this[p];
514
+ },
515
+ set(h) {
516
+ const u = this[p];
517
+ a.includes(h) ? this[p] = h : (console.error(
518
+ `<${c}> Invalid value "${h}" provided for property "${v}".`,
519
+ `Must be one of: ${a.join(" | ")}.`,
520
+ `Falling back to default value: "${i}"`
521
+ ), this[p] = i), this.requestUpdate(v, u);
522
+ }
523
+ });
524
+ };
525
+ function St(c, a) {
526
+ 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);
527
+ }
528
+ 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}
529
+ `, $t = ["xs", "s", "m", "l", "xl"], Nt = ["brand", "secondary", "inverse"];
530
+ var Pt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, H = (c, a, i, s) => {
531
+ for (var v = s > 1 ? void 0 : s ? _t(a, i) : a, p = c.length - 1, h; p >= 0; p--)
532
+ (h = c[p]) && (v = (s ? h(a, i, v) : h(v)) || v);
533
+ return s && v && Pt(a, i, v), v;
534
+ };
535
+ const j = "pie-spinner";
536
+ class C extends lt {
537
+ constructor() {
538
+ super(...arguments), this.size = "m", this.variant = "brand";
539
+ }
540
+ render() {
541
+ const { variant: a, size: i, aria: s } = this;
542
+ return M`
543
+ <div
544
+ data-test-id="pie-spinner"
545
+ class="c-spinner"
546
+ role="status"
547
+ aria-live="polite"
548
+ size="${i}"
549
+ variant="${a}">
550
+ ${s != null && s.label ? M`<span class="c-spinner-label">${s.label}</span>` : P}
551
+ </div>`;
552
+ }
553
+ }
554
+ C.styles = st(Vt);
555
+ H([
556
+ b({ type: Object })
557
+ ], C.prototype, "aria", 2);
558
+ H([
559
+ b(),
560
+ ct(j, $t, "m")
561
+ ], C.prototype, "size", 2);
562
+ H([
563
+ b(),
564
+ ct(j, Nt, "brand")
565
+ ], C.prototype, "variant", 2);
566
+ St(j, C);
567
+ var Ot = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, y = (c, a, i, s) => {
568
+ for (var v = s > 1 ? void 0 : s ? Dt(a, i) : a, p = c.length - 1, h; p >= 0; p--)
569
+ (h = c[p]) && (v = (s ? h(a, i, v) : h(v)) || v);
570
+ return s && v && Ot(a, i, v), v;
513
571
  };
514
- const C = "pie-button";
515
- class h extends Et {
572
+ const F = "pie-button";
573
+ class f extends lt {
516
574
  constructor() {
517
- 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) => {
518
- if (!(n.key !== "Enter" || this.type !== "submit" || this.disabled)) {
519
- if (n.target instanceof HTMLElement) {
520
- const a = n.target.tagName.toLowerCase();
521
- if (a === "button" || a === "pie-button")
575
+ 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) => {
576
+ if (!(a.key !== "Enter" || this.type !== "submit" || this.disabled)) {
577
+ if (a.target instanceof HTMLElement) {
578
+ const i = a.target.tagName.toLowerCase();
579
+ if (i === "button" || i === "pie-button")
522
580
  return;
523
581
  }
524
- n.preventDefault(), this._handleClick();
582
+ a.preventDefault(), this._handleClick();
525
583
  }
526
584
  }, this._internals = this.attachInternals();
527
585
  }
@@ -529,16 +587,16 @@ class h extends Et {
529
587
  return this._internals.form;
530
588
  }
531
589
  connectedCallback() {
532
- var n;
533
- super.connectedCallback(), this.type === "submit" && ((n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown));
590
+ var a;
591
+ super.connectedCallback(), this.type === "submit" && ((a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown));
534
592
  }
535
593
  disconnectedCallback() {
536
- var n;
537
- super.disconnectedCallback(), this.type === "submit" && ((n = this.form) == null || n.removeEventListener("keydown", this._handleFormKeyDown));
594
+ var a;
595
+ super.disconnectedCallback(), this.type === "submit" && ((a = this.form) == null || a.removeEventListener("keydown", this._handleFormKeyDown));
538
596
  }
539
- updated(n) {
540
- var a, c;
541
- 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));
597
+ updated(a) {
598
+ var i, s;
599
+ 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));
542
600
  }
543
601
  /**
544
602
  * 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 {
548
606
  *
549
607
  * TODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin.
550
608
  */
551
- _simulateNativeButtonClick(n) {
609
+ _simulateNativeButtonClick(a) {
552
610
  if (!this.form)
553
611
  return;
554
- const a = document.createElement("button");
555
- 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();
612
+ const i = document.createElement("button");
613
+ 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();
556
614
  }
557
615
  _handleClick() {
558
616
  !this.isLoading && this.form && (this.type === "submit" && (this.formnovalidate || this.form.reportValidity()) && this._simulateNativeButtonClick("submit"), this.type === "reset" && this._simulateNativeButtonClick("reset"));
559
617
  }
618
+ /**
619
+ * Template for the loading state
620
+ *
621
+ * @private
622
+ */
623
+ renderSpinner() {
624
+ const a = this.size.includes("small") ? "s" : "m", s = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary";
625
+ return M`
626
+ <pie-spinner
627
+ size="${a}"
628
+ variant="${s}"
629
+ </pie-spinner>`;
630
+ }
560
631
  render() {
561
632
  const {
562
- type: n,
563
- disabled: a,
564
- isFullWidth: c,
565
- variant: m,
566
- size: y,
567
- isLoading: b,
568
- iconPlacement: p
633
+ type: a,
634
+ disabled: i,
635
+ isFullWidth: s,
636
+ variant: v,
637
+ size: p,
638
+ isLoading: h,
639
+ iconPlacement: u
569
640
  } = this;
570
- return O`
641
+ return M`
571
642
  <button
572
643
  @click=${this._handleClick}
573
644
  class="o-btn"
574
- type=${n}
575
- variant=${m}
576
- size=${y}
577
- ?disabled=${a}
578
- ?isFullWidth=${c}
579
- ?isLoading=${b}>
580
- ${p === "leading" ? O`<slot name="icon"></slot>` : ot}
645
+ type=${a}
646
+ variant=${v}
647
+ size=${p}
648
+ ?disabled=${i}
649
+ ?isFullWidth=${s}
650
+ ?isLoading=${h}>
651
+ ${h ? this.renderSpinner() : P}
652
+ ${u === "leading" ? M`<slot name="icon"></slot>` : P}
581
653
  <slot></slot>
582
- ${p === "trailing" ? O`<slot name="icon"></slot>` : ot}
654
+ ${u === "trailing" ? M`<slot name="icon"></slot>` : P}
583
655
  </button>`;
584
656
  }
585
657
  focus() {
586
- var n, a;
587
- (a = (n = this.shadowRoot) == null ? void 0 : n.querySelector("button")) == null || a.focus();
658
+ var a, i;
659
+ (i = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button")) == null || i.focus();
588
660
  }
589
661
  }
590
- h.formAssociated = !0;
591
- h.styles = wt(Ft);
592
- g([
593
- f(),
594
- N(C, kt, "medium")
595
- ], h.prototype, "size", 2);
596
- g([
597
- f(),
598
- N(C, Mt, "submit")
599
- ], h.prototype, "type", 2);
600
- g([
601
- f(),
602
- N(C, Ct, "primary")
603
- ], h.prototype, "variant", 2);
604
- g([
605
- f({ type: String }),
606
- N(C, Lt, "leading")
607
- ], h.prototype, "iconPlacement", 2);
608
- g([
609
- f({ type: Boolean })
610
- ], h.prototype, "disabled", 2);
611
- g([
612
- f({ type: Boolean, reflect: !0 })
613
- ], h.prototype, "isLoading", 2);
614
- g([
615
- f({ type: Boolean })
616
- ], h.prototype, "isFullWidth", 2);
617
- g([
618
- f({ type: String })
619
- ], h.prototype, "name", 2);
620
- g([
621
- f({ type: String })
622
- ], h.prototype, "value", 2);
623
- g([
624
- f()
625
- ], h.prototype, "formaction", 2);
626
- g([
627
- f()
628
- ], h.prototype, "formenctype", 2);
629
- g([
630
- f()
631
- ], h.prototype, "formmethod", 2);
632
- g([
633
- f({ type: Boolean })
634
- ], h.prototype, "formnovalidate", 2);
635
- g([
636
- f()
637
- ], h.prototype, "formtarget", 2);
638
- xt(C, h);
662
+ f.formAssociated = !0;
663
+ f.styles = st(Tt);
664
+ y([
665
+ b(),
666
+ _(F, Ft, "medium")
667
+ ], f.prototype, "size", 2);
668
+ y([
669
+ b(),
670
+ _(F, Lt, "submit")
671
+ ], f.prototype, "type", 2);
672
+ y([
673
+ b(),
674
+ _(F, At, "primary")
675
+ ], f.prototype, "variant", 2);
676
+ y([
677
+ b({ type: String }),
678
+ _(F, It, "leading")
679
+ ], f.prototype, "iconPlacement", 2);
680
+ y([
681
+ b({ type: Boolean })
682
+ ], f.prototype, "disabled", 2);
683
+ y([
684
+ b({ type: Boolean, reflect: !0 })
685
+ ], f.prototype, "isLoading", 2);
686
+ y([
687
+ b({ type: Boolean })
688
+ ], f.prototype, "isFullWidth", 2);
689
+ y([
690
+ b({ type: String })
691
+ ], f.prototype, "name", 2);
692
+ y([
693
+ b({ type: String })
694
+ ], f.prototype, "value", 2);
695
+ y([
696
+ b()
697
+ ], f.prototype, "formaction", 2);
698
+ y([
699
+ b()
700
+ ], f.prototype, "formenctype", 2);
701
+ y([
702
+ b()
703
+ ], f.prototype, "formmethod", 2);
704
+ y([
705
+ b({ type: Boolean })
706
+ ], f.prototype, "formnovalidate", 2);
707
+ y([
708
+ b()
709
+ ], f.prototype, "formtarget", 2);
710
+ Ct(F, f);
639
711
  export {
640
- h as PieButton,
641
- St as formEncodingtypes,
642
- Vt as formMethodTypes,
643
- Nt as formTargetTypes,
644
- Lt as iconPlacements,
645
- kt as sizes,
646
- Mt as types,
647
- Ct as variants
712
+ f as PieButton,
713
+ Ht as formEncodingtypes,
714
+ jt as formMethodTypes,
715
+ Bt as formTargetTypes,
716
+ It as iconPlacements,
717
+ Ft as sizes,
718
+ Lt as types,
719
+ At as variants
648
720
  };
package/dist/react.d.ts CHANGED
@@ -2,7 +2,7 @@ import type { CSSResult } from 'lit';
2
2
  import type { LitElement } from 'lit';
3
3
  import type { PropertyValues } from 'lit';
4
4
  import type { ReactWebComponent } from '@lit-labs/react';
5
- import type { TemplateResult } from 'lit-html';
5
+ import type { TemplateResult } from 'lit';
6
6
 
7
7
  export declare interface ButtonProps {
8
8
  /**
@@ -121,6 +121,12 @@ declare class PieButton_2 extends LitElement implements ButtonProps {
121
121
  private _simulateNativeButtonClick;
122
122
  private _handleClick;
123
123
  private _handleFormKeyDown;
124
+ /**
125
+ * Template for the loading state
126
+ *
127
+ * @private
128
+ */
129
+ private renderSpinner;
124
130
  render(): TemplateResult<1>;
125
131
  focus(): void;
126
132
  static styles: CSSResult;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "0.36.1",
3
+ "version": "0.37.0",
4
4
  "description": "PIE design system button built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -28,10 +28,7 @@
28
28
  "author": "Just Eat Takeaway.com - Design System Team",
29
29
  "license": "Apache-2.0",
30
30
  "devDependencies": {
31
- "@justeat/pie-design-tokens": "5.8.2",
32
- "@justeattakeaway/pie-components-config": "0.4.0",
33
- "@justeattakeaway/pie-css": "0.7.0",
34
- "@justeattakeaway/pie-webc-core": "0.11.0"
31
+ "@justeattakeaway/pie-components-config": "0.4.0"
35
32
  },
36
33
  "volta": {
37
34
  "extends": "../../../package.json"
@@ -40,6 +37,8 @@
40
37
  "dist/*.js"
41
38
  ],
42
39
  "dependencies": {
40
+ "@justeattakeaway/pie-spinner": "0.2.1",
41
+ "@justeattakeaway/pie-webc-core": "0.11.0",
43
42
  "element-internals-polyfill": "1.3.8"
44
43
  }
45
44
  }
package/src/button.scss CHANGED
@@ -6,27 +6,6 @@
6
6
  box-sizing: border-box;
7
7
  }
8
8
 
9
- /**
10
- * Shorthand mixin for updating the HSL custom properties for the loading spinner.
11
- * Takes in the name of the color to be split into its HSL components.
12
- */
13
- @mixin spinner-base-colors($color) {
14
- --spinner-base-color-h: var(#{$color}-h);
15
- --spinner-base-color-s: var(#{$color}-s);
16
- --spinner-base-color-l: var(#{$color}-l);
17
- }
18
-
19
- // Spin animation for loading state
20
- @keyframes rotate360 {
21
- from {
22
- transform: rotate(0deg);
23
- }
24
-
25
- to {
26
- transform: rotate(360deg);
27
- }
28
- }
29
-
30
9
  // Base button styles
31
10
  .o-btn {
32
11
  // Custom Property Declarations
@@ -57,26 +36,6 @@
57
36
  // Set icon size to the medium button icon size (the default state)
58
37
  --btn-icon-size: 24px;
59
38
 
60
- // Spinner size defaults - currently set for the medium button size (the default state)
61
- --spinner-size-s: 20px;
62
- --spinner-size-m: 24px;
63
- --spinner-border-width-s: 2.5px;
64
- --spinner-border-width-m: 3px;
65
- --spinner-size: var(--spinner-size-m);
66
- --spinner-border-width: var(--spinner-border-width-m);
67
-
68
- // Spinner colors - currently set for the primary button styles
69
- @include spinner-base-colors(--dt-color-content-interactive-primary);
70
-
71
- --spinner-left-color-opacity: 0.35;
72
- --spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));
73
- --spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);
74
-
75
- // Spinner animations
76
- --spinner-animation-duration: 1.15s;
77
- --spinner-animation-timing-function: linear;
78
- --spinner-animation-iteration-count: infinite;
79
-
80
39
  position: relative;
81
40
  display: flex;
82
41
  gap: var(--dt-spacing-b);
@@ -121,7 +80,6 @@
121
80
  --btn-text-color: var(--dt-color-content-interactive-secondary);
122
81
 
123
82
  @include p.button-interactive-states('--dt-color-interactive-secondary');
124
- @include spinner-base-colors('--dt-color-content-interactive-secondary');
125
83
  }
126
84
 
127
85
  &[variant='outline'] {
@@ -133,7 +91,6 @@
133
91
  // use black as the background color for hover and inverse,
134
92
  // as this variant uses a shade of transparent black showing through the container background
135
93
  @include p.button-interactive-states('--dt-color-black', 'transparent');
136
- @include spinner-base-colors('--dt-color-content-interactive-secondary');
137
94
  }
138
95
 
139
96
  &[variant='ghost'] {
@@ -143,7 +100,6 @@
143
100
  // use black as the background color for hover and inverse,
144
101
  // as this variant uses a shade of transparent black showing through the container background
145
102
  @include p.button-interactive-states('--dt-color-black', 'transparent');
146
- @include spinner-base-colors('--dt-color-content-interactive-secondary');
147
103
  }
148
104
 
149
105
  &[variant='inverse'] {
@@ -151,7 +107,6 @@
151
107
  --btn-text-color: var(--dt-color-content-interactive-secondary);
152
108
 
153
109
  @include p.button-interactive-states('--dt-color-interactive-inverse');
154
- @include spinner-base-colors('--dt-color-content-interactive-secondary');
155
110
  }
156
111
 
157
112
  &[variant='ghost-inverse'],
@@ -181,7 +136,6 @@
181
136
  // use black as the background color for hover and inverse,
182
137
  // as this variant uses a shade of transparent black showing through the container background
183
138
  @include p.button-interactive-states('--dt-color-black', 'transparent');
184
- @include spinner-base-colors('--dt-color-content-interactive-secondary');
185
139
  }
186
140
 
187
141
  // Additional modifiers
@@ -211,16 +165,12 @@
211
165
  --btn-font-size: #{p.font-size(--dt-font-size-14)};
212
166
  --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
213
167
  --btn-icon-size: 16px;
214
- --spinner-size: var(--spinner-size-s);
215
- --spinner-border-width: var(--spinner-border-width-s);
216
168
  }
217
169
 
218
170
  &[size='small-expressive'],
219
171
  &[size='small-productive'] {
220
172
  --btn-height: var(--btn-height--small);
221
173
  --btn-icon-size: 20px;
222
- --spinner-size: var(--spinner-size-s);
223
- --spinner-border-width: var(--spinner-border-width-s);
224
174
  }
225
175
 
226
176
  &[size='small-expressive'] {
@@ -244,34 +194,15 @@
244
194
  --btn-padding: 14px var(--dt-spacing-e);
245
195
  --btn-font-size: #{p.font-size(--dt-font-size-20)};
246
196
  --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
247
- --spinner-size: var(--spinner-size-m);
248
- --spinner-border-width: var(--spinner-border-width-m);
249
197
  }
250
198
 
251
199
  &[isLoading] {
252
- &:before {
253
- content: '';
254
-
255
- // Centre the spinner over the top of the button text
256
- position: absolute;
257
- left: 50%;
258
- top: 50%;
259
- translate: -50% -50%;
260
-
261
- height: var(--spinner-size);
262
- width: var(--spinner-size);
263
- display: block;
264
- background-color: transparent;
265
- border-radius: 50%;
266
- border-color: var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);
267
- border-width: var(--spinner-border-width);
268
- border-style: solid;
269
- will-change: transform;
270
- animation: rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);
200
+ & > *:not(pie-spinner) {
201
+ visibility: hidden;
271
202
  }
272
203
 
273
- & > * {
274
- visibility: hidden;
204
+ pie-spinner {
205
+ position: absolute;
275
206
  }
276
207
  }
277
208
 
package/src/index.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import {
2
- LitElement, html, unsafeCSS, nothing, PropertyValues,
2
+ LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
3
3
  } from 'lit';
4
4
  import { property } from 'lit/decorators.js';
5
5
  import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
@@ -8,6 +8,7 @@ import {
8
8
  } from './defs';
9
9
  import styles from './button.scss?inline';
10
10
  import 'element-internals-polyfill';
11
+ import '@justeattakeaway/pie-spinner';
11
12
 
12
13
  // Valid values available to consumers
13
14
  export * from './defs';
@@ -196,6 +197,23 @@ export class PieButton extends LitElement implements ButtonProps {
196
197
  this._handleClick();
197
198
  };
198
199
 
200
+ /**
201
+ * Template for the loading state
202
+ *
203
+ * @private
204
+ */
205
+ private renderSpinner (): TemplateResult {
206
+ const spinnerSize = this.size.includes('small') ? 's' : 'm'; // includes("small") matches for any small size value and xsmall
207
+ const inverseVariants: Array<ButtonProps['variant']> = ['primary', 'destructive', 'outline-inverse', 'ghost-inverse'];
208
+ const spinnerVariant = inverseVariants.includes(this.variant) ? 'inverse' : 'secondary';
209
+
210
+ return html`
211
+ <pie-spinner
212
+ size="${spinnerSize}"
213
+ variant="${spinnerVariant}"
214
+ </pie-spinner>`;
215
+ }
216
+
199
217
  render () {
200
218
  const {
201
219
  type,
@@ -217,6 +235,7 @@ export class PieButton extends LitElement implements ButtonProps {
217
235
  ?disabled=${disabled}
218
236
  ?isFullWidth=${isFullWidth}
219
237
  ?isLoading=${isLoading}>
238
+ ${isLoading ? this.renderSpinner() : nothing}
220
239
  ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
221
240
  <slot></slot>
222
241
  ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}