@justeattakeaway/pie-button 0.40.0 → 0.40.1

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 +185 -203
  2. package/dist/react.js +12 -11
  3. package/package.json +4 -4
package/dist/index.js CHANGED
@@ -1,27 +1,9 @@
1
1
  import { unsafeCSS as wt, LitElement as xt, html as N, nothing as O } from "lit";
2
- import { property as m } from "lit/decorators.js";
2
+ import { property as h } from "lit/decorators.js";
3
3
  import { ifDefined as Et } from "lit/directives/if-defined.js";
4
+ import { validPropertyValues as R, defineCustomElement as kt } from "@justeattakeaway/pie-webc-core";
4
5
  import "@justeattakeaway/pie-spinner";
5
- const R = (d, n, a) => function(b, y) {
6
- const u = `#${y}`;
7
- Object.defineProperty(b, y, {
8
- get() {
9
- return this[u];
10
- },
11
- set(f) {
12
- n.includes(f) ? this[u] = f : (console.error(
13
- `<${d}> Invalid value "${f}" provided for property "${y}".`,
14
- `Must be one of: ${n.join(" | ")}.`,
15
- `Falling back to default value: "${a}"`
16
- ), this[u] = a);
17
- },
18
- configurable: !0
19
- });
20
- };
21
- function kt(d, n) {
22
- customElements.get(d) ? console.warn(`PIE Web Component: "${d}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(d, n);
23
- }
24
- const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Rt = ["productive", "expressive"], Mt = ["submit", "button", "reset"], Ct = [
6
+ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], _t = ["productive", "expressive"], Mt = ["submit", "button", "reset"], Ct = [
25
7
  "primary",
26
8
  "secondary",
27
9
  "outline",
@@ -31,10 +13,10 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
31
13
  "ghost-inverse",
32
14
  "destructive",
33
15
  "destructive-ghost"
34
- ], Lt = ["leading", "trailing"], Pt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], _t = ["post", "get", "dialog"], $t = ["_self", "_blank", "_parent", "_top"], Ft = `*,*:before,*:after{box-sizing:border-box}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-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;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: 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]{border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--btn-icon-size: 16px}@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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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(--btn-icon-size);width:var(--btn-icon-size)}
16
+ ], Lt = ["leading", "trailing"], Pt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Dt = ["post", "get", "dialog"], $t = ["_self", "_blank", "_parent", "_top"], Ft = `*,*:before,*:after{box-sizing:border-box}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-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;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: 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]{border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--btn-icon-size: 16px}@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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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(--btn-icon-size);width:var(--btn-icon-size)}
35
17
  `;
