@justeattakeaway/pie-button 0.32.0 → 0.33.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 (5) hide show
  1. package/dist/index.d.ts +1 -0
  2. package/dist/index.js +87 -83
  3. package/dist/react.d.ts +1 -0
  4. package/package.json +2 -2
  5. package/src/index.ts +3 -2
package/dist/index.d.ts CHANGED
@@ -80,6 +80,7 @@ export declare const formTargetTypes: readonly ["_self", "_blank", "_parent", "_
80
80
  export declare const iconPlacements: readonly ["leading", "trailing"];
81
81
 
82
82
  /**
83
+ * @tagname pie-button
83
84
  * @slot icon - The icon slot
84
85
  * @slot - Default slot
85
86
  */
package/dist/index.js CHANGED
@@ -1,21 +1,25 @@
1
1
  import { unsafeCSS as wt, LitElement as Et, html as R, nothing as ot } from "lit";
2
2
  import { property as f } from "lit/decorators.js";
3
- const N = (v, c, a) => function(m, y) {
3
+ const N = (c, l, a) => function(m, y) {
4
4
  const b = `#${y}`;
5
5
  Object.defineProperty(m, y, {
6
6
  get() {
7
7
  return this[b];
8
8
  },
9
9
  set(h) {
10
- const A = this[b];
11
- c.includes(h) ? this[b] = h : (console.error(
12
- `<${v}> Invalid value "${h}" provided for property "${y}".`,
13
- `Must be one of: ${c.join(" | ")}.`,
10
+ const C = this[b];
11
+ l.includes(h) ? this[b] = h : (console.error(
12
+ `<${c}> Invalid value "${h}" provided for property "${y}".`,
13
+ `Must be one of: ${l.join(" | ")}.`,
14
14
  `Falling back to default value: "${a}"`
15
- ), this[b] = a), this.requestUpdate(y, A);
15
+ ), this[b] = a), this.requestUpdate(y, C);
16
16
  }
17
17
  });
18
- }, xt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Mt = ["submit", "button", "reset"], kt = [
18
+ };
19
+ function xt(c, l) {
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, l);
21
+ }
22
+ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], kt = ["submit", "button", "reset"], zt = [
19
23
  "primary",
20
24
  "secondary",
21
25
  "outline",
@@ -25,10 +29,10 @@ const N = (v, c, a) => function(m, y) {
25
29
  "ghost-inverse",
26
30
  "destructive",
27
31
  "destructive-ghost"
28
- ], zt = ["leading", "trailing"], Tt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], St = ["post", "get", "dialog"], Vt = ["_self", "_blank", "_parent", "_top"], At = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-icon-size: 24px;--spinner-size-s: 20px;--spinner-size-m: 24px;--spinner-border-width-s: 2.5px;--spinner-border-width-m: 3px;--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m);--spinner-base-color-h: var(--dt-color-content-interactive-primary-h);--spinner-base-color-s: var(--dt-color-content-interactive-primary-s);--spinner-base-color-l: var(--dt-color-content-interactive-primary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]{border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--btn-icon-size: 16px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-expressive]{--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-productive]{--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=large]{--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m)}.o-btn[isLoading]:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count)}.o-btn[isLoading]>*{visibility:hidden}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--btn-icon-size);width:var(--btn-icon-size)}
32
+ ], Ct = ["leading", "trailing"], St = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Vt = ["post", "get", "dialog"], Nt = ["_self", "_blank", "_parent", "_top"], At = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-icon-size: 24px;--spinner-size-s: 20px;--spinner-size-m: 24px;--spinner-border-width-s: 2.5px;--spinner-border-width-m: 3px;--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m);--spinner-base-color-h: var(--dt-color-content-interactive-primary-h);--spinner-base-color-s: var(--dt-color-content-interactive-primary-s);--spinner-base-color-l: var(--dt-color-content-interactive-primary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]{border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--btn-icon-size: 16px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-expressive]{--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-productive]{--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=large]{--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m)}.o-btn[isLoading]:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count)}.o-btn[isLoading]>*{visibility:hidden}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--btn-icon-size);width:var(--btn-icon-size)}
29
33
  `;
30
34
  (function() {
31
- const v = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), C = {
35
+ const c = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), L = {
32
36
  ariaAtomic: "aria-atomic",
33
37
  ariaAutoComplete: "aria-autocomplete",
34
38
  ariaBusy: "aria-busy",
@@ -71,39 +75,39 @@ const N = (v, c, a) => function(m, y) {
71
75
  ariaValueText: "aria-valuetext",
72
76
  role: "role"
73
77
  }, it = (r, t) => {
74
- for (let e in C) {
78
+ for (let e in L) {
75
79
  t[e] = null;
76
80
  let o = null;
77
- const i = C[e];
81
+ const i = L[e];
78
82
  Object.defineProperty(t, e, {
79
83
  get() {
80
84
  return o;
81
85
  },
82
86
  set(s) {
83
- o = s, r.isConnected ? r.setAttribute(i, s) : F.set(r, t);
87
+ o = s, r.isConnected ? r.setAttribute(i, s) : A.set(r, t);
84
88
  }
85
89
  });
86
90
  }
87
91
  };
88
92
  function q(r) {
89
- const t = l.get(r), { form: e } = t;
93
+ const t = d.get(r), { form: e } = t;
90
94
  Q(r, e, t), J(r, t.labels);
91
95
  }
92
96
  const U = (r, t = !1) => {
93
97
  const e = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
94
98
  acceptNode(s) {
95
- return l.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
99
+ return d.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
96
100
  }
97
101
  });
98
102
  let o = e.nextNode();
99
103
  const i = !t || r.disabled;
100
104
  for (; o; )
101
- o.formDisabledCallback && i && $(o, r.disabled), o = e.nextNode();
105
+ o.formDisabledCallback && i && _(o, r.disabled), o = e.nextNode();
102
106
  }, j = { attributes: !0, attributeFilter: ["disabled", "name"] }, M = S() ? new MutationObserver((r) => {
103
107
  for (const t of r) {
104
108
  const e = t.target;
105
- if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && U(e)), t.attributeName === "name" && e.constructor.formAssociated) {
106
- const o = l.get(e), i = A.get(e);
109
+ if (t.attributeName === "disabled" && (e.constructor.formAssociated ? _(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && U(e)), t.attributeName === "name" && e.constructor.formAssociated) {
110
+ const o = d.get(e), i = C.get(e);
107
111
  o.setFormValue(i);
108
112
  }
109
113
  }
@@ -113,20 +117,20 @@ const N = (v, c, a) => function(m, y) {
113
117
  const { addedNodes: e, removedNodes: o } = t, i = Array.from(e), s = Array.from(o);
114
118
  i.forEach((n) => {
115
119
  var u;
116
- if (l.has(n) && n.constructor.formAssociated && q(n), F.has(n)) {
117
- const d = F.get(n);
118
- Object.keys(C).filter((w) => d[w] !== null).forEach((w) => {
119
- n.setAttribute(C[w], d[w]);
120
- }), F.delete(n);
120
+ if (d.has(n) && n.constructor.formAssociated && q(n), A.has(n)) {
121
+ const v = A.get(n);
122
+ Object.keys(L).filter((w) => v[w] !== null).forEach((w) => {
123
+ n.setAttribute(L[w], v[w]);
124
+ }), A.delete(n);
121
125
  }
122
- if (L.has(n)) {
123
- const d = L.get(n);
124
- n.setAttribute("internals-valid", d.validity.valid.toString()), n.setAttribute("internals-invalid", (!d.validity.valid).toString()), n.setAttribute("aria-invalid", (!d.validity.valid).toString()), L.delete(n);
126
+ if (F.has(n)) {
127
+ const v = F.get(n);
128
+ n.setAttribute("internals-valid", v.validity.valid.toString()), n.setAttribute("internals-invalid", (!v.validity.valid).toString()), n.setAttribute("aria-invalid", (!v.validity.valid).toString()), F.delete(n);
125
129
  }
126
130
  if (n.localName === "form") {
127
- const d = h.get(n), x = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
131
+ const v = h.get(n), x = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
128
132
  acceptNode(rt) {
129
- return l.has(rt) && !(d && d.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
133
+ return d.has(rt) && !(v && v.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
130
134
  }
131
135
  });
132
136
  let w = x.nextNode();
@@ -135,7 +139,7 @@ const N = (v, c, a) => function(m, y) {
135
139
  }
136
140
  n.localName === "fieldset" && ((u = M.observe) == null || u.call(M, n, j), U(n, !0));
137
141
  }), s.forEach((n) => {
138
- const u = l.get(n);
142
+ const u = d.get(n);
139
143
  u && a.get(u) && K(u), b.has(n) && b.get(n).disconnect();
140
144
  });
141
145
  });
@@ -145,7 +149,7 @@ const N = (v, c, a) => function(m, y) {
145
149
  const { removedNodes: e } = t;
146
150
  e.forEach((o) => {
147
151
  const i = D.get(t.target);
148
- l.has(o) && Y(o), i.disconnect();
152
+ d.has(o) && Y(o), i.disconnect();
149
153
  });
150
154
  });
151
155
  }
@@ -155,10 +159,10 @@ const N = (v, c, a) => function(m, y) {
155
159
  (e = t.observe) == null || e.call(t, r, { childList: !0 }), D.set(r, t);
156
160
  };
157
161
  S() && new MutationObserver(P);
158
- const _ = {
162
+ const $ = {
159
163
  childList: !0,
160
164
  subtree: !0
161
- }, $ = (r, t) => {
165
+ }, _ = (r, t) => {
162
166
  r.toggleAttribute("internals-disabled", t), t ? r.setAttribute("aria-disabled", "true") : r.removeAttribute("aria-disabled"), r.formDisabledCallback && r.formDisabledCallback.apply(r, [t]);
163
167
  }, K = (r) => {
164
168
  a.get(r).forEach((e) => {
@@ -177,7 +181,7 @@ const N = (v, c, a) => function(m, y) {
177
181
  t[0].id || (e = `${t[0].htmlFor}_Label`, t[0].id = e), r.setAttribute("aria-labelledby", e);
178
182
  }
179
183
  }, I = (r) => {
180
- const t = Array.from(r.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), e = h.get(r) || [], o = Array.from(e).filter((s) => s.isConnected).map((s) => l.get(s).validity.valid), i = [...t, ...o].includes(!1);
184
+ const t = Array.from(r.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), e = h.get(r) || [], o = Array.from(e).filter((s) => s.isConnected).map((s) => d.get(s).validity.valid), i = [...t, ...o].includes(!1);
181
185
  r.toggleAttribute("internals-invalid", i), r.toggleAttribute("internals-valid", !i);
182
186
  }, lt = (r) => {
183
187
  I(T(r.target));
@@ -190,7 +194,7 @@ const N = (v, c, a) => function(m, y) {
190
194
  const i = h.get(r);
191
195
  if (r.noValidate)
192
196
  return;
193
- i.size && Array.from(i).reverse().map((u) => l.get(u).reportValidity()).includes(!1) && e.preventDefault();
197
+ i.size && Array.from(i).reverse().map((u) => d.get(u).reportValidity()).includes(!1) && e.preventDefault();
194
198
  }
195
199
  });
196
200
  }, vt = (r) => {
@@ -220,11 +224,11 @@ const N = (v, c, a) => function(m, y) {
220
224
  }, X = (r, t, e) => {
221
225
  const o = h.get(r);
222
226
  return o && o.size && o.forEach((i) => {
223
- l.get(i)[e]() || (t = !1);
227
+ d.get(i)[e]() || (t = !1);
224
228
  }), t;
225
229
  }, Y = (r) => {
226
230
  if (r.constructor.formAssociated) {
227
- const t = l.get(r), { labels: e, form: o } = t;
231
+ const t = d.get(r), { labels: e, form: o } = t;
228
232
  J(r, e), Q(r, o, t);
229
233
  }
230
234
  };
@@ -332,8 +336,8 @@ const N = (v, c, a) => function(m, y) {
332
336
  const n = i.call(this, ...s), u = Array.from(h.get(this) || []);
333
337
  if (u.length === 0)
334
338
  return n;
335
- const d = Array.from(n).concat(u).sort((x, w) => x.compareDocumentPosition ? x.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
336
- return new ft(d);
339
+ const v = Array.from(n).concat(u).sort((x, w) => x.compareDocumentPosition ? x.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
340
+ return new ft(v);
337
341
  }
338
342
  });
339
343
  }
@@ -345,13 +349,13 @@ const N = (v, c, a) => function(m, y) {
345
349
  if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
346
350
  throw new TypeError("Illegal constructor");
347
351
  const e = t.getRootNode(), o = new pt();
348
- this.states = new V(t), v.set(this, t), c.set(this, o), l.set(t, this), it(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && nt(e);
352
+ this.states = new V(t), c.set(this, t), l.set(this, o), d.set(t, this), it(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && nt(e);
349
353
  }
350
354
  checkValidity() {
351
- const t = v.get(this);
355
+ const t = c.get(this);
352
356
  if (E(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
353
357
  return !0;
354
- const e = c.get(this);
358
+ const e = l.get(this);
355
359
  if (!e.valid) {
356
360
  const o = new Event("invalid", {
357
361
  bubbles: !1,
@@ -363,19 +367,19 @@ const N = (v, c, a) => function(m, y) {
363
367
  return e.valid;
364
368
  }
365
369
  get form() {
366
- const t = v.get(this);
370
+ const t = c.get(this);
367
371
  E(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
368
372
  let e;
369
373
  return t.constructor.formAssociated === !0 && (e = T(t)), e;
370
374
  }
371
375
  get labels() {
372
- const t = v.get(this);
376
+ const t = c.get(this);
373
377
  E(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
374
378
  const e = t.getAttribute("id"), o = t.getRootNode();
375
379
  return o && e ? o.querySelectorAll(`[for="${e}"]`) : [];
376
380
  }
377
381
  reportValidity() {
378
- const t = v.get(this);
382
+ const t = c.get(this);
379
383
  if (E(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
380
384
  return !0;
381
385
  const e = this.checkValidity(), o = H.get(this);
@@ -384,7 +388,7 @@ const N = (v, c, a) => function(m, y) {
384
388
  return !e && o && (t.focus(), o.focus()), e;
385
389
  }
386
390
  setFormValue(t) {
387
- const e = v.get(this);
391
+ const e = c.get(this);
388
392
  if (E(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), K(this), t != null && !(t instanceof FormData)) {
389
393
  if (e.getAttribute("name")) {
390
394
  const o = G(e, this);
@@ -397,38 +401,38 @@ const N = (v, c, a) => function(m, y) {
397
401
  s.name = o, s.value = i;
398
402
  }
399
403
  });
400
- A.set(e, t);
404
+ C.set(e, t);
401
405
  }
402
406
  setValidity(t, e, o) {
403
- const i = v.get(this);
407
+ const i = c.get(this);
404
408
  if (E(i, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
405
409
  throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
406
410
  H.set(this, o);
407
- const s = c.get(this), n = {};
411
+ const s = l.get(this), n = {};
408
412
  for (const x in t)
409
413
  n[x] = t[x];
410
414
  Object.keys(n).length === 0 && ht(s);
411
415
  const u = { ...s, ...n };
412
416
  delete u.valid;
413
- const { valid: d } = mt(s, u, this.form);
414
- if (!d && !e)
417
+ const { valid: v } = mt(s, u, this.form);
418
+ if (!v && !e)
415
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.");
416
- m.set(this, d ? "" : e), i.isConnected ? (i.toggleAttribute("internals-invalid", !d), i.toggleAttribute("internals-valid", d), i.setAttribute("aria-invalid", `${!d}`)) : L.set(i, this);
420
+ m.set(this, v ? "" : e), i.isConnected ? (i.toggleAttribute("internals-invalid", !v), i.toggleAttribute("internals-valid", v), i.setAttribute("aria-invalid", `${!v}`)) : F.set(i, this);
417
421
  }
418
422
  get shadowRoot() {
419
- const t = v.get(this), e = W.get(t);
423
+ const t = c.get(this), e = W.get(t);
420
424
  return e || null;
421
425
  }
422
426
  get validationMessage() {
423
- const t = v.get(this);
427
+ const t = c.get(this);
424
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);
425
429
  }
426
430
  get validity() {
427
- const t = v.get(this);
428
- return E(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), c.get(this);
431
+ const t = c.get(this);
432
+ return E(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), l.get(this);
429
433
  }
430
434
  get willValidate() {
431
- const t = v.get(this);
435
+ const t = c.get(this);
432
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"));
433
437
  }
434
438
  }
@@ -472,7 +476,7 @@ const N = (v, c, a) => function(m, y) {
472
476
  if (e.formAssociated) {
473
477
  const i = e.prototype.connectedCallback;
474
478
  e.prototype.connectedCallback = function() {
475
- B.has(this) || (B.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), i != null && i.apply(this), Y(this);
479
+ B.has(this) || (B.set(this, !0), this.hasAttribute("disabled") && _(this, !0)), i != null && i.apply(this), Y(this);
476
480
  };
477
481
  }
478
482
  r.call(this, t, e, o);
@@ -484,7 +488,7 @@ const N = (v, c, a) => function(m, y) {
484
488
  throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
485
489
  } else
486
490
  return {};
487
- if (l.has(this))
491
+ if (d.has(this))
488
492
  throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
489
493
  return new et(this);
490
494
  }), typeof Element < "u") {
@@ -492,20 +496,20 @@ const N = (v, c, a) => function(m, y) {
492
496
  const o = t.apply(this, e);
493
497
  if (W.set(this, o), S()) {
494
498
  const i = new MutationObserver(P);
495
- window.ShadyDOM ? i.observe(this, _) : i.observe(o, _), b.set(this, i);
499
+ window.ShadyDOM ? i.observe(this, $) : i.observe(o, $), b.set(this, i);
496
500
  }
497
501
  return o;
498
502
  };
499
503
  const t = Element.prototype.attachShadow;
500
504
  Element.prototype.attachShadow = r;
501
505
  }
502
- S() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" && gt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
506
+ S() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, $), typeof HTMLFormElement < "u" && gt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
503
507
  }
504
508
  })();
505
- var Ft = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, g = (v, c, a, l) => {
506
- for (var m = l > 1 ? void 0 : l ? Lt(c, a) : c, y = v.length - 1, b; y >= 0; y--)
507
- (b = v[y]) && (m = (l ? b(c, a, m) : b(m)) || m);
508
- return l && m && Ft(c, a, m), m;
509
+ var Ft = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, g = (c, l, a, d) => {
510
+ for (var m = d > 1 ? void 0 : d ? Lt(l, a) : l, y = c.length - 1, b; y >= 0; y--)
511
+ (b = c[y]) && (m = (d ? b(l, a, m) : b(m)) || m);
512
+ return d && m && Ft(l, a, m), m;
509
513
  };
510
514
  const z = "pie-button";
511
515
  class p extends Et {
@@ -523,20 +527,20 @@ class p extends Et {
523
527
  *
524
528
  * TODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin.
525
529
  */
526
- _simulateNativeButtonClick(c) {
530
+ _simulateNativeButtonClick(l) {
527
531
  if (!this.form)
528
532
  return;
529
533
  const a = document.createElement("button");
530
- a.type = c, a.style.position = "absolute", a.style.width = "1px", a.style.height = "1px", a.style.padding = "0", a.style.margin = "-1px", a.style.overflow = "hidden", a.style.border = "0", a.style.whiteSpace = "nowrap", c === "submit" && (this.name && (a.name = this.name), this.value && (a.value = this.value), this.formaction && a.setAttribute("formaction", this.formaction), this.formenctype && a.setAttribute("formenctype", this.formenctype), this.formmethod && a.setAttribute("formmethod", this.formmethod), this.formnovalidate && a.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && a.setAttribute("formtarget", this.formtarget)), this.form.append(a), a.click(), a.remove();
534
+ a.type = l, 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", l === "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();
531
535
  }
532
536
  _handleClick() {
533
537
  !this.isLoading && this.form && (this.type === "submit" && (this.formnovalidate || this.form.reportValidity()) && this._simulateNativeButtonClick("submit"), this.type === "reset" && this._simulateNativeButtonClick("reset"));
534
538
  }
535
539
  render() {
536
540
  const {
537
- type: c,
541
+ type: l,
538
542
  disabled: a,
539
- isFullWidth: l,
543
+ isFullWidth: d,
540
544
  variant: m,
541
545
  size: y,
542
546
  isLoading: b,
@@ -546,11 +550,11 @@ class p extends Et {
546
550
  <button
547
551
  @click=${this._handleClick}
548
552
  class="o-btn"
549
- type=${c}
553
+ type=${l}
550
554
  variant=${m}
551
555
  size=${y}
552
556
  ?disabled=${a}
553
- ?isFullWidth=${l}
557
+ ?isFullWidth=${d}
554
558
  ?isLoading=${b}>
555
559
  ${h === "leading" ? R`<slot name="icon"></slot>` : ot}
556
560
  <slot></slot>
@@ -558,27 +562,27 @@ class p extends Et {
558
562
  </button>`;
