@justeattakeaway/pie-button 0.40.0 → 0.40.2

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 +214 -232
  2. package/dist/react.js +12 -11
  3. package/package.json +5 -5
package/dist/index.js CHANGED
@@ -1,27 +1,9 @@
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";
1
+ import { unsafeCSS as wt, LitElement as xt, html as N, nothing as W } from "lit";
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(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__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 U(i) {
95
77
  const t = c.get(i), { form: e } = t;
96
- X(i, e, t), Q(i, t.labels);
78
+ Y(i, e, t), X(i, t.labels);
97
79
  }
98
- const q = (i, t = !1) => {
80
+ const j = (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
+ }, G = { 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" && j(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 && U(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, {
134
- acceptNode(rt) {
135
- return c.has(rt) && !(v && v.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
114
+ if (n.localName === "form") {
115
+ const d = g.get(n), x = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
116
+ acceptNode(O) {
117
+ return c.has(O) && O.constructor.formAssociated && !(d && d.has(O)) ? 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
+ U(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, G), j(n, !0));
125
+ }), l.forEach((n) => {
126
+ const b = c.get(n);
127
+ b && a.get(b) && J(b), f.has(n) && f.get(n).disconnect();
146
128
  });
147
129
  });
148
130
  }
@@ -150,88 +132,88 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
150
132
  i.forEach((t) => {
151
133
  const { removedNodes: e } = t;
152
134
  e.forEach((r) => {
153
- const o = B.get(t.target);
154
- c.has(r) && Z(r), o.disconnect();
135
+ const o = K.get(t.target);
136
+ c.has(r) && tt(r), o.disconnect();
155
137
  });
156
138
  });
157
139
  }
158
140
  const nt = (i) => {
159
141
  var e;
160
142
  const t = new MutationObserver(at);
161
- (e = t.observe) == null || e.call(t, i, { childList: !0 }), B.set(i, t);
143
+ (e = t.observe) == null || e.call(t, i, { childList: !0 }), K.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
- }, G = (i) => {
151
+ }, J = (i) => {
170
152
  a.get(i).forEach((e) => {
171
153
  e.remove();
172
154
  }), a.set(i, []);
173
- }, J = (i, t) => {
155
+ }, Q = (i, t) => {
174
156
  const e = document.createElement("input");
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);
179
- }, Q = (i, t) => {
160
+ a.set(t, []), (e = z.observe) == null || e.call(z, i, G);
161
+ }, X = (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
- }, X = (i, t, e) => {
189
+ }, Y = (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
- }, Y = (i, t, e) => {
227
- const r = f.get(i);
208
+ }, Z = (i, t, e) => {
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;
231
- }, Z = (i) => {
213
+ }, tt = (i) => {
232
214
  if (i.constructor.formAssociated) {
233
215
  const t = c.get(i), { labels: e, form: r } = t;
234
- Q(i, e), X(i, r, t);
216
+ X(i, e), Y(i, r, t);
235
217
  }
236
218
  };
237
219
  function T() {
@@ -242,13 +224,13 @@ 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();
251
- function tt(i, t) {
232
+ }, $ = /* @__PURE__ */ new WeakMap();
233
+ function et(i, t) {
252
234
  i.toggleAttribute(t, !0), i.part && i.part.add(t);
253
235
  }
254
236
  class V extends Set {
@@ -258,14 +240,14 @@ 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}`;
267
- return r.isConnected ? tt(r, o) : setTimeout(() => {
268
- tt(r, o);
248
+ const e = super.add(t), r = $.get(this), o = `state${t}`;
249
+ return r.isConnected ? et(r, o) : setTimeout(() => {
250
+ et(r, o);
269
251
  }), e;
270
252
  }
271
253
  clear() {
@@ -274,13 +256,13 @@ 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;
281
263
  }
282
264
  }
283
- function et(i, t, e, r) {
265
+ function it(i, t, e, r) {
284
266
  if (e === "a" && !r)
285
267
  throw new TypeError("Private accessor was defined without a getter");
286
268
  if (typeof t == "function" ? i !== t || !r : !t.has(i))
@@ -307,10 +289,10 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
307
289
  Object.freeze(this);
308
290
  }
309
291
  get length() {
310
- return et(this, C, "f").length;
292
+ return it(this, C, "f").length;
311
293
  }
312
294
  [(C = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
313
- return et(this, C, "f")[Symbol.iterator]();
295
+ return it(this, C, "f")[Symbol.iterator]();
314
296
  }
315
297
  item(t) {
316
298
  return this[t] == null ? null : this[t];
@@ -325,25 +307,25 @@ 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 Z(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 Z(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
  }
346
- class it {
328
+ class rt {
347
329
  static get isPolyfilled() {
348
330
  return !0;
349
331
  }
@@ -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,73 +351,73 @@ 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
- const e = this.checkValidity(), r = H.get(this);
369
+ const e = this.checkValidity(), r = B.get(this);
388
370
  if (r && !t.constructor.formAssociated)
389
371
  throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
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."), J(this), t != null && !(t instanceof FormData)) {
395
377
  if (e.getAttribute("name")) {
396
- const r = J(e, this);
378
+ const r = Q(e, this);
397
379
  r.value = t;
398
380
  }
399
381
  } else
400
382
  t != null && t instanceof FormData && Array.from(t).reverse().forEach(([r, o]) => {
401
383
  if (typeof o == "string") {
402
- const l = J(e, this);
384
+ const l = Q(e, this);
403
385
  l.name = r, l.value = o;
404
386
  }
405
387
  });
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
- 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)
394
+ B.set(this, r);
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 = H.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() {
@@ -472,13 +454,13 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
472
454
  };
473
455
  }
474
456
  } else {
475
- if (typeof window < "u" && (window.ElementInternals = it), typeof CustomElementRegistry < "u") {
457
+ if (typeof window < "u" && (window.ElementInternals = rt), typeof CustomElementRegistry < "u") {
476
458
  const i = CustomElementRegistry.prototype.define;
477
459
  CustomElementRegistry.prototype.define = function(t, e, r) {
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
+ q.has(this) || (q.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), o != null && o.apply(this), tt(this);
482
464
  };
483
465
  }
484
466
  i.call(this, t, e, r);
@@ -492,38 +474,38 @@ const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
492
474
  return {};
493
475
  if (c.has(this))
494
476
  throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
495
- return new it(this);
477
+ return new rt(this);
496
478
  }), typeof Element < "u") {
497
479
  let i = function(...e) {
498
480
  const r = t.apply(this, e);
499
- 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);
481
+ if (H.set(this, r), T()) {
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}
600
- ${M === "leading" ? N`<slot name="icon"></slot>` : O}
579
+ ?isResponsive=${g}
580
+ ?isLoading=${f}>
581
+ ${f ? this.renderSpinner() : W}
582
+ ${M === "leading" ? N`<slot name="icon"></slot>` : W}
601
583
  <slot></slot>
602
- ${M === "trailing" ? N`<slot name="icon"></slot>` : O}
584
+ ${M === "trailing" ? N`<slot name="icon"></slot>` : W}
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.2",
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",
42
- "element-internals-polyfill": "1.3.8"
40
+ "@justeattakeaway/pie-spinner": "0.3.1",
41
+ "@justeattakeaway/pie-webc-core": "0.13.0",
42
+ "element-internals-polyfill": "1.3.9"
43
43
  }
44
44
  }