@justeattakeaway/pie-button - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240501131344 to 0.0.0-snapshot-release-20240516103922

custom-elements.json

@@ -43,5 +43,5 @@ {
           "type": {
-            "text": "[\r\n    'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',\r\n    'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',\r\n]"
+            "text": "[\n    'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',\n    'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',\n]"
           },
-          "default": "[\r\n    'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',\r\n    'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',\r\n]"
+          "default": "[\n    'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',\n    'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',\n]"
         },
@@ -332,3 +332,3 @@ {
               ],
-              "description": "This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.\r\nThis is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM\r\nshould be neglible, however this should be monitored.\r\nThis is the only viable way of guaranteeing native button behaviour when using a web component in place of an actual HTML button.\r\n\r\nTODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin."
+              "description": "This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.\nThis is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM\nshould be neglible, however this should be monitored.\nThis is the only viable way of guaranteeing native button behaviour when using a web component in place of an actual HTML button.\n\nTODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin."
             },
@@ -335,0 +335,0 @@ {

dist/index.js

 import { LitElement as zt, html as N, nothing as B, unsafeCSS as Ct } from "lit";
 import { property as m } from "lit/decorators.js";
 import { ifDefined as St } from "lit/directives/if-defined.js";
-import { FormControlMixin as Ft, validPropertyValues as P, defineCustomElement as Lt } from "@justeattakeaway/pie-webc-core";
+import { FormControlMixin as Ft, validPropertyValues as O, defineCustomElement as Lt } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-spinner";
@@ -16,7 +16,7 @@ const At = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Bt = ["productive", "expressive"], It = ["submit", "button", "reset"], Tt = [
   "destructive-ghost"
-], Vt = ["leading", "trailing"], Kt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Ut = ["post", "get", "dialog"], qt = ["_self", "_blank", "_parent", "_top"], 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)}
+], Vt = ["leading", "trailing"], Kt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], jt = ["post", "get", "dialog"], Ut = ["_self", "_blank", "_parent", "_top"], 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)}
 `;
 (function() {
   (function(E) {
-    const a = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), A = {
+    const a = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), L = {
       ariaAtomic: "aria-atomic",
@@ -31,2 +31,3 @@ ariaAutoComplete: "aria-autocomplete",
       ariaCurrent: "aria-current",
+      ariaDescription: "aria-description",
       ariaDisabled: "aria-disabled",
@@ -65,6 +66,6 @@ ariaExpanded: "aria-expanded",
     }, ct = (e, t) => {
-      for (let i in A) {
+      for (let i in L) {
         t[i] = null;
         let r = null;
-        const o = A[i];
+        const o = L[i];
         Object.defineProperty(t, i, {
@@ -75,3 +76,3 @@ get() {
           set(s) {
-            r = s, e.isConnected ? e.setAttribute(o, s) : F.set(e, t);
+            r = s, e.isConnected ? e.setAttribute(o, s) : S.set(e, t);
           }
@@ -94,8 +95,8 @@ });
       for (; r; )
-        r.formDisabledCallback && o && D(r, e.disabled), r = i.nextNode();
-    }, Q = { attributes: !0, attributeFilter: ["disabled", "name"] }, k = V() ? new MutationObserver((e) => {
+        r.formDisabledCallback && o && R(r, e.disabled), r = i.nextNode();
+    }, Q = { attributes: !0, attributeFilter: ["disabled", "name"] }, A = V() ? new MutationObserver((e) => {
       for (const t of e) {
         const i = t.target;
-        if (t.attributeName === "disabled" && (i.constructor.formAssociated ? D(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && J(i)), t.attributeName === "name" && i.constructor.formAssociated) {
-          const r = c.get(i), o = S.get(i);
+        if (t.attributeName === "disabled" && (i.constructor.formAssociated ? R(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && J(i)), t.attributeName === "name" && i.constructor.formAssociated) {
+          const r = c.get(i), o = C.get(i);
           r.setFormValue(o);
@@ -105,3 +106,3 @@ }
     }) : {};
-    function R(e) {
+    function P(e) {
       e.forEach((t) => {
@@ -111,12 +112,12 @@ const { addedNodes: i, removedNodes: r } = t, o = Array.from(i), s = Array.from(r);
           var u;
-          if (c.has(l) && l.constructor.formAssociated && G(l), F.has(l)) {
+          if (c.has(l) && l.constructor.formAssociated && G(l), S.has(l)) {
+            const d = S.get(l);
+            Object.keys(L).filter((g) => d[g] !== null).forEach((g) => {
+              l.setAttribute(L[g], d[g]);
+            }), S.delete(l);
+          }
+          if (F.has(l)) {
             const d = F.get(l);
-            Object.keys(A).filter((g) => d[g] !== null).forEach((g) => {
-              l.setAttribute(A[g], d[g]);
-            }), F.delete(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()), F.delete(l);
           }
-          if (L.has(l)) {
-            const d = L.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()), L.delete(l);
-          }
           if (l.localName === "form") {
@@ -132,6 +133,6 @@ const d = b.get(l), x = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
           }
-          l.localName === "fieldset" && ((u = k.observe) == null || u.call(k, l, Q), J(l, !0));
+          l.localName === "fieldset" && ((u = A.observe) === null || u === void 0 || u.call(A, l, Q), J(l, !0));
         }), s.forEach((l) => {
           const u = c.get(l);
-          u && h.get(u) && X(u), M.has(l) && M.get(l).disconnect();
+          u && h.get(u) && X(u), k.has(l) && k.get(l).disconnect();
         });
@@ -144,3 +145,3 @@ });
         i.forEach((r) => {
-          const o = q.get(t.target);
+          const o = U.get(t.target);
           c.has(r) && it(r), o.disconnect();
@@ -151,11 +152,11 @@ });
     const vt = (e) => {
-      var i, r;
-      const t = new MutationObserver(dt);
-      (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 }), q.set(e, t);
+      var t, i;
+      const r = new MutationObserver(dt);
+      !((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 }), U.set(e, r);
     };
-    V() && new MutationObserver(R);
+    V() && new MutationObserver(P);
     const _ = {
       childList: !0,
       subtree: !0
-    }, D = (e, t) => {
+    }, R = (e, t) => {
       e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
@@ -171,3 +172,3 @@ }, X = (e) => {
       var i;
-      h.set(t, []), (i = k.observe) == null || i.call(k, e, Q);
+      h.set(t, []), (i = A.observe) === null || i === void 0 || i.call(A, e, Q);
     }, Z = (e, t) => {
@@ -244,3 +245,3 @@ if (t.length) {
       return t;
-    }, O = /* @__PURE__ */ new WeakMap();
+    }, D = /* @__PURE__ */ new WeakMap();
     function rt(e, t) {
@@ -256,3 +257,3 @@ e.toggleAttribute(t, !0), e.part && e.part.add(t);
           throw new TypeError("Illegal constructor");
-        O.set(this, t);
+        D.set(this, t);
       }
@@ -262,3 +263,3 @@ add(t) {
           throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
-        const i = super.add(t), r = O.get(this), o = `state${t}`;
+        const i = super.add(t), r = D.get(this), o = `state${t}`;
         return r.isConnected ? rt(r, o) : setTimeout(() => {
@@ -274,3 +275,3 @@ rt(r, o);
       delete(t) {
-        const i = super.delete(t), r = O.get(this);
+        const i = super.delete(t), r = D.get(this);
         return r.isConnected ? (r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`)) : setTimeout(() => {
@@ -297,6 +298,6 @@ r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`);
     }
-    var z;
+    var M;
     class Et {
       constructor(t) {
-        z.set(this, void 0), xt(this, z, t, "f");
+        M.set(this, void 0), xt(this, M, t, "f");
         for (let i = 0; i < t.length; i++) {
@@ -309,6 +310,6 @@ let r = t[i];
       get length() {
-        return ot(this, z, "f").length;
+        return ot(this, M, "f").length;
       }
-      [(z = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-        return ot(this, z, "f")[Symbol.iterator]();
+      [(M = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+        return ot(this, M, "f")[Symbol.iterator]();
       }
@@ -387,3 +388,3 @@ item(t) {
           return !0;
-        const i = this.checkValidity(), r = U.get(this);
+        const i = this.checkValidity(), r = j.get(this);
         if (r && !t.constructor.formAssociated)
@@ -407,3 +408,3 @@ throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
           });
-        S.set(i, t);
+        C.set(i, t);
       }
@@ -414,3 +415,3 @@ setValidity(t, i, r) {
           throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
-        U.set(this, r);
+        j.set(this, r);
         const s = n.get(this), l = {};
@@ -420,3 +421,3 @@ for (const x in t)
         Object.keys(l).length === 0 && gt(s);
-        const u = { ...s, ...l };
+        const u = Object.assign(Object.assign({}, s), l);
         delete u.valid;
@@ -426,3 +427,3 @@ const { valid: d } = yt(s, u, this.form);
           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}`)) : L.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}`)) : F.set(o, this);
       }
@@ -485,3 +486,3 @@ get shadowRoot() {
               r.prototype.connectedCallback = function() {
-                j.has(this) || (j.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), s != null && s.apply(this), it(this);
+                q.has(this) || (q.set(this, !0), this.hasAttribute("disabled") && R(this, !0)), s != null && s.apply(this), it(this);
               };
@@ -505,4 +506,4 @@ }
             if (K.set(this, o), V()) {
-              const s = new MutationObserver(R);
-              window.ShadyDOM ? s.observe(this, _) : s.observe(o, _), M.set(this, s);
+              const s = new MutationObserver(P);
+              window.ShadyDOM ? s.observe(this, _) : s.observe(o, _), k.set(this, s);
             }
@@ -514,3 +515,3 @@ return o;
         }
-        V() && typeof document < "u" && new MutationObserver(R).observe(document.documentElement, _), typeof HTMLFormElement < "u" && kt(), (e || typeof window < "u" && !window.CustomStateSet) && W();
+        V() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" && kt(), (e || typeof window < "u" && !window.CustomStateSet) && W();
       }
@@ -521,8 +522,8 @@ }
 })();
-var Pt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, p = (E, a, n, h) => {
-  for (var c = h > 1 ? void 0 : h ? Rt(a, n) : a, f = E.length - 1, y; f >= 0; f--)
+var Ot = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, p = (E, a, n, h) => {
+  for (var c = h > 1 ? void 0 : h ? Pt(a, n) : a, f = E.length - 1, y; f >= 0; f--)
     (y = E[f]) && (c = (h ? y(a, n, c) : y(c)) || c);
-  return h && c && Pt(a, n, c), c;
+  return h && c && Ot(a, n, c), c;
 };
-const C = "pie-button";
+const z = "pie-button";
 class v extends Ft(zt) {
@@ -592,5 +593,5 @@ constructor() {
       isLoading: y,
-      isResponsive: M,
+      isResponsive: k,
       iconPlacement: b,
-      responsiveSize: S
+      responsiveSize: C
     } = this;
@@ -604,6 +605,6 @@ return N`
                 size=${f || "medium"}