559
563
  }
560
564
  focus() {
561
- var c, a;
562
- (a = (c = this.shadowRoot) == null ? void 0 : c.querySelector("button")) == null || a.focus();
565
+ var l, a;
566
+ (a = (l = this.shadowRoot) == null ? void 0 : l.querySelector("button")) == null || a.focus();
563
567
  }
564
568
  }
565
569
  p.formAssociated = !0;
566
570
  p.styles = wt(At);
567
571
  g([
568
572
  f(),
569
- N(z, xt, "medium")
573
+ N(z, Mt, "medium")
570
574
  ], p.prototype, "size", 2);
571
575
  g([
572
576
  f(),
573
- N(z, Mt, "submit")
577
+ N(z, kt, "submit")
574
578
  ], p.prototype, "type", 2);
575
579
  g([
576
580
  f(),
577
- N(z, kt, "primary")
581
+ N(z, zt, "primary")
578
582
  ], p.prototype, "variant", 2);
579
583
  g([
580
584
  f({ type: String }),
581
- N(z, zt, "leading")
585
+ N(z, Ct, "leading")
582
586
  ], p.prototype, "iconPlacement", 2);
583
587
  g([
584
588
  f({ type: Boolean })
@@ -610,14 +614,14 @@ g([
610
614
  g([
611
615
  f()
612
616
  ], p.prototype, "formtarget", 2);
613
- customElements.define(z, p);
617
+ xt(z, p);
614
618
  export {
615
619
  p as PieButton,
616
- Tt as formEncodingtypes,
617
- St as formMethodTypes,
618
- Vt as formTargetTypes,
619
- zt as iconPlacements,
620
- xt as sizes,
621
- Mt as types,
622
- kt as variants
620
+ St as formEncodingtypes,
621
+ Vt as formMethodTypes,
622
+ Nt as formTargetTypes,
623
+ Ct as iconPlacements,
624
+ Mt as sizes,
625
+ kt as types,
626
+ zt as variants
623
627
  };
package/dist/react.d.ts CHANGED
@@ -83,6 +83,7 @@ export declare const iconPlacements: readonly ["leading", "trailing"];
83
83
  export declare const PieButton: ReactWebComponent<PieButton_2, {}>;
84
84
 
85
85
  /**
86
+ * @tagname pie-button
86
87
  * @slot icon - The icon slot
87
88
  * @slot - Default slot
88
89
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "0.32.0",
3
+ "version": "0.33.0",
4
4
  "description": "PIE design system button built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -31,7 +31,7 @@
31
31
  "@justeat/pie-design-tokens": "5.8.2",
32
32
  "@justeattakeaway/pie-components-config": "0.4.0",
33
33
  "@justeattakeaway/pie-css": "0.6.0",
34
- "@justeattakeaway/pie-webc-core": "0.10.0"
34
+ "@justeattakeaway/pie-webc-core": "0.11.0"
35
35
  },
36
36
  "volta": {
37
37
  "extends": "../../../package.json"
package/src/index.ts CHANGED
@@ -2,7 +2,7 @@ import {
2
2
  LitElement, html, unsafeCSS, nothing,
3
3
  } from 'lit';
4
4
  import { property } from 'lit/decorators.js';
5
- import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
5
+ import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
6
6
  import {
7
7
  ButtonProps, sizes, types, variants, iconPlacements,
8
8
  } from './defs';
@@ -15,6 +15,7 @@ export * from './defs';
15
15
  const componentSelector = 'pie-button';
16
16
 
17
17
  /**
18
+ * @tagname pie-button
18
19
  * @slot icon - The icon slot
19
20
  * @slot - Default slot
20
21
  */
@@ -182,7 +183,7 @@ export class PieButton extends LitElement implements ButtonProps {
182
183
  static styles = unsafeCSS(styles);
183
184
  }
184
185
 
185
- customElements.define(componentSelector, PieButton);
186
+ defineCustomElement(componentSelector, PieButton);
186
187
 
187
188
  declare global {
188
189
  interface HTMLElementTagNameMap {