@justeattakeaway/pie-button 0.32.0 → 0.34.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 +1 -0
  2. package/dist/index.js +119 -115
  3. package/dist/react.d.ts +1 -0
  4. package/package.json +2 -2
  5. package/src/button.scss +33 -11
  6. 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
- 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(" | ")}.`,
9
+ set(p) {
10
+ const C = this[b];
11
+ l.includes(p) ? this[b] = p : (console.error(
12
+ `<${c}> Invalid value "${p}" 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-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)}
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(), p = /* @__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 = p.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 = p.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));
@@ -187,25 +191,25 @@ const N = (v, c, a) => function(m, y) {
187
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(",");
188
192
  r.addEventListener("click", (e) => {
189
193
  if (e.target.closest(t)) {
190
- const i = h.get(r);
194
+ const i = p.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) => {
197
- const t = h.get(r.target);
201
+ const t = p.get(r.target);
198
202
  t && t.size && t.forEach((e) => {
199
203
  e.constructor.formAssociated && e.formResetCallback && e.formResetCallback.apply(e);
200
204
  });
201
205
  }, Q = (r, t, e) => {
202
206
  if (t) {
203
- const o = h.get(t);
207
+ const o = p.get(t);
204
208
  if (o)
205
209
  o.add(r);
206
210
  else {
207
211
  const i = /* @__PURE__ */ new Set();
208
- i.add(r), h.set(t, i), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
212
+ i.add(r), p.set(t, i), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
209
213
  }