-                responsiveSize=${St(S)}
+                responsiveSize=${St(C)}
                 ?disabled=${n}
                 ?isFullWidth=${h}
-                ?isResponsive=${M}
+                ?isResponsive=${k}
                 ?isLoading=${y}>
@@ -624,15 +625,15 @@ ${y ? this.renderSpinner() : B}
   m(),
-  P(C, At, "medium")
+  O(z, At, "medium")
 ], v.prototype, "size", 2);
 p([
   m(),
-  P(C, It, "submit")
+  O(z, It, "submit")
 ], v.prototype, "type", 2);
 p([
   m(),
-  P(C, Tt, "primary")
+  O(z, Tt, "primary")
 ], v.prototype, "variant", 2);
 p([
   m({ type: String }),
-  P(C, Vt, "leading")
+  O(z, Vt, "leading")
 ], v.prototype, "iconPlacement", 2);
@@ -675,8 +676,8 @@ p([
 ], v.prototype, "responsiveSize", 2);
-Lt(C, v);
+Lt(z, v);
 export {
   v as PieButton,
   Kt as formEncodingtypes,
-  Ut as formMethodTypes,
-  qt as formTargetTypes,
+  jt as formMethodTypes,
+  Ut as formTargetTypes,
   Vt as iconPlacements,
@@ -683,0 +684,0 @@ Bt as responsiveSizes,

package.json

 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.0.0-snapshot-release-20240501131344",
+  "version": "0.0.0-snapshot-release-20240516103922",
   "description": "PIE design system button built using web components",
@@ -51,6 +51,6 @@ "type": "module",
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "0.0.0-snapshot-release-20240501131344",
-    "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20240501131344",
-    "element-internals-polyfill": "1.3.10"
+    "@justeattakeaway/pie-spinner": "0.6.4",
+    "@justeattakeaway/pie-webc-core": "0.22.0",
+    "element-internals-polyfill": "1.3.11"
   }
 }

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

94346

increased by0.06%

Lines of code

1863

increased by0.05%

Dependency changes

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

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

• + Addedelement-internals-polyfill@1.3.11(transitive)

• - Removed@justeattakeaway/pie-spinner@0.0.0-snapshot-release-20240501131344(transitive)

• - Removed@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240501131344(transitive)

• - Removedelement-internals-polyfill@1.3.10(transitive)

• Updated@justeattakeaway/pie-spinner@0.6.4

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

• Updatedelement-internals-polyfill@1.3.11