@justeattakeaway/pie-button 0.33.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 (3) hide show
  1. package/dist/index.js +39 -39
  2. package/package.json +1 -1
  3. package/src/button.scss +33 -11
package/dist/index.js CHANGED
@@ -6,10 +6,10 @@ const N = (c, l, a) => function(m, y) {
6
6
  get() {
7
7
  return this[b];
8
8
  },
9
- set(h) {
9
+ set(p) {
10
10
  const C = this[b];
11
- l.includes(h) ? this[b] = h : (console.error(
12
- `<${c}> Invalid value "${h}" provided for property "${y}".`,
11
+ l.includes(p) ? this[b] = p : (console.error(
12
+ `<${c}> Invalid value "${p}" provided for property "${y}".`,
13
13
  `Must be one of: ${l.join(" | ")}.`,
14
14
  `Falling back to default value: "${a}"`
15
15
  ), this[b] = a), this.requestUpdate(y, C);
@@ -29,10 +29,10 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
29
29
  "ghost-inverse",
30
30
  "destructive",
31
31
  "destructive-ghost"
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)}
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)}
33
33
  `;
34
34
  (function() {
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 = {
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 = {
36
36
  ariaAtomic: "aria-atomic",
37
37
  ariaAutoComplete: "aria-autocomplete",
38
38
  ariaBusy: "aria-busy",
@@ -128,7 +128,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
128
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);
129
129
  }
130
130
  if (n.localName === "form") {
131
- const v = h.get(n), x = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
131
+ const v = p.get(n), x = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
132
132
  acceptNode(rt) {
133
133
  return d.has(rt) && !(v && v.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
134
134
  }
@@ -181,7 +181,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
181
181
  t[0].id || (e = `${t[0].htmlFor}_Label`, t[0].id = e), r.setAttribute("aria-labelledby", e);
182
182
  }
183
183
  }, I = (r) => {
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);
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);
185
185
  r.toggleAttribute("internals-invalid", i), r.toggleAttribute("internals-valid", !i);
186
186
  }, lt = (r) => {
187
187
  I(T(r.target));
@@ -191,25 +191,25 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
191
191
  const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((e) => `${e}:not([disabled])`).map((e) => `${e}:not([form])${r.id ? `,${e}[form='${r.id}']` : ""}`).join(",");
192
192
  r.addEventListener("click", (e) => {
193
193
  if (e.target.closest(t)) {
194
- const i = h.get(r);
194
+ const i = p.get(r);
195
195
  if (r.noValidate)
196
196
  return;
197
197
  i.size && Array.from(i).reverse().map((u) => d.get(u).reportValidity()).includes(!1) && e.preventDefault();
198
198
  }
199
199
  });
200
200
  }, vt = (r) => {
201
- const t = h.get(r.target);
201
+ const t = p.get(r.target);
202
202
  t && t.size && t.forEach((e) => {
203
203
  e.constructor.formAssociated && e.formResetCallback && e.formResetCallback.apply(e);
204
204
  });
205
205
  }, Q = (r, t, e) => {
206
206
  if (t) {
207
- const o = h.get(t);
207
+ const o = p.get(t);
208
208
  if (o)
209
209
  o.add(r);
210
210
  else {
211
211
  const i = /* @__PURE__ */ new Set();
212
- 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);
213
213
  }
214
214
  y.set(t, { ref: r, internals: e }), r.constructor.formAssociated && r.formAssociatedCallback && setTimeout(() => {
215
215
  r.formAssociatedCallback.apply(r, [t]);
@@ -222,7 +222,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
222
222
  if (!r.constructor.formAssociated)
223
223
  throw new e(t);
224
224
  }, X = (r, t, e) => {
225
- const o = h.get(r);
225
+ const o = p.get(r);
226
226
  return o && o.size && o.forEach((i) => {
227
227
  d.get(i)[e]() || (t = !1);
228
228
  }), t;
@@ -235,12 +235,12 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
235
235
  function S() {
236
236
  return typeof MutationObserver < "u";
237
237
  }
238
- class pt {
238
+ class ht {
239
239
  constructor() {
240
240
  this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
241
241
  }
242
242
  }
243
- const 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) => {
244
244
  let t = !0;
245
245
  for (let e in r)
246
246
  e !== "valid" && r[e] !== !1 && (t = !1);
@@ -333,7 +333,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
333
333
  const { get: i } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
334
334
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
335
335
  get(...s) {
336
- 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) || []);
337
337
  if (u.length === 0)
338
338
  return n;
339
339
  const v = Array.from(n).concat(u).sort((x, w) => x.compareDocumentPosition ? x.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
@@ -348,7 +348,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
348
348
  constructor(t) {
349
349
  if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
350
350
  throw new TypeError("Illegal constructor");
351
- const e = t.getRootNode(), o = new pt();
351
+ const e = t.getRootNode(), o = new ht();
352
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);
353
353
  }
354
354
  checkValidity() {
@@ -411,7 +411,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
411
411
  const s = l.get(this), n = {};
412
412
  for (const x in t)
413
413
  n[x] = t[x];
414
- Object.keys(n).length === 0 && ht(s);
414
+ Object.keys(n).length === 0 && pt(s);
415
415
  const u = { ...s, ...n };
416
416
  delete u.valid;
417
417
  const { valid: v } = mt(s, u, this.form);
@@ -512,7 +512,7 @@ var Ft = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, g = (c, l,
512
512
  return d && m && Ft(l, a, m), m;
513
513
  };
514
514
  const z = "pie-button";
515
- class p extends Et {
515
+ class h extends Et {
516
516
  constructor() {
517
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();
518
518
  }
@@ -544,7 +544,7 @@ class p extends Et {
544
544
  variant: m,
545
545
  size: y,
546
546
  isLoading: b,
547
- iconPlacement: h
547
+ iconPlacement: p
548
548
  } = this;
549
549
  return R`
550
550
  <button
@@ -556,9 +556,9 @@ class p extends Et {
556
556
  ?disabled=${a}
557
557
  ?isFullWidth=${d}
558
558
  ?isLoading=${b}>
559
- ${h === "leading" ? R`<slot name="icon"></slot>` : ot}
559
+ ${p === "leading" ? R`<slot name="icon"></slot>` : ot}
560
560
  <slot></slot>
561
- ${h === "trailing" ? R`<slot name="icon"></slot>` : ot}
561
+ ${p === "trailing" ? R`<slot name="icon"></slot>` : ot}
562
562
  </button>`;
563
563
  }
564
564
  focus() {
@@ -566,57 +566,57 @@ class p extends Et {
566
566
  (a = (l = this.shadowRoot) == null ? void 0 : l.querySelector("button")) == null || a.focus();
567
567
  }
568
568
  }
569
- p.formAssociated = !0;
570
- p.styles = wt(At);
569
+ h.formAssociated = !0;
570
+ h.styles = wt(At);
571
571
  g([
572
572
  f(),
573
573
  N(z, Mt, "medium")
574
- ], p.prototype, "size", 2);
574
+ ], h.prototype, "size", 2);
575
575
  g([
576
576
  f(),
577
577
  N(z, kt, "submit")
578
- ], p.prototype, "type", 2);
578
+ ], h.prototype, "type", 2);
579
579
  g([
580
580
  f(),
581
581
  N(z, zt, "primary")
582
- ], p.prototype, "variant", 2);
582
+ ], h.prototype, "variant", 2);
583
583
  g([
584
584
  f({ type: String }),
585
585
  N(z, Ct, "leading")
586
- ], p.prototype, "iconPlacement", 2);
586
+ ], h.prototype, "iconPlacement", 2);
587
587
  g([
588
588
  f({ type: Boolean })
589
- ], p.prototype, "disabled", 2);
589
+ ], h.prototype, "disabled", 2);
590
590
  g([
591
591
  f({ type: Boolean, reflect: !0 })
592
- ], p.prototype, "isLoading", 2);
592
+ ], h.prototype, "isLoading", 2);
593
593
  g([
594
594
  f({ type: Boolean })
595
- ], p.prototype, "isFullWidth", 2);
595
+ ], h.prototype, "isFullWidth", 2);
596
596
  g([
597
597
  f({ type: String })
598
- ], p.prototype, "name", 2);
598
+ ], h.prototype, "name", 2);
599
599
  g([
600
600
  f({ type: String })
601
- ], p.prototype, "value", 2);
601
+ ], h.prototype, "value", 2);
602
602
  g([
603
603
  f()
604
- ], p.prototype, "formaction", 2);
604
+ ], h.prototype, "formaction", 2);
605
605
  g([
606
606
  f()
607
- ], p.prototype, "formenctype", 2);
607
+ ], h.prototype, "formenctype", 2);
608
608
  g([
609
609
  f()
610
- ], p.prototype, "formmethod", 2);
610
+ ], h.prototype, "formmethod", 2);
611
611
  g([
612
612
  f({ type: Boolean })
613
- ], p.prototype, "formnovalidate", 2);
613
+ ], h.prototype, "formnovalidate", 2);
614
614
  g([
615
615
  f()
616
- ], p.prototype, "formtarget", 2);
617
- xt(z, p);
616
+ ], h.prototype, "formtarget", 2);
617
+ xt(z, h);
618
618
  export {
619
- p as PieButton,
619
+ h as PieButton,
620
620
  St as formEncodingtypes,
621
621
  Vt as formMethodTypes,
622
622
  Nt as formTargetTypes,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "0.33.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",
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);