@justeattakeaway/pie-button - npm Package Compare versions

Comparing version 0.40.0 to 0.40.1

dist/index.js

 import { unsafeCSS as wt, LitElement as xt, html as N, nothing as O } from "lit";
-import { property as m } from "lit/decorators.js";
+import { property as h } from "lit/decorators.js";
 import { ifDefined as Et } from "lit/directives/if-defined.js";
+import { validPropertyValues as R, defineCustomElement as kt } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-spinner";
-const R = (d, n, a) => function(b, y) {
-  const u = `#${y}`;
-  Object.defineProperty(b, y, {
-    get() {
-      return this[u];
-    },
-    set(f) {
-      n.includes(f) ? this[u] = f : (console.error(
-        `<${d}> Invalid value "${f}" provided for property "${y}".`,
-        `Must be one of: ${n.join(" | ")}.`,
-        `Falling back to default value: "${a}"`
-      ), this[u] = a);
-    },
-    configurable: !0
-  });
-};
-function kt(d, n) {
-  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);
-}
-const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Rt = ["productive", "expressive"], Mt = ["submit", "button", "reset"], Ct = [
+const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], _t = ["productive", "expressive"], Mt = ["submit", "button", "reset"], Ct = [
   "primary",
@@ -34,6 +16,6 @@ "secondary",
   "destructive-ghost"
-], 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)}
+], 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)}
 `;
 (function() {
-  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 = {
+  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 = {
     ariaAtomic: "aria-atomic",
@@ -81,6 +63,6 @@ ariaAutoComplete: "aria-autocomplete",
   }, ot = (i, t) => {
-    for (let e in A) {
+    for (let e in S) {
       t[e] = null;
       let r = null;
-      const o = A[e];
+      const o = S[e];
       Object.defineProperty(t, e, {
@@ -96,7 +78,7 @@ get() {
   };
-  function j(i) {
+  function q(i) {
     const t = c.get(i), { form: e } = t;
     X(i, e, t), Q(i, t.labels);
   }
-  const q = (i, t = !1) => {
+  const U = (i, t = !1) => {
     const e = document.createTreeWalker(i, NodeFilter.SHOW_ELEMENT, {
@@ -110,7 +92,7 @@ acceptNode(l) {
     for (; r; )
-      r.formDisabledCallback && o && $(r, i.disabled), r = e.nextNode();
-  }, U = { attributes: !0, attributeFilter: ["disabled", "name"] }, z = T() ? new MutationObserver((i) => {
+      r.formDisabledCallback && o && D(r, i.disabled), r = e.nextNode();
+  }, j = { attributes: !0, attributeFilter: ["disabled", "name"] }, z = T() ? new MutationObserver((i) => {
     for (const t of i) {
       const e = t.target;
-      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && q(e)), t.attributeName === "name" && e.constructor.formAssociated) {
+      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? D(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && U(e)), t.attributeName === "name" && e.constructor.formAssociated) {
         const r = c.get(e), o = M.get(e);
@@ -121,31 +103,31 @@ r.setFormValue(o);
   }) : {};
-  function P(i) {
+  function _(i) {
     i.forEach((t) => {
       const { addedNodes: e, removedNodes: r } = t, o = Array.from(e), l = Array.from(r);
-      o.forEach((s) => {
-        var g;
-        if (c.has(s) && s.constructor.formAssociated && j(s), k.has(s)) {
-          const v = k.get(s);
-          Object.keys(A).filter((w) => v[w] !== null).forEach((w) => {
-            s.setAttribute(A[w], v[w]);
-          }), k.delete(s);
+      o.forEach((n) => {
+        var b;
+        if (c.has(n) && n.constructor.formAssociated && q(n), k.has(n)) {
+          const d = k.get(n);
+          Object.keys(S).filter((y) => d[y] !== null).forEach((y) => {
+            n.setAttribute(S[y], d[y]);
+          }), k.delete(n);
         }
-        if (F.has(s)) {
-          const v = F.get(s);
-          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);
+        if (F.has(n)) {
+          const d = F.get(n);
+          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);
         }
-        if (s.localName === "form") {
-          const v = f.get(s), E = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
+        if (n.localName === "form") {
+          const d = g.get(n), x = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
             acceptNode(rt) {
-              return c.has(rt) && !(v && v.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+              return c.has(rt) && !(d && d.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
             }
           });
-          let w = E.nextNode();
-          for (; w; )
-            j(w), w = E.nextNode();
+          let y = x.nextNode();
+          for (; y; )
+            q(y), y = x.nextNode();
         }
-        s.localName === "fieldset" && ((g = z.observe) == null || g.call(z, s, U), q(s, !0));
-      }), l.forEach((s) => {
-        const g = c.get(s);
-        g && a.get(g) && G(g), u.has(s) && u.get(s).disconnect();
+        n.localName === "fieldset" && ((b = z.observe) == null || b.call(z, n, j), U(n, !0));
+      }), l.forEach((n) => {
+        const b = c.get(n);
+        b && a.get(b) && G(b), f.has(n) && f.get(n).disconnect();
       });
@@ -168,7 +150,7 @@ });
   };
-  T() && new MutationObserver(P);
-  const _ = {
+  T() && new MutationObserver(_);
+  const P = {
     childList: !0,
     subtree: !0
-  }, $ = (i, t) => {
+  }, D = (i, t) => {
     i.toggleAttribute("internals-disabled", t), t ? i.setAttribute("aria-disabled", "true") : i.removeAttribute("aria-disabled"), i.formDisabledCallback && i.formDisabledCallback.apply(i, [t]);
@@ -184,3 +166,3 @@ }, G = (i) => {
     var e;
-    a.set(t, []), (e = z.observe) == null || e.call(z, i, U);
+    a.set(t, []), (e = z.observe) == null || e.call(z, i, j);
   }, Q = (i, t) => {
@@ -192,9 +174,9 @@ if (t.length) {
     }
-  }, S = (i) => {
-    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);
+  }, A = (i) => {
+    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);
     i.toggleAttribute("internals-invalid", o), i.toggleAttribute("internals-valid", !o);
   }, lt = (i) => {
-    S(I(i.target));
+    A(I(i.target));
   }, ct = (i) => {
-    S(I(i.target));
+    A(I(i.target));
   }, dt = (i) => {
@@ -204,10 +186,10 @@ 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(",");
       if (e.target.closest(t)) {
-        const o = f.get(i);
+        const o = g.get(i);
         if (i.noValidate)
           return;
-        o.size && Array.from(o).reverse().map((g) => c.get(g).reportValidity()).includes(!1) && e.preventDefault();
+        o.size && Array.from(o).reverse().map((b) => c.get(b).reportValidity()).includes(!1) && e.preventDefault();
       }
     });
   }, vt = (i) => {
-    const t = f.get(i.target);
+    const t = g.get(i.target);
     t && t.size && t.forEach((e) => {
@@ -218,3 +200,3 @@ e.constructor.formAssociated && e.formResetCallback && e.formResetCallback.apply(e);
     if (t) {
-      const r = f.get(t);
+      const r = g.get(t);
       if (r)
@@ -224,7 +206,7 @@ r.add(i);
         const o = /* @__PURE__ */ new Set();
-        o.add(i), f.set(t, o), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
+        o.add(i), g.set(t, o), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
       }
-      y.set(t, { ref: i, internals: e }), i.constructor.formAssociated && i.formAssociatedCallback && setTimeout(() => {
+      E.set(t, { ref: i, internals: e }), i.constructor.formAssociated && i.formAssociatedCallback && setTimeout(() => {
         i.formAssociatedCallback.apply(i, [t]);
-      }, 0), S(t);
+      }, 0), A(t);
     }
@@ -234,7 +216,7 @@ }, I = (i) => {
     return t && t.tagName !== "FORM" && (t = I(t)), t;
-  }, x = (i, t, e = DOMException) => {
+  }, w = (i, t, e = DOMException) => {
     if (!i.constructor.formAssociated)
       throw new e(t);
   }, Y = (i, t, e) => {
-    const r = f.get(i);
+    const r = g.get(i);
     return r && r.size && r.forEach((o) => {
@@ -257,3 +239,3 @@ c.get(o)[e]() || (t = !1);
   }
-  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) => {
+  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) => {
     let t = !0;
@@ -263,3 +245,3 @@ for (let e in i)
     return t;
-  }, D = /* @__PURE__ */ new WeakMap();
+  }, $ = /* @__PURE__ */ new WeakMap();
   function tt(i, t) {
@@ -275,3 +257,3 @@ i.toggleAttribute(t, !0), i.part && i.part.add(t);
         throw new TypeError("Illegal constructor");
-      D.set(this, t);
+      $.set(this, t);
     }
@@ -281,3 +263,3 @@ add(t) {
         throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
-      const e = super.add(t), r = D.get(this), o = `state${t}`;
+      const e = super.add(t), r = $.get(this), o = `state${t}`;
       return r.isConnected ? tt(r, o) : setTimeout(() => {
@@ -293,3 +275,3 @@ tt(r, o);
     delete(t) {
-      const e = super.delete(t), r = D.get(this);
+      const e = super.delete(t), r = $.get(this);
       return r.isConnected ? (r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`)) : setTimeout(() => {
@@ -345,8 +327,8 @@ r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`);
     function e(...l) {
-      let s = i.apply(this, l);
-      return Y(this, s, "checkValidity");
+      let n = i.apply(this, l);
+      return Y(this, n, "checkValidity");
     }
     function r(...l) {
-      let s = t.apply(this, l);
-      return Y(this, s, "reportValidity");
+      let n = t.apply(this, l);
+      return Y(this, n, "reportValidity");
     }
@@ -356,7 +338,7 @@ const { get: o } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
       get(...l) {
-        const s = o.call(this, ...l), g = Array.from(f.get(this) || []);
-        if (g.length === 0)
-          return s;
-        const v = Array.from(s).concat(g).sort((E, w) => E.compareDocumentPosition ? E.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
-        return new ft(v);
+        const n = o.call(this, ...l), b = Array.from(g.get(this) || []);
+        if (b.length === 0)
+          return n;
+        const d = Array.from(n).concat(b).sort((x, y) => x.compareDocumentPosition ? x.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
+        return new ft(d);
       }
@@ -373,9 +355,9 @@ });
       const e = t.getRootNode(), r = new ht();
-      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);
+      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);
     }
     checkValidity() {
-      const t = d.get(this);
-      if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+      const t = p.get(this);
+      if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
         return !0;
-      const e = n.get(this);
+      const e = s.get(this);
       if (!e.valid) {
@@ -392,4 +374,4 @@ const r = new Event("invalid", {
     get form() {
-      const t = d.get(this);
-      x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
+      const t = p.get(this);
+      w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
       let e;
@@ -399,4 +381,4 @@ return t.constructor.formAssociated === !0 && (e = I(t)), e;
     get labels() {
-      const t = d.get(this);
-      x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
+      const t = p.get(this);
+      w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
       const e = t.getAttribute("id"), r = t.getRootNode();
@@ -406,4 +388,4 @@ return r && e ? r.querySelectorAll(`[for="${e}"]`) : [];
     reportValidity() {
-      const t = d.get(this);
-      if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
+      const t = p.get(this);
+      if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
         return !0;
@@ -416,4 +398,4 @@ const e = this.checkValidity(), r = H.get(this);
     setFormValue(t) {
-      const e = d.get(this);
-      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)) {
+      const e = p.get(this);
+      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)) {
         if (e.getAttribute("name")) {
@@ -433,32 +415,32 @@ const r = J(e, this);
     setValidity(t, e, r) {
-      const o = d.get(this);
-      if (x(o, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
+      const o = p.get(this);
+      if (w(o, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
         throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
       H.set(this, r);
-      const l = n.get(this), s = {};
-      for (const E in t)
-        s[E] = t[E];
-      Object.keys(s).length === 0 && mt(l);
-      const g = { ...l, ...s };
-      delete g.valid;
-      const { valid: v } = pt(l, g, this.form);
-      if (!v && !e)
+      const l = s.get(this), n = {};
+      for (const x in t)
+        n[x] = t[x];
+      Object.keys(n).length === 0 && mt(l);
+      const b = { ...l, ...n };
+      delete b.valid;
+      const { valid: d } = pt(l, b, this.form);
+      if (!d && !e)
         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.");
-      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);
+      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);
     }
     get shadowRoot() {
-      const t = d.get(this), e = W.get(t);
+      const t = p.get(this), e = W.get(t);
       return e || null;
     }
     get validationMessage() {
-      const t = d.get(this);
-      return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), b.get(this);
+      const t = p.get(this);
+      return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), u.get(this);
     }
     get validity() {
-      const t = d.get(this);
-      return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), n.get(this);
+      const t = p.get(this);
+      return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), s.get(this);
     }
     get willValidate() {
-      const t = d.get(this);
-      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"));
+      const t = p.get(this);
+      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"));
     }
@@ -506,3 +488,3 @@ }
           e.prototype.connectedCallback = function() {
-            K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), Z(this);
+            K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), o != null && o.apply(this), Z(this);
           };
@@ -526,4 +508,4 @@ }
         if (W.set(this, r), T()) {
-          const o = new MutationObserver(P);
-          window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), u.set(this, o);
+          const o = new MutationObserver(_);
+          window.ShadyDOM ? o.observe(this, P) : o.observe(r, P), f.set(this, o);
         }
@@ -535,21 +517,21 @@ return r;
     }
-    T() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" && gt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
+    T() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, P), typeof HTMLFormElement < "u" && gt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
   }
 })();
-var At = Object.defineProperty, St = Object.getOwnPropertyDescriptor, p = (d, n, a, c) => {
-  for (var b = c > 1 ? void 0 : c ? St(n, a) : n, y = d.length - 1, u; y >= 0; y--)
-    (u = d[y]) && (b = (c ? u(n, a, b) : u(b)) || b);
-  return c && b && At(n, a, b), b;
+var St = Object.defineProperty, At = Object.getOwnPropertyDescriptor, m = (p, s, a, c) => {
+  for (var u = c > 1 ? void 0 : c ? At(s, a) : s, E = p.length - 1, f; E >= 0; E--)
+    (f = p[E]) && (u = (c ? f(s, a, u) : f(u)) || u);
+  return c && u && St(s, a, u), u;
 };
 const L = "pie-button";
-class h extends xt {
+class v extends xt {
   constructor() {
-    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) => {
-      if (!(n.key !== "Enter" || this.type !== "submit" || this.disabled)) {
-        if (n.target instanceof HTMLElement) {
-          const a = n.target.tagName.toLowerCase();
+    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) => {
+      if (!(s.key !== "Enter" || this.type !== "submit" || this.disabled)) {
+        if (s.target instanceof HTMLElement) {
+          const a = s.target.tagName.toLowerCase();
           if (a === "button" || a === "pie-button")
             return;
         }
-        n.preventDefault(), this._handleClick();
+        s.preventDefault(), this._handleClick();
       }
@@ -562,12 +544,12 @@ }, this._internals = this.attachInternals();
   connectedCallback() {
-    var n;
-    super.connectedCallback(), this.type === "submit" && ((n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown));
+    var s;
+    super.connectedCallback(), this.type === "submit" && ((s = this.form) == null || s.addEventListener("keydown", this._handleFormKeyDown));
   }
   disconnectedCallback() {
-    var n;
-    super.disconnectedCallback(), this.type === "submit" && ((n = this.form) == null || n.removeEventListener("keydown", this._handleFormKeyDown));
+    var s;
+    super.disconnectedCallback(), this.type === "submit" && ((s = this.form) == null || s.removeEventListener("keydown", this._handleFormKeyDown));
   }
-  updated(n) {
+  updated(s) {
     var a, c;
-    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));
+    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));
   }
@@ -582,7 +564,7 @@ /**
    */
-  _simulateNativeButtonClick(n) {
+  _simulateNativeButtonClick(s) {
     if (!this.form)
       return;
     const a = document.createElement("button");
-    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();
+    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();
   }
@@ -598,6 +580,6 @@ _handleClick() {
   renderSpinner() {
-    const n = this.size.includes("small") ? "small" : "medium", c = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary";
+    const s = this.size.includes("small") ? "small" : "medium", c = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary";
     return N`
                     <pie-spinner
-                        size="${n}"
+                        size="${s}"
                         variant="${c}"
@@ -608,9 +590,9 @@ </pie-spinner>`;
     const {
-      type: n,
+      type: s,
       disabled: a,
       isFullWidth: c,
-      variant: b,
-      size: y,
-      isLoading: u,
-      isResponsive: f,
+      variant: u,
+      size: E,
+      isLoading: f,
+      isResponsive: g,
       iconPlacement: M,
@@ -623,11 +605,11 @@ responsiveSize: k
                 class="o-btn"
-                type=${n}
-                variant=${b}
-                size=${y}
+                type=${s}
+                variant=${u}
+                size=${E}
                 responsiveSize=${Et(k)}
                 ?disabled=${a}
                 ?isFullWidth=${c}
-                ?isResponsive=${f}
-                ?isLoading=${u}>
-                    ${u ? this.renderSpinner() : O}
+                ?isResponsive=${g}
+                ?isLoading=${f}>
+                    ${f ? this.renderSpinner() : O}
                     ${M === "leading" ? N`<slot name="icon"></slot>` : O}
@@ -639,68 +621,68 @@ <slot></slot>
   focus() {
-    var n, a;
-    (a = (n = this.shadowRoot) == null ? void 0 : n.querySelector("button")) == null || a.focus();
+    var s, a;
+    (a = (s = this.shadowRoot) == null ? void 0 : s.querySelector("button")) == null || a.focus();
   }
 }
-h.formAssociated = !0;
-h.styles = wt(Ft);
-p([
-  m(),
+v.formAssociated = !0;
+v.styles = wt(Ft);
+m([
+  h(),
   R(L, zt, "medium")
-], h.prototype, "size", 2);
-p([
-  m(),
+], v.prototype, "size", 2);
+m([
+  h(),
   R(L, Mt, "submit")
-], h.prototype, "type", 2);
-p([
-  m(),
+], v.prototype, "type", 2);
+m([
+  h(),
   R(L, Ct, "primary")
-], h.prototype, "variant", 2);
-p([
-  m({ type: String }),
+], v.prototype, "variant", 2);
+m([
+  h({ type: String }),
   R(L, Lt, "leading")
-], h.prototype, "iconPlacement", 2);
-p([
-  m({ type: Boolean })
-], h.prototype, "disabled", 2);
-p([
-  m({ type: Boolean, reflect: !0 })
-], h.prototype, "isLoading", 2);
-p([
-  m({ type: Boolean })
-], h.prototype, "isFullWidth", 2);
-p([
-  m({ type: Boolean })
-], h.prototype, "isResponsive", 2);
-p([
-  m({ type: String })
-], h.prototype, "name", 2);
-p([
-  m({ type: String })
-], h.prototype, "value", 2);
-p([
-  m()
-], h.prototype, "formaction", 2);
-p([
-  m()
-], h.prototype, "formenctype", 2);
-p([
-  m()
-], h.prototype, "formmethod", 2);
-p([
-  m({ type: Boolean })
-], h.prototype, "formnovalidate", 2);
-p([
-  m()
-], h.prototype, "formtarget", 2);
-p([
-  m({ type: String })
-], h.prototype, "responsiveSize", 2);
-kt(L, h);
+], v.prototype, "iconPlacement", 2);
+m([
+  h({ type: Boolean })
+], v.prototype, "disabled", 2);
+m([
+  h({ type: Boolean, reflect: !0 })
+], v.prototype, "isLoading", 2);
+m([
+  h({ type: Boolean })
+], v.prototype, "isFullWidth", 2);
+m([
+  h({ type: Boolean })
+], v.prototype, "isResponsive", 2);
+m([
+  h({ type: String })
+], v.prototype, "name", 2);
+m([
+  h({ type: String })
+], v.prototype, "value", 2);
+m([
+  h()
+], v.prototype, "formaction", 2);
+m([
+  h()
+], v.prototype, "formenctype", 2);
+m([
+  h()
+], v.prototype, "formmethod", 2);
+m([
+  h({ type: Boolean })
+], v.prototype, "formnovalidate", 2);
+m([
+  h()
+], v.prototype, "formtarget", 2);
+m([
+  h({ type: String })
+], v.prototype, "responsiveSize", 2);
+kt(L, v);
 export {
-  h as PieButton,
+  v as PieButton,
   Pt as formEncodingtypes,
-  _t as formMethodTypes,
+  Dt as formMethodTypes,
   $t as formTargetTypes,
   Lt as iconPlacements,
-  Rt as responsiveSizes,
+  _t as responsiveSizes,
   zt as sizes,
@@ -707,0 +689,0 @@ Mt as types,

dist/react.js

 import * as t from "react";
 import { createComponent as e } from "@lit/react";
 import { PieButton as o } from "./index.js";
-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";
+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";
 import "lit";
 import "lit/decorators.js";
 import "lit/directives/if-defined.js";
+import "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-spinner";
-const a = e({
+const c = e({
   displayName: "PieButton",
@@ -17,11 +18,11 @@ elementClass: o,
 export {
-  a as PieButton,
-  u as formEncodingtypes,
-  y as formMethodTypes,
-  P as formTargetTypes,
-  l as iconPlacements,
-  B as responsiveSizes,
-  d as sizes,
-  g as types,
-  v as variants
+  c as PieButton,
+  y as formEncodingtypes,
+  P as formMethodTypes,
+  l as formTargetTypes,
+  B as iconPlacements,
+  d as responsiveSizes,
+  g as sizes,
+  v as types,
+  T as variants
 };

package.json

 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.40.0",
+  "version": "0.40.1",
   "description": "PIE design system button built using web components",
@@ -31,3 +31,3 @@ "type": "module",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.6.0"
+    "@justeattakeaway/pie-components-config": "0.6.1"
   },
@@ -41,6 +41,6 @@ "volta": {
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "0.3.0",
-    "@justeattakeaway/pie-webc-core": "0.12.0",
+    "@justeattakeaway/pie-spinner": "0.3.1",
+    "@justeattakeaway/pie-webc-core": "0.13.0",
     "element-internals-polyfill": "1.3.8"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

85300

decreased by-0.58%

Lines of code

1331

decreased by-1.26%

Dependency changes

• + Added@justeattakeaway/pie-spinner@0.3.1(transitive)

• + Added@justeattakeaway/pie-webc-core@0.13.0(transitive)

• + Added@lit-labs/ssr-dom-shim@1.2.1(transitive)

• + Added@lit/reactive-element@2.0.4(transitive)

• + Added@types/trusted-types@2.0.7(transitive)

• + Addedlit@3.1.0(transitive)

• + Addedlit-element@4.1.1(transitive)

• + Addedlit-html@3.2.1(transitive)

• - Removed@justeattakeaway/pie-spinner@0.3.0(transitive)

• - Removed@justeattakeaway/pie-webc-core@0.12.0(transitive)

• Updated@justeattakeaway/pie-spinner@0.3.1

• Updated@justeattakeaway/pie-webc-core@0.13.0