@justeattakeaway/pie-button 0.47.5 → 0.47.7

package/README.md

@@ -21,16 +21,14 @@ This component can be easily integrated into various frontend frameworks and cus
 To install `pie-button` in your application, run the following on your command line:
 
 ```bash
-# npm
-$ npm i @justeattakeaway/pie-button
+npm i @justeattakeaway/pie-button
 
-# yarn
-$ yarn add @justeattakeaway/pie-button
+yarn add @justeattakeaway/pie-button
 ```
 
 ## Documentation
 
-Visit  [Button | PIE Design System](https://pie.design/components/button/overview) to view more information on this component.
+Visit  [Button | PIE Design System](https://pie.design/components/button) to view more information on this component.
 
 ## Questions
 

package/dist/index.js

@@ -1,7 +1,7 @@
-import { LitElement as Ct, html as N, nothing as K, unsafeCSS as Ft } from "lit";
-import { property as p } from "lit/decorators.js";
+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 R, defineCustomElement as At } from "@justeattakeaway/pie-webc-core";
+import { FormControlMixin as St, validPropertyValues as O, defineCustomElement as At } 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 = [
   "primary",
@@ -13,7 +13,7 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
   "ghost-inverse",
   "destructive",
   "destructive-ghost"
-], Pt = ["leading", "trailing"], Ut = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], qt = ["post", "get", "dialog"], jt = ["_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"], b = {
   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
-}, Nt = `*,*: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[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)}
 `;
 (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(), M = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), I = {
+    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 = {
       ariaAtomic: "aria-atomic",
       ariaAutoComplete: "aria-autocomplete",
       ariaBusy: "aria-busy",
@@ -36,6 +36,7 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       ariaColIndexText: "aria-colindextext",
       ariaColSpan: "aria-colspan",
       ariaCurrent: "aria-current",
+      ariaDescription: "aria-description",
       ariaDisabled: "aria-disabled",
       ariaExpanded: "aria-expanded",
       ariaHasPopup: "aria-haspopup",
@@ -69,16 +70,16 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       ariaValueText: "aria-valuetext",
       role: "role"
     }, dt = (e, t) => {
-      for (let i in I) {
+      for (let i in A) {
         t[i] = null;
         let r = null;
-        const o = I[i];
+        const o = A[i];
         Object.defineProperty(t, i, {
           get() {
             return r;
           },
           set(s) {
-            r = s, e.isConnected ? e.setAttribute(o, s) : S.set(e, t);
+            r = s, e.isConnected ? e.setAttribute(o, s) : L.set(e, t);
           }
         });
       }
@@ -96,30 +97,30 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       let r = i.nextNode();
       const o = !t || e.disabled;
       for (; r; )
-        r.formDisabledCallback && o && O(r, e.disabled), r = i.nextNode();
-    }, X = { attributes: !0, attributeFilter: ["disabled", "name"] }, z = P() ? new MutationObserver((e) => {
+        r.formDisabledCallback && o && D(r, e.disabled), r = i.nextNode();
+    }, X = { attributes: !0, attributeFilter: ["disabled", "name"] }, I = N() ? new MutationObserver((e) => {
       for (const t of e) {
         const i = t.target;
-        if (t.attributeName === "disabled" && (i.constructor.formAssociated ? O(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && Q(i)), t.attributeName === "name" && i.constructor.formAssociated) {
-          const r = c.get(i), o = L.get(i);
+        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);
         }
       }
     }) : {};
-    function _(e) {
+    function R(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), S.has(l)) {
-            const d = S.get(l);
-            Object.keys(I).filter((y) => d[y] !== null).forEach((y) => {
-              l.setAttribute(I[y], d[y]);
-            }), S.delete(l);
+          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);
           }
-          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 (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 (l.localName === "form") {
             const d = g.get(l), E = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
@@ -131,10 +132,10 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
             for (; y; )
               J(y), y = E.nextNode();
           }
-          l.localName === "fieldset" && ((u = z.observe) == null || u.call(z, l, X), Q(l, !0));
+          l.localName === "fieldset" && ((u = I.observe) === null || u === void 0 || u.call(I, l, X), Q(l, !0));
         }), s.forEach((l) => {
           const u = c.get(l);
-          u && h.get(u) && Y(u), M.has(l) && M.get(l).disconnect();
+          u && h.get(u) && Y(u), z.has(l) && z.get(l).disconnect();
         });
       });
     }
@@ -142,21 +143,21 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       e.forEach((t) => {
         const { removedNodes: i } = t;
         i.forEach((r) => {
-          const o = j.get(t.target);
+          const o = q.get(t.target);
           c.has(r) && rt(r), o.disconnect();
         });
       });
     }
     const ht = (e) => {
-      var i, r;
-      const t = new MutationObserver(vt);
-      (i = window == null ? void 0 : window.ShadyDOM) != null && i.inUse && e.mode && e.host && (e = e.host), (r = t.observe) == null || r.call(t, e, { childList: !0 }), j.set(e, t);
+      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);
     };
