@justeattakeaway/pie-button - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20231222155902 to 0.0.0-snapshot-release-20240102144723

dist/index.d.ts

@@ -120,2 +120,3 @@ import type { CSSResult } from 'lit';
     responsiveSize?: ButtonProps['responsiveSize'];
+    _iconSlotElement: Array<HTMLElement>;
     /**
@@ -122,0 +123,0 @@ * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.

dist/index.js

 import { unsafeCSS as wt, LitElement as xt, html as N, nothing as W } from "lit";
-import { property as h } from "lit/decorators.js";
-import { ifDefined as Et } from "lit/directives/if-defined.js";
+import { property as p, queryAssignedElements as Et } from "lit/decorators.js";
+import { ifDefined as zt } from "lit/directives/if-defined.js";
 import { validPropertyValues as R, defineCustomElement as kt } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-spinner";
-const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], _t = ["productive", "expressive"], Mt = ["submit", "button", "reset"], Ct = [
+const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Pt = ["productive", "expressive"], Ct = ["submit", "button", "reset"], Lt = [
   "primary",
@@ -16,6 +16,6 @@ "secondary",
   "destructive-ghost"
-], Lt = ["leading", "trailing"], Pt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Dt = ["post", "get", "dialog"], $t = ["_self", "_blank", "_parent", "_top"], Ft = `*,*:before,*:after{box-sizing:border-box}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]: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)}
+], At = ["leading", "trailing"], Dt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], $t = ["post", "get", "dialog"], Ot = ["_self", "_blank", "_parent", "_top"], Ft = `*,*:before,*:after{box-sizing:border-box}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]: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() {
-  const p = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), S = {
+  const u = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), F = {
     ariaAtomic: "aria-atomic",
@@ -63,6 +63,6 @@ ariaAutoComplete: "aria-autocomplete",
   }, ot = (i, t) => {
-    for (let e in S) {
+    for (let e in F) {
       t[e] = null;
       let r = null;
-      const o = S[e];
+      const o = F[e];
       Object.defineProperty(t, e, {
@@ -73,3 +73,3 @@ get() {
         set(l) {
-          r = l, i.isConnected ? i.setAttribute(o, l) : k.set(i, t);
+          r = l, i.isConnected ? i.setAttribute(o, l) : z.set(i, t);
         }
@@ -93,3 +93,3 @@ });
       r.formDisabledCallback && o && D(r, i.disabled), r = e.nextNode();
-  }, G = { attributes: !0, attributeFilter: ["disabled", "name"] }, z = T() ? new MutationObserver((i) => {
+  }, G = { attributes: !0, attributeFilter: ["disabled", "name"] }, k = T() ? new MutationObserver((i) => {
     for (const t of i) {
@@ -108,16 +108,16 @@ const e = t.target;
         var b;
-        if (c.has(n) && n.constructor.formAssociated && U(n), k.has(n)) {
-          const d = k.get(n);
-          Object.keys(S).filter((w) => d[w] !== null).forEach((w) => {
-            n.setAttribute(S[w], d[w]);
-          }), k.delete(n);
+        if (c.has(n) && n.constructor.formAssociated && U(n), z.has(n)) {
+          const v = z.get(n);
+          Object.keys(F).filter((w) => v[w] !== null).forEach((w) => {
+            n.setAttribute(F[w], v[w]);
+          }), z.delete(n);
         }
-        if (F.has(n)) {
-          const d = F.get(n);
-          n.setAttribute("internals-valid", d.validity.valid.toString()), n.setAttribute("internals-invalid", (!d.validity.valid).toString()), n.setAttribute("aria-invalid", (!d.validity.valid).toString()), F.delete(n);
+        if (A.has(n)) {
+          const v = A.get(n);
+          n.setAttribute("internals-valid", v.validity.valid.toString()), n.setAttribute("internals-invalid", (!v.validity.valid).toString()), n.setAttribute("aria-invalid", (!v.validity.valid).toString()), A.delete(n);
         }
         if (n.localName === "form") {
-          const d = y.get(n), E = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
+          const v = y.get(n), E = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
             acceptNode(O) {
-              return c.has(O) && O.constructor.formAssociated && !(d && d.has(O)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+              return c.has(O) && O.constructor.formAssociated && !(v && v.has(O)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
             }
@@ -129,3 +129,3 @@ });
         }
-        n.localName === "fieldset" && ((b = z.observe) == null || b.call(z, n, G), j(n, !0));
+        n.localName === "fieldset" && ((b = k.observe) == null || b.call(k, n, G), j(n, !0));
       }), l.forEach((n) => {
@@ -166,3 +166,3 @@ const b = c.get(n);
     var e;
-    a.set(t, []), (e = z.observe) == null || e.call(z, i, G);
+    a.set(t, []), (e = k.observe) == null || e.call(k, i, G);
   }, X = (i, t) => {
@@ -174,9 +174,9 @@ if (t.length) {
     }
-  }, A = (i) => {
+  }, S = (i) => {
     const t = Array.from(i.elements).filter((l) => !l.tagName.includes("-") && l.validity).map((l) => l.validity.valid), e = y.get(i) || [], r = Array.from(e).filter((l) => l.isConnected).map((l) => c.get(l).validity.valid), o = [...t, ...r].includes(!1);
     i.toggleAttribute("internals-invalid", o), i.toggleAttribute("internals-valid", !o);
   }, lt = (i) => {
-    A(I(i.target));
+    S(I(i.target));
   }, ct = (i) => {
-    A(I(i.target));
+    S(I(i.target));
   }, dt = (i) => {
@@ -208,3 +208,3 @@ const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((e) => `${e}:not([disabled])`).map((e) => `${e}:not([form])${i.id ? `,${e}[form='${i.id}']` : ""}`).join(",");
         i.formAssociatedCallback.apply(i, [t]);
-      }, 0), A(t);
+      }, 0), S(t);
     }
@@ -236,3 +236,3 @@ }, I = (i) => {
   }
-  const mt = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), pt = (i, t, e) => (i.valid = ut(t), Object.keys(t).forEach((r) => i[r] = t[r]), e && A(e), i), ut = (i) => {
+  const mt = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), pt = (i, t, e) => (i.valid = ut(t), Object.keys(t).forEach((r) => i[r] = t[r]), e && S(e), i), ut = (i) => {
     let t = !0;
@@ -333,4 +333,4 @@ for (let e in i)
           return n;
-        const d = Array.from(n).concat(b).sort((E, w) => E.compareDocumentPosition ? E.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
-        return new ft(d);
+        const v = Array.from(n).concat(b).sort((E, w) => E.compareDocumentPosition ? E.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
+        return new ft(v);
       }
@@ -347,6 +347,6 @@ });
       const e = t.getRootNode(), r = new ht();
-      this.states = new V(t), p.set(this, t), s.set(this, r), c.set(t, this), ot(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && nt(e);
+      this.states = new V(t), u.set(this, t), s.set(this, r), c.set(t, this), ot(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && nt(e);
     }
     checkValidity() {
-      const t = p.get(this);
+      const t = u.get(this);
       if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
@@ -366,3 +366,3 @@ return !0;
     get form() {
-      const t = p.get(this);
+      const t = u.get(this);
       x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
@@ -373,3 +373,3 @@ let e;
     get labels() {
-      const t = p.get(this);
+      const t = u.get(this);
       x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
@@ -380,3 +380,3 @@ const e = t.getAttribute("id"), r = t.getRootNode();
     reportValidity() {
-      const t = p.get(this);
+      const t = u.get(this);
       if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
@@ -390,3 +390,3 @@ return !0;
     setFormValue(t) {
-      const e = p.get(this);
+      const e = u.get(this);
       if (x(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), J(this), t != null && !(t instanceof FormData)) {
@@ -407,3 +407,3 @@ if (e.getAttribute("name")) {
     setValidity(t, e, r) {
-      const o = p.get(this);
+      const o = u.get(this);
       if (x(o, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
@@ -418,21 +418,21 @@ throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
       delete b.valid;
-      const { valid: d } = pt(l, b, this.form);
-      if (!d && !e)
+      const { valid: v } = pt(l, b, this.form);
+      if (!v && !e)
         throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
-      u.set(this, d ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !d), o.toggleAttribute("internals-valid", d), o.setAttribute("aria-invalid", `${!d}`)) : F.set(o, this);
+      h.set(this, v ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !v), o.toggleAttribute("internals-valid", v), o.setAttribute("aria-invalid", `${!v}`)) : A.set(o, this);
     }
     get shadowRoot() {
-      const t = p.get(this), e = H.get(t);
+      const t = u.get(this), e = H.get(t);
       return e || null;
     }
     get validationMessage() {
-      const t = p.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);
+      const t = u.get(this);
+      return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), h.get(this);
     }
     get validity() {
-      const t = p.get(this);
+      const t = u.get(this);
       return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), s.get(this);
     }
     get willValidate() {
-      const t = p.get(this);
+      const t = u.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"));
@@ -511,9 +511,9 @@ }
 })();
-var St = Object.defineProperty, At = Object.getOwnPropertyDescriptor, m = (p, s, a, c) => {
-  for (var u = c > 1 ? void 0 : c ? At(s, a) : s, f = p.length - 1, g; f >= 0; f--)
-    (g = p[f]) && (u = (c ? g(s, a, u) : g(u)) || u);
-  return c && u && St(s, a, u), u;
+var St = Object.defineProperty, It = Object.getOwnPropertyDescriptor, m = (u, s, a, c) => {
+  for (var h = c > 1 ? void 0 : c ? It(s, a) : s, f = u.length - 1, g; f >= 0; f--)
+    (g = u[f]) && (h = (c ? g(s, a, h) : g(h)) || h);
+  return c && h && St(s, a, h), h;
 };
 const L = "pie-button";
-class v extends xt {
+class d extends xt {
   constructor() {
@@ -543,4 +543,6 @@ super(), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this.isResponsive = !1, this._handleFormKeyDown = (s) => {
   updated(s) {
-    var a, c;
-    super.updated(s), s.has("type") && (this.type === "submit" ? (a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown) : (c = this.form) == null || c.removeEventListener("keydown", this._handleFormKeyDown));
+    var c, h;
+    super.updated(s);
+    const [a] = this._iconSlotElement;
+    a && (this.size === "xsmall" && a.setAttribute("size", "xs"), (this.size === "small-expressive" || this.size === "small-productive") && a.setAttribute("size", "s"), (this.size === "medium" || this.size === "large") && a.setAttribute("size", "m")), s.has("type") && (this.type === "submit" ? (c = this.form) == null || c.addEventListener("keydown", this._handleFormKeyDown) : (h = this.form) == null || h.removeEventListener("keydown", this._handleFormKeyDown));
   }
@@ -570,7 +572,7 @@ /**
   renderSpinner() {
-    const { size: s, variant: a, disabled: c } = this, u = s.includes("small") ? "small" : "medium";
+    const { size: s, variant: a, disabled: c } = this, h = s.includes("small") ? "small" : "medium";
     let f;
     return c ? f = a === "ghost-inverse" ? "inverse" : "secondary" : f = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", N`
                     <pie-spinner
-                        size="${u}"
+                        size="${h}"
                         variant="${f}">
@@ -584,3 +586,3 @@ </pie-spinner>`;
       isFullWidth: c,
-      variant: u,
+      variant: h,
       size: f,
@@ -590,3 +592,3 @@ isLoading: g,
       iconPlacement: M,
-      responsiveSize: k
+      responsiveSize: z
     } = this;
@@ -598,5 +600,5 @@ return N`
                 type=${s}
-                variant=${u}
+                variant=${h}
                 size=${f}
-                responsiveSize=${Et(k)}
+                responsiveSize=${zt(z)}
                 ?disabled=${a}
@@ -617,67 +619,70 @@ ?isFullWidth=${c}
 }
-v.formAssociated = !0;
-v.styles = wt(Ft);
+d.formAssociated = !0;
+d.styles = wt(Ft);
 m([
-  h(),
-  R(L, zt, "medium")
-], v.prototype, "size", 2);
+  p(),
+  R(L, Mt, "medium")
+], d.prototype, "size", 2);
 m([
-  h(),
-  R(L, Mt, "submit")
-], v.prototype, "type", 2);
+  p(),
+  R(L, Ct, "submit")
+], d.prototype, "type", 2);
 m([
-  h(),
-  R(L, Ct, "primary")
-], v.prototype, "variant", 2);
+  p(),
+  R(L, Lt, "primary")
+], d.prototype, "variant", 2);
 m([
-  h({ type: String }),
-  R(L, Lt, "leading")
-], v.prototype, "iconPlacement", 2);
+  p({ type: String }),
+  R(L, At, "leading")
+], d.prototype, "iconPlacement", 2);
 m([
-  h({ type: Boolean })
-], v.prototype, "disabled", 2);
+  p({ type: Boolean })
+], d.prototype, "disabled", 2);
 m([
-  h({ type: Boolean, reflect: !0 })
-], v.prototype, "isLoading", 2);
+  p({ type: Boolean, reflect: !0 })
+], d.prototype, "isLoading", 2);
 m([
-  h({ type: Boolean })
-], v.prototype, "isFullWidth", 2);
+  p({ type: Boolean })
+], d.prototype, "isFullWidth", 2);
 m([
-  h({ type: Boolean })
-], v.prototype, "isResponsive", 2);
+  p({ type: Boolean })
+], d.prototype, "isResponsive", 2);
 m([
-  h({ type: String })
-], v.prototype, "name", 2);
+  p({ type: String })
+], d.prototype, "name", 2);
 m([
-  h({ type: String })
-], v.prototype, "value", 2);
+  p({ type: String })
+], d.prototype, "value", 2);
 m([
-  h()
-], v.prototype, "formaction", 2);
+  p()
+], d.prototype, "formaction", 2);
 m([
-  h()
-], v.prototype, "formenctype", 2);
+  p()
+], d.prototype, "formenctype", 2);
 m([
-  h()
-], v.prototype, "formmethod", 2);
+  p()
+], d.prototype, "formmethod", 2);
 m([
-  h({ type: Boolean })
-], v.prototype, "formnovalidate", 2);
+  p({ type: Boolean })
+], d.prototype, "formnovalidate", 2);
 m([
-  h()
-], v.prototype, "formtarget", 2);
+  p()
+], d.prototype, "formtarget", 2);
 m([
-  h({ type: String })
-], v.prototype, "responsiveSize", 2);
-kt(L, v);
+  p({ type: String })
+], d.prototype, "responsiveSize", 2);
+m([
+  Et({ slot: "icon" })
+], d.prototype, "_iconSlotElement", 2);
+kt(L, d);
 export {
-  v as PieButton,
-  Pt as formEncodingtypes,
-  Dt as formMethodTypes,
-  $t as formTargetTypes,
-  Lt as iconPlacements,
-  _t as responsiveSizes,
-  zt as sizes,
-  Mt as types,
-  Ct as variants
+  d as PieButton,
+  Dt as formEncodingtypes,
+  $t as formMethodTypes,
+  Ot as formTargetTypes,
+  At as iconPlacements,
+  Pt as responsiveSizes,
+  Mt as sizes,
+  Ct as types,
+  Lt as variants
 };

dist/react.d.ts

@@ -123,2 +123,3 @@ import type { CSSResult } from 'lit';
     responsiveSize?: ButtonProps['responsiveSize'];
+    _iconSlotElement: Array<HTMLElement>;
     /**
@@ -125,0 +126,0 @@ * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.

package.json

 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.0.0-snapshot-release-20231222155902",
+  "version": "0.0.0-snapshot-release-20240102144723",
   "description": "PIE design system button built using web components",
@@ -5,0 +5,0 @@ "type": "module",

README.md

@@ -11,17 +11,3 @@ <p align="center">
 
-# Table of Contents
 
-1. [Introduction](#pie-button)
-2. [Installation](#installation)
-3. [Importing the component](#importing-the-component)
-4. [Peer Dependencies](#peer-dependencies)
-5. [Props](#props)
-6. [Events](#events)
-   - [HTML example](#html)
-   - [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3)
-   - [React example (using Next 13)](#react-templates-using-next-13)
-7. [Forms usage](#forms-usage)
-8. [Contributing](#contributing)
-
-
 ## pie-button
@@ -46,164 +32,12 @@
 
-For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
+## Documentation
 
+Visit  [Button | PIE Design System](https://pie.design/components/button/overview) to view more information on this component.
 
-### Importing the component
+## Questions
 
-#### JavaScript
-```js
-// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
-import { PieButton } from '@justeattakeaway/pie-button';
+Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
 
-// If you don't need to reference the imported object, you can simply
-// import the module which registers the component as a custom element.
-import '@justeattakeaway/pie-button';
-```
-
-#### React
-```js
-// React
-// For React, you will need to import our React-specific component build
-// which wraps the web component using ​@lit/react
-import { PieButton } from '@justeattakeaway/pie-button/dist/react';
-```
-
-> [!NOTE]
-> When using the React version of the component, please make sure to also
-> include React as a [peer dependency](#peer-dependencies) in your project.
-
-
-## Peer Dependencies
-
-> [!IMPORTANT]
-> When using `pie-button`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki for more information and how to include these in your application](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies).
-
-
-## Props
-
-| Property       | Type      | Default    | Description                                                                                                          |
-|----------------|-----------|------------|----------------------------------------------------------------------------------------------------------------------|
-| size           | `String`  | `medium`   | Size of the button, one of `sizes` – `xsmall`, `small-expressive`, `small-productive`, `medium`, `large`             |
-| type           | `String`  | `submit`   | Type of the button, one of `types` – `submit`, `button`, `reset`. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)|
-| variant        | `String`  | `primary`  | Variant of the button, one of `variants` – `primary`, `secondary`, `outline`, `ghost`, `destructive`, `destructive-ghost`, `inverse`, `ghost-inverse`, `outline-inverse` |
-| disabled       | `Boolean` | `false`    | If `true`, disables the button.                                                                                      |
-| isFullWidth    | `Boolean` | `false`    | If `true`, sets the button width to 100% of its container.                                                          |
-| isLoading      | `Boolean` | `false`    | If `true`, displays a loading indicator inside the button.                                                           |
-| isResponsive   | `Boolean` | `false`    | If `true`, uses the next larger size on wide viewports.                                                              |
-| iconPlacement  | `String`  | `leading`  | Icon placements of the icon slot, if provided, one of `iconPlacements` - `leading`, `trailing`                       |
-| name           | `String`  | `undefined`| The name of the button, to be submitted with form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) |
-| value          | `String`  | `undefined`| The value of the button, to be submitted with form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-value) |
-| formaction     | `String`  | `undefined`| Designates an alternative URL for form data submission. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formaction) |
-| formenctype    | `String`  | `undefined`| Specifies the form data encoding type. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formenctype) |
-| formmethod     | `String`  | `undefined`| Sets the HTTP method for form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formmethod) |
-| formnovalidate | `Boolean` | `undefined`    | Ensures the form is submitted without native HTML validation. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formnovalidate) |
-| formtarget     | `String`  | `undefined`| Dictates where to display the response after form submission. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formtarget) |
-| responsiveSize | `String`  | `productive`| Sets a specific size for xsmall button when rendered as responsive. It can be `productive` or `expressive`.         |
-
-
-In your markup or JSX, you can then use these to set the properties for the `pie-button` component:
-
-```html
-<!-- Native HTML -->
-<pie-button size='medium' type='button' variant='primary'>Click me!</pie-button>
-
-<!-- JSX -->
-<PieButton size='medium' type='button' variant='primary'>Click me!</PieButton>
-```
-
-
-## Slots
-
-| Slot          | Description                                                                                                                        |
-|---------------|------------------------------------------------------------------------------------------------------------------------------------|
-| Default slot  | The default slot is used to pass text into the button component.                                                                   |
-| icon         | Used to pass in an icon to the button component. The icon placement can be controlled via the `iconPlacement` prop and we recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. |
-
-### Using `pie-icons-webc` with `pie-button` icon slot
-
-We recommend using `pie-icons-webc` when using the `icon` slot. Here is an example of how you would do this:
-
-```html
-<!--
-  Note that pie-button and the icon that you want to use will need to be imported as components into your application.
-  See the `pie-icons-webc` README for more info on importing these icons.
--->
-<pie-button>
-    <icon-plus-circle slot="icon"></icon-plus-circle>
-    Search
-</pie-button>
-```
-
-
-## Events
-
-This component does not use any custom event handlers. In order to add event listening to this component, you can treat it like a native HTML element in your application.
-
-For example, to add a click handler in various templates:
-
-### HTML
-
-```html
-<!-- Other attributes omitted for clarity -->
-<pie-button onclick="e => console.log(e)">Click me!</pie-button>
-```
-
-### Vue templates (using Nuxt 3)
-
-```html
-<!-- Other attributes omitted for clarity -->
-<pie-button @click="handleClick">Click me!</pie-button>
-```
-
-### React templates (using Next 13)
-
-```html
-<!-- Other attributes omitted for clarity -->
-<PieButton onClick={handleClick}>increment</PieButton>
-
-```
-
-## Forms usage
-
-The `pie-button` web component is designed to integrate with standard HTML forms just like a native HTML button. When positioned inside a form, the component will automatically associate itself, enabling it to directly interact with the form context.
-
-### Button Attributes
-
-The `pie-button` provides a set of attributes to customize its behavior within forms:
-
-- `type`: Determines the button's function. Set to `submit` for form submissions or `reset` to clear form fields.
-- `formaction`: Designates an alternative URL for form data submission when this specific button is clicked.
-- `formenctype`: Specifies the form data encoding type during submission via this button.
-- `formmethod`: Sets the HTTP method (e.g., GET or POST) for form data when initiated by this button.
-- `formnovalidate`: If present, ensures the form is submitted without validation checks.
-- `formtarget`: Dictates where to display the response after form submission.
-
-Please see the [MDN docs]((https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)) for more information on these attributes.
-
-### Integration Example
-
-```html
-<form action="/default-endpoint" method="post">
-    <input type="text" name="username" required>
-    <pie-button
-        type="submit"
-        formaction="/alternate-endpoint"
-        formenctype="multipart/form-data"
-        formmethod="post"
-        formnovalidate
-        formtarget="_blank">
-        Submit
-    </pie-button>
-</form>
-```
-
-In this example:
-
-- The pie-button, when clicked, will send the form data to /alternate-endpoint instead of the form's default /default-endpoint.
-- It uses the multipart/form-data encoding type for form submission.
-- The form will submit using the POST method.
-- No validation will be performed during submission, thanks to formnovalidate.
-- The form's submission response will be opened in a new browser tab/window because of the formtarget="_blank" attribute.
-
 ## Contributing
 
 Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

src/index.ts

 import {
     LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
 } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, queryAssignedElements } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -58,2 +58,18 @@ import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 
+        // Making sure that icon passed in a slot has the correct icon size
+        const [iconElement] = this._iconSlotElement;
+
+        if (iconElement) {
+            if (this.size === 'xsmall') {
+                iconElement.setAttribute('size', 'xs');
+            }
+            if (this.size === 'small-expressive' || this.size === 'small-productive') {
+                iconElement.setAttribute('size', 's');
+            }
+
+            if (this.size === 'medium' || this.size === 'large') {
+                iconElement.setAttribute('size', 'm');
+            }
+        }
+
         if (changedProperties.has('type')) {
@@ -121,2 +137,5 @@ // If the new type is "submit", add the keydown event listener
 
+    @queryAssignedElements({ slot: 'icon' })
+        _iconSlotElement!: Array<HTMLElement>;
+
     /**
@@ -123,0 +142,0 @@ * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.

No alert changes

Improved metrics

Lines of code

1362

increased by1.72%

Worsened metrics

Total package byte prevSize

78123

decreased by-9.02%

Number of lines in readme file

42

decreased by-79.81%

No dependency changes