@justeattakeaway/pie-button 0.47.7 → 0.48.0

package/dist/index.js

@@ -1,9 +1,9 @@
-import { LitElement as Ct, html as P, nothing as K, unsafeCSS as Ft } from "lit";
-import { property as m } from "lit/decorators.js";
-import { ifDefined as Lt } from "lit/directives/if-defined.js";
-import { FormControlMixin as St, validPropertyValues as O, defineCustomElement as At } from "@justeattakeaway/pie-webc-core";
+import { LitElement as zt, html as P, nothing as K, unsafeCSS as Ft } from "lit";
+import { classMap as St } from "lit/directives/class-map.js";
+import { property as h } from "lit/decorators.js";
+import { FormControlMixin as At, validPropertyValues as O, defineCustomElement as It } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-spinner";
-const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Kt = ["productive", "expressive"], Tt = ["submit", "button", "reset"], Vt = [
+const Tt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Kt = ["productive", "expressive"], Lt = ["submit", "button", "reset"], Vt = [
   "primary",
   "secondary",
   "outline",
@@ -13,7 +13,7 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
   "ghost-inverse",
   "destructive",
   "destructive-ghost"
-], Nt = ["leading", "trailing"], jt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Ut = ["post", "get", "dialog"], qt = ["_self", "_blank", "_parent", "_top"], b = {
+], Nt = ["leading", "trailing"], jt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Ut = ["post", "get", "dialog"], qt = ["_self", "_blank", "_parent", "_top"], f = {
   size: "medium",
   type: "submit",
   variant: "primary",
@@ -22,11 +22,11 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
   isLoading: !1,
   isFullWidth: !1,
   isResponsive: !1
-}, Pt = `*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}
+}, Pt = `*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;inline-size:var(--btn-inline-size)}.o-btn.o-btn--primary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary:active:not(:disabled),.o-btn.o-btn--primary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall,.o-btn.o-btn--primary.o-btn--small-productive{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn.o-btn--primary.o-btn--xsmall:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.is-loading:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}@media (min-width: 769px){.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive,.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive{--btn-bg-color: var(--dt-color-interactive-brand)}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:hover:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--xsmall.o-btn--expressive.o-btn--responsive.is-loading:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive:active:not(:disabled),.o-btn.o-btn--primary.o-btn--small-productive.o-btn--responsive.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}}.o-btn.o-btn--secondary{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--secondary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn.o-btn--secondary:active:not(:disabled),.o-btn.o-btn--secondary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn.o-btn--outline{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--outline:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--outline:active:not(:disabled),.o-btn.o-btn--outline.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn.o-btn--ghost:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--ghost:active:not(:disabled),.o-btn.o-btn--ghost.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--inverse{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn.o-btn--inverse:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn.o-btn--inverse:active:not(:disabled),.o-btn.o-btn--inverse.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn.o-btn--ghost-inverse,.o-btn.o-btn--outline-inverse{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn.o-btn--ghost-inverse:hover:not(:disabled),.o-btn.o-btn--outline-inverse:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn.o-btn--ghost-inverse:active:not(:disabled),.o-btn.o-btn--ghost-inverse.is-loading:not(:disabled),.o-btn.o-btn--outline-inverse:active:not(:disabled),.o-btn.o-btn--outline-inverse.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn.o-btn--outline-inverse:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn.o-btn--destructive{--btn-bg-color: var(--dt-color-support-error)}.o-btn.o-btn--destructive:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn.o-btn--destructive:active:not(:disabled),.o-btn.o-btn--destructive.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn.o-btn--destructive-ghost{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn.o-btn--destructive-ghost:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn.o-btn--destructive-ghost:active:not(:disabled),.o-btn.o-btn--destructive-ghost.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn.o-btn--xsmall{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 769px){.o-btn.o-btn--xsmall.o-btn--responsive{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn.o-btn--xsmall.o-btn--responsive.o-btn--expressive{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn.o-btn--small-expressive{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 769px){.o-btn.o-btn--small-expressive.o-btn--responsive{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--small-productive{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 769px){.o-btn.o-btn--small-productive.o-btn--responsive{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--medium{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 769px){.o-btn.o-btn--medium.o-btn--responsive{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn.o-btn--large{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.o-btn.o-btn--fullWidth{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not(.o-btn--ghost,.o-btn--ghost-inverse,.o-btn--destructive-ghost){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled].o-btn--outline{border-color:var(--dt-color-disabled-01)!important}.o-btn.is-loading>*:not(pie-spinner){visibility:hidden}.o-btn.is-loading pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}
 `;
 (function() {
   (function(k) {
-    const a = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), A = {
+    const n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), I = {
       ariaAtomic: "aria-atomic",
       ariaAutoComplete: "aria-autocomplete",
       ariaBusy: "aria-busy",
@@ -70,57 +70,57 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       ariaValueText: "aria-valuetext",
       role: "role"
     }, dt = (e, t) => {
-      for (let i in A) {
-        t[i] = null;
-        let r = null;
-        const o = A[i];
-        Object.defineProperty(t, i, {
+      for (let o in I) {
+        t[o] = null;
+        let i = null;
+        const r = I[o];
+        Object.defineProperty(t, o, {
           get() {
-            return r;
+            return i;
           },
           set(s) {
-            r = s, e.isConnected ? e.setAttribute(o, s) : L.set(e, t);
+            i = s, e.isConnected ? e.setAttribute(r, s) : C.set(e, t);
           }
         });
       }
     };
     function J(e) {
-      const t = c.get(e), { form: i } = t;
-      et(e, i, t), tt(e, t.labels);
+      const t = c.get(e), { form: o } = t;
+      et(e, o, t), tt(e, t.labels);
     }
     const Q = (e, t = !1) => {
-      const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
+      const o = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
         acceptNode(s) {
           return c.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
         }
       });
-      let r = i.nextNode();
-      const o = !t || e.disabled;
-      for (; r; )
-        r.formDisabledCallback && o && D(r, e.disabled), r = i.nextNode();
-    }, X = { attributes: !0, attributeFilter: ["disabled", "name"] }, I = N() ? new MutationObserver((e) => {
+      let i = o.nextNode();
+      const r = !t || e.disabled;
+      for (; i; )
+        i.formDisabledCallback && r && D(i, e.disabled), i = o.nextNode();
+    }, X = { attributes: !0, attributeFilter: ["disabled", "name"] }, T = N() ? new MutationObserver((e) => {
       for (const t of e) {
-        const i = t.target;
-        if (t.attributeName === "disabled" && (i.constructor.formAssociated ? D(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && Q(i)), t.attributeName === "name" && i.constructor.formAssociated) {
-          const r = c.get(i), o = F.get(i);
-          r.setFormValue(o);
+        const o = t.target;
+        if (t.attributeName === "disabled" && (o.constructor.formAssociated ? D(o, o.hasAttribute("disabled")) : o.localName === "fieldset" && Q(o)), t.attributeName === "name" && o.constructor.formAssociated) {
+          const i = c.get(o), r = z.get(o);
+          i.setFormValue(r);
         }
       }
     }) : {};
-    function R(e) {
+    function _(e) {
       e.forEach((t) => {
-        const { addedNodes: i, removedNodes: r } = t, o = Array.from(i), s = Array.from(r);
-        o.forEach((l) => {
-          var u;
-          if (c.has(l) && l.constructor.formAssociated && J(l), L.has(l)) {
-            const d = L.get(l);
-            Object.keys(A).filter((y) => d[y] !== null).forEach((y) => {
-              l.setAttribute(A[y], d[y]);
-            }), L.delete(l);
+        const { addedNodes: o, removedNodes: i } = t, r = Array.from(o), s = Array.from(i);
+        r.forEach((l) => {
+          var m;
+          if (c.has(l) && l.constructor.formAssociated && J(l), C.has(l)) {
+            const d = C.get(l);
+            Object.keys(I).filter((y) => d[y] !== null).forEach((y) => {
+              l.setAttribute(I[y], d[y]);
+            }), C.delete(l);
           }
-          if (S.has(l)) {
-            const d = S.get(l);
-            l.setAttribute("internals-valid", d.validity.valid.toString()), l.setAttribute("internals-invalid", (!d.validity.valid).toString()), l.setAttribute("aria-invalid", (!d.validity.valid).toString()), S.delete(l);
+          if (A.has(l)) {
+            const d = A.get(l);
+            l.setAttribute("internals-valid", d.validity.valid.toString()), l.setAttribute("internals-invalid", (!d.validity.valid).toString()), l.setAttribute("aria-invalid", (!d.validity.valid).toString()), A.delete(l);
           }
           if (l.localName === "form") {
             const d = g.get(l), E = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
@@ -132,99 +132,99 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
             for (; y; )
               J(y), y = E.nextNode();
           }
-          l.localName === "fieldset" && ((u = I.observe) === null || u === void 0 || u.call(I, l, X), Q(l, !0));
+          l.localName === "fieldset" && ((m = T.observe) === null || m === void 0 || m.call(T, l, X), Q(l, !0));
         }), s.forEach((l) => {
-          const u = c.get(l);
-          u && h.get(u) && Y(u), z.has(l) && z.get(l).disconnect();
+          const m = c.get(l);
+          m && v.get(m) && Y(m), M.has(l) && M.get(l).disconnect();
         });
       });
     }
-    function vt(e) {
+    function bt(e) {
       e.forEach((t) => {
-        const { removedNodes: i } = t;
-        i.forEach((r) => {
-          const o = q.get(t.target);
-          c.has(r) && rt(r), o.disconnect();
+        const { removedNodes: o } = t;
+        o.forEach((i) => {
+          const r = q.get(t.target);
+          c.has(i) && it(i), r.disconnect();
         });
       });
     }
-    const ht = (e) => {
-      var t, i;
-      const r = new MutationObserver(vt);
-      !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (i = r.observe) === null || i === void 0 || i.call(r, e, { childList: !0 }), q.set(e, r);
+    const vt = (e) => {
+      var t, o;
+      const i = new MutationObserver(bt);
+      !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (o = i.observe) === null || o === void 0 || o.call(i, e, { childList: !0 }), q.set(e, i);
     };
-    N() && new MutationObserver(R);
-    const _ = {
+    N() && new MutationObserver(_);
+    const R = {
       childList: !0,
       subtree: !0
     }, D = (e, t) => {
       e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
     }, Y = (e) => {
-      h.get(e).forEach((i) => {
-        i.remove();
-      }), h.set(e, []);
+      v.get(e).forEach((o) => {
+        o.remove();
+      }), v.set(e, []);
     }, Z = (e, t) => {
-      const i = document.createElement("input");
-      return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), h.get(t).push(i), i;
-    }, mt = (e, t) => {
-      var i;
-      h.set(t, []), (i = I.observe) === null || i === void 0 || i.call(I, e, X);
+      const o = document.createElement("input");
+      return o.type = "hidden", o.name = e.getAttribute("name"), e.after(o), v.get(t).push(o), o;
+    }, ht = (e, t) => {
+      var o;
+      v.set(t, []), (o = T.observe) === null || o === void 0 || o.call(T, e, X);
     }, tt = (e, t) => {
       if (t.length) {
-        Array.from(t).forEach((r) => r.addEventListener("click", e.click.bind(e)));
-        let i = t[0].id;
-        t[0].id || (i = `${t[0].htmlFor}_Label`, t[0].id = i), e.setAttribute("aria-labelledby", i);
+        Array.from(t).forEach((i) => i.addEventListener("click", e.click.bind(e)));
+        let o = t[0].id;
+        t[0].id || (o = `${t[0].htmlFor}_Label`, t[0].id = o), e.setAttribute("aria-labelledby", o);
       }
-    }, T = (e) => {
-      const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = g.get(e) || [], r = Array.from(i).filter((s) => s.isConnected).map((s) => c.get(s).validity.valid), o = [...t, ...r].includes(!1);
-      e.toggleAttribute("internals-invalid", o), e.toggleAttribute("internals-valid", !o);
+    }, L = (e) => {
+      const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), o = g.get(e) || [], i = Array.from(o).filter((s) => s.isConnected).map((s) => c.get(s).validity.valid), r = [...t, ...i].includes(!1);
+      e.toggleAttribute("internals-invalid", r), e.toggleAttribute("internals-valid", !r);
     }, pt = (e) => {
-      T(V(e.target));
+      L(V(e.target));
+    }, mt = (e) => {
+      L(V(e.target));
     }, ut = (e) => {
-      T(V(e.target));
-    }, ft = (e) => {
-      const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${e.id ? `,${i}[form='${e.id}']` : ""}`).join(",");
-      e.addEventListener("click", (i) => {
-        if (i.target.closest(t)) {
-          const o = g.get(e);
+      const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((o) => `${o}:not([disabled])`).map((o) => `${o}:not([form])${e.id ? `,${o}[form='${e.id}']` : ""}`).join(",");
+      e.addEventListener("click", (o) => {
+        if (o.target.closest(t)) {
+          const r = g.get(e);
           if (e.noValidate)
             return;
-          o.size && Array.from(o).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && i.preventDefault();
+          r.size && Array.from(r).reverse().map((m) => c.get(m).reportValidity()).includes(!1) && o.preventDefault();
         }
       });
-    }, bt = (e) => {
+    }, ft = (e) => {
       const t = g.get(e.target);
-      t && t.size && t.forEach((i) => {
-        i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
+      t && t.size && t.forEach((o) => {
+        o.constructor.formAssociated && o.formResetCallback && o.formResetCallback.apply(o);
       });
-    }, et = (e, t, i) => {
+    }, et = (e, t, o) => {
       if (t) {
-        const r = g.get(t);
-        if (r)
-          r.add(e);
+        const i = g.get(t);
+        if (i)
+          i.add(e);
         else {
-          const o = /* @__PURE__ */ new Set();
-          o.add(e), g.set(t, o), ft(t), t.addEventListener("reset", bt), t.addEventListener("input", pt), t.addEventListener("change", ut);
+          const r = /* @__PURE__ */ new Set();
+          r.add(e), g.set(t, r), ut(t), t.addEventListener("reset", ft), t.addEventListener("input", pt), t.addEventListener("change", mt);
         }
-        w.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
+        w.set(t, { ref: e, internals: o }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
           e.formAssociatedCallback.apply(e, [t]);
-        }, 0), T(t);
+        }, 0), L(t);
       }
     }, V = (e) => {
       let t = e.parentNode;
       return t && t.tagName !== "FORM" && (t = V(t)), t;
-    }, x = (e, t, i = DOMException) => {
+    }, x = (e, t, o = DOMException) => {
       if (!e.constructor.formAssociated)
-        throw new i(t);
-    }, it = (e, t, i) => {
-      const r = g.get(e);
-      return r && r.size && r.forEach((o) => {
-        c.get(o)[i]() || (t = !1);
+        throw new o(t);
+    }, ot = (e, t, o) => {
+      const i = g.get(e);
+      return i && i.size && i.forEach((r) => {
+        c.get(r)[o]() || (t = !1);
       }), t;
-    }, rt = (e) => {
+    }, it = (e) => {
       if (e.constructor.formAssociated) {
-        const t = c.get(e), { labels: i, form: r } = t;
-        tt(e, i), et(e, r, t);
+        const t = c.get(e), { labels: o, form: i } = t;
+        tt(e, o), et(e, i, t);
       }
     };
     function N() {
@@ -235,13 +235,13 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         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);
       }
     }
-    const yt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), wt = (e, t, i) => (e.valid = xt(t), Object.keys(t).forEach((r) => e[r] = t[r]), i && T(i), e), xt = (e) => {
+    const yt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), wt = (e, t, o) => (e.valid = xt(t), Object.keys(t).forEach((i) => e[i] = t[i]), o && L(o), e), xt = (e) => {
       let t = !0;
-      for (let i in e)
-        i !== "valid" && e[i] !== !1 && (t = !1);
+      for (let o in e)
+        o !== "valid" && e[o] !== !1 && (t = !1);
       return t;
     }, W = /* @__PURE__ */ new WeakMap();
-    function ot(e, t) {
+    function rt(e, t) {
       e.toggleAttribute(t, !0), e.part && e.part.add(t);
     }
     class $ extends Set {
@@ -256,10 +256,10 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       add(t) {
         if (!/^--/.test(t) || typeof t != "string")
           throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
-        const i = super.add(t), r = W.get(this), o = `state${t}`;
-        return r.isConnected ? ot(r, o) : setTimeout(() => {
-          ot(r, o);
-        }), i;
+        const o = super.add(t), i = W.get(this), r = `state${t}`;
+        return i.isConnected ? rt(i, r) : setTimeout(() => {
+          rt(i, r);
+        }), o;
       }
       clear() {
         for (let [t] of this.entries())
@@ -267,43 +267,43 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         super.clear();
       }
       delete(t) {
-        const i = super.delete(t), r = W.get(this);
-        return r.isConnected ? (r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`)) : setTimeout(() => {
-          r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`);
-        }), i;
+        const o = super.delete(t), i = W.get(this);
+        return i.isConnected ? (i.toggleAttribute(`state${t}`, !1), i.part && i.part.remove(`state${t}`)) : setTimeout(() => {
+          i.toggleAttribute(`state${t}`, !1), i.part && i.part.remove(`state${t}`);
+        }), o;
       }
     }
-    function at(e, t, i, r) {
-      if (i === "a" && !r)
+    function nt(e, t, o, i) {
+      if (o === "a" && !i)
         throw new TypeError("Private accessor was defined without a getter");
-      if (typeof t == "function" ? e !== t || !r : !t.has(e))
+      if (typeof t == "function" ? e !== t || !i : !t.has(e))
         throw new TypeError("Cannot read private member from an object whose class did not declare it");
-      return i === "m" ? r : i === "a" ? r.call(e) : r ? r.value : t.get(e);
+      return o === "m" ? i : o === "a" ? i.call(e) : i ? i.value : t.get(e);
     }
-    function Et(e, t, i, r, o) {
-      if (r === "m")
+    function Et(e, t, o, i, r) {
+      if (i === "m")
         throw new TypeError("Private method is not writable");
-      if (r === "a" && !o)
+      if (i === "a" && !r)
         throw new TypeError("Private accessor was defined without a setter");
-      if (typeof t == "function" ? e !== t || !o : !t.has(e))
+      if (typeof t == "function" ? e !== t || !r : !t.has(e))
         throw new TypeError("Cannot write private member to an object whose class did not declare it");
-      return r === "a" ? o.call(e, i) : o ? o.value = i : t.set(e, i), i;
+      return i === "a" ? r.call(e, o) : r ? r.value = o : t.set(e, o), o;
     }
-    var M;
+    var F;
     class kt {
       constructor(t) {
-        M.set(this, void 0), Et(this, M, t, "f");
-        for (let i = 0; i < t.length; i++) {
-          let r = t[i];
-          this[i] = r, r.hasAttribute("name") && (this[r.getAttribute("name")] = r);
+        F.set(this, void 0), Et(this, F, t, "f");
+        for (let o = 0; o < t.length; o++) {
+          let i = t[o];
+          this[o] = i, i.hasAttribute("name") && (this[i.getAttribute("name")] = i);
         }
         Object.freeze(this);
       }
       get length() {
-        return at(this, M, "f").length;
+        return nt(this, F, "f").length;
       }
-      [(M = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-        return at(this, M, "f")[Symbol.iterator]();
+      [(F = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+        return nt(this, F, "f")[Symbol.iterator]();
       }
       item(t) {
         return this[t] == null ? null : this[t];
@@ -312,126 +312,126 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         return this[t] == null ? null : this[t];
       }
     }
-    function zt() {
+    function Mt() {
       const e = HTMLFormElement.prototype.checkValidity;
-      HTMLFormElement.prototype.checkValidity = i;
+      HTMLFormElement.prototype.checkValidity = o;
       const t = HTMLFormElement.prototype.reportValidity;
-      HTMLFormElement.prototype.reportValidity = r;
-      function i(...s) {
+      HTMLFormElement.prototype.reportValidity = i;
+      function o(...s) {
         let l = e.apply(this, s);
-        return it(this, l, "checkValidity");
+        return ot(this, l, "checkValidity");
       }
-      function r(...s) {
+      function i(...s) {
         let l = t.apply(this, s);
-        return it(this, l, "reportValidity");
+        return ot(this, l, "reportValidity");
       }
-      const { get: o } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
+      const { get: r } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
       Object.defineProperty(HTMLFormElement.prototype, "elements", {
         get(...s) {
-          const l = o.call(this, ...s), u = Array.from(g.get(this) || []);
-          if (u.length === 0)
+          const l = r.call(this, ...s), m = Array.from(g.get(this) || []);
+          if (m.length === 0)
             return l;
-          const d = Array.from(l).concat(u).sort((E, y) => E.compareDocumentPosition ? E.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
+          const d = Array.from(l).concat(m).sort((E, y) => E.compareDocumentPosition ? E.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
           return new kt(d);
         }
       });
     }
-    class nt {
+    class at {
       static get isPolyfilled() {
         return !0;
       }
       constructor(t) {
         if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
           throw new TypeError("Illegal constructor");
-        const i = t.getRootNode(), r = new gt();
-        this.states = new $(t), a.set(this, t), n.set(this, r), c.set(t, this), dt(t, this), mt(t, this), Object.seal(this), i instanceof DocumentFragment && ht(i);
+        const o = t.getRootNode(), i = new gt();
+        this.states = new $(t), n.set(this, t), a.set(this, i), c.set(t, this), dt(t, this), ht(t, this), Object.seal(this), o instanceof DocumentFragment && vt(o);
       }
       checkValidity() {
-        const t = a.get(this);
+        const t = n.get(this);
         if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
-        const i = n.get(this);
-        if (!i.valid) {
-          const r = new Event("invalid", {
+        const o = a.get(this);
+        if (!o.valid) {
+          const i = new Event("invalid", {
             bubbles: !1,
             cancelable: !0,
             composed: !1
           });
-          t.dispatchEvent(r);
+          t.dispatchEvent(i);
         }
-        return i.valid;
+        return o.valid;
       }
       get form() {
-        const t = a.get(this);
+        const t = n.get(this);
         x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
-        let i;
-        return t.constructor.formAssociated === !0 && (i = V(t)), i;
+        let o;
+        return t.constructor.formAssociated === !0 && (o = V(t)), o;
       }
       get labels() {
-        const t = a.get(this);
+        const t = n.get(this);
         x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
-        const i = t.getAttribute("id"), r = t.getRootNode();
-        return r && i ? r.querySelectorAll(`[for="${i}"]`) : [];
+        const o = t.getAttribute("id"), i = t.getRootNode();
+        return i && o ? i.querySelectorAll(`[for="${o}"]`) : [];
       }
       reportValidity() {
-        const t = a.get(this);
+        const t = n.get(this);
         if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
-        const i = this.checkValidity(), r = U.get(this);
-        if (r && !t.constructor.formAssociated)
+        const o = this.checkValidity(), i = U.get(this);
+        if (i && !t.constructor.formAssociated)
           throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
-        return !i && r && (t.focus(), r.focus()), i;
+        return !o && i && (t.focus(), i.focus()), o;
       }
       setFormValue(t) {
-        const i = a.get(this);
-        if (x(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Y(this), t != null && !(t instanceof FormData)) {
-          if (i.getAttribute("name")) {
-            const r = Z(i, this);
-            r.value = t;
+        const o = n.get(this);
+        if (x(o, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Y(this), t != null && !(t instanceof FormData)) {
+          if (o.getAttribute("name")) {
+            const i = Z(o, this);
+            i.value = t;
           }
         } else
-          t != null && t instanceof FormData && Array.from(t).reverse().forEach(([r, o]) => {
-            if (typeof o == "string") {
-              const s = Z(i, this);
-              s.name = r, s.value = o;
+          t != null && t instanceof FormData && Array.from(t).reverse().forEach(([i, r]) => {
+            if (typeof r == "string") {
+              const s = Z(o, this);
+              s.name = i, s.value = r;
             }
           });
-        F.set(i, t);
+        z.set(o, t);
       }
-      setValidity(t, i, r) {
-        const o = a.get(this);
-        if (x(o, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
+      setValidity(t, o, i) {
+        const r = n.get(this);
+        if (x(r, "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.");
-        U.set(this, r);
-        const s = n.get(this), l = {};
+        U.set(this, i);
+        const s = a.get(this), l = {};
         for (const E in t)
           l[E] = t[E];
         Object.keys(l).length === 0 && yt(s);
-        const u = Object.assign(Object.assign({}, s), l);
-        delete u.valid;
-        const { valid: d } = wt(s, u, this.form);
-        if (!d && !i)
+        const m = Object.assign(Object.assign({}, s), l);
+        delete m.valid;
+        const { valid: d } = wt(s, m, this.form);
+        if (!d && !o)
           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.");
-        f.set(this, d ? "" : i), o.isConnected ? (o.toggleAttribute("internals-invalid", !d), o.toggleAttribute("internals-valid", d), o.setAttribute("aria-invalid", `${!d}`)) : S.set(o, this);
+        u.set(this, d ? "" : o), r.isConnected ? (r.toggleAttribute("internals-invalid", !d), r.toggleAttribute("internals-valid", d), r.setAttribute("aria-invalid", `${!d}`)) : A.set(r, this);
       }
       get shadowRoot() {
-        const t = a.get(this), i = j.get(t);
-        return i || null;
+        const t = n.get(this), o = j.get(t);
+        return o || null;
       }
       get validationMessage() {
-        const t = a.get(this);
-        return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), f.get(this);
+        const t = n.get(this);
+        return x(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 = a.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 = n.get(this);
+        return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), a.get(this);
       }
       get willValidate() {
-        const t = a.get(this);
+        const t = n.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"));
       }
     }
-    function Mt() {
+    function Ct() {
       if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
         return !1;
       class e extends HTMLElement {
@@ -441,7 +441,7 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       }
       const t = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, "")}`;
       customElements.define(t, e);
-      const i = new e();
+      const o = new e();
       return [
         "shadowRoot",
         "form",
@@ -453,27 +453,27 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         "setValidity",
         "checkValidity",
         "reportValidity"
-      ].every((r) => r in i.internals);
+      ].every((i) => i in o.internals);
     }
     let st = !1, lt = !1;
     function H(e) {
       lt || (lt = !0, window.CustomStateSet = $, e && (HTMLElement.prototype.attachInternals = function(...t) {
-        const i = e.call(this, t);
-        return i.states = new $(this), i;
+        const o = e.call(this, t);
+        return o.states = new $(this), o;
       }));
     }
     function ct(e = !0) {
       if (!st) {
-        if (st = !0, typeof window < "u" && (window.ElementInternals = nt), typeof CustomElementRegistry < "u") {
+        if (st = !0, typeof window < "u" && (window.ElementInternals = at), typeof CustomElementRegistry < "u") {
           const t = CustomElementRegistry.prototype.define;
-          CustomElementRegistry.prototype.define = function(i, r, o) {
-            if (r.formAssociated) {
-              const s = r.prototype.connectedCallback;
-              r.prototype.connectedCallback = function() {
-                G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), s != null && s.apply(this), rt(this);
+          CustomElementRegistry.prototype.define = function(o, i, r) {
+            if (i.formAssociated) {
+              const s = i.prototype.connectedCallback;
+              i.prototype.connectedCallback = function() {
+                G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), s != null && s.apply(this), it(this);
               };
             }
-            t.call(this, i, r, o);
+            t.call(this, o, i, r);
           };
         }
         if (typeof HTMLElement < "u" && (HTMLElement.prototype.attachInternals = function() {
@@ -484,55 +484,55 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
             return {};
           if (c.has(this))
             throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
-          return new nt(this);
+          return new at(this);
         }), typeof Element < "u") {
-          let t = function(...r) {
-            const o = i.apply(this, r);
-            if (j.set(this, o), N()) {
-              const s = new MutationObserver(R);
-              window.ShadyDOM ? s.observe(this, _) : s.observe(o, _), z.set(this, s);
+          let t = function(...i) {
+            const r = o.apply(this, i);
+            if (j.set(this, r), N()) {
+              const s = new MutationObserver(_);
+              window.ShadyDOM ? s.observe(this, R) : s.observe(r, R), M.set(this, s);
             }
-            return o;
+            return r;
           };
-          const i = Element.prototype.attachShadow;
+          const o = Element.prototype.attachShadow;
           Element.prototype.attachShadow = t;
         }
-        N() && typeof document < "u" && new MutationObserver(R).observe(document.documentElement, _), typeof HTMLFormElement < "u" && zt(), (e || typeof window < "u" && !window.CustomStateSet) && H();
+        N() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, R), typeof HTMLFormElement < "u" && Mt(), (e || typeof window < "u" && !window.CustomStateSet) && H();
       }
     }
-    return !!customElements.polyfillWrapFlushCallback || (Mt() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : ct(!1)), k.forceCustomStateSetPolyfill = H, k.forceElementInternalsPolyfill = ct, Object.defineProperty(k, "__esModule", { value: !0 }), k;
+    return !!customElements.polyfillWrapFlushCallback || (Ct() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : ct(!1)), k.forceCustomStateSetPolyfill = H, k.forceElementInternalsPolyfill = ct, Object.defineProperty(k, "__esModule", { value: !0 }), k;
   })({});
 })();
-var Ot = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, p = (k, a, n, h) => {
-  for (var c = h > 1 ? void 0 : h ? Rt(a, n) : a, f = k.length - 1, w; f >= 0; f--)
-    (w = k[f]) && (c = (h ? w(a, n, c) : w(c)) || c);
-  return h && c && Ot(a, n, c), c;
+var Ot = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, p = (k, n, a, v) => {
+  for (var c = v > 1 ? void 0 : v ? _t(n, a) : n, u = k.length - 1, w; u >= 0; u--)
+    (w = k[u]) && (c = (v ? w(n, a, c) : w(c)) || c);
+  return v && c && Ot(n, a, c), c;
 };
-const C = "pie-button";
-class v extends St(Ct) {
+const S = "pie-button";
+class b extends At(zt) {
   constructor() {
-    super(...arguments), this.size = b.size, this.type = b.type, this.variant = b.variant, this.iconPlacement = b.iconPlacement, this.disabled = b.disabled, this.isLoading = b.isLoading, this.isFullWidth = b.isFullWidth, this.isResponsive = b.isResponsive, this._handleFormKeyDown = (a) => {
-      if (!(a.key !== "Enter" || this.type !== "submit" || this.disabled)) {
-        if (a.target instanceof HTMLElement) {
-          const n = a.target.tagName.toLowerCase();
-          if (n === "button" || n === "pie-button")
+    super(...arguments), this.size = f.size, this.type = f.type, this.variant = f.variant, this.iconPlacement = f.iconPlacement, this.disabled = f.disabled, this.isLoading = f.isLoading, this.isFullWidth = f.isFullWidth, this.isResponsive = f.isResponsive, this._handleFormKeyDown = (n) => {
+      if (!(n.key !== "Enter" || this.type !== "submit" || this.disabled)) {
+        if (n.target instanceof HTMLElement) {
+          const a = n.target.tagName.toLowerCase();
+          if (a === "button" || a === "pie-button")
             return;
         }
-        a.preventDefault(), this._handleClick();
+        n.preventDefault(), this._handleClick();
       }
     };
   }
   connectedCallback() {
-    var a;
-    super.connectedCallback(), this.type === "submit" && ((a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown));
+    var n;
+    super.connectedCallback(), this.type === "submit" && ((n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown));
   }
   disconnectedCallback() {
-    var a;
-    super.disconnectedCallback(), this.type === "submit" && ((a = this.form) == null || a.removeEventListener("keydown", this._handleFormKeyDown));
+    var n;
+    super.disconnectedCallback(), this.type === "submit" && ((n = this.form) == null || n.removeEventListener("keydown", this._handleFormKeyDown));
   }
-  updated(a) {
-    var n, h;
-    super.updated(a), a.has("type") && (this.type === "submit" ? (n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown) : (h = this.form) == null || h.removeEventListener("keydown", this._handleFormKeyDown));
+  updated(n) {
+    var a, v;
+    super.updated(n), n.has("type") && (this.type === "submit" ? (a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown) : (v = this.form) == null || v.removeEventListener("keydown", this._handleFormKeyDown));
   }
   /**
    * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
@@ -542,11 +542,11 @@ class v extends St(Ct) {
    *
    * TODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin.
    */
-  _simulateNativeButtonClick(a) {
+  _simulateNativeButtonClick(n) {
     if (!this.form)
       return;
-    const n = document.createElement("button");
-    n.type = a, n.style.position = "absolute", n.style.width = "1px", n.style.height = "1px", n.style.padding = "0", n.style.margin = "-1px", n.style.overflow = "hidden", n.style.border = "0", n.style.whiteSpace = "nowrap", a === "submit" && (this.name && (n.name = this.name), this.value && (n.value = this.value), this.formaction && n.setAttribute("formaction", this.formaction), this.formenctype && n.setAttribute("formenctype", this.formenctype), this.formmethod && n.setAttribute("formmethod", this.formmethod), this.formnovalidate && n.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && n.setAttribute("formtarget", this.formtarget)), this.form.append(n), n.click(), n.remove();
+    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();
   }
   _handleClick() {
     !this.isLoading && this.form && (this.type === "submit" && (this.formnovalidate || this.form.reportValidity()) && this._simulateNativeButtonClick("submit"), this.type === "reset" && this._simulateNativeButtonClick("reset"));
@@ -557,38 +557,40 @@ class v extends St(Ct) {
    * @private
    */
   renderSpinner() {
-    const { size: a, variant: n, disabled: h } = this, c = a && a.includes("small") ? "small" : "medium";
-    let f;
-    return h ? f = n === "ghost-inverse" ? "inverse" : "secondary" : f = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", P`
+    const { size: n, variant: a, disabled: v } = this, c = n && n.includes("small") ? "small" : "medium";
+    let u;
+    return v ? u = a === "ghost-inverse" ? "inverse" : "secondary" : u = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", P`
                     <pie-spinner
                         size="${c}"
-                        variant="${f}">
+                        variant="${u}">
                     </pie-spinner>`;
   }
   render() {
     const {
-      type: a,
-      disabled: n,
-      isFullWidth: h,
+      type: n,
+      disabled: a,
+      isFullWidth: v,
       variant: c,
-      size: f,
+      size: u,
       isLoading: w,
-      isResponsive: z,
+      isResponsive: M,
       iconPlacement: g,
-      responsiveSize: F
-    } = this;
+      responsiveSize: z
+    } = this, C = {
+      "o-btn": !0,
+      "o-btn--fullWidth": v,
+      "o-btn--responsive": M,
+      [`o-btn--${z}`]: !!(M && z),
+      [`o-btn--${c}`]: !0,
+      [`o-btn--${u}`]: !0,
+      "is-loading": w
+    };
     return P`
             <button
                 @click=${this._handleClick}
-                class="o-btn"
-                type=${a || "submit"}
-                variant=${c || "primary"}
-                size=${f || "medium"}
-                responsiveSize=${Lt(F)}
-                ?disabled=${n}
-                ?isFullWidth=${h}
-                ?isResponsive=${z}
-                ?isLoading=${w}>
+                class=${St(C)}
+                type=${n || "submit"}
+                ?disabled=${a}>
                     ${w ? this.renderSpinner() : K}
                     ${g === "leading" ? P`<slot name="icon"></slot>` : K}
                     <slot></slot>
@@ -596,73 +598,73 @@ class v extends St(Ct) {
             </button>`;
   }
   focus() {
-    var a, n;
-    (n = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button")) == null || n.focus();
+    var n, a;
+    (a = (n = this.shadowRoot) == null ? void 0 : n.querySelector("button")) == null || a.focus();
   }
 }
-v.styles = Ft(Pt);
+b.styles = Ft(Pt);
 p([
-  m(),
-  O(C, It, b.size)
-], v.prototype, "size", 2);
+  h(),
+  O(S, Tt, f.size)
+], b.prototype, "size", 2);
 p([
-  m(),
-  O(C, Tt, b.type)
-], v.prototype, "type", 2);
+  h(),
+  O(S, Lt, f.type)
+], b.prototype, "type", 2);
 p([
-  m(),
-  O(C, Vt, b.variant)
-], v.prototype, "variant", 2);
+  h(),
+  O(S, Vt, f.variant)
+], b.prototype, "variant", 2);
 p([
-  m({ type: String }),
-  O(C, Nt, b.iconPlacement)
-], v.prototype, "iconPlacement", 2);
+  h({ type: String }),
+  O(S, Nt, f.iconPlacement)
+], b.prototype, "iconPlacement", 2);
 p([
-  m({ type: Boolean })
-], v.prototype, "disabled", 2);
+  h({ type: Boolean })
+], b.prototype, "disabled", 2);
 p([
-  m({ type: Boolean, reflect: !0 })
-], v.prototype, "isLoading", 2);
+  h({ type: Boolean, reflect: !0 })
+], b.prototype, "isLoading", 2);
 p([
-  m({ type: Boolean })
-], v.prototype, "isFullWidth", 2);
+  h({ type: Boolean })
+], b.prototype, "isFullWidth", 2);
 p([
-  m({ type: Boolean })
-], v.prototype, "isResponsive", 2);
+  h({ type: Boolean })
+], b.prototype, "isResponsive", 2);
 p([
-  m({ type: String })
-], v.prototype, "name", 2);
+  h({ type: String })
+], b.prototype, "name", 2);
 p([
-  m({ type: String })
-], v.prototype, "value", 2);
+  h({ type: String })
+], b.prototype, "value", 2);
 p([
-  m()
-], v.prototype, "formaction", 2);
+  h()
+], b.prototype, "formaction", 2);
 p([
-  m()
-], v.prototype, "formenctype", 2);
+  h()
+], b.prototype, "formenctype", 2);
 p([
-  m()
-], v.prototype, "formmethod", 2);
+  h()
+], b.prototype, "formmethod", 2);
 p([
-  m({ type: Boolean })
-], v.prototype, "formnovalidate", 2);
+  h({ type: Boolean })
+], b.prototype, "formnovalidate", 2);
 p([
-  m()
-], v.prototype, "formtarget", 2);
+  h()
+], b.prototype, "formtarget", 2);
 p([
-  m({ type: String })
-], v.prototype, "responsiveSize", 2);
-At(C, v);
+  h({ type: String })
+], b.prototype, "responsiveSize", 2);
+It(S, b);
 export {
-  v as PieButton,
-  b as defaultProps,
+  b as PieButton,
+  f as defaultProps,
   jt as formEncodingtypes,
   Ut as formMethodTypes,
   qt as formTargetTypes,
   Nt as iconPlacements,
   Kt as responsiveSizes,
-  It as sizes,
-  Tt as types,
+  Tt as sizes,
+  Lt as types,
   Vt as variants
 };