@justeattakeaway/pie-button - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240412134443 to 0.0.0-snapshot-release-20240416135813

custom-elements.json

@@ -161,6 +161,2 @@ {
             {
-              "description": "Testing the attribute reassignment",
-              "name": "test"
-            },
-            {
               "description": "Default slot",
@@ -325,16 +321,2 @@ "name": ""
             {
-              "kind": "field",
-              "name": "_iconSlotElement",
-              "type": {
-                "text": "Array<HTMLElement>"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_testSlotElement",
-              "type": {
-                "text": "Array<HTMLElement>"
-              }
-            },
-            {
               "kind": "method",
@@ -341,0 +323,0 @@ "name": "_simulateNativeButtonClick",

dist/index.d.ts

@@ -96,3 +96,2 @@ import type { CSSResult } from 'lit';
  * @slot icon - The icon slot
- * @slot test - Testing the attribute reassignment
  * @slot - Default slot
@@ -120,4 +119,2 @@ */
     responsiveSize?: ButtonProps['responsiveSize'];
-    _iconSlotElement: Array<HTMLElement>;
-    _testSlotElement: Array<HTMLElement>;
     /**
@@ -124,0 +121,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

@@ -1,7 +0,7 @@
-import { LitElement as Ct, html as N, nothing as B, unsafeCSS as St } from "lit";
-import { property as p, queryAssignedElements as ct } from "lit/decorators.js";
-import { ifDefined as At } from "lit/directives/if-defined.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 "@justeattakeaway/pie-spinner";
-const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Kt = ["productive", "expressive"], Tt = ["submit", "button", "reset"], Vt = [
+const At = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Bt = ["productive", "expressive"], It = ["submit", "button", "reset"], Tt = [
   "primary",
@@ -16,7 +16,7 @@ "secondary",
   "destructive-ghost"
-], Nt = ["leading", "trailing"], qt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Ut = ["post", "get", "dialog"], jt = ["_self", "_blank", "_parent", "_top"], 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)}
+], 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)}
 `;
 (function() {
   (function(E) {
-    const n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), L = {
+    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 = {
       ariaAtomic: "aria-atomic",
@@ -63,7 +63,7 @@ ariaAutoComplete: "aria-autocomplete",
       role: "role"
-    }, dt = (e, t) => {
-      for (let i in L) {
+    }, ct = (e, t) => {
+      for (let i in A) {
         t[i] = null;
         let r = null;
-        const o = L[i];
+        const o = A[i];
         Object.defineProperty(t, i, {
@@ -74,3 +74,3 @@ get() {
           set(s) {
-            r = s, e.isConnected ? e.setAttribute(o, s) : A.set(e, t);
+            r = s, e.isConnected ? e.setAttribute(o, s) : F.set(e, t);
           }
@@ -94,3 +94,3 @@ });
         r.formDisabledCallback && o && D(r, e.disabled), r = i.nextNode();
-    }, Q = { attributes: !0, attributeFilter: ["disabled", "name"] }, z = V() ? new MutationObserver((e) => {
+    }, Q = { attributes: !0, attributeFilter: ["disabled", "name"] }, k = V() ? new MutationObserver((e) => {
       for (const t of e) {
@@ -104,21 +104,21 @@ const i = t.target;
     }) : {};
-    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 f;
-          if (c.has(l) && l.constructor.formAssociated && G(l), A.has(l)) {
-            const v = A.get(l);
-            Object.keys(L).filter((g) => v[g] !== null).forEach((g) => {
-              l.setAttribute(L[g], v[g]);
-            }), A.delete(l);
+          var u;
+          if (c.has(l) && l.constructor.formAssociated && G(l), 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);
           }
-          if (F.has(l)) {
-            const v = F.get(l);
-            l.setAttribute("internals-valid", v.validity.valid.toString()), l.setAttribute("internals-invalid", (!v.validity.valid).toString()), l.setAttribute("aria-invalid", (!v.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") {
-            const v = b.get(l), x = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
+            const d = b.get(l), x = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
               acceptNode(H) {
-                return c.has(H) && H.constructor.formAssociated && !(v && v.has(H)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+                return c.has(H) && H.constructor.formAssociated && !(d && d.has(H)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
               }
@@ -130,14 +130,14 @@ });
           }
-          l.localName === "fieldset" && ((f = z.observe) == null || f.call(z, l, Q), J(l, !0));
+          l.localName === "fieldset" && ((u = k.observe) == null || u.call(k, l, Q), J(l, !0));
         }), s.forEach((l) => {
-          const f = c.get(l);
-          f && m.get(f) && X(f), k.has(l) && k.get(l).disconnect();
+          const u = c.get(l);
+          u && h.get(u) && X(u), M.has(l) && M.get(l).disconnect();
         });
       });
     }
-    function vt(e) {
+    function dt(e) {
       e.forEach((t) => {
         const { removedNodes: i } = t;
         i.forEach((r) => {
-          const o = U.get(t.target);
+          const o = q.get(t.target);
           c.has(r) && it(r), o.disconnect();
@@ -147,9 +147,9 @@ });
     }
-    const ht = (e) => {
+    const vt = (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 }), U.set(e, t);
+      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);
     };
-    V() && new MutationObserver(_);
-    const R = {
+    V() && new MutationObserver(R);
+    const _ = {
       childList: !0,
@@ -160,11 +160,11 @@ subtree: !0
     }, X = (e) => {
-      m.get(e).forEach((i) => {
+      h.get(e).forEach((i) => {
         i.remove();
-      }), m.set(e, []);
+      }), h.set(e, []);
     }, Y = (e, t) => {
       const i = document.createElement("input");
-      return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), m.get(t).push(i), i;
-    }, mt = (e, t) => {
+      return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), h.get(t).push(i), i;
+    }, ht = (e, t) => {
       var i;
-      m.set(t, []), (i = z.observe) == null || i.call(z, e, Q);
+      h.set(t, []), (i = k.observe) == null || i.call(k, e, Q);
     }, Z = (e, t) => {
@@ -179,7 +179,7 @@ if (t.length) {
       e.toggleAttribute("internals-invalid", o), e.toggleAttribute("internals-valid", !o);
+    }, mt = (e) => {
+      I(T(e.target));
     }, pt = (e) => {
       I(T(e.target));
     }, ut = (e) => {
-      I(T(e.target));
-    }, ft = (e) => {
       const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((i) => `${i}:not([disabled])`).map((i) => `${i}:not([form])${e.id ? `,${i}[form='${e.id}']` : ""}`).join(",");
@@ -191,6 +191,6 @@ e.addEventListener("click", (i) => {
             return;
-          o.size && Array.from(o).reverse().map((f) => c.get(f).reportValidity()).includes(!1) && i.preventDefault();
+          o.size && Array.from(o).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && i.preventDefault();
         }
       });
-    }, bt = (e) => {
+    }, ft = (e) => {
       const t = b.get(e.target);
@@ -207,3 +207,3 @@ t && t.size && t.forEach((i) => {
           const o = /* @__PURE__ */ new Set();
-          o.add(e), b.set(t, o), ft(t), t.addEventListener("reset", bt), t.addEventListener("input", pt), t.addEventListener("change", ut);
+          o.add(e), b.set(t, o), ut(t), t.addEventListener("reset", ft), t.addEventListener("input", mt), t.addEventListener("change", pt);
         }
@@ -234,3 +234,3 @@ y.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
     }
-    class gt {
+    class bt {
       constructor() {
@@ -240,3 +240,3 @@ this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
     }
-    const yt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), wt = (e, t, i) => (e.valid = xt(t), Object.keys(t).forEach((r) => e[r] = t[r]), i && I(i), e), xt = (e) => {
+    const gt = (e) => (e.badInput = !1, e.customError = !1, e.patternMismatch = !1, e.rangeOverflow = !1, e.rangeUnderflow = !1, e.stepMismatch = !1, e.tooLong = !1, e.tooShort = !1, e.typeMismatch = !1, e.valid = !0, e.valueMissing = !1, e), yt = (e, t, i) => (e.valid = wt(t), Object.keys(t).forEach((r) => e[r] = t[r]), i && I(i), e), wt = (e) => {
       let t = !0;
@@ -286,3 +286,3 @@ for (let i in e)
     }
-    function Et(e, t, i, r, o) {
+    function xt(e, t, i, r, o) {
       if (r === "m")
@@ -296,6 +296,6 @@ throw new TypeError("Private method is not writable");
     }
-    var M;
-    class zt {
+    var z;
+    class Et {
       constructor(t) {
-        M.set(this, void 0), Et(this, M, t, "f");
+        z.set(this, void 0), xt(this, z, t, "f");
         for (let i = 0; i < t.length; i++) {
@@ -308,6 +308,6 @@ let r = t[i];
       get length() {
-        return ot(this, M, "f").length;
+        return ot(this, z, "f").length;
       }
-      [(M = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-        return ot(this, M, "f")[Symbol.iterator]();
+      [(z = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+        return ot(this, z, "f")[Symbol.iterator]();
       }
@@ -337,7 +337,7 @@ item(t) {
         get(...s) {
-          const l = o.call(this, ...s), f = Array.from(b.get(this) || []);
-          if (f.length === 0)
+          const l = o.call(this, ...s), u = Array.from(b.get(this) || []);
+          if (u.length === 0)
             return l;
-          const v = Array.from(l).concat(f).sort((x, g) => x.compareDocumentPosition ? x.compareDocumentPosition(g) & 2 ? 1 : -1 : 0);
-          return new zt(v);
+          const d = Array.from(l).concat(u).sort((x, g) => x.compareDocumentPosition ? x.compareDocumentPosition(g) & 2 ? 1 : -1 : 0);
+          return new Et(d);
         }
@@ -353,10 +353,10 @@ });
           throw new TypeError("Illegal constructor");
-        const i = t.getRootNode(), r = new gt();
-        this.states = new $(t), n.set(this, t), a.set(this, r), c.set(t, this), dt(t, this), mt(t, this), Object.seal(this), i instanceof DocumentFragment && ht(i);
+        const i = t.getRootNode(), r = new bt();
+        this.states = new $(t), a.set(this, t), n.set(this, r), c.set(t, this), ct(t, this), ht(t, this), Object.seal(this), i instanceof DocumentFragment && vt(i);
       }
       checkValidity() {
-        const t = n.get(this);
+        const t = a.get(this);
         if (w(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
-        const i = a.get(this);
+        const i = n.get(this);
         if (!i.valid) {
@@ -373,3 +373,3 @@ const r = new Event("invalid", {
       get form() {
-        const t = n.get(this);
+        const t = a.get(this);
         w(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
@@ -380,3 +380,3 @@ let i;
       get labels() {
-        const t = n.get(this);
+        const t = a.get(this);
         w(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
@@ -387,6 +387,6 @@ const i = t.getAttribute("id"), r = t.getRootNode();
       reportValidity() {
-        const t = n.get(this);
+        const t = a.get(this);
         if (w(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
-        const i = this.checkValidity(), r = q.get(this);
+        const i = this.checkValidity(), r = U.get(this);
         if (r && !t.constructor.formAssociated)
@@ -397,3 +397,3 @@ throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
       setFormValue(t) {
-        const i = n.get(this);
+        const i = a.get(this);
         if (w(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), X(this), t != null && !(t instanceof FormData)) {
@@ -414,31 +414,31 @@ if (i.getAttribute("name")) {
       setValidity(t, i, r) {
-        const o = n.get(this);
+        const o = a.get(this);
         if (w(o, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
           throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
-        q.set(this, r);
-        const s = a.get(this), l = {};
+        U.set(this, r);
+        const s = n.get(this), l = {};
         for (const x in t)
           l[x] = t[x];
-        Object.keys(l).length === 0 && yt(s);
-        const f = { ...s, ...l };
-        delete f.valid;
-        const { valid: v } = wt(s, f, this.form);
-        if (!v && !i)
+        Object.keys(l).length === 0 && gt(s);
+        const u = { ...s, ...l };
+        delete u.valid;
+        const { valid: d } = yt(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.");
-        u.set(this, v ? "" : i), o.isConnected ? (o.toggleAttribute("internals-invalid", !v), o.toggleAttribute("internals-valid", v), o.setAttribute("aria-invalid", `${!v}`)) : F.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}`)) : L.set(o, this);
       }
       get shadowRoot() {
-        const t = n.get(this), i = K.get(t);
+        const t = a.get(this), i = K.get(t);
         return i || null;
       }
       get validationMessage() {
-        const t = n.get(this);
-        return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), u.get(this);
+        const t = a.get(this);
+        return w(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), f.get(this);
       }
       get validity() {
-        const t = n.get(this);
-        return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), a.get(this);
+        const t = a.get(this);
+        return w(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), n.get(this);
       }
       get willValidate() {
-        const t = n.get(this);
+        const t = a.get(this);
         return w(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
@@ -505,4 +505,4 @@ }
             if (K.set(this, o), V()) {
-              const s = new MutationObserver(_);
-              window.ShadyDOM ? s.observe(this, R) : s.observe(o, R), k.set(this, s);
+              const s = new MutationObserver(R);
+              window.ShadyDOM ? s.observe(this, _) : s.observe(o, _), M.set(this, s);
             }
@@ -514,3 +514,3 @@ return o;
         }
-        V() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, R), typeof HTMLFormElement < "u" && kt(), (e || typeof window < "u" && !window.CustomStateSet) && W();
+        V() && typeof document < "u" && new MutationObserver(R).observe(document.documentElement, _), typeof HTMLFormElement < "u" && kt(), (e || typeof window < "u" && !window.CustomStateSet) && W();
       }
@@ -521,18 +521,18 @@ }
 })();
-var _t = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, h = (E, n, a, m) => {
-  for (var c = m > 1 ? void 0 : m ? Rt(n, a) : n, u = E.length - 1, y; u >= 0; u--)
-    (y = E[u]) && (c = (m ? y(n, a, c) : y(c)) || c);
-  return m && c && _t(n, a, c), c;
+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--)
+    (y = E[f]) && (c = (h ? y(a, n, c) : y(c)) || c);
+  return h && c && Pt(a, n, c), c;
 };
 const C = "pie-button";
-class d extends Ft(Ct) {
+class v extends Ft(zt) {
   constructor() {
-    super(...arguments), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this.isResponsive = !1, this._handleFormKeyDown = (n) => {
-      if (!(n.key !== "Enter" || this.type !== "submit" || this.disabled)) {
-        if (n.target instanceof HTMLElement) {
-          const a = n.target.tagName.toLowerCase();
-          if (a === "button" || a === "pie-button")
+    super(...arguments), 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 = (a) => {
+      if (!(a.key !== "Enter" || this.type !== "submit" || this.disabled)) {
+        if (a.target instanceof HTMLElement) {
+          const n = a.target.tagName.toLowerCase();
+          if (n === "button" || n === "pie-button")
             return;
         }
-        n.preventDefault(), this._handleClick();
+        a.preventDefault(), this._handleClick();
       }
@@ -542,16 +542,12 @@ };
   connectedCallback() {
-    var n;
-    super.connectedCallback(), this.type === "submit" && ((n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown));
+    var a;
+    super.connectedCallback(), this.type === "submit" && ((a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown));
   }
   disconnectedCallback() {
-    var n;
-    super.disconnectedCallback(), this.type === "submit" && ((n = this.form) == null || n.removeEventListener("keydown", this._handleFormKeyDown));
+    var a;
+    super.disconnectedCallback(), this.type === "submit" && ((a = this.form) == null || a.removeEventListener("keydown", this._handleFormKeyDown));
   }
-  updated(n) {
-    var c, u;
-    super.updated(n);
-    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"));
-    const [m] = this._testSlotElement;
-    m && m.setAttribute("size", "small"), n.has("type") && (this.type === "submit" ? (c = this.form) == null || c.addEventListener("keydown", this._handleFormKeyDown) : (u = this.form) == null || u.removeEventListener("keydown", this._handleFormKeyDown));
+  updated(a) {
+    var n, h;
+    super.updated(a), a.has("type") && (this.type === "submit" ? (n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown) : (h = this.form) == null || h.removeEventListener("keydown", this._handleFormKeyDown));
   }
@@ -566,7 +562,7 @@ /**
    */
-  _simulateNativeButtonClick(n) {
+  _simulateNativeButtonClick(a) {
     if (!this.form)
       return;
-    const a = document.createElement("button");
-    a.type = n, a.style.position = "absolute", a.style.width = "1px", a.style.height = "1px", a.style.padding = "0", a.style.margin = "-1px", a.style.overflow = "hidden", a.style.border = "0", a.style.whiteSpace = "nowrap", n === "submit" && (this.name && (a.name = this.name), this.value && (a.value = this.value), this.formaction && a.setAttribute("formaction", this.formaction), this.formenctype && a.setAttribute("formenctype", this.formenctype), this.formmethod && a.setAttribute("formmethod", this.formmethod), this.formnovalidate && a.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && a.setAttribute("formtarget", this.formtarget)), this.form.append(a), a.click(), a.remove();
+    const n = document.createElement("button");
+    n.type = a, n.style.position = "absolute", n.style.width = "1px", n.style.height = "1px", n.style.padding = "0", n.style.margin = "-1px", n.style.overflow = "hidden", n.style.border = "0", n.style.whiteSpace = "nowrap", a === "submit" && (this.name && (n.name = this.name), this.value && (n.value = this.value), this.formaction && n.setAttribute("formaction", this.formaction), this.formenctype && n.setAttribute("formenctype", this.formenctype), this.formmethod && n.setAttribute("formmethod", this.formmethod), this.formnovalidate && n.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && n.setAttribute("formtarget", this.formtarget)), this.form.append(n), n.click(), n.remove();
   }
@@ -582,8 +578,8 @@ _handleClick() {
   renderSpinner() {
-    const { size: n, variant: a, disabled: m } = this, c = n && n.includes("small") ? "small" : "medium";
-    let u;
-    return m ? u = a === "ghost-inverse" ? "inverse" : "secondary" : u = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", N`
+    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`
                     <pie-spinner
                         size="${c}"
-                        variant="${u}">
+                        variant="${f}">
                     </pie-spinner>`;
@@ -593,9 +589,9 @@ }
     const {
-      type: n,
-      disabled: a,
-      isFullWidth: m,
+      type: a,
+      disabled: n,
+      isFullWidth: h,
       variant: c,
-      size: u,
+      size: f,
       isLoading: y,
-      isResponsive: k,
+      isResponsive: M,
       iconPlacement: b,
@@ -608,13 +604,12 @@ responsiveSize: S
                 class="o-btn"
-                type=${n || "submit"}
+                type=${a || "submit"}
                 variant=${c || "primary"}
-                size=${u || "medium"}
-                responsiveSize=${At(S)}
-                ?disabled=${a}
-                ?isFullWidth=${m}
-                ?isResponsive=${k}
+                size=${f || "medium"}
+                responsiveSize=${St(S)}
+                ?disabled=${n}
+                ?isFullWidth=${h}
+                ?isResponsive=${M}
                 ?isLoading=${y}>
                     ${y ? this.renderSpinner() : B}
                     ${b === "leading" ? N`<slot name="icon"></slot>` : B}
-                    <slot name="test"></slot>
                     <slot></slot>
@@ -625,76 +620,70 @@ ${b === "trailing" ? N`<slot name="icon"></slot>` : B}
   focus() {
-    var n, a;
-    (a = (n = this.shadowRoot) == null ? void 0 : n.querySelector("button")) == null || a.focus();
+    var a, n;
+    (n = (a = this.shadowRoot) == null ? void 0 : a.querySelector("button")) == null || n.focus();
   }
 }
-d.styles = St(Pt);
-h([
-  p(),
-  P(C, It, "medium")
-], d.prototype, "size", 2);
-h([
-  p(),
-  P(C, Tt, "submit")
-], d.prototype, "type", 2);
-h([
-  p(),
-  P(C, Vt, "primary")
-], d.prototype, "variant", 2);
-h([
-  p({ type: String }),
-  P(C, Nt, "leading")
-], d.prototype, "iconPlacement", 2);
-h([
-  p({ type: Boolean })
-], d.prototype, "disabled", 2);
-h([
-  p({ type: Boolean, reflect: !0 })
-], d.prototype, "isLoading", 2);
-h([
-  p({ type: Boolean })
-], d.prototype, "isFullWidth", 2);
-h([
-  p({ type: Boolean })
-], d.prototype, "isResponsive", 2);
-h([
-  p({ type: String })
-], d.prototype, "name", 2);
-h([
-  p({ type: String })
-], d.prototype, "value", 2);
-h([
-  p()
-], d.prototype, "formaction", 2);
-h([
-  p()
-], d.prototype, "formenctype", 2);
-h([
-  p()
-], d.prototype, "formmethod", 2);
-h([
-  p({ type: Boolean })
-], d.prototype, "formnovalidate", 2);
-h([
-  p()
-], d.prototype, "formtarget", 2);
-h([
-  p({ type: String })
-], d.prototype, "responsiveSize", 2);
-h([
-  ct({ slot: "icon" })
-], d.prototype, "_iconSlotElement", 2);
-h([
-  ct({ slot: "test" })
-], d.prototype, "_testSlotElement", 2);
-Lt(C, d);
+v.styles = Ct(Nt);
+p([
+  m(),
+  P(C, At, "medium")
+], v.prototype, "size", 2);
+p([
+  m(),
+  P(C, It, "submit")
+], v.prototype, "type", 2);
+p([
+  m(),
+  P(C, Tt, "primary")
+], v.prototype, "variant", 2);
+p([
+  m({ type: String }),
+  P(C, Vt, "leading")
+], v.prototype, "iconPlacement", 2);
+p([
+  m({ type: Boolean })
+], v.prototype, "disabled", 2);
+p([
+  m({ type: Boolean, reflect: !0 })
+], v.prototype, "isLoading", 2);
+p([
+  m({ type: Boolean })
+], v.prototype, "isFullWidth", 2);
+p([
+  m({ type: Boolean })
+], v.prototype, "isResponsive", 2);
+p([
+  m({ type: String })
+], v.prototype, "name", 2);
+p([
+  m({ type: String })
+], v.prototype, "value", 2);
+p([
+  m()
+], v.prototype, "formaction", 2);
+p([
+  m()
+], v.prototype, "formenctype", 2);
+p([
+  m()
+], v.prototype, "formmethod", 2);
+p([
+  m({ type: Boolean })
+], v.prototype, "formnovalidate", 2);
+p([
+  m()
+], v.prototype, "formtarget", 2);
+p([
+  m({ type: String })
+], v.prototype, "responsiveSize", 2);
+Lt(C, v);
 export {
-  d as PieButton,
-  qt as formEncodingtypes,
+  v as PieButton,
+  Kt as formEncodingtypes,
   Ut as formMethodTypes,
-  jt as formTargetTypes,
-  Nt as iconPlacements,
-  Kt as responsiveSizes,
-  It as sizes,
-  Tt as types,
-  Vt as variants
+  qt as formTargetTypes,
+  Vt as iconPlacements,
+  Bt as responsiveSizes,
+  At as sizes,
+  It as types,
+  Tt as variants
 };

dist/react.d.ts

@@ -99,3 +99,2 @@ import type { CSSResult } from 'lit';
  * @slot icon - The icon slot
- * @slot test - Testing the attribute reassignment
  * @slot - Default slot
@@ -123,4 +122,2 @@ */
     responsiveSize?: ButtonProps['responsiveSize'];
-    _iconSlotElement: Array<HTMLElement>;
-    _testSlotElement: Array<HTMLElement>;
     /**
@@ -127,0 +124,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-20240412134443",
+  "version": "0.0.0-snapshot-release-20240416135813",
   "description": "PIE design system button built using web components",
@@ -39,3 +39,3 @@ "type": "module",
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.15.0",
+    "@justeattakeaway/pie-components-config": "0.16.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.0",
@@ -52,6 +52,6 @@ "cem-plugin-module-file-extensions": "0.0.5"
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "0.6.2",
-    "@justeattakeaway/pie-webc-core": "0.21.0",
+    "@justeattakeaway/pie-spinner": "0.6.3",
+    "@justeattakeaway/pie-webc-core": "0.21.1",
     "element-internals-polyfill": "1.3.10"
   }
 }

src/index.ts

 import {
     LitElement, html, unsafeCSS, nothing, PropertyValues, TemplateResult,
 } from 'lit';
-import { property, queryAssignedElements } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -22,3 +22,2 @@ import { validPropertyValues, defineCustomElement, FormControlMixin } from '@justeattakeaway/pie-webc-core';
  * @slot icon - The icon slot
- * @slot test - Testing the attribute reassignment
  * @slot - Default slot
@@ -46,25 +45,2 @@ */
 
-        // 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');
-            }
-        }
-
-        // Testing setting attributes to a default slot while icon component doesn't work in ssr
-        const [testElement] = this._testSlotElement;
-
-        if (testElement) {
-            testElement.setAttribute('size', 'small');
-        }
-
         if (changedProperties.has('type')) {
@@ -132,8 +108,2 @@ // If the new type is "submit", add the keydown event listener
 
-    @queryAssignedElements({ slot: 'icon' })
-        _iconSlotElement!: Array<HTMLElement>;
-
-    @queryAssignedElements({ slot: 'test' })
-        _testSlotElement!: Array<HTMLElement>;
-
     /**
@@ -276,3 +246,2 @@ * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
                     ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
-                    <slot name="test"></slot>
                     <slot></slot>
@@ -279,0 +248,0 @@ ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

94208

decreased by-2.56%

Lines of code

1862

decreased by-3.07%

Dependency changes

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

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

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

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

• Updated@justeattakeaway/pie-spinner@0.6.3

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