210
214
  y.set(t, { ref: r, internals: e }), r.constructor.formAssociated && r.formAssociatedCallback && setTimeout(() => {
211
215
  r.formAssociatedCallback.apply(r, [t]);
@@ -218,25 +222,25 @@ const N = (v, c, a) => function(m, y) {
218
222
  if (!r.constructor.formAssociated)
219
223
  throw new e(t);
220
224
  }, X = (r, t, e) => {
221
- const o = h.get(r);
225
+ const o = p.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
  };
231
235
  function S() {
232
236
  return typeof MutationObserver < "u";
233
237
  }
234
- class pt {
238
+ class ht {
235
239
  constructor() {
236
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);
237
241
  }
238
242
  }
239
- const ht = (r) => (r.badInput = !1, r.customError = !1, r.patternMismatch = !1, r.rangeOverflow = !1, r.rangeUnderflow = !1, r.stepMismatch = !1, r.tooLong = !1, r.tooShort = !1, r.typeMismatch = !1, r.valid = !0, r.valueMissing = !1, r), mt = (r, t, e) => (r.valid = bt(t), Object.keys(t).forEach((o) => r[o] = t[o]), e && I(e), r), bt = (r) => {
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) => {
240
244
  let t = !0;
241
245
  for (let e in r)
242
246
  e !== "valid" && r[e] !== !1 && (t = !1);
@@ -329,11 +333,11 @@ const N = (v, c, a) => function(m, y) {
329
333
  const { get: i } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
330
334
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
331
335
  get(...s) {
332
- const n = i.call(this, ...s), u = Array.from(h.get(this) || []);
336
+ const n = i.call(this, ...s), u = Array.from(p.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
  }
@@ -344,14 +348,14 @@ const N = (v, c, a) => function(m, y) {
344
348
  constructor(t) {
345
349
  if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
346
350
  throw new TypeError("Illegal constructor");
347
- 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);
351
+ const e = t.getRootNode(), o = new ht();
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
- Object.keys(n).length === 0 && ht(s);
414
+ Object.keys(n).length === 0 && pt(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,23 +496,23 @@ 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
- class p extends Et {
515
+ class h extends Et {
512
516
  constructor() {
513
517
  super(), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this._internals = this.attachInternals();
514
518
  }
@@ -523,101 +527,101 @@ 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,
543
- iconPlacement: h
547
+ iconPlacement: p
544
548
  } = this;
545
549
  return R`
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
- ${h === "leading" ? R`<slot name="icon"></slot>` : ot}
559
+ ${p === "leading" ? R`<slot name="icon"></slot>` : ot}
556
560
  <slot></slot>
557
- ${h === "trailing" ? R`<slot name="icon"></slot>` : ot}
561
+ ${p === "trailing" ? R`<slot name="icon"></slot>` : ot}
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
- p.formAssociated = !0;
566
- p.styles = wt(At);
569
+ h.formAssociated = !0;
570
+ h.styles = wt(At);
567
571
  g([
568
572
  f(),
569
- N(z, xt, "medium")
570
- ], p.prototype, "size", 2);
573
+ N(z, Mt, "medium")
574
+ ], h.prototype, "size", 2);
571
575
  g([
572
576
  f(),
573
- N(z, Mt, "submit")
574
- ], p.prototype, "type", 2);
577
+ N(z, kt, "submit")
578
+ ], h.prototype, "type", 2);
575
579
  g([
576
580
  f(),
577
- N(z, kt, "primary")
578
- ], p.prototype, "variant", 2);
581
+ N(z, zt, "primary")
582
+ ], h.prototype, "variant", 2);
579
583
  g([
580
584
  f({ type: String }),
581
- N(z, zt, "leading")
582
- ], p.prototype, "iconPlacement", 2);
585
+ N(z, Ct, "leading")
586
+ ], h.prototype, "iconPlacement", 2);
583
587
  g([
584
588
  f({ type: Boolean })
585
- ], p.prototype, "disabled", 2);
589
+ ], h.prototype, "disabled", 2);
586
590
  g([
587
591
  f({ type: Boolean, reflect: !0 })
588
- ], p.prototype, "isLoading", 2);
592
+ ], h.prototype, "isLoading", 2);
589
593
  g([
590
594
  f({ type: Boolean })
591
- ], p.prototype, "isFullWidth", 2);
595
+ ], h.prototype, "isFullWidth", 2);
592
596
  g([
593
597
  f({ type: String })
594
- ], p.prototype, "name", 2);
598
+ ], h.prototype, "name", 2);
595
599
  g([
596
600
  f({ type: String })
597
- ], p.prototype, "value", 2);
601
+ ], h.prototype, "value", 2);
598
602
  g([
599
603
  f()
600
- ], p.prototype, "formaction", 2);
604
+ ], h.prototype, "formaction", 2);
601
605
  g([
602
606
  f()
603
- ], p.prototype, "formenctype", 2);
607
+ ], h.prototype, "formenctype", 2);
604
608
  g([
605
609
  f()
606
- ], p.prototype, "formmethod", 2);
610
+ ], h.prototype, "formmethod", 2);
607
611
  g([
608
612
  f({ type: Boolean })
609
- ], p.prototype, "formnovalidate", 2);
613
+ ], h.prototype, "formnovalidate", 2);
610
614
  g([
611
615
  f()
612
- ], p.prototype, "formtarget", 2);
613
- customElements.define(z, p);
616
+ ], h.prototype, "formtarget", 2);
617
+ xt(z, h);
614
618
  export {
615
- 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
619
+ h as PieButton,
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.34.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/button.scss CHANGED
@@ -14,7 +14,11 @@
14
14
  */
15
15
  @mixin button-interactive-states($bg-color, $mode: 'default') {
16
16
  &:hover:not(:disabled) {
17
- --hover-modifier: calc(-1 * var(--dt-color-hover-01));
17
+ @if $mode == 'alt' {
18
+ --hover-modifier: calc(-1 * var(--dt-color-hover-02));
19
+ } @else {
20
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
21
+ }
18
22
 
19
23
  // for mode=transparent, use the hsla syntax to make the button background opaque by a set percentage
20
24
  @if $mode == 'transparent' {
@@ -27,7 +31,11 @@
27
31
 
28
32
  &:active:not(:disabled),
29
33
  &[isLoading]:not(:disabled) {
30
- --active-modifier: calc(-1 * var(--dt-color-active-01));
34
+ @if $mode == 'alt' {
35
+ --active-modifier: calc(-1 * var(--dt-color-active-02));
36
+ } @else {
37
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
38
+ }
31
39
 
32
40
  @if $mode == 'transparent' {
33
41
  --active-modifier: var(--dt-color-active-01);
@@ -77,10 +85,19 @@
77
85
  --btn-bg-color: var(--dt-color-interactive-brand);
78
86
  --btn-text-color: var(--dt-color-content-interactive-primary);
79
87
 
80
- // Sizing is set to Medium button icon size, as that is the default
88
+ // Heights for the different button sizes
89
+ --btn-height--xsmall: 32px;
90
+ --btn-height--small: 40px;
91
+ --btn-height--medium: 48px;
92
+ --btn-height--large: 56px;
93
+
94
+ // Set height to medium (the default state)
95
+ --btn-height: var(--btn-height--medium);
96
+
97
+ // Set icon size to the medium button icon size (the default state)
81
98
  --btn-icon-size: 24px;
82
99
 
83
- // Spinner sizes defaults - currently set for the medium button styles
100
+ // Spinner size defaults - currently set for the medium button size (the default state)
84
101
  --spinner-size-s: 20px;
85
102
  --spinner-size-m: 24px;
86
103
  --spinner-border-width-s: 2.5px;
@@ -106,6 +123,7 @@
106
123
  align-items: center;
107
124
  justify-content: center;
108
125
  box-sizing: border-box;
126
+ height: var(--btn-height);
109
127
  padding: var(--btn-padding);
110
128
  border: none;
111
129
  border-radius: var(--btn-border-radius);
@@ -134,7 +152,7 @@
134
152
  **/
135
153
  --btn-bg-color: var(--dt-color-interactive-primary);
136
154
 
137
- @include button-interactive-states('--dt-color-interactive-primary');
155
+ @include button-interactive-states('--dt-color-interactive-primary', 'alt');
138
156
  }
139
157
  }
140
158
 
@@ -228,6 +246,7 @@
228
246
  }
229
247
 
230
248
  &[size='xsmall'] {
249
+ --btn-height: var(--btn-height--xsmall);
231
250
  --btn-padding: 6px var(--dt-spacing-b);
232
251
  --btn-font-size: #{p.font-size(--dt-font-size-14)};
233
252
  --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
@@ -236,22 +255,24 @@
236
255
  --spinner-border-width: var(--spinner-border-width-s);
237
256
  }
238
257
 
258
+ &[size='small-expressive'],
259
+ &[size='small-productive'] {
260
+ --btn-height: var(--btn-height--small);
261
+ --btn-icon-size: 20px;
262
+ --spinner-size: var(--spinner-size-s);
263
+ --spinner-border-width: var(--spinner-border-width-s);
264
+ }
265
+
239
266
  &[size='small-expressive'] {
240
267
  --btn-padding: 6px var(--dt-spacing-d);
241
268
  --btn-font-size: #{p.font-size(--dt-font-size-20)};
242
269
  --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
243
- --btn-icon-size: 20px;
244
- --spinner-size: var(--spinner-size-s);
245
- --spinner-border-width: var(--spinner-border-width-s);
246
270
  }
247
271
 
248
272
  &[size='small-productive'] {
249
273
  --btn-padding: 8px var(--dt-spacing-d);
250
274
  --btn-font-size: #{p.font-size(--dt-font-size-16)};
251
275
  --btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
252
- --btn-icon-size: 20px;
253
- --spinner-size: var(--spinner-size-s);
254
- --spinner-border-width: var(--spinner-border-width-s);
255
276
  }
256
277
 
257
278
  &[size='medium'] {
@@ -259,6 +280,7 @@
259
280
  }
260
281
 
261
282
  &[size='large'] {
283
+ --btn-height: var(--btn-height--large);
262
284
  --btn-padding: 14px var(--dt-spacing-e);
263
285
  --btn-font-size: #{p.font-size(--dt-font-size-20)};
264
286
  --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
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 {