@justeattakeaway/pie-button 0.47.8 → 0.48.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.js +291 -289
  2. package/dist/react.js +1 -1
  3. package/package.json +1 -1
  4. package/src/button.scss +75 -45
  5. package/src/index.ts +13 -9
package/dist/index.js CHANGED
@@ -1,9 +1,9 @@
1
- import { LitElement as Ct, html as P, nothing as K, unsafeCSS as Ft } from "lit";
2
- import { property as m } from "lit/decorators.js";
3
- import { ifDefined as Lt } from "lit/directives/if-defined.js";
4
- import { FormControlMixin as St, validPropertyValues as O, defineCustomElement as At } from "@justeattakeaway/pie-webc-core";
1
+ import { LitElement as zt, html as P, nothing as K, unsafeCSS as Ft } from "lit";
2
+ import { classMap as St } from "lit/directives/class-map.js";
3
+ import { property as h } from "lit/decorators.js";
4
+ import { FormControlMixin as At, validPropertyValues as O, defineCustomElement as It } from "@justeattakeaway/pie-webc-core";
5
5
  import "@justeattakeaway/pie-spinner";
6
- const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Kt = ["productive", "expressive"], Tt = ["submit", "button", "reset"], Vt = [
6
+ const Tt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Kt = ["productive", "expressive"], Lt = ["submit", "button", "reset"], Vt = [
7
7
  "primary",
8
8
  "secondary",
9
9
  "outline",
@@ -13,7 +13,7 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
13
13
  "ghost-inverse",
14
14
  "destructive",
15
15
  "destructive-ghost"
16
- ], Nt = ["leading", "trailing"], jt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Ut = ["post", "get", "dialog"], qt = ["_self", "_blank", "_parent", "_top"], b = {
16
+ ], Nt = ["leading", "trailing"], jt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Ut = ["post", "get", "dialog"], qt = ["_self", "_blank", "_parent", "_top"], f = {
17
17
  size: "medium",
18
18
  type: "submit",
19
19
  variant: "primary",
@@ -22,11 +22,11 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
22
22
  isLoading: !1,
23
23
  isFullWidth: !1,
24
24
  isResponsive: !1
25
- }, Pt = `*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--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;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;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;-webkit-user-select:none;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: 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: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--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);--icon-size-override: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--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);--icon-size-override: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--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);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--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);--icon-size-override: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--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);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--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);--icon-size-override: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--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);--icon-size-override: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--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);--icon-size-override: 24px}}.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);--icon-size-override: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}
25
+ }, Pt = `*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--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;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;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;-webkit-user-select:none;user-select:none;inline-size:var(--btn-inline-size)}.o-btn.o-btn--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.o-btn--primary:active:not(:disabled),.o-btn.o-btn--primary.is-loading: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.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn.o-btn--primary.o-btn--xsmall:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:hover:not(:disabled){--hover-modifier: 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.o-btn--primary.o-btn--xsmall:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.is-loading:not(:disabled){--active-modifier: 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)))}@media (min-width: 769px){.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive,.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive{--btn-bg-color: var(--dt-color-interactive-brand)}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive: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.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading: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.o-btn--secondary{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--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.o-btn--secondary:active:not(:disabled),.o-btn.o-btn--secondary.is-loading: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.o-btn--outline{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--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.o-btn--outline:active:not(:disabled),.o-btn.o-btn--outline.is-loading: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.o-btn--ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn.o-btn--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.o-btn--ghost:active:not(:disabled),.o-btn.o-btn--ghost.is-loading: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.o-btn--inverse{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--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.o-btn--inverse:active:not(:disabled),.o-btn.o-btn--inverse.is-loading: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.o-btn--ghost-inverse,.o-btn.o-btn--outline-inverse{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--ghost-inverse:hover:not(:disabled),.o-btn.o-btn--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.o-btn--ghost-inverse:active:not(:disabled),.o-btn.o-btn--ghost-inverse.is-loading:not(:disabled),.o-btn.o-btn--outline-inverse:active:not(:disabled),.o-btn.o-btn--outline-inverse.is-loading: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.o-btn--outline-inverse:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--destructive{--btn-bg-color: var(--dt-color-support-error)}.o-btn.o-btn--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.o-btn--destructive:active:not(:disabled),.o-btn.o-btn--destructive.is-loading: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.o-btn--destructive-ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn.o-btn--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.o-btn--destructive-ghost:active:not(:disabled),.o-btn.o-btn--destructive-ghost.is-loading: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.o-btn--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);--icon-size-override: 16px}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--responsive{--btn-height: var(--btn-height--small);--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);--icon-size-override: 20px}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--expressive{--btn-height: var(--btn-height--small);--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);--icon-size-override: 20px}}.o-btn.o-btn--small-expressive{--btn-height: var(--btn-height--small);--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);--icon-size-override: 20px}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--responsive{--btn-height: var(--btn-height--medium);--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);--icon-size-override: 24px}}.o-btn.o-btn--small-productive{--btn-height: var(--btn-height--small);--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);--icon-size-override: 20px}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--responsive{--btn-height: var(--btn-height--medium);--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);--icon-size-override: 24px}}.o-btn.o-btn--medium{--btn-height: var(--btn-height--medium);--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);--icon-size-override: 24px}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--responsive{--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);--icon-size-override: 24px}}.o-btn.o-btn--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);--icon-size-override: 24px}.o-btn.o-btn--fullWidth{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not(.o-btn--ghost,.o-btn--ghost-inverse,.o-btn--destructive-ghost){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled].o-btn--outline{border-color:var(--dt-color-disabled-01)!important}.o-btn.is-loading>*:not(pie-spinner){visibility:hidden}.o-btn.is-loading pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}
26
26
  `;
27
27
  (function() {
28
28
  (function(k) {
29
- const a = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), A = {
29
+ const n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), I = {
30
30
  ariaAtomic: "aria-atomic",
31
31
  ariaAutoComplete: "aria-autocomplete",
32
32
  ariaBusy: "aria-busy",
@@ -70,57 +70,57 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
70
70
  ariaValueText: "aria-valuetext",
71
71
  role: "role"
72
72
  }, dt = (e, t) => {
73
- for (let i in A) {
74
- t[i] = null;
75
- let r = null;
76
- const o = A[i];
77
- Object.defineProperty(t, i, {
73
+ for (let o in I) {
74
+ t[o] = null;
75
+ let i = null;
76
+ const r = I[o];
77
+ Object.defineProperty(t, o, {
78
78
  get() {
79
- return r;
79
+ return i;
80
80
  },
81
81
  set(s) {
82
- r = s, e.isConnected ? e.setAttribute(o, s) : L.set(e, t);
82
+ i = s, e.isConnected ? e.setAttribute(r, s) : C.set(e, t);
83
83
  }
84
84
  });
85
85
  }
86
86
  };
87
87
  function J(e) {
88
- const t = c.get(e), { form: i } = t;
89
- et(e, i, t), tt(e, t.labels);
88
+ const t = c.get(e), { form: o } = t;
89
+ et(e, o, t), tt(e, t.labels);
90
90
  }
91
91
  const Q = (e, t = !1) => {
92
- const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
92
+ const o = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
93
93
  acceptNode(s) {
94
94
  return c.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
95
95
  }
96
96
  });
97
- let r = i.nextNode();
98
- const o = !t || e.disabled;
99
- for (; r; )
100
- r.formDisabledCallback && o && D(r, e.disabled), r = i.nextNode();
101
- }, X = { attributes: !0, attributeFilter: ["disabled", "name"] }, I = N() ? new MutationObserver((e) => {
97
+ let i = o.nextNode();
98
+ const r = !t || e.disabled;
99
+ for (; i; )
100
+ i.formDisabledCallback && r && D(i, e.disabled), i = o.nextNode();
101
+ }, X = { attributes: !0, attributeFilter: ["disabled", "name"] }, T = N() ? new MutationObserver((e) => {
102
102
  for (const t of e) {
103
- const i = t.target;
104
- if (t.attributeName === "disabled" && (i.constructor.formAssociated ? D(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && Q(i)), t.attributeName === "name" && i.constructor.formAssociated) {
105
- const r = c.get(i), o = F.get(i);
106
- r.setFormValue(o);
103
+ const o = t.target;
104
+ if (t.attributeName === "disabled" && (o.constructor.formAssociated ? D(o, o.hasAttribute("disabled")) : o.localName === "fieldset" && Q(o)), t.attributeName === "name" && o.constructor.formAssociated) {
105
+ const i = c.get(o), r = z.get(o);
106
+ i.setFormValue(r);
107
107
  }
108
108
  }
109
109
  }) : {};
110
- function R(e) {
110
+ function _(e) {
111
111
  e.forEach((t) => {
112
- const { addedNodes: i, removedNodes: r } = t, o = Array.from(i), s = Array.from(r);
113
- o.forEach((l) => {
114
- var u;
115
- if (c.has(l) && l.constructor.formAssociated && J(l), L.has(l)) {
116
- const d = L.get(l);
117
- Object.keys(A).filter((y) => d[y] !== null).forEach((y) => {
118
- l.setAttribute(A[y], d[y]);
119
- }), L.delete(l);
112
+ const { addedNodes: o, removedNodes: i } = t, r = Array.from(o), s = Array.from(i);
113
+ r.forEach((l) => {
114
+ var m;
115
+ if (c.has(l) && l.constructor.formAssociated && J(l), C.has(l)) {
116
+ const d = C.get(l);
117
+ Object.keys(I).filter((y) => d[y] !== null).forEach((y) => {
118
+ l.setAttribute(I[y], d[y]);
119
+ }), C.delete(l);
120
120
  }
121
- if (S.has(l)) {
122
- const d = S.get(l);
123
- l.setAttribute("internals-valid", d.validity.valid.toString()), l.setAttribute("internals-invalid", (!d.validity.valid).toString()), l.setAttribute("aria-invalid", (!d.validity.valid).toString()), S.delete(l);
121
+ if (A.has(l)) {
122
+ const d = A.get(l);
123
+ l.setAttribute("internals-valid", d.validity.valid.toString()), l.setAttribute("internals-invalid", (!d.validity.valid).toString()), l.setAttribute("aria-invalid", (!d.validity.valid).toString()), A.delete(l);
124
124
  }
125
125
  if (l.localName === "form") {
126
126
  const d = g.get(l), E = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
@@ -132,99 +132,99 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
132
132
  for (; y; )
133
133
  J(y), y = E.nextNode();
134
134
  }
135
- l.localName === "fieldset" && ((u = I.observe) === null || u === void 0 || u.call(I, l, X), Q(l, !0));
135
+ l.localName === "fieldset" && ((m = T.observe) === null || m === void 0 || m.call(T, l, X), Q(l, !0));
136
136
  }), s.forEach((l) => {
137
- const u = c.get(l);
138
- u && h.get(u) && Y(u), z.has(l) && z.get(l).disconnect();
137
+ const m = c.get(l);
138
+ m && v.get(m) && Y(m), M.has(l) && M.get(l).disconnect();
139
139
  });
140
140
  });
141
141
  }
142
- function vt(e) {
142
+ function bt(e) {
143
143
  e.forEach((t) => {
144
- const { removedNodes: i } = t;
145
- i.forEach((r) => {
146
- const o = q.get(t.target);
147
- c.has(r) && rt(r), o.disconnect();
144
+ const { removedNodes: o } = t;
145
+ o.forEach((i) => {
146
+ const r = q.get(t.target);
147
+ c.has(i) && it(i), r.disconnect();
148
148
  });
149
149
  });
150
150
  }
151
- const ht = (e) => {
152
- var t, i;
153
- const r = new MutationObserver(vt);
154
- !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (i = r.observe) === null || i === void 0 || i.call(r, e, { childList: !0 }), q.set(e, r);
151
+ const vt = (e) => {
152
+ var t, o;
153
+ const i = new MutationObserver(bt);
154
+ !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (o = i.observe) === null || o === void 0 || o.call(i, e, { childList: !0 }), q.set(e, i);
155
155
  };
156
- N() && new MutationObserver(R);
157
- const _ = {
156
+ N() && new MutationObserver(_);
157
+ const R = {
158
158
  childList: !0,
159
159
  subtree: !0
160
160
  }, D = (e, t) => {
161
161
  e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
162
162
  }, Y = (e) => {
163
- h.get(e).forEach((i) => {
164
- i.remove();
165
- }), h.set(e, []);
163
+ v.get(e).forEach((o) => {
164
+ o.remove();
165
+ }), v.set(e, []);
166
166
  }, Z = (e, t) => {
167
- const i = document.createElement("input");
168
- return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), h.get(t).push(i), i;
169
- }, mt = (e, t) => {
170
- var i;
171
- h.set(t, []), (i = I.observe) === null || i === void 0 || i.call(I, e, X);
167
+ const o = document.createElement("input");
168
+ return o.type = "hidden", o.name = e.getAttribute("name"), e.after(o), v.get(t).push(o), o;
169
+ }, ht = (e, t) => {
170
+ var o;
171
+ v.set(t, []), (o = T.observe) === null || o === void 0 || o.call(T, e, X);
172
172
  }, tt = (e, t) => {
173
173
  if (t.length) {
174
- Array.from(t).forEach((r) => r.addEventListener("click", e.click.bind(e)));
175
- let i = t[0].id;
176
- t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
174
+ Array.from(t).forEach((i) => i.addEventListener("click", e.click.bind(e)));
175
+ let o = t[0].id;
176
+ t[0].id || (o = `${t[0].htmlFor}_Label`, t[0].id = o), e.setAttribute("aria-labelledby", o);
177
177
  }
178
- }, T = (e) => {
179
- const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = g.get(e) || [], r = Array.from(i).filter((s) => s.isConnected).map((s) => c.get(s).validity.valid), o = [...t, ...r].includes(!1);
180
- e.toggleAttribute("internals-invalid", o), e.toggleAttribute("internals-valid", !o);
178
+ }, L = (e) => {
179
+ const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), o = g.get(e) || [], i = Array.from(o).filter((s) => s.isConnected).map((s) => c.get(s).validity.valid), r = [...t, ...i].includes(!1);
180
+ e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
181
181
  }, pt = (e) => {
182
- T(V(e.target));
182
+ L(V(e.target));
183
+ }, mt = (e) => {
184
+ L(V(e.target));
183
185
  }, ut = (e) => {
184
- T(V(e.target));
185
- }, ft = (e) => {
186
- const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${e.id ? `,${i}[form='${e.id}']` : ""}`).join(",");
187
- e.addEventListener("click", (i) => {
188
- if (i.target.closest(t)) {
189
- const o = g.get(e);
186
+ const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((o) => `${o}:not([disabled])`).map((o) => `${o}:not([form])${e.id ? `,${o}[form='${e.id}']` : ""}`).join(",");
187
+ e.addEventListener("click", (o) => {
188
+ if (o.target.closest(t)) {
189
+ const r = g.get(e);
190
190
  if (e.noValidate)
191
191
  return;
192
- o.size && Array.from(o).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && i.preventDefault();
192
+ r.size && Array.from(r).reverse().map((m) => c.get(m).reportValidity()).includes(!1) && o.preventDefault();
193
193
  }
194
194
  });
195
- }, bt = (e) => {
195
+ }, ft = (e) => {
196
196
  const t = g.get(e.target);
197
- t && t.size && t.forEach((i) => {
198
- i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
197
+ t && t.size && t.forEach((o) => {
198
+ o.constructor.formAssociated && o.formResetCallback && o.formResetCallback.apply(o);
199
199
  });
200
- }, et = (e, t, i) => {
200
+ }, et = (e, t, o) => {
201
201
  if (t) {
202
- const r = g.get(t);
203
- if (r)
204
- r.add(e);
202
+ const i = g.get(t);
203
+ if (i)
204
+ i.add(e);
205
205
  else {
206
- const o = /* @__PURE__ */ new Set();
207
- o.add(e), g.set(t, o), ft(t), t.addEventListener("reset", bt), t.addEventListener("input", pt), t.addEventListener("change", ut);
206
+ const r = /* @__PURE__ */ new Set();
207
+ r.add(e), g.set(t, r), ut(t), t.addEventListener("reset", ft), t.addEventListener("input", pt), t.addEventListener("change", mt);
208
208
  }
209
- w.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
209
+ w.set(t, { ref: e, internals: o }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
210
210
  e.formAssociatedCallback.apply(e, [t]);
211
- }, 0), T(t);
211
+ }, 0), L(t);
212
212
  }
213
213
  }, V = (e) => {
214
214
  let t = e.parentNode;
215
215
  return t && t.tagName !== "FORM" && (t = V(t)), t;
216
- }, x = (e, t, i = DOMException) => {
216
+ }, x = (e, t, o = DOMException) => {
217
217
  if (!e.constructor.formAssociated)
218
- throw new i(t);
219
- }, it = (e, t, i) => {
220
- const r = g.get(e);
221
- return r && r.size && r.forEach((o) => {
222
- c.get(o)[i]() || (t = !1);
218
+ throw new o(t);
219
+ }, ot = (e, t, o) => {
220
+ const i = g.get(e);
221
+ return i && i.size && i.forEach((r) => {
222
+ c.get(r)[o]() || (t = !1);
223
223
  }), t;
224
- }, rt = (e) => {
224
+ }, it = (e) => {
225
225
  if (e.constructor.formAssociated) {
226
- const t = c.get(e), { labels: i, form: r } = t;
227
- tt(e, i), et(e, r, t);
226
+ const t = c.get(e), { labels: o, form: i } = t;
227
+ tt(e, o), et(e, i, t);
228
228
  }
229
229
  };
230
230
  function N() {
@@ -235,13 +235,13 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
235
235
  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);
236
236
  }
237
237
  }
238
- const yt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), wt = (e, t, i) => (e.valid = xt(t), Object.keys(t).forEach((r) => e[r] = t[r]), i && T(i), e), xt = (e) => {
238
+ const yt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), wt = (e, t, o) => (e.valid = xt(t), Object.keys(t).forEach((i) => e[i] = t[i]), o && L(o), e), xt = (e) => {
239
239
  let t = !0;
240
- for (let i in e)
241
- i !== "valid" && e[i] !== !1 && (t = !1);
240
+ for (let o in e)
241
+ o !== "valid" && e[o] !== !1 && (t = !1);
242
242
  return t;
243
243
  }, W = /* @__PURE__ */ new WeakMap();