36
18
  (function() {
37
- const d = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), A = {
19
+ const p = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), E = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), S = {
38
20
  ariaAtomic: "aria-atomic",
39
21
  ariaAutoComplete: "aria-autocomplete",
40
22
  ariaBusy: "aria-busy",
@@ -77,10 +59,10 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
77
59
  ariaValueText: "aria-valuetext",
78
60
  role: "role"
79
61
  }, ot = (i, t) => {
80
- for (let e in A) {
62
+ for (let e in S) {
81
63
  t[e] = null;
82
64
  let r = null;
83
- const o = A[e];
65
+ const o = S[e];
84
66
  Object.defineProperty(t, e, {
85
67
  get() {
86
68
  return r;
@@ -91,11 +73,11 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
91
73
  });
92
74
  }
93
75
  };
94
- function j(i) {
76
+ function q(i) {
95
77
  const t = c.get(i), { form: e } = t;
96
78
  X(i, e, t), Q(i, t.labels);
97
79
  }
98
- const q = (i, t = !1) => {
80
+ const U = (i, t = !1) => {
99
81
  const e = document.createTreeWalker(i, NodeFilter.SHOW_ELEMENT, {
100
82
  acceptNode(l) {
101
83
  return c.has(l) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
@@ -104,45 +86,45 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
104
86
  let r = e.nextNode();
105
87
  const o = !t || i.disabled;
106
88
  for (; r; )
107
- r.formDisabledCallback && o && $(r, i.disabled), r = e.nextNode();
108
- }, U = { attributes: !0, attributeFilter: ["disabled", "name"] }, z = T() ? new MutationObserver((i) => {
89
+ r.formDisabledCallback && o && D(r, i.disabled), r = e.nextNode();
90
+ }, j = { attributes: !0, attributeFilter: ["disabled", "name"] }, z = T() ? new MutationObserver((i) => {
109
91
  for (const t of i) {
110
92
  const e = t.target;
111
- if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && q(e)), t.attributeName === "name" && e.constructor.formAssociated) {
93
+ if (t.attributeName === "disabled" && (e.constructor.formAssociated ? D(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && U(e)), t.attributeName === "name" && e.constructor.formAssociated) {
112
94
  const r = c.get(e), o = M.get(e);
113
95
  r.setFormValue(o);
114
96
  }
115
97
  }
116
98
  }) : {};
117
- function P(i) {
99
+ function _(i) {
118
100
  i.forEach((t) => {
119
101
  const { addedNodes: e, removedNodes: r } = t, o = Array.from(e), l = Array.from(r);
120
- o.forEach((s) => {
121
- var g;
122
- if (c.has(s) && s.constructor.formAssociated && j(s), k.has(s)) {
123
- const v = k.get(s);
124
- Object.keys(A).filter((w) => v[w] !== null).forEach((w) => {
125
- s.setAttribute(A[w], v[w]);
126
- }), k.delete(s);
102
+ o.forEach((n) => {
103
+ var b;
104
+ if (c.has(n) && n.constructor.formAssociated && q(n), k.has(n)) {
105
+ const d = k.get(n);
106
+ Object.keys(S).filter((y) => d[y] !== null).forEach((y) => {
107
+ n.setAttribute(S[y], d[y]);
108
+ }), k.delete(n);
127
109
  }
128
- if (F.has(s)) {
129
- const v = F.get(s);
130
- s.setAttribute("internals-valid", v.validity.valid.toString()), s.setAttribute("internals-invalid", (!v.validity.valid).toString()), s.setAttribute("aria-invalid", (!v.validity.valid).toString()), F.delete(s);
110
+ if (F.has(n)) {
111
+ const d = F.get(n);
112
+ n.setAttribute("internals-valid", d.validity.valid.toString()), n.setAttribute("internals-invalid", (!d.validity.valid).toString()), n.setAttribute("aria-invalid", (!d.validity.valid).toString()), F.delete(n);
131
113
  }
132
- if (s.localName === "form") {
133
- const v = f.get(s), E = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
114
+ if (n.localName === "form") {
115
+ const d = g.get(n), x = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
134
116
  acceptNode(rt) {
135
- return c.has(rt) && !(v && v.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
117
+ return c.has(rt) && !(d && d.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
136
118
  }
137
119
  });
138
- let w = E.nextNode();
139
- for (; w; )
140
- j(w), w = E.nextNode();
120
+ let y = x.nextNode();
121
+ for (; y; )
122
+ q(y), y = x.nextNode();
141
123
  }
142
- s.localName === "fieldset" && ((g = z.observe) == null || g.call(z, s, U), q(s, !0));
143
- }), l.forEach((s) => {
144
- const g = c.get(s);
145
- g && a.get(g) && G(g), u.has(s) && u.get(s).disconnect();
124
+ n.localName === "fieldset" && ((b = z.observe) == null || b.call(z, n, j), U(n, !0));
125
+ }), l.forEach((n) => {
126
+ const b = c.get(n);
127
+ b && a.get(b) && G(b), f.has(n) && f.get(n).disconnect();
146
128
  });
147
129
  });
148
130
  }
@@ -160,11 +142,11 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
160
142
  const t = new MutationObserver(at);
161
143
  (e = t.observe) == null || e.call(t, i, { childList: !0 }), B.set(i, t);
162
144
  };
163
- T() && new MutationObserver(P);
164
- const _ = {
145
+ T() && new MutationObserver(_);
146
+ const P = {
165
147
  childList: !0,
166
148
  subtree: !0
167
- }, $ = (i, t) => {
149
+ }, D = (i, t) => {
168
150
  i.toggleAttribute("internals-disabled", t), t ? i.setAttribute("aria-disabled", "true") : i.removeAttribute("aria-disabled"), i.formDisabledCallback && i.formDisabledCallback.apply(i, [t]);
169
151
  }, G = (i) => {
170
152
  a.get(i).forEach((e) => {
@@ -175,56 +157,56 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
175
157
  return e.type = "hidden", e.name = i.getAttribute("name"), i.after(e), a.get(t).push(e), e;
176
158
  }, st = (i, t) => {
177
159
  var e;
178
- a.set(t, []), (e = z.observe) == null || e.call(z, i, U);
160
+ a.set(t, []), (e = z.observe) == null || e.call(z, i, j);
179
161
  }, Q = (i, t) => {
180
162
  if (t.length) {
181
163
  Array.from(t).forEach((r) => r.addEventListener("click", i.click.bind(i)));
182
164
  let e = t[0].id;
183
165
  t[0].id || (e = `${t[0].htmlFor}_Label`, t[0].id = e), i.setAttribute("aria-labelledby", e);
184
166
  }
185
- }, S = (i) => {
186
- const t = Array.from(i.elements).filter((l) => !l.tagName.includes("-") && l.validity).map((l) => l.validity.valid), e = f.get(i) || [], r = Array.from(e).filter((l) => l.isConnected).map((l) => c.get(l).validity.valid), o = [...t, ...r].includes(!1);
167
+ }, A = (i) => {
168
+ const t = Array.from(i.elements).filter((l) => !l.tagName.includes("-") && l.validity).map((l) => l.validity.valid), e = g.get(i) || [], r = Array.from(e).filter((l) => l.isConnected).map((l) => c.get(l).validity.valid), o = [...t, ...r].includes(!1);
187
169
  i.toggleAttribute("internals-invalid", o), i.toggleAttribute("internals-valid", !o);
188
170
  }, lt = (i) => {
189
- S(I(i.target));
171
+ A(I(i.target));
190
172
  }, ct = (i) => {
191
- S(I(i.target));
173
+ A(I(i.target));
192
174
  }, dt = (i) => {
193
175
  const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((e) => `${e}:not([disabled])`).map((e) => `${e}:not([form])${i.id ? `,${e}[form='${i.id}']` : ""}`).join(",");
194
176
  i.addEventListener("click", (e) => {
195
177
  if (e.target.closest(t)) {
196
- const o = f.get(i);
178
+ const o = g.get(i);
197
179
  if (i.noValidate)
198
180
  return;
199
- o.size && Array.from(o).reverse().map((g) => c.get(g).reportValidity()).includes(!1) && e.preventDefault();
181
+ o.size && Array.from(o).reverse().map((b) => c.get(b).reportValidity()).includes(!1) && e.preventDefault();
200
182
  }
201
183
  });
202
184
  }, vt = (i) => {
203
- const t = f.get(i.target);
185
+ const t = g.get(i.target);
204
186
  t && t.size && t.forEach((e) => {
205
187
  e.constructor.formAssociated && e.formResetCallback && e.formResetCallback.apply(e);
206
188
  });
207
189
  }, X = (i, t, e) => {
208
190
  if (t) {
209
- const r = f.get(t);
191
+ const r = g.get(t);
210
192
  if (r)
211
193
  r.add(i);
212
194
  else {
213
195
  const o = /* @__PURE__ */ new Set();
214
- o.add(i), f.set(t, o), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
196
+ o.add(i), g.set(t, o), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
215
197
  }
216
- y.set(t, { ref: i, internals: e }), i.constructor.formAssociated && i.formAssociatedCallback && setTimeout(() => {
198
+ E.set(t, { ref: i, internals: e }), i.constructor.formAssociated && i.formAssociatedCallback && setTimeout(() => {
217
199
  i.formAssociatedCallback.apply(i, [t]);
218
- }, 0), S(t);
200
+ }, 0), A(t);
219
201
  }
220
202
  }, I = (i) => {
221
203
  let t = i.parentNode;
222
204
  return t && t.tagName !== "FORM" && (t = I(t)), t;
223
- }, x = (i, t, e = DOMException) => {
205
+ }, w = (i, t, e = DOMException) => {
224
206
  if (!i.constructor.formAssociated)
225
207
  throw new e(t);
226
208
  }, Y = (i, t, e) => {
227
- const r = f.get(i);
209
+ const r = g.get(i);
228
210
  return r && r.size && r.forEach((o) => {
229
211
  c.get(o)[e]() || (t = !1);
230
212
  }), t;
@@ -242,12 +224,12 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
242
224
  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);
243
225
  }
244
226
  }
245
- const mt = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), pt = (i, t, e) => (i.valid = bt(t), Object.keys(t).forEach((r) => i[r] = t[r]), e && S(e), i), bt = (i) => {
227
+ const mt = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), pt = (i, t, e) => (i.valid = bt(t), Object.keys(t).forEach((r) => i[r] = t[r]), e && A(e), i), bt = (i) => {
246
228
  let t = !0;
247
229
  for (let e in i)
248
230
  e !== "valid" && i[e] !== !1 && (t = !1);
249
231
  return t;
250
- }, D = /* @__PURE__ */ new WeakMap();
232
+ }, $ = /* @__PURE__ */ new WeakMap();
251
233
  function tt(i, t) {
252
234
  i.toggleAttribute(t, !0), i.part && i.part.add(t);
253
235
  }
@@ -258,12 +240,12 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
258
240
  constructor(t) {
259
241
  if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
260
242
  throw new TypeError("Illegal constructor");
261
- D.set(this, t);
243
+ $.set(this, t);
262
244
  }
263
245
  add(t) {
264
246
  if (!/^--/.test(t) || typeof t != "string")
265
247
  throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
266
- const e = super.add(t), r = D.get(this), o = `state${t}`;
248
+ const e = super.add(t), r = $.get(this), o = `state${t}`;
267
249
  return r.isConnected ? tt(r, o) : setTimeout(() => {
268
250
  tt(r, o);
269
251
  }), e;
@@ -274,7 +256,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
274
256
  super.clear();
275
257
  }
276
258
  delete(t) {
277
- const e = super.delete(t), r = D.get(this);
259
+ const e = super.delete(t), r = $.get(this);
278
260
  return r.isConnected ? (r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`)) : setTimeout(() => {
279
261
  r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`);
280
262
  }), e;
@@ -325,21 +307,21 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
325
307
  const t = HTMLFormElement.prototype.reportValidity;
326
308
  HTMLFormElement.prototype.reportValidity = r;
327
309
  function e(...l) {
328
- let s = i.apply(this, l);
329
- return Y(this, s, "checkValidity");
310
+ let n = i.apply(this, l);
311
+ return Y(this, n, "checkValidity");
330
312
  }
331
313
  function r(...l) {
332
- let s = t.apply(this, l);
333
- return Y(this, s, "reportValidity");
314
+ let n = t.apply(this, l);
315
+ return Y(this, n, "reportValidity");
334
316
  }
335
317
  const { get: o } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
336
318
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
337
319
  get(...l) {
338
- const s = o.call(this, ...l), g = Array.from(f.get(this) || []);
339
- if (g.length === 0)
340
- return s;
341
- const v = Array.from(s).concat(g).sort((E, w) => E.compareDocumentPosition ? E.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
342
- return new ft(v);
320
+ const n = o.call(this, ...l), b = Array.from(g.get(this) || []);
321
+ if (b.length === 0)
322
+ return n;
323
+ const d = Array.from(n).concat(b).sort((x, y) => x.compareDocumentPosition ? x.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
324
+ return new ft(d);
343
325
  }
344
326
  });
345
327
  }
@@ -351,13 +333,13 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
351
333
  if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
352
334
  throw new TypeError("Illegal constructor");
353
335
  const e = t.getRootNode(), r = new ht();
354
- this.states = new V(t), d.set(this, t), n.set(this, r), c.set(t, this), ot(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && nt(e);
336
+ this.states = new V(t), p.set(this, t), s.set(this, r), c.set(t, this), ot(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && nt(e);
355
337
  }
356
338
  checkValidity() {
357
- const t = d.get(this);
358
- if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
339
+ const t = p.get(this);
340
+ if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
359
341
  return !0;
360
- const e = n.get(this);
342
+ const e = s.get(this);
361
343
  if (!e.valid) {
362
344
  const r = new Event("invalid", {
363
345
  bubbles: !1,
@@ -369,20 +351,20 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
369
351
  return e.valid;
370
352
  }
371
353
  get form() {
372
- const t = d.get(this);
373
- x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
354
+ const t = p.get(this);
355
+ w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
374
356
  let e;
375
357
  return t.constructor.formAssociated === !0 && (e = I(t)), e;
376
358
  }
377
359
  get labels() {
378
- const t = d.get(this);
379
- x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
360
+ const t = p.get(this);
361
+ w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
380
362
  const e = t.getAttribute("id"), r = t.getRootNode();
381
363
  return r && e ? r.querySelectorAll(`[for="${e}"]`) : [];
382
364
  }
383
365
  reportValidity() {
384
- const t = d.get(this);
385
- if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
366
+ const t = p.get(this);
367
+ if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
386
368
  return !0;
387
369
  const e = this.checkValidity(), r = H.get(this);
388
370
  if (r && !t.constructor.formAssociated)
@@ -390,8 +372,8 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
390
372
  return !e && r && (t.focus(), r.focus()), e;
391
373
  }
392
374
  setFormValue(t) {
393
- const e = d.get(this);
394
- if (x(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), G(this), t != null && !(t instanceof FormData)) {
375
+ const e = p.get(this);
376
+ if (w(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), G(this), t != null && !(t instanceof FormData)) {
395
377
  if (e.getAttribute("name")) {
396
378
  const r = J(e, this);
397
379
  r.value = t;
@@ -406,36 +388,36 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
406
388
  M.set(e, t);
407
389
  }
408
390
  setValidity(t, e, r) {
409
- const o = d.get(this);
410
- if (x(o, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
391
+ const o = p.get(this);
392
+ if (w(o, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
411
393
  throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
412
394
  H.set(this, r);
413
- const l = n.get(this), s = {};
414
- for (const E in t)
415
- s[E] = t[E];
416
- Object.keys(s).length === 0 && mt(l);
417
- const g = { ...l, ...s };
418
- delete g.valid;
419
- const { valid: v } = pt(l, g, this.form);
420
- if (!v && !e)
395
+ const l = s.get(this), n = {};
396
+ for (const x in t)
397
+ n[x] = t[x];
398
+ Object.keys(n).length === 0 && mt(l);
399
+ const b = { ...l, ...n };
400
+ delete b.valid;
401
+ const { valid: d } = pt(l, b, this.form);
402
+ if (!d && !e)
421
403
  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.");
422
- b.set(this, v ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !v), o.toggleAttribute("internals-valid", v), o.setAttribute("aria-invalid", `${!v}`)) : F.set(o, this);
404
+ u.set(this, d ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !d), o.toggleAttribute("internals-valid", d), o.setAttribute("aria-invalid", `${!d}`)) : F.set(o, this);
423
405
  }
424
406
  get shadowRoot() {
425
- const t = d.get(this), e = W.get(t);
407
+ const t = p.get(this), e = W.get(t);
426
408
  return e || null;
427
409
  }
428
410
  get validationMessage() {
429
- const t = d.get(this);
430
- return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), b.get(this);
411
+ const t = p.get(this);
412
+ return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), u.get(this);
431
413
  }
432
414
  get validity() {
433
- const t = d.get(this);
434
- return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), n.get(this);
415
+ const t = p.get(this);
416
+ return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), s.get(this);
435
417
  }
436
418
  get willValidate() {
437
- const t = d.get(this);
438
- 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"));
419
+ const t = p.get(this);
420
+ return w(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"));
439
421
  }
440
422
  }
441
423
  function yt() {
@@ -478,7 +460,7 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
478
460
  if (e.formAssociated) {
479
461
  const o = e.prototype.connectedCallback;
480
462
  e.prototype.connectedCallback = function() {
481
- K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), Z(this);
463
+ K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), o != null && o.apply(this), Z(this);
482
464
  };
483
465
  }
484
466
  i.call(this, t, e, r);
@@ -497,33 +479,33 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
497
479
  let i = function(...e) {
498
480
  const r = t.apply(this, e);
499
481
  if (W.set(this, r), T()) {
500
- const o = new MutationObserver(P);
501
- window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), u.set(this, o);
482
+ const o = new MutationObserver(_);
483
+ window.ShadyDOM ? o.observe(this, P) : o.observe(r, P), f.set(this, o);
502
484
  }
503
485
  return r;
504
486
  };
505
487
  const t = Element.prototype.attachShadow;
506
488
  Element.prototype.attachShadow = i;
507
489
  }
508
- T() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" && gt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
490
+ T() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, P), typeof HTMLFormElement < "u" && gt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
509
491
  }
510
492
  })();
511
- var At = Object.defineProperty, St = Object.getOwnPropertyDescriptor, p = (d, n, a, c) => {
512
- for (var b = c > 1 ? void 0 : c ? St(n, a) : n, y = d.length - 1, u; y >= 0; y--)
513
- (u = d[y]) && (b = (c ? u(n, a, b) : u(b)) || b);
514
- return c && b && At(n, a, b), b;
493
+ var St = Object.defineProperty, At = Object.getOwnPropertyDescriptor, m = (p, s, a, c) => {
494
+ for (var u = c > 1 ? void 0 : c ? At(s, a) : s, E = p.length - 1, f; E >= 0; E--)
495
+ (f = p[E]) && (u = (c ? f(s, a, u) : f(u)) || u);
496
+ return c && u && St(s, a, u), u;
515
497
  };
516
498
  const L = "pie-button";
517
- class h extends xt {
499
+ class v extends xt {
518
500
  constructor() {
519
- super(), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this.isResponsive = !1, this._handleFormKeyDown = (n) => {
520
- if (!(n.key !== "Enter" || this.type !== "submit" || this.disabled)) {
521
- if (n.target instanceof HTMLElement) {
522
- const a = n.target.tagName.toLowerCase();
501
+ super(), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this.isResponsive = !1, this._handleFormKeyDown = (s) => {
502
+ if (!(s.key !== "Enter" || this.type !== "submit" || this.disabled)) {
503
+ if (s.target instanceof HTMLElement) {
504
+ const a = s.target.tagName.toLowerCase();
523
505
  if (a === "button" || a === "pie-button")
524
506
  return;
525
507
  }
526
- n.preventDefault(), this._handleClick();
508
+ s.preventDefault(), this._handleClick();
527
509
  }
528
510
  }, this._internals = this.attachInternals();
529
511
  }
@@ -531,16 +513,16 @@ class h extends xt {
531
513
  return this._internals.form;
532
514
  }
533
515
  connectedCallback() {
534
- var n;
535
- super.connectedCallback(), this.type === "submit" && ((n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown));
516
+ var s;
517
+ super.connectedCallback(), this.type === "submit" && ((s = this.form) == null || s.addEventListener("keydown", this._handleFormKeyDown));
536
518
  }
537
519
  disconnectedCallback() {
538
- var n;
539
- super.disconnectedCallback(), this.type === "submit" && ((n = this.form) == null || n.removeEventListener("keydown", this._handleFormKeyDown));
520
+ var s;
521
+ super.disconnectedCallback(), this.type === "submit" && ((s = this.form) == null || s.removeEventListener("keydown", this._handleFormKeyDown));
540
522
  }
541
- updated(n) {
523
+ updated(s) {
542
524
  var a, c;
543
- super.updated(n), n.has("type") && (this.type === "submit" ? (a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown) : (c = this.form) == null || c.removeEventListener("keydown", this._handleFormKeyDown));
525
+ super.updated(s), s.has("type") && (this.type === "submit" ? (a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown) : (c = this.form) == null || c.removeEventListener("keydown", this._handleFormKeyDown));
544
526
  }
545
527
  /**
546
528
  * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
@@ -550,11 +532,11 @@ class h extends xt {
550
532
  *
551
533
  * TODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin.
552
534
  */
553
- _simulateNativeButtonClick(n) {
535
+ _simulateNativeButtonClick(s) {
554
536
  if (!this.form)
555
537
  return;
556
538
  const a = document.createElement("button");
557
- 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();
539
+ a.type = s, 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", s === "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();
558
540
  }
559
541
  _handleClick() {
560
542
  !this.isLoading && this.form && (this.type === "submit" && (this.formnovalidate || this.form.reportValidity()) && this._simulateNativeButtonClick("submit"), this.type === "reset" && this._simulateNativeButtonClick("reset"));
@@ -565,22 +547,22 @@ class h extends xt {
565
547
  * @private
566
548
  */
567
549
  renderSpinner() {
568
- const n = this.size.includes("small") ? "small" : "medium", c = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary";
550
+ const s = this.size.includes("small") ? "small" : "medium", c = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary";
569
551
  return N`
570
552
  <pie-spinner
571
- size="${n}"
553
+ size="${s}"
572
554
  variant="${c}"
573
555
  </pie-spinner>`;
574
556
  }
575
557
  render() {
576
558
  const {
577
- type: n,
559
+ type: s,
578
560
  disabled: a,
579
561
  isFullWidth: c,
580
- variant: b,
581
- size: y,
582
- isLoading: u,
583
- isResponsive: f,
562
+ variant: u,
563
+ size: E,
564
+ isLoading: f,
565
+ isResponsive: g,
584
566
  iconPlacement: M,
585
567
  responsiveSize: k
586
568
  } = this;
@@ -588,87 +570,87 @@ class h extends xt {
588
570
  <button
589
571
  @click=${this._handleClick}
590
572
  class="o-btn"
591
- type=${n}
592
- variant=${b}
593
- size=${y}
573
+ type=${s}
574
+ variant=${u}
575
+ size=${E}
594
576
  responsiveSize=${Et(k)}
595
577
  ?disabled=${a}
596
578
  ?isFullWidth=${c}
597
- ?isResponsive=${f}
598
- ?isLoading=${u}>
599
- ${u ? this.renderSpinner() : O}
579
+ ?isResponsive=${g}
580
+ ?isLoading=${f}>
581
+ ${f ? this.renderSpinner() : O}
600
582
  ${M === "leading" ? N`<slot name="icon"></slot>` : O}
601
583
  <slot></slot>
602
584
  ${M === "trailing" ? N`<slot name="icon"></slot>` : O}
603
585
  </button>`;
604
586
  }
605
587
  focus() {
606
- var n, a;
607
- (a = (n = this.shadowRoot) == null ? void 0 : n.querySelector("button")) == null || a.focus();
588
+ var s, a;
589
+ (a = (s = this.shadowRoot) == null ? void 0 : s.querySelector("button")) == null || a.focus();
608
590
  }
609
591
  }
610
- h.formAssociated = !0;
611
- h.styles = wt(Ft);
612
- p([
613
- m(),
592
+ v.formAssociated = !0;
593
+ v.styles = wt(Ft);
594
+ m([
595
+ h(),
614
596
  R(L, zt, "medium")
615
- ], h.prototype, "size", 2);
616
- p([
617
- m(),
597
+ ], v.prototype, "size", 2);
598
+ m([
599
+ h(),
618
600
  R(L, Mt, "submit")
619
- ], h.prototype, "type", 2);
620
- p([
621
- m(),
601
+ ], v.prototype, "type", 2);
602
+ m([
603
+ h(),
622
604
  R(L, Ct, "primary")
623
- ], h.prototype, "variant", 2);
624
- p([
625
- m({ type: String }),
605
+ ], v.prototype, "variant", 2);
606
+ m([
607
+ h({ type: String }),
626
608
  R(L, Lt, "leading")
627
- ], h.prototype, "iconPlacement", 2);
628
- p([
629
- m({ type: Boolean })
630
- ], h.prototype, "disabled", 2);
631
- p([
632
- m({ type: Boolean, reflect: !0 })
633
- ], h.prototype, "isLoading", 2);
634
- p([
635
- m({ type: Boolean })
636
- ], h.prototype, "isFullWidth", 2);
637
- p([
638
- m({ type: Boolean })
639
- ], h.prototype, "isResponsive", 2);
640
- p([
641
- m({ type: String })
642
- ], h.prototype, "name", 2);
643
- p([
644
- m({ type: String })
645
- ], h.prototype, "value", 2);
646
- p([
647
- m()
648
- ], h.prototype, "formaction", 2);
649
- p([
650
- m()
651
- ], h.prototype, "formenctype", 2);
652
- p([
653
- m()
654
- ], h.prototype, "formmethod", 2);
655
- p([
656
- m({ type: Boolean })
657
- ], h.prototype, "formnovalidate", 2);
658
- p([
659
- m()
660
- ], h.prototype, "formtarget", 2);
661
- p([
662
- m({ type: String })
663
- ], h.prototype, "responsiveSize", 2);
664
- kt(L, h);
609
+ ], v.prototype, "iconPlacement", 2);
610
+ m([
611
+ h({ type: Boolean })
612
+ ], v.prototype, "disabled", 2);
613
+ m([
614
+ h({ type: Boolean, reflect: !0 })
615
+ ], v.prototype, "isLoading", 2);
616
+ m([
617
+ h({ type: Boolean })
618
+ ], v.prototype, "isFullWidth", 2);
619
+ m([
620
+ h({ type: Boolean })
621
+ ], v.prototype, "isResponsive", 2);
622
+ m([
623
+ h({ type: String })
624
+ ], v.prototype, "name", 2);
625
+ m([
626
+ h({ type: String })
627
+ ], v.prototype, "value", 2);
628
+ m([
629
+ h()
630
+ ], v.prototype, "formaction", 2);
631
+ m([
632
+ h()
633
+ ], v.prototype, "formenctype", 2);
634
+ m([
635
+ h()
636
+ ], v.prototype, "formmethod", 2);
637
+ m([
638
+ h({ type: Boolean })
639
+ ], v.prototype, "formnovalidate", 2);
640
+ m([
641
+ h()
642
+ ], v.prototype, "formtarget", 2);
643
+ m([
644
+ h({ type: String })
645
+ ], v.prototype, "responsiveSize", 2);
646
+ kt(L, v);
665
647
  export {
666
- h as PieButton,
648
+ v as PieButton,
667
649
  Pt as formEncodingtypes,
668
- _t as formMethodTypes,
650
+ Dt as formMethodTypes,
669
651
  $t as formTargetTypes,
670
652
  Lt as iconPlacements,
671
- Rt as responsiveSizes,
653
+ _t as responsiveSizes,
672
654
  zt as sizes,
673
655
  Mt as types,
674
656
  Ct as variants
package/dist/react.js CHANGED
@@ -1,12 +1,13 @@
1
1
  import * as t from "react";
2
2
  import { createComponent as e } from "@lit/react";
3
3
  import { PieButton as o } from "./index.js";
4
- import { formEncodingtypes as u, formMethodTypes as y, formTargetTypes as P, iconPlacements as l, responsiveSizes as B, sizes as d, types as g, variants as v } from "./index.js";
4
+ import { formEncodingtypes as y, formMethodTypes as P, formTargetTypes as l, iconPlacements as B, responsiveSizes as d, sizes as g, types as v, variants as T } from "./index.js";
5
5
  import "lit";
6
6
  import "lit/decorators.js";
7
7
  import "lit/directives/if-defined.js";
8
+ import "@justeattakeaway/pie-webc-core";
8
9
  import "@justeattakeaway/pie-spinner";
9
- const a = e({
10
+ const c = e({
10
11
  displayName: "PieButton",
11
12
  elementClass: o,
12
13
  react: t,
@@ -14,13 +15,13 @@ const a = e({
14
15
  events: {}
15
16
  });
16
17
  export {
17
- a as PieButton,
18
- u as formEncodingtypes,
19
- y as formMethodTypes,
20
- P as formTargetTypes,
21
- l as iconPlacements,
22
- B as responsiveSizes,
23
- d as sizes,
24
- g as types,
25
- v as variants
18
+ c as PieButton,
19
+ y as formEncodingtypes,
20
+ P as formMethodTypes,
21
+ l as formTargetTypes,
22
+ B as iconPlacements,
23
+ d as responsiveSizes,
24
+ g as sizes,
25
+ v as types,
26
+ T as variants
26
27
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "0.40.0",
3
+ "version": "0.40.1",
4
4
  "description": "PIE design system button built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
@@ -28,7 +28,7 @@
28
28
  "author": "Just Eat Takeaway.com - Design System Team",
29
29
  "license": "Apache-2.0",
30
30
  "devDependencies": {
31
- "@justeattakeaway/pie-components-config": "0.6.0"
31
+ "@justeattakeaway/pie-components-config": "0.6.1"
32
32
  },
33
33
  "volta": {
34
34
  "extends": "../../../package.json"
@@ -37,8 +37,8 @@
37
37
  "dist/*.js"
38
38
  ],
39
39
  "dependencies": {
40
- "@justeattakeaway/pie-spinner": "0.3.0",
41
- "@justeattakeaway/pie-webc-core": "0.12.0",
40
+ "@justeattakeaway/pie-spinner": "0.3.1",
41
+ "@justeattakeaway/pie-webc-core": "0.13.0",
42
42
  "element-internals-polyfill": "1.3.8"
43
43
  }
44
44
  }