-    P() && new MutationObserver(_);
-    const D = {
+    N() && new MutationObserver(R);
+    const _ = {
       childList: !0,
       subtree: !0
-    }, O = (e, t) => {
+    }, 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) => {
@@ -165,9 +166,9 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     }, 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;
-    }, pt = (e, t) => {
+    }, mt = (e, t) => {
       var i;
-      h.set(t, []), (i = z.observe) == null || i.call(z, e, X);
+      h.set(t, []), (i = I.observe) === null || i === void 0 || i.call(I, e, X);
     }, tt = (e, t) => {
       if (t.length) {
         Array.from(t).forEach((r) => r.addEventListener("click", e.click.bind(e)));
@@ -177,7 +178,7 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     }, 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);
-    }, mt = (e) => {
+    }, pt = (e) => {
       T(V(e.target));
     }, ut = (e) => {
       T(V(e.target));
@@ -203,7 +204,7 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
           r.add(e);
         else {
           const o = /* @__PURE__ */ new Set();
-          o.add(e), g.set(t, o), ft(t), t.addEventListener("reset", bt), t.addEventListener("input", mt), t.addEventListener("change", ut);
+          o.add(e), g.set(t, o), ft(t), t.addEventListener("reset", bt), t.addEventListener("input", pt), t.addEventListener("change", ut);
         }
         w.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
           e.formAssociatedCallback.apply(e, [t]);
@@ -226,7 +227,7 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         tt(e, i), et(e, r, t);
       }
     };
-    function P() {
+    function N() {
       return typeof MutationObserver < "u";
     }
     class gt {
@@ -288,10 +289,10 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         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;
     }
-    var C;
+    var M;
     class kt {
       constructor(t) {
-        C.set(this, void 0), Et(this, C, t, "f");
+        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);
@@ -299,10 +300,10 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         Object.freeze(this);
       }
       get length() {
-        return at(this, C, "f").length;
+        return at(this, M, "f").length;
       }
-      [(C = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-        return at(this, C, "f")[Symbol.iterator]();
+      [(M = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+        return at(this, M, "f")[Symbol.iterator]();
       }
       item(t) {
         return this[t] == null ? null : this[t];
@@ -343,7 +344,7 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         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), pt(t, this), Object.seal(this), i instanceof DocumentFragment && ht(i);
+        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);
       }
       checkValidity() {
         const t = a.get(this);
@@ -376,7 +377,7 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         const t = a.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 = q.get(this);
+        const i = this.checkValidity(), r = U.get(this);
         if (r && !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;
@@ -395,26 +396,26 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
               s.name = r, s.value = o;
             }
           });
-        L.set(i, t);
+        F.set(i, 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)
           throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
-        q.set(this, r);
+        U.set(this, r);
         const s = n.get(this), l = {};
         for (const E in t)
           l[E] = t[E];
         Object.keys(l).length === 0 && yt(s);
-        const u = { ...s, ...l };
+        const u = Object.assign(Object.assign({}, s), l);
         delete u.valid;
         const { valid: d } = wt(s, u, this.form);
         if (!d && !i)
           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}`)) : A.set(o, this);
+        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);
       }
       get shadowRoot() {
-        const t = a.get(this), i = U.get(t);
+        const t = a.get(this), i = j.get(t);
         return i || null;
       }
       get validationMessage() {
@@ -469,7 +470,7 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
             if (r.formAssociated) {
               const s = r.prototype.connectedCallback;
               r.prototype.connectedCallback = function() {
-                G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && O(this, !0)), s != null && s.apply(this), rt(this);
+                G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), s != null && s.apply(this), rt(this);
               };
             }
             t.call(this, i, r, o);
@@ -487,27 +488,27 @@ const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         }), typeof Element < "u") {
           let t = function(...r) {
             const o = i.apply(this, r);
-            if (U.set(this, o), P()) {
-              const s = new MutationObserver(_);
-              window.ShadyDOM ? s.observe(this, D) : s.observe(o, D), M.set(this, s);
+            if (j.set(this, o), N()) {
+              const s = new MutationObserver(R);
+              window.ShadyDOM ? s.observe(this, _) : s.observe(o, _), z.set(this, s);
             }
             return o;
           };
           const i = Element.prototype.attachShadow;
           Element.prototype.attachShadow = t;
         }
-        P() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, D), typeof HTMLFormElement < "u" && zt(), (e || typeof window < "u" && !window.CustomStateSet) && H();
+        N() && typeof document < "u" && new MutationObserver(R).observe(document.documentElement, _), typeof HTMLFormElement < "u" && zt(), (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;
   })({});
 })();
-var Rt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, m = (k, a, n, h) => {
-  for (var c = h > 1 ? void 0 : h ? _t(a, n) : a, f = k.length - 1, w; f >= 0; f--)
+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 && Rt(a, n, c), c;
+  return h && c && Ot(a, n, c), c;
 };
-const F = "pie-button";
+const C = "pie-button";
 class v extends St(Ct) {
   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) => {
@@ -558,7 +559,7 @@ class v extends St(Ct) {
   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", N`