244
- function ot(e, t) {
244
+ function rt(e, t) {
245
245
  e.toggleAttribute(t, !0), e.part && e.part.add(t);
246
246
  }
247
247
  class $ extends Set {
@@ -256,10 +256,10 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
256
256
  add(t) {
257
257
  if (!/^--/.test(t) || typeof t != "string")
258
258
  throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
259
- const i = super.add(t), r = W.get(this), o = `state${t}`;
260
- return r.isConnected ? ot(r, o) : setTimeout(() => {
261
- ot(r, o);
262
- }), i;
259
+ const o = super.add(t), i = W.get(this), r = `state${t}`;
260
+ return i.isConnected ? rt(i, r) : setTimeout(() => {
261
+ rt(i, r);
262
+ }), o;
263
263
  }
264
264
  clear() {
265
265
  for (let [t] of this.entries())
@@ -267,43 +267,43 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
267
267
  super.clear();
268
268
  }
269
269
  delete(t) {
270
- const i = super.delete(t), r = W.get(this);
271
- return r.isConnected ? (r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`)) : setTimeout(() => {
272
- r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`);
273
- }), i;
270
+ const o = super.delete(t), i = W.get(this);
271
+ return i.isConnected ? (i.toggleAttribute(`state${t}`, !1), i.part && i.part.remove(`state${t}`)) : setTimeout(() => {
272
+ i.toggleAttribute(`state${t}`, !1), i.part && i.part.remove(`state${t}`);
273
+ }), o;
274
274
  }
275
275
  }
276
- function at(e, t, i, r) {
277
- if (i === "a" && !r)
276
+ function nt(e, t, o, i) {
277
+ if (o === "a" && !i)
278
278
  throw new TypeError("Private accessor was defined without a getter");
279
- if (typeof t == "function" ? e !== t || !r : !t.has(e))
279
+ if (typeof t == "function" ? e !== t || !i : !t.has(e))
280
280
  throw new TypeError("Cannot read private member from an object whose class did not declare it");
281
- return i === "m" ? r : i === "a" ? r.call(e) : r ? r.value : t.get(e);
281
+ return o === "m" ? i : o === "a" ? i.call(e) : i ? i.value : t.get(e);
282
282
  }
283
- function Et(e, t, i, r, o) {
284
- if (r === "m")
283
+ function Et(e, t, o, i, r) {
284
+ if (i === "m")
285
285
  throw new TypeError("Private method is not writable");
286
- if (r === "a" && !o)
286
+ if (i === "a" && !r)
287
287
  throw new TypeError("Private accessor was defined without a setter");
288
- if (typeof t == "function" ? e !== t || !o : !t.has(e))
288
+ if (typeof t == "function" ? e !== t || !r : !t.has(e))
289
289
  throw new TypeError("Cannot write private member to an object whose class did not declare it");
290
- return r === "a" ? o.call(e, i) : o ? o.value = i : t.set(e, i), i;
290
+ return i === "a" ? r.call(e, o) : r ? r.value = o : t.set(e, o), o;
291
291
  }
292
- var M;
292
+ var F;
293
293
  class kt {
294
294
  constructor(t) {
295
- M.set(this, void 0), Et(this, M, t, "f");
296
- for (let i = 0; i < t.length; i++) {
297
- let r = t[i];
298
- this[i] = r, r.hasAttribute("name") && (this[r.getAttribute("name")] = r);
295
+ F.set(this, void 0), Et(this, F, t, "f");
296
+ for (let o = 0; o < t.length; o++) {
297
+ let i = t[o];
298
+ this[o] = i, i.hasAttribute("name") && (this[i.getAttribute("name")] = i);
299
299
  }
300
300
  Object.freeze(this);
301
301
  }
302
302
  get length() {
303
- return at(this, M, "f").length;
303
+ return nt(this, F, "f").length;
304
304
  }
305
- [(M = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
306
- return at(this, M, "f")[Symbol.iterator]();
305
+ [(F = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
306
+ return nt(this, F, "f")[Symbol.iterator]();
307
307
  }
308
308
  item(t) {
309
309
  return this[t] == null ? null : this[t];
@@ -312,126 +312,126 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
312
312
  return this[t] == null ? null : this[t];
313
313
  }
314
314
  }
315
- function zt() {
315
+ function Mt() {
316
316
  const e = HTMLFormElement.prototype.checkValidity;
317
- HTMLFormElement.prototype.checkValidity = i;
317
+ HTMLFormElement.prototype.checkValidity = o;
318
318
  const t = HTMLFormElement.prototype.reportValidity;
319
- HTMLFormElement.prototype.reportValidity = r;
320
- function i(...s) {
319
+ HTMLFormElement.prototype.reportValidity = i;
320
+ function o(...s) {
321
321
  let l = e.apply(this, s);
322
- return it(this, l, "checkValidity");
322
+ return ot(this, l, "checkValidity");
323
323
  }
324
- function r(...s) {
324
+ function i(...s) {
325
325
  let l = t.apply(this, s);
326
- return it(this, l, "reportValidity");
326
+ return ot(this, l, "reportValidity");
327
327
  }
328
- const { get: o } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
328
+ const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
329
329
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
330
330
  get(...s) {
331
- const l = o.call(this, ...s), u = Array.from(g.get(this) || []);
332
- if (u.length === 0)
331
+ const l = r.call(this, ...s), m = Array.from(g.get(this) || []);
332
+ if (m.length === 0)
333
333
  return l;
334
- const d = Array.from(l).concat(u).sort((E, y) => E.compareDocumentPosition ? E.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
334
+ const d = Array.from(l).concat(m).sort((E, y) => E.compareDocumentPosition ? E.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
335
335
  return new kt(d);
336
336
  }
337
337
  });
338
338
  }
339
- class nt {
339
+ class at {
340
340
  static get isPolyfilled() {
341
341
  return !0;
342
342
  }
343
343
  constructor(t) {
344
344
  if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
345
345
  throw new TypeError("Illegal constructor");
346
- const i = t.getRootNode(), r = new gt();
347
- this.states = new $(t), a.set(this, t), n.set(this, r), c.set(t, this), dt(t, this), mt(t, this), Object.seal(this), i instanceof DocumentFragment && ht(i);
346
+ const o = t.getRootNode(), i = new gt();
347
+ this.states = new $(t), n.set(this, t), a.set(this, i), c.set(t, this), dt(t, this), ht(t, this), Object.seal(this), o instanceof DocumentFragment && vt(o);
348
348
  }
349
349
  checkValidity() {
350
- const t = a.get(this);
350
+ const t = n.get(this);
351
351
  if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
352
352
  return !0;
353
- const i = n.get(this);
354
- if (!i.valid) {
355
- const r = new Event("invalid", {
353
+ const o = a.get(this);
354
+ if (!o.valid) {
355
+ const i = new Event("invalid", {
356
356
  bubbles: !1,
357
357
  cancelable: !0,
358
358
  composed: !1
359
359
  });
360
- t.dispatchEvent(r);
360
+ t.dispatchEvent(i);
361
361
  }
362
- return i.valid;
362
+ return o.valid;
363
363
  }
364
364
  get form() {
365
- const t = a.get(this);
365
+ const t = n.get(this);
366
366
  x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
367
- let i;
368
- return t.constructor.formAssociated === !0 && (i = V(t)), i;
367
+ let o;
368
+ return t.constructor.formAssociated === !0 && (o = V(t)), o;
369
369
  }
370
370
  get labels() {
371
- const t = a.get(this);
371
+ const t = n.get(this);
372
372
  x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
373
- const i = t.getAttribute("id"), r = t.getRootNode();
374
- return r && i ? r.querySelectorAll(`[for="${i}"]`) : [];
373
+ const o = t.getAttribute("id"), i = t.getRootNode();
374
+ return i && o ? i.querySelectorAll(`[for="${o}"]`) : [];
375
375
  }
376
376
  reportValidity() {
377
- const t = a.get(this);
377
+ const t = n.get(this);
378
378
  if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
379
379
  return !0;
380
- const i = this.checkValidity(), r = U.get(this);
381
- if (r && !t.constructor.formAssociated)
380
+ const o = this.checkValidity(), i = U.get(this);
381
+ if (i && !t.constructor.formAssociated)
382
382
  throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
383
- return !i && r && (t.focus(), r.focus()), i;
383
+ return !o && i && (t.focus(), i.focus()), o;
384
384
  }
385
385
  setFormValue(t) {
386
- const i = a.get(this);
387
- if (x(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Y(this), t != null && !(t instanceof FormData)) {
388
- if (i.getAttribute("name")) {
389
- const r = Z(i, this);
390
- r.value = t;
386
+ const o = n.get(this);
387
+ if (x(o, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Y(this), t != null && !(t instanceof FormData)) {
388
+ if (o.getAttribute("name")) {
389
+ const i = Z(o, this);
390
+ i.value = t;
391
391
  }
392
392
  } else
393
- t != null && t instanceof FormData && Array.from(t).reverse().forEach(([r, o]) => {
394
- if (typeof o == "string") {
395
- const s = Z(i, this);
396
- s.name = r, s.value = o;
393
+ t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, r]) => {
394
+ if (typeof r == "string") {
395
+ const s = Z(o, this);
396
+ s.name = i, s.value = r;
397
397
  }
398
398
  });
399
- F.set(i, t);
399
+ z.set(o, t);
400
400
  }
401
- setValidity(t, i, r) {
402
- const o = a.get(this);
403
- if (x(o, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
401
+ setValidity(t, o, i) {
402
+ const r = n.get(this);
403
+ if (x(r, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
404
404
  throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
405
- U.set(this, r);
406
- const s = n.get(this), l = {};
405
+ U.set(this, i);
406
+ const s = a.get(this), l = {};
407
407
  for (const E in t)
408
408
  l[E] = t[E];
409
409
  Object.keys(l).length === 0 && yt(s);
410
- const u = Object.assign(Object.assign({}, s), l);
411
- delete u.valid;
412
- const { valid: d } = wt(s, u, this.form);
413
- if (!d && !i)
410
+ const m = Object.assign(Object.assign({}, s), l);
411
+ delete m.valid;
412
+ const { valid: d } = wt(s, m, this.form);
413
+ if (!d && !o)
414
414
  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.");
415
- f.set(this, d ? "" : i), o.isConnected ? (o.toggleAttribute("internals-invalid", !d), o.toggleAttribute("internals-valid", d), o.setAttribute("aria-invalid", `${!d}`)) : S.set(o, this);
415
+ u.set(this, d ? "" : o), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : A.set(r, this);
416
416
  }
417
417
  get shadowRoot() {
418
- const t = a.get(this), i = j.get(t);
419
- return i || null;
418
+ const t = n.get(this), o = j.get(t);
419
+ return o || null;
420
420
  }
421
421
  get validationMessage() {
422
- const t = a.get(this);
423
- return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), f.get(this);
422
+ const t = n.get(this);
423
+ return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), u.get(this);
424
424
  }
425
425
  get validity() {
426
- const t = a.get(this);
427
- return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), n.get(this);
426
+ const t = n.get(this);
427
+ return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), a.get(this);
428
428
  }
429
429
  get willValidate() {
430
- const t = a.get(this);
430
+ const t = n.get(this);
431
431
  return x(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
432
432
  }
433
433
  }
434
- function Mt() {
434
+ function Ct() {
435
435
  if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
436
436
  return !1;
437
437
  class e extends HTMLElement {
@@ -441,7 +441,7 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
441
441
  }
442
442
  const t = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, "")}`;
443
443
  customElements.define(t, e);
444
- const i = new e();
444
+ const o = new e();
445
445
  return [
446
446
  "shadowRoot",
447
447
  "form",
@@ -453,27 +453,27 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
453
453
  "setValidity",
454
454
  "checkValidity",
455
455
  "reportValidity"
456
- ].every((r) => r in i.internals);
456
+ ].every((i) => i in o.internals);
457
457
  }
458
458
  let st = !1, lt = !1;
459
459
  function H(e) {
460
460
  lt || (lt = !0, window.CustomStateSet = $, e && (HTMLElement.prototype.attachInternals = function(...t) {
461
- const i = e.call(this, t);
462
- return i.states = new $(this), i;
461
+ const o = e.call(this, t);
462
+ return o.states = new $(this), o;
463
463
  }));
464
464
  }
465
465
  function ct(e = !0) {
466
466
  if (!st) {
467
- if (st = !0, typeof window < "u" && (window.ElementInternals = nt), typeof CustomElementRegistry < "u") {
467
+ if (st = !0, typeof window < "u" && (window.ElementInternals = at), typeof CustomElementRegistry < "u") {
468
468
  const t = CustomElementRegistry.prototype.define;
469
- CustomElementRegistry.prototype.define = function(i, r, o) {
470
- if (r.formAssociated) {
471
- const s = r.prototype.connectedCallback;
472
- r.prototype.connectedCallback = function() {
473
- G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), s != null && s.apply(this), rt(this);
469
+ CustomElementRegistry.prototype.define = function(o, i, r) {
470
+ if (i.formAssociated) {
471
+ const s = i.prototype.connectedCallback;
472
+ i.prototype.connectedCallback = function() {
473
+ G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), s != null && s.apply(this), it(this);
474
474
  };
475
475
  }
476
- t.call(this, i, r, o);
476
+ t.call(this, o, i, r);
477
477
  };
478
478
  }
479
479
  if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
@@ -484,55 +484,55 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
484
484
  return {};
485
485
  if (c.has(this))
486
486
  throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
487
- return new nt(this);
487
+ return new at(this);
488
488
  }), typeof Element < "u") {
489
- let t = function(...r) {
490
- const o = i.apply(this, r);
491
- if (j.set(this, o), N()) {
492
- const s = new MutationObserver(R);
493
- window.ShadyDOM ? s.observe(this, _) : s.observe(o, _), z.set(this, s);
489
+ let t = function(...i) {
490
+ const r = o.apply(this, i);
491
+ if (j.set(this, r), N()) {
492
+ const s = new MutationObserver(_);
493
+ window.ShadyDOM ? s.observe(this, R) : s.observe(r, R), M.set(this, s);
494
494
  }
495
- return o;
495
+ return r;
496
496
  };
497
- const i = Element.prototype.attachShadow;
497
+ const o = Element.prototype.attachShadow;
498
498
  Element.prototype.attachShadow = t;
499
499
  }
500
- N() && typeof document < "u" && new MutationObserver(R).observe(document.documentElement, _), typeof HTMLFormElement < "u" && zt(), (e || typeof window < "u" && !window.CustomStateSet) && H();
500
+ N() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, R), typeof HTMLFormElement < "u" && Mt(), (e || typeof window < "u" && !window.CustomStateSet) && H();
501
501
  }
502
502
  }
503
- return !!customElements.polyfillWrapFlushCallback || (Mt() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : ct(!1)), k.forceCustomStateSetPolyfill = H, k.forceElementInternalsPolyfill = ct, Object.defineProperty(k, "__esModule", { value: !0 }), k;
503
+ return !!customElements.polyfillWrapFlushCallback || (Ct() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : ct(!1)), k.forceCustomStateSetPolyfill = H, k.forceElementInternalsPolyfill = ct, Object.defineProperty(k, "__esModule", { value: !0 }), k;
504
504
  })({});
505
505
  })();
506
- var Ot = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, p = (k, a, n, h) => {
507
- for (var c = h > 1 ? void 0 : h ? Rt(a, n) : a, f = k.length - 1, w; f >= 0; f--)
508
- (w = k[f]) && (c = (h ? w(a, n, c) : w(c)) || c);
509
- return h && c && Ot(a, n, c), c;
506
+ var Ot = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, p = (k, n, a, v) => {
507
+ for (var c = v > 1 ? void 0 : v ? _t(n, a) : n, u = k.length - 1, w; u >= 0; u--)
508
+ (w = k[u]) && (c = (v ? w(n, a, c) : w(c)) || c);
509
+ return v && c && Ot(n, a, c), c;
510
510
  };
511
- const C = "pie-button";
512
- class v extends St(Ct) {
511
+ const S = "pie-button";
512
+ class b extends At(zt) {
513
513
  constructor() {
514
- super(...arguments), this.size = b.size, this.type = b.type, this.variant = b.variant, this.iconPlacement = b.iconPlacement, this.disabled = b.disabled, this.isLoading = b.isLoading, this.isFullWidth = b.isFullWidth, this.isResponsive = b.isResponsive, this._handleFormKeyDown = (a) => {
515
- if (!(a.key !== "Enter" || this.type !== "submit" || this.disabled)) {
516
- if (a.target instanceof HTMLElement) {
517
- const n = a.target.tagName.toLowerCase();
518
- if (n === "button" || n === "pie-button")
514
+ super(...arguments), this.size = f.size, this.type = f.type, this.variant = f.variant, this.iconPlacement = f.iconPlacement, this.disabled = f.disabled, this.isLoading = f.isLoading, this.isFullWidth = f.isFullWidth, this.isResponsive = f.isResponsive, this._handleFormKeyDown = (n) => {
515
+ if (!(n.key !== "Enter" || this.type !== "submit" || this.disabled)) {
516
+ if (n.target instanceof HTMLElement) {
517
+ const a = n.target.tagName.toLowerCase();
518
+ if (a === "button" || a === "pie-button")
519
519
  return;
520
520
  }
521
- a.preventDefault(), this._handleClick();
521
+ n.preventDefault(), this._handleClick();
522
522
  }
523
523
  };
524
524
  }
525
525
  connectedCallback() {
526
- var a;
527
- super.connectedCallback(), this.type === "submit" && ((a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown));
526
+ var n;
527
+ super.connectedCallback(), this.type === "submit" && ((n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown));
528
528
  }
529
529
  disconnectedCallback() {
530
- var a;
531
- super.disconnectedCallback(), this.type === "submit" && ((a = this.form) == null || a.removeEventListener("keydown", this._handleFormKeyDown));
530
+ var n;
531
+ super.disconnectedCallback(), this.type === "submit" && ((n = this.form) == null || n.removeEventListener("keydown", this._handleFormKeyDown));
532
532
  }
533
- updated(a) {
534
- var n, h;
535
- super.updated(a), a.has("type") && (this.type === "submit" ? (n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown) : (h = this.form) == null || h.removeEventListener("keydown", this._handleFormKeyDown));
533
+ updated(n) {
534
+ var a, v;
535
+ super.updated(n), n.has("type") && (this.type === "submit" ? (a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown) : (v = this.form) == null || v.removeEventListener("keydown", this._handleFormKeyDown));
536
536
  }
537
537
  /**
538
538
  * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
@@ -542,11 +542,11 @@ class v extends St(Ct) {
542
542
  *
543
543
  * TODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin.
544
544
  */
545
- _simulateNativeButtonClick(a) {
545
+ _simulateNativeButtonClick(n) {
546
546
  if (!this.form)
547
547
  return;
548
- const n = document.createElement("button");
549
- n.type = a, n.style.position = "absolute", n.style.width = "1px", n.style.height = "1px", n.style.padding = "0", n.style.margin = "-1px", n.style.overflow = "hidden", n.style.border = "0", n.style.whiteSpace = "nowrap", a === "submit" && (this.name && (n.name = this.name), this.value && (n.value = this.value), this.formaction && n.setAttribute("formaction", this.formaction), this.formenctype && n.setAttribute("formenctype", this.formenctype), this.formmethod && n.setAttribute("formmethod", this.formmethod), this.formnovalidate && n.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && n.setAttribute("formtarget", this.formtarget)), this.form.append(n), n.click(), n.remove();
548
+ const a = document.createElement("button");
549
+ a.type = n, a.style.position = "absolute", a.style.width = "1px", a.style.height = "1px", a.style.padding = "0", a.style.margin = "-1px", a.style.overflow = "hidden", a.style.border = "0", a.style.whiteSpace = "nowrap", n === "submit" && (this.name && (a.name = this.name), this.value && (a.value = this.value), this.formaction && a.setAttribute("formaction", this.formaction), this.formenctype && a.setAttribute("formenctype", this.formenctype), this.formmethod && a.setAttribute("formmethod", this.formmethod), this.formnovalidate && a.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && a.setAttribute("formtarget", this.formtarget)), this.form.append(a), a.click(), a.remove();
550
550
  }
551
551
  _handleClick() {
552
552
  !this.isLoading && this.form && (this.type === "submit" && (this.formnovalidate || this.form.reportValidity()) && this._simulateNativeButtonClick("submit"), this.type === "reset" && this._simulateNativeButtonClick("reset"));
@@ -557,38 +557,40 @@ class v extends St(Ct) {
557
557
  * @private
558
558
  */
559
559
  renderSpinner() {
560
- const { size: a, variant: n, disabled: h } = this, c = a && a.includes("small") ? "small" : "medium";
561
- let f;
562
- return h ? f = n === "ghost-inverse" ? "inverse" : "secondary" : f = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", P`
560
+ const { size: n, variant: a, disabled: v } = this, c = n && n.includes("small") ? "small" : "medium";
561
+ let u;
562
+ return v ? u = a === "ghost-inverse" ? "inverse" : "secondary" : u = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", P`
563
563
  <pie-spinner
564
564
  size="${c}"
565
- variant="${f}">
565
+ variant="${u}">
566
566
  </pie-spinner>`;
567
567
  }
568
568
  render() {
569
569
  const {
570
- type: a,
571
- disabled: n,
572
- isFullWidth: h,
570
+ type: n,
571
+ disabled: a,
572
+ isFullWidth: v,
573
573
  variant: c,
574
- size: f,
574
+ size: u,
575
575
  isLoading: w,
576
- isResponsive: z,
576
+ isResponsive: M,
577
577
  iconPlacement: g,
578
- responsiveSize: F
579
- } = this;
578
+ responsiveSize: z
579
+ } = this, C = {
580
+ "o-btn": !0,
581
+ "o-btn--fullWidth": v,
582
+ "o-btn--responsive": M,
583
+ [`o-btn--${z}`]: !!(M && z),
584
+ [`o-btn--${c}`]: !0,
585
+ [`o-btn--${u}`]: !0,
586
+ "is-loading": w
587
+ };
580
588
  return P`
581
589
  <button
582
590
  @click=${this._handleClick}
583
- class="o-btn"
584
- type=${a || "submit"}
585
- variant=${c || "primary"}
586
- size=${f || "medium"}
587
- responsiveSize=${Lt(F)}
588
- ?disabled=${n}
589
- ?isFullWidth=${h}
590
- ?isResponsive=${z}
591
- ?isLoading=${w}>
591
+ class=${St(C)}
592
+ type=${n || "submit"}
593
+ ?disabled=${a}>
592
594
  ${w ? this.renderSpinner() : K}
593
595
  ${g === "leading" ? P`<slot name="icon"></slot>` : K}
594
596
  <slot></slot>
@@ -596,73 +598,73 @@ class v extends St(Ct) {
596
598
  </button>`;
597
599
  }
598
600
  focus() {
599
- var a, n;
600
- (n = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button")) == null || n.focus();
601
+ var n, a;
602
+ (a = (n = this.shadowRoot) == null ? void 0 : n.querySelector("button")) == null || a.focus();
601
603
  }
602
604
  }
603
- v.styles = Ft(Pt);
605
+ b.styles = Ft(Pt);
604
606
  p([
605
- m(),
606
- O(C, It, b.size)
607
- ], v.prototype, "size", 2);
607
+ h(),
608
+ O(S, Tt, f.size)
609
+ ], b.prototype, "size", 2);
608
610
  p([
609
- m(),
610
- O(C, Tt, b.type)
611
- ], v.prototype, "type", 2);
611
+ h(),
612
+ O(S, Lt, f.type)
613
+ ], b.prototype, "type", 2);
612
614
  p([
613
- m(),
614
- O(C, Vt, b.variant)
615
- ], v.prototype, "variant", 2);
615
+ h(),
616
+ O(S, Vt, f.variant)
617
+ ], b.prototype, "variant", 2);
616
618
  p([
617
- m({ type: String }),
618
- O(C, Nt, b.iconPlacement)
619
- ], v.prototype, "iconPlacement", 2);
619
+ h({ type: String }),
620
+ O(S, Nt, f.iconPlacement)
621
+ ], b.prototype, "iconPlacement", 2);
620
622
  p([
621
- m({ type: Boolean })
622
- ], v.prototype, "disabled", 2);
623
+ h({ type: Boolean })
624
+ ], b.prototype, "disabled", 2);
623
625
  p([
624
- m({ type: Boolean, reflect: !0 })
625
- ], v.prototype, "isLoading", 2);
626
+ h({ type: Boolean, reflect: !0 })
627
+ ], b.prototype, "isLoading", 2);
626
628
  p([
627
- m({ type: Boolean })
628
- ], v.prototype, "isFullWidth", 2);
629
+ h({ type: Boolean })
630
+ ], b.prototype, "isFullWidth", 2);
629
631
  p([
630
- m({ type: Boolean })
631
- ], v.prototype, "isResponsive", 2);
632
+ h({ type: Boolean })
633
+ ], b.prototype, "isResponsive", 2);
632
634
  p([
633
- m({ type: String })
634
- ], v.prototype, "name", 2);
635
+ h({ type: String })
636
+ ], b.prototype, "name", 2);
635
637
  p([
636
- m({ type: String })
637
- ], v.prototype, "value", 2);
638
+ h({ type: String })
639
+ ], b.prototype, "value", 2);
638
640
  p([
639
- m()
640
- ], v.prototype, "formaction", 2);
641
+ h()
642
+ ], b.prototype, "formaction", 2);
641
643
  p([
642
- m()
643
- ], v.prototype, "formenctype", 2);
644
+ h()
645
+ ], b.prototype, "formenctype", 2);
644
646
  p([
645
- m()
646
- ], v.prototype, "formmethod", 2);
647
+ h()
648
+ ], b.prototype, "formmethod", 2);
647
649
  p([
648
- m({ type: Boolean })
649
- ], v.prototype, "formnovalidate", 2);
650
+ h({ type: Boolean })
651
+ ], b.prototype, "formnovalidate", 2);
650
652
  p([
651
- m()
652
- ], v.prototype, "formtarget", 2);
653
+ h()
654
+ ], b.prototype, "formtarget", 2);
653
655
  p([
654
- m({ type: String })
655
- ], v.prototype, "responsiveSize", 2);
656
- At(C, v);
656
+ h({ type: String })
657
+ ], b.prototype, "responsiveSize", 2);
658
+ It(S, b);
657
659
  export {
658
- v as PieButton,
659
- b as defaultProps,
660
+ b as PieButton,
661
+ f as defaultProps,
660
662
  jt as formEncodingtypes,
661
663
  Ut as formMethodTypes,
662
664
  qt as formTargetTypes,
663
665
  Nt as iconPlacements,
664
666
  Kt as responsiveSizes,
665
- It as sizes,
666
- Tt as types,
667
+ Tt as sizes,
668
+ Lt as types,
667
669
  Vt as variants
668
670
  };
package/dist/react.js CHANGED
@@ -3,8 +3,8 @@ import { createComponent as e } from "@lit/react";
3
3
  import { PieButton as o } from "./index.js";
4
4
  import { defaultProps as l, formEncodingtypes as y, formMethodTypes as B, formTargetTypes as d, iconPlacements as g, responsiveSizes as v, sizes as T, types as x, variants as z } from "./index.js";
5
5
  import "lit";
6
+ import "lit/directives/class-map.js";
6
7
  import "lit/decorators.js";
7
- import "lit/directives/if-defined.js";
8
8
  import "@justeattakeaway/pie-webc-core";
9
9
  import "@justeattakeaway/pie-spinner";
10
10
  const r = e({
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "0.47.8",
3
+ "version": "0.48.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
@@ -1,14 +1,13 @@
1
1
  @use '@justeattakeaway/pie-css/scss' as p;
2
-
3
- $breakpoint-wide: 768px;
2
+ @use '@justeattakeaway/pie-css/scss/settings' as *;
4
3
 
5
4
  /**
6
5
  * Mixin for adding the responsive behaviour.
7
6
  * Takes in the the particular settings for the wide breakpoint.
8
7
  */
9
8
  @mixin responsive-wide {
10
- &[isResponsive] {
11
- @media (min-width: $breakpoint-wide) {
9
+ &.o-btn--responsive {
10
+ @include media('>md') {
12
11
  @content;
13
12
  }
14
13
  }
@@ -94,12 +93,14 @@ $breakpoint-wide: 768px;
94
93
  // used to specify whether the button should be full width or not
95
94
  inline-size: var(--btn-inline-size);
96
95
 
97
- // Variant
98
- &[variant='primary'] {
96
+ // ************************
97
+ // Button Variant Modifiers
98
+ // ************************
99
+ &.o-btn--primary {
99
100
  @include p.button-interactive-states('--dt-color-interactive-brand');
100
101
 
101
- &[size='xsmall'],
102
- &[size='small-productive'] {
102
+ &.o-btn--xsmall,
103
+ &.o-btn--small-productive {
103
104
  /**
104
105
  * Where the font-size is smaller,
105
106
  * update the button backgrounds so that the text is accessible
@@ -108,16 +109,27 @@ $breakpoint-wide: 768px;
108
109
 
109
110
  @include p.button-interactive-states('--dt-color-interactive-primary', 'inverse');
110
111
  }
112
+
113
+ // This is to handle the background colour change getting overridden above, but then being put in responsive mode
114
+ // can't use :not for this unfortunately, as then the smaller narrow state would lose its background colour too
115
+ &.o-btn--xsmall.o-btn--expressive,
116
+ &.o-btn--small-productive {
117
+ @include responsive-wide {
118
+ --btn-bg-color: var(--dt-color-interactive-brand);
119
+
120
+ @include p.button-interactive-states('--dt-color-interactive-brand');
121
+ }
122
+ }
111
123
  }
112
124
 
113
- &[variant='secondary'] {
125
+ &.o-btn--secondary {
114
126
  --btn-bg-color: var(--dt-color-interactive-secondary);
115
127
  --btn-text-color: var(--dt-color-content-interactive-secondary);
116
128
 
117
129
  @include p.button-interactive-states('--dt-color-interactive-secondary');
118
130
  }
119
131
 
120
- &[variant='outline'] {
132
+ &.o-btn--outline {
121
133
  --btn-bg-color: transparent;
122
134
  --btn-text-color: var(--dt-color-content-interactive-secondary);
123
135
 
@@ -128,7 +140,7 @@ $breakpoint-wide: 768px;
128
140
  @include p.button-interactive-states('--dt-color-black', 'transparent');
129
141
  }
130
142
 
131
- &[variant='ghost'] {
143
+ &.o-btn--ghost {
132
144
  --btn-bg-color: transparent;
133
145
  --btn-text-color: var(--dt-color-content-link);
134
146
 
@@ -137,15 +149,15 @@ $breakpoint-wide: 768px;
137
149
  @include p.button-interactive-states('--dt-color-black', 'transparent');
138
150
  }
139
151
 
140
- &[variant='inverse'] {
152
+ &.o-btn--inverse {
141
153
  --btn-bg-color: var(--dt-color-interactive-inverse);
142
154
  --btn-text-color: var(--dt-color-content-interactive-secondary);
143
155
 
144
156
  @include p.button-interactive-states('--dt-color-interactive-inverse');
145
157
  }
146
158
 
147
- &[variant='ghost-inverse'],
148
- &[variant='outline-inverse'] {
159
+ &.o-btn--ghost-inverse,
160
+ &.o-btn--outline-inverse {
149
161
  --btn-bg-color: transparent;
150
162
  --btn-text-color: var(--dt-color-content-interactive-primary);
151
163
 
@@ -154,17 +166,17 @@ $breakpoint-wide: 768px;
154
166
  @include p.button-interactive-states('--dt-color-container-default', 'transparent');
155
167
  }
156
168
 
157
- &[variant='outline-inverse']:not([disabled]) {
169
+ &.o-btn--outline-inverse:not([disabled]) {
158
170
  border: 1px solid var(--dt-color-border-strong);
159
171
  }
160
172
 
161
- &[variant='destructive'] {
173
+ &.o-btn--destructive {
162
174
  --btn-bg-color: var(--dt-color-support-error);
163
175
 
164
176
  @include p.button-interactive-states('--dt-color-support-error');
165
177
  }
166
178
 
167
- &[variant='destructive-ghost'] {
179
+ &.o-btn--destructive-ghost {
168
180
  --btn-bg-color: transparent;
169
181
  --btn-text-color: var(--dt-color-content-interactive-error);
170
182
 
@@ -173,65 +185,80 @@ $breakpoint-wide: 768px;
173
185
  @include p.button-interactive-states('--dt-color-black', 'transparent');
174
186
  }
175
187
 
176
- // Additional modifiers
177
- &[isFullWidth] {
178
- --btn-inline-size: 100%;
179
- }
180
-
181
- &[disabled] {
182
- --btn-text-color: var(--dt-color-content-disabled) !important;
183
-
184
- cursor: not-allowed;
185
-
186
- // For every variant (except ghost variants) set the disabled background color
187
- &:not([variant='ghost'], [variant='ghost-inverse'], [variant='destructive-ghost']) {
188
- --btn-bg-color: var(--dt-color-disabled-01) !important;
189
- }
190
-
191
- // For outline variants, set the border to the disabled color
192
- &[variant='outline'] {
193
- border-color: var(--dt-color-disabled-01) !important;
194
- }
195
- }
196
-
197
- &[size='xsmall'] {
188
+ // *********************
189
+ // Button Size Modifiers
190
+ // *********************
191
+ &.o-btn--xsmall {
198
192
  @include button-size(xsmall);
193
+
199
194
  @include responsive-wide {
200
195
  // productive is the default size when responsive is enabled
201
196
  @include button-size(small-productive);
202
197
 
203
- &[responsiveSize='expressive'] {
198
+ &.o-btn--expressive {
204
199
  @include button-size(small-expressive);
205
200
  }
206
201
  }
207
202
  }
208
203
 
209
- &[size='small-expressive'] {
204
+ &.o-btn--small-expressive {
210
205
  @include button-size(small-expressive);
206
+
211
207
  @include responsive-wide {
212
208
  @include button-size(medium);
213
209
  }
214
210
  }
215
211
 
216
- &[size='small-productive'] {
212
+ &.o-btn--small-productive {
217
213
  @include button-size(small-productive);
214
+
218
215
  @include responsive-wide {
219
216
  @include button-size(medium);
220
217
  }
221
218
  }
222
219
 
223
- &[size='medium'] {
220
+ &.o-btn--medium {
224
221
  @include button-size(medium);
222
+
225
223
  @include responsive-wide {
226
224
  @include button-size(large);
227
225
  }
228
226
  }
229
227
 
230
- &[size='large'] {
228
+ &.o-btn--large {
231
229
  @include button-size(large);
232
230
  }
233
231
 
234
- &[isLoading] {
232
+ // ******************************
233
+ // Additional component modifiers
234
+ // ******************************
235
+ &.o-btn--fullWidth {
236
+ --btn-inline-size: 100%;
237
+ }
238
+
239
+ // **************
240
+ // Disabled state
241
+ // **************
242
+ &[disabled] {
243
+ --btn-text-color: var(--dt-color-content-disabled) !important;
244
+
245
+ cursor: not-allowed;
246
+
247
+ // For every variant (except ghost variants) set the disabled background color
248
+ &:not(.o-btn--ghost, .o-btn--ghost-inverse, .o-btn--destructive-ghost) {
249
+ --btn-bg-color: var(--dt-color-disabled-01) !important;
250
+ }
251
+
252
+ // For outline variants, set the border to the disabled color
253
+ &.o-btn--outline {
254
+ border-color: var(--dt-color-disabled-01) !important;
255
+ }
256
+ }
257
+
258
+ // *************
259
+ // Loading state
260
+ // *************
261
+ &.is-loading {
235
262
  & > *:not(pie-spinner) {
236
263
  visibility: hidden;
237
264
  }
@@ -241,6 +268,9 @@ $breakpoint-wide: 768px;
241
268
  }
242
269
  }
243
270
 
271
+ // ************
272
+ // Focus styles
273
+ // ************
244
274
  &:focus-visible {
245
275
  @include p.focus;
246
276
  }
package/src/index.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
3
3
  } from 'lit';
4
+ import { classMap } from 'lit/directives/class-map.js';
4
5
  import { property } from 'lit/decorators.js';
5
- import { ifDefined } from 'lit/directives/if-defined.js';
6
6
  import { validPropertyValues, defineCustomElement, FormControlMixin } from '@justeattakeaway/pie-webc-core';
7
7
  import {
8
8
  ButtonProps, sizes, types, variants, iconPlacements, defaultProps,
@@ -226,18 +226,22 @@ export class PieButton extends FormControlMixin(LitElement) implements ButtonPro
226
226
  responsiveSize,
227
227
  } = this;
228
228
 
229
+ const classes = {
230
+ 'o-btn': true,
231
+ 'o-btn--fullWidth': isFullWidth,
232
+ 'o-btn--responsive': isResponsive,
233
+ [`o-btn--${responsiveSize}`]: Boolean(isResponsive && responsiveSize),
234
+ [`o-btn--${variant}`]: true,
235
+ [`o-btn--${size}`]: true,
236
+ 'is-loading': isLoading,
237
+ };
238
+
229
239
  return html`
230
240
  <button
231
241
  @click=${this._handleClick}
232
- class="o-btn"
242
+ class=${classMap(classes)}
233
243
  type=${type || 'submit'}
234
- variant=${variant || 'primary'}
235
- size=${size || 'medium'}
236
- responsiveSize=${ifDefined(responsiveSize)}
237
- ?disabled=${disabled}
238
- ?isFullWidth=${isFullWidth}
239
- ?isResponsive=${isResponsive}
240
- ?isLoading=${isLoading}>
244
+ ?disabled=${disabled}>
241
245
  ${isLoading ? this.renderSpinner() : nothing}
242
246
  ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
243
247
  <slot></slot>