+    return h ? f = n === "ghost-inverse" ? "inverse" : "secondary" : f = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", P`
                     <pie-spinner
                         size="${c}"
                         variant="${f}">
@@ -572,26 +573,26 @@ class v extends St(Ct) {
       variant: c,
       size: f,
       isLoading: w,
-      isResponsive: M,
+      isResponsive: z,
       iconPlacement: g,
-      responsiveSize: L
+      responsiveSize: F
     } = this;
-    return N`
+    return P`
             <button
                 @click=${this._handleClick}
                 class="o-btn"
                 type=${a || "submit"}
                 variant=${c || "primary"}
                 size=${f || "medium"}
-                responsiveSize=${Lt(L)}
+                responsiveSize=${Lt(F)}
                 ?disabled=${n}
                 ?isFullWidth=${h}
-                ?isResponsive=${M}
+                ?isResponsive=${z}
                 ?isLoading=${w}>
                     ${w ? this.renderSpinner() : K}
-                    ${g === "leading" ? N`<slot name="icon"></slot>` : K}
+                    ${g === "leading" ? P`<slot name="icon"></slot>` : K}
                     <slot></slot>
-                    ${g === "trailing" ? N`<slot name="icon"></slot>` : K}
+                    ${g === "trailing" ? P`<slot name="icon"></slot>` : K}
             </button>`;
   }
   focus() {
@@ -599,67 +600,67 @@ class v extends St(Ct) {
     (n = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button")) == null || n.focus();
   }
 }
-v.styles = Ft(Nt);
-m([
-  p(),
-  R(F, It, b.size)
+v.styles = Ft(Pt);
+p([
+  m(),
+  O(C, It, b.size)
 ], v.prototype, "size", 2);
-m([
-  p(),
-  R(F, Tt, b.type)
+p([
+  m(),
+  O(C, Tt, b.type)
 ], v.prototype, "type", 2);
-m([
-  p(),
-  R(F, Vt, b.variant)
+p([
+  m(),
+  O(C, Vt, b.variant)
 ], v.prototype, "variant", 2);
-m([
-  p({ type: String }),
-  R(F, Pt, b.iconPlacement)
+p([
+  m({ type: String }),
+  O(C, Nt, b.iconPlacement)
 ], v.prototype, "iconPlacement", 2);
-m([
-  p({ type: Boolean })
+p([
+  m({ type: Boolean })
 ], v.prototype, "disabled", 2);
-m([
-  p({ type: Boolean, reflect: !0 })
+p([
+  m({ type: Boolean, reflect: !0 })
 ], v.prototype, "isLoading", 2);
-m([
-  p({ type: Boolean })
+p([
+  m({ type: Boolean })
 ], v.prototype, "isFullWidth", 2);
-m([
-  p({ type: Boolean })
+p([
+  m({ type: Boolean })
 ], v.prototype, "isResponsive", 2);
-m([
-  p({ type: String })
+p([
+  m({ type: String })
 ], v.prototype, "name", 2);
-m([
-  p({ type: String })
+p([
+  m({ type: String })
 ], v.prototype, "value", 2);
-m([
-  p()
+p([
+  m()
 ], v.prototype, "formaction", 2);
-m([
-  p()
+p([
+  m()
 ], v.prototype, "formenctype", 2);
-m([
-  p()
+p([
+  m()
 ], v.prototype, "formmethod", 2);
-m([
-  p({ type: Boolean })
+p([
+  m({ type: Boolean })
 ], v.prototype, "formnovalidate", 2);
-m([
-  p()
+p([
+  m()
 ], v.prototype, "formtarget", 2);
-m([
-  p({ type: String })
+p([
+  m({ type: String })
 ], v.prototype, "responsiveSize", 2);
-At(F, v);
+At(C, v);
 export {
   v as PieButton,
   b as defaultProps,
-  Ut as formEncodingtypes,
-  qt as formMethodTypes,
-  jt as formTargetTypes,
-  Pt as iconPlacements,
+  jt as formEncodingtypes,
+  Ut as formMethodTypes,
+  qt as formTargetTypes,
+  Nt as iconPlacements,
   Kt as responsiveSizes,
   It as sizes,
   Tt as types,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.47.5",
+  "version": "0.47.7",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -37,7 +37,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.16.0",
-    "@justeattakeaway/pie-wrapper-react": "0.14.0",
+    "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "volta": {
@@ -50,6 +50,6 @@
   "dependencies": {
     "@justeattakeaway/pie-spinner": "0.6.5",
     "@justeattakeaway/pie-webc-core": "0.23.0",
-    "element-internals-polyfill": "1.3.10"
+    "element-internals-polyfill": "1.3.11"
   }
 }