@justeattakeaway/pie-button - npm Package Compare versions

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

dist/index.d.ts

@@ -10,11 +10,11 @@ import type { CSSResult } from 'lit';
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
     /**
      * What type attribute should be applied to the button. For example submit, button.
      */
-    type: typeof types[number];
+    type?: typeof types[number];
     /**
      * What style variant the button should be such as primary, outline or ghost.
      */
-    variant: Variant;
+    variant?: Variant;
     /**
@@ -27,15 +27,15 @@ * The placement of the icon slot, if provided, such as leading or trailing
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * When true, the button element will occupy the full width of its container.
      */
-    isFullWidth: boolean;
+    isFullWidth?: boolean;
     /**
      * When true, displays a loading indicator inside the button.
      */
-    isLoading: boolean;
+    isLoading?: boolean;
     /**
      * When true, enables the responsive size feature.
      */
-    isResponsive: boolean;
+    isResponsive?: boolean;
     /**
@@ -122,3 +122,2 @@ * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
     responsiveSize?: ButtonProps['responsiveSize'];
-    _iconSlotElement: Array<HTMLElement>;
     /**
@@ -125,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.

dist/index.js

@@ -1,7 +0,7 @@
-import { unsafeCSS as wt, LitElement as xt, html as N, nothing as W } from "lit";
-import { property as p, queryAssignedElements as Et } from "lit/decorators.js";
-import { ifDefined as zt } from "lit/directives/if-defined.js";
-import { validPropertyValues as R, defineCustomElement as kt } from "@justeattakeaway/pie-webc-core";
+import { unsafeCSS as xt, LitElement as Et, html as N, nothing as H } from "lit";
+import { property as h } from "lit/decorators.js";
+import { ifDefined as R } from "lit/directives/if-defined.js";
+import { validPropertyValues as _, defineCustomElement as kt } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-spinner";
-const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Pt = ["productive", "expressive"], Ct = ["submit", "button", "reset"], Lt = [
+const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], _t = ["productive", "expressive"], Mt = ["submit", "button", "reset"], Ct = [
   "primary",
@@ -16,6 +16,6 @@ "secondary",
   "destructive-ghost"
-], At = ["leading", "trailing"], Dt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], $t = ["post", "get", "dialog"], Ot = ["_self", "_blank", "_parent", "_top"], Ft = `*,*:before,*:after{box-sizing:border-box}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}
+], Lt = ["leading", "trailing"], Pt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Dt = ["post", "get", "dialog"], $t = ["_self", "_blank", "_parent", "_top"], Ft = `*,*:before,*:after{box-sizing:border-box}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}
 `;
 (function() {
-  const u = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), F = {
+  const p = /* @__PURE__ */ new WeakMap(), s = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), S = {
     ariaAtomic: "aria-atomic",
@@ -62,7 +62,7 @@ ariaAutoComplete: "aria-autocomplete",
     role: "role"
-  }, ot = (i, t) => {
-    for (let e in F) {
+  }, at = (i, t) => {
+    for (let e in S) {
       t[e] = null;
       let r = null;
-      const o = F[e];
+      const o = S[e];
       Object.defineProperty(t, e, {
@@ -73,3 +73,3 @@ get() {
         set(l) {
-          r = l, i.isConnected ? i.setAttribute(o, l) : z.set(i, t);
+          r = l, i.isConnected ? i.setAttribute(o, l) : k.set(i, t);
         }
@@ -79,7 +79,7 @@ });
   };
-  function U(i) {
+  function j(i) {
     const t = c.get(i), { form: e } = t;
-    Y(i, e, t), X(i, t.labels);
+    Z(i, e, t), Y(i, t.labels);
   }
-  const j = (i, t = !1) => {
+  const G = (i, t = !1) => {
     const e = document.createTreeWalker(i, NodeFilter.SHOW_ELEMENT, {
@@ -93,7 +93,7 @@ acceptNode(l) {
     for (; r; )
-      r.formDisabledCallback && o && D(r, i.disabled), r = e.nextNode();
-  }, G = { attributes: !0, attributeFilter: ["disabled", "name"] }, k = T() ? new MutationObserver((i) => {
+      r.formDisabledCallback && o && $(r, i.disabled), r = e.nextNode();
+  }, J = { attributes: !0, attributeFilter: ["disabled", "name"] }, z = T() ? new MutationObserver((i) => {
     for (const t of i) {
       const e = t.target;
-      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? D(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && j(e)), t.attributeName === "name" && e.constructor.formAssociated) {
+      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && G(e)), t.attributeName === "name" && e.constructor.formAssociated) {
         const r = c.get(e), o = M.get(e);
@@ -104,3 +104,3 @@ r.setFormValue(o);
   }) : {};
-  function _(i) {
+  function P(i) {
     i.forEach((t) => {
@@ -110,16 +110,16 @@ const { addedNodes: e, removedNodes: r } = t, o = Array.from(e), l = Array.from(r);
         var b;
-        if (c.has(n) && n.constructor.formAssociated && U(n), z.has(n)) {
-          const v = z.get(n);
-          Object.keys(F).filter((w) => v[w] !== null).forEach((w) => {
-            n.setAttribute(F[w], v[w]);
-          }), z.delete(n);
+        if (c.has(n) && n.constructor.formAssociated && j(n), k.has(n)) {
+          const d = k.get(n);
+          Object.keys(S).filter((w) => d[w] !== null).forEach((w) => {
+            n.setAttribute(S[w], d[w]);
+          }), k.delete(n);
         }
-        if (A.has(n)) {
-          const v = A.get(n);
-          n.setAttribute("internals-valid", v.validity.valid.toString()), n.setAttribute("internals-invalid", (!v.validity.valid).toString()), n.setAttribute("aria-invalid", (!v.validity.valid).toString()), A.delete(n);
+        if (F.has(n)) {
+          const d = F.get(n);
+          n.setAttribute("internals-valid", d.validity.valid.toString()), n.setAttribute("internals-invalid", (!d.validity.valid).toString()), n.setAttribute("aria-invalid", (!d.validity.valid).toString()), F.delete(n);
         }
         if (n.localName === "form") {
-          const v = y.get(n), E = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
-            acceptNode(O) {
-              return c.has(O) && O.constructor.formAssociated && !(v && v.has(O)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+          const d = y.get(n), E = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
+            acceptNode(W) {
+              return c.has(W) && W.constructor.formAssociated && !(d && d.has(W)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
             }
@@ -129,42 +129,42 @@ });
           for (; w; )
-            U(w), w = E.nextNode();
+            j(w), w = E.nextNode();
         }
-        n.localName === "fieldset" && ((b = k.observe) == null || b.call(k, n, G), j(n, !0));
+        n.localName === "fieldset" && ((b = z.observe) == null || b.call(z, n, J), G(n, !0));
       }), l.forEach((n) => {
         const b = c.get(n);
-        b && a.get(b) && J(b), g.has(n) && g.get(n).disconnect();
+        b && a.get(b) && Q(b), g.has(n) && g.get(n).disconnect();
       });
     });
   }
-  function at(i) {
+  function nt(i) {
     i.forEach((t) => {
       const { removedNodes: e } = t;
       e.forEach((r) => {
-        const o = K.get(t.target);
-        c.has(r) && tt(r), o.disconnect();
+        const o = q.get(t.target);
+        c.has(r) && et(r), o.disconnect();
       });
     });
   }
-  const nt = (i) => {
+  const st = (i) => {
     var e;
-    const t = new MutationObserver(at);
-    (e = t.observe) == null || e.call(t, i, { childList: !0 }), K.set(i, t);
+    const t = new MutationObserver(nt);
+    (e = t.observe) == null || e.call(t, i, { childList: !0 }), q.set(i, t);
   };
-  T() && new MutationObserver(_);
-  const P = {
+  T() && new MutationObserver(P);
+  const D = {
     childList: !0,
     subtree: !0
-  }, D = (i, t) => {
+  }, $ = (i, t) => {
     i.toggleAttribute("internals-disabled", t), t ? i.setAttribute("aria-disabled", "true") : i.removeAttribute("aria-disabled"), i.formDisabledCallback && i.formDisabledCallback.apply(i, [t]);
-  }, J = (i) => {
+  }, Q = (i) => {
     a.get(i).forEach((e) => {
       e.remove();
     }), a.set(i, []);
-  }, Q = (i, t) => {
+  }, X = (i, t) => {
     const e = document.createElement("input");
     return e.type = "hidden", e.name = i.getAttribute("name"), i.after(e), a.get(t).push(e), e;
-  }, st = (i, t) => {
+  }, lt = (i, t) => {
     var e;
-    a.set(t, []), (e = k.observe) == null || e.call(k, i, G);
-  }, X = (i, t) => {
+    a.set(t, []), (e = z.observe) == null || e.call(z, i, J);
+  }, Y = (i, t) => {
     if (t.length) {
@@ -175,10 +175,10 @@ Array.from(t).forEach((r) => r.addEventListener("click", i.click.bind(i)));
     }
-  }, S = (i) => {
+  }, A = (i) => {
     const t = Array.from(i.elements).filter((l) => !l.tagName.includes("-") && l.validity).map((l) => l.validity.valid), e = y.get(i) || [], r = Array.from(e).filter((l) => l.isConnected).map((l) => c.get(l).validity.valid), o = [...t, ...r].includes(!1);
     i.toggleAttribute("internals-invalid", o), i.toggleAttribute("internals-valid", !o);
-  }, lt = (i) => {
-    S(I(i.target));
   }, ct = (i) => {
-    S(I(i.target));
+    A(I(i.target));
   }, dt = (i) => {
+    A(I(i.target));
+  }, vt = (i) => {
     const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((e) => `${e}:not([disabled])`).map((e) => `${e}:not([form])${i.id ? `,${e}[form='${i.id}']` : ""}`).join(",");
@@ -193,3 +193,3 @@ i.addEventListener("click", (e) => {
     });
-  }, vt = (i) => {
+  }, ht = (i) => {
     const t = y.get(i.target);
@@ -199,3 +199,3 @@ t && t.size && t.forEach((e) => {
     });
-  }, Y = (i, t, e) => {
+  }, Z = (i, t, e) => {
     if (t) {
@@ -207,7 +207,7 @@ const r = y.get(t);
         const o = /* @__PURE__ */ new Set();
-        o.add(i), y.set(t, o), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
+        o.add(i), y.set(t, o), vt(t), t.addEventListener("reset", ht), t.addEventListener("input", ct), t.addEventListener("change", dt);
       }
       f.set(t, { ref: i, internals: e }), i.constructor.formAssociated && i.formAssociatedCallback && setTimeout(() => {
         i.formAssociatedCallback.apply(i, [t]);
-      }, 0), S(t);
+      }, 0), A(t);
     }
@@ -220,3 +220,3 @@ }, I = (i) => {
       throw new e(t);
-  }, Z = (i, t, e) => {
+  }, tt = (i, t, e) => {
     const r = y.get(i);
@@ -226,6 +226,6 @@ return r && r.size && r.forEach((o) => {
     }), t;
-  }, tt = (i) => {
+  }, et = (i) => {
     if (i.constructor.formAssociated) {
       const t = c.get(i), { labels: e, form: r } = t;
-      X(i, e), Y(i, r, t);
+      Y(i, e), Z(i, r, t);
     }
@@ -236,3 +236,3 @@ };
   }
-  class ht {
+  class mt {
     constructor() {
@@ -242,3 +242,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 mt = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), pt = (i, t, e) => (i.valid = ut(t), Object.keys(t).forEach((r) => i[r] = t[r]), e && S(e), i), ut = (i) => {
+  const pt = (i) => (i.badInput = !1, i.customError = !1, i.patternMismatch = !1, i.rangeOverflow = !1, i.rangeUnderflow = !1, i.stepMismatch = !1, i.tooLong = !1, i.tooShort = !1, i.typeMismatch = !1, i.valid = !0, i.valueMissing = !1, i), ut = (i, t, e) => (i.valid = bt(t), Object.keys(t).forEach((r) => i[r] = t[r]), e && A(e), i), bt = (i) => {
     let t = !0;
@@ -248,4 +248,4 @@ for (let e in i)
     return t;
-  }, $ = /* @__PURE__ */ new WeakMap();
-  function et(i, t) {
+  }, O = /* @__PURE__ */ new WeakMap();
+  function it(i, t) {
     i.toggleAttribute(t, !0), i.part && i.part.add(t);
@@ -260,3 +260,3 @@ }
         throw new TypeError("Illegal constructor");
-      $.set(this, t);
+      O.set(this, t);
     }
@@ -266,5 +266,5 @@ add(t) {
         throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
-      const e = super.add(t), r = $.get(this), o = `state${t}`;
-      return r.isConnected ? et(r, o) : setTimeout(() => {
-        et(r, o);
+      const e = super.add(t), r = O.get(this), o = `state${t}`;
+      return r.isConnected ? it(r, o) : setTimeout(() => {
+        it(r, o);
       }), e;
@@ -278,3 +278,3 @@ }
     delete(t) {
-      const e = super.delete(t), r = $.get(this);
+      const e = super.delete(t), r = O.get(this);
       return r.isConnected ? (r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`)) : setTimeout(() => {
@@ -285,3 +285,3 @@ r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`);
   }
-  function it(i, t, e, r) {
+  function rt(i, t, e, r) {
     if (e === "a" && !r)
@@ -293,3 +293,3 @@ throw new TypeError("Private accessor was defined without a getter");
   }
-  function bt(i, t, e, r, o) {
+  function ft(i, t, e, r, o) {
     if (r === "m")
@@ -304,5 +304,5 @@ throw new TypeError("Private method is not writable");
   var C;
-  class ft {
+  class gt {
     constructor(t) {
-      C.set(this, void 0), bt(this, C, t, "f");
+      C.set(this, void 0), ft(this, C, t, "f");
       for (let e = 0; e < t.length; e++) {
@@ -315,6 +315,6 @@ let r = t[e];
     get length() {
-      return it(this, C, "f").length;
+      return rt(this, C, "f").length;
     }
     [(C = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-      return it(this, C, "f")[Symbol.iterator]();
+      return rt(this, C, "f")[Symbol.iterator]();
     }
@@ -328,3 +328,3 @@ item(t) {
   }
-  function gt() {
+  function yt() {
     const i = HTMLFormElement.prototype.checkValidity;
@@ -336,7 +336,7 @@ HTMLFormElement.prototype.checkValidity = e;
       let n = i.apply(this, l);
-      return Z(this, n, "checkValidity");
+      return tt(this, n, "checkValidity");
     }
     function r(...l) {
       let n = t.apply(this, l);
-      return Z(this, n, "reportValidity");
+      return tt(this, n, "reportValidity");
     }
@@ -349,8 +349,8 @@ const { get: o } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
           return n;
-        const v = Array.from(n).concat(b).sort((E, w) => E.compareDocumentPosition ? E.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
-        return new ft(v);
+        const d = Array.from(n).concat(b).sort((E, w) => E.compareDocumentPosition ? E.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
+        return new gt(d);
       }
     });
   }
-  class rt {
+  class ot {
     static get isPolyfilled() {
@@ -362,7 +362,7 @@ return !0;
         throw new TypeError("Illegal constructor");
-      const e = t.getRootNode(), r = new ht();
-      this.states = new V(t), u.set(this, t), s.set(this, r), c.set(t, this), ot(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && nt(e);
+      const e = t.getRootNode(), r = new mt();
+      this.states = new V(t), p.set(this, t), s.set(this, r), c.set(t, this), at(t, this), lt(t, this), Object.seal(this), e instanceof DocumentFragment && st(e);
     }
     checkValidity() {
-      const t = u.get(this);
+      const t = p.get(this);
       if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
@@ -382,3 +382,3 @@ return !0;
     get form() {
-      const t = u.get(this);
+      const t = p.get(this);
       x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
@@ -389,3 +389,3 @@ let e;
     get labels() {
-      const t = u.get(this);
+      const t = p.get(this);
       x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
@@ -396,6 +396,6 @@ const e = t.getAttribute("id"), r = t.getRootNode();
     reportValidity() {
-      const t = u.get(this);
+      const t = p.get(this);
       if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
         return !0;
-      const e = this.checkValidity(), r = B.get(this);
+      const e = this.checkValidity(), r = K.get(this);
       if (r && !t.constructor.formAssociated)
@@ -406,6 +406,6 @@ throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
     setFormValue(t) {
-      const e = u.get(this);
-      if (x(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), J(this), t != null && !(t instanceof FormData)) {
+      const e = p.get(this);
+      if (x(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Q(this), t != null && !(t instanceof FormData)) {
         if (e.getAttribute("name")) {
-          const r = Q(e, this);
+          const r = X(e, this);
           r.value = t;
@@ -416,3 +416,3 @@ }
           if (typeof o == "string") {
-            const l = Q(e, this);
+            const l = X(e, this);
             l.name = r, l.value = o;
@@ -424,35 +424,35 @@ }
     setValidity(t, e, r) {
-      const o = u.get(this);
+      const o = p.get(this);
       if (x(o, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
         throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
-      B.set(this, r);
+      K.set(this, r);
       const l = s.get(this), n = {};
       for (const E in t)
         n[E] = t[E];
-      Object.keys(n).length === 0 && mt(l);
+      Object.keys(n).length === 0 && pt(l);
       const b = { ...l, ...n };
       delete b.valid;
-      const { valid: v } = pt(l, b, this.form);
-      if (!v && !e)
+      const { valid: d } = ut(l, b, this.form);
+      if (!d && !e)
         throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
-      h.set(this, v ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !v), o.toggleAttribute("internals-valid", v), o.setAttribute("aria-invalid", `${!v}`)) : A.set(o, this);
+      u.set(this, d ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !d), o.toggleAttribute("internals-valid", d), o.setAttribute("aria-invalid", `${!d}`)) : F.set(o, this);
     }
     get shadowRoot() {
-      const t = u.get(this), e = H.get(t);
+      const t = p.get(this), e = B.get(t);
       return e || null;
     }
     get validationMessage() {
-      const t = u.get(this);
-      return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), h.get(this);
+      const t = p.get(this);
+      return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), u.get(this);
     }
     get validity() {
-      const t = u.get(this);
+      const t = p.get(this);
       return x(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), s.get(this);
     }
     get willValidate() {
-      const t = u.get(this);
+      const t = p.get(this);
       return x(t, "Failed to read the 'willValidate' property from 'ElementInternals': The target element is not a form-associated custom element."), !(t.disabled || t.hasAttribute("disabled") || t.hasAttribute("readonly"));
     }
   }
-  function yt() {
+  function wt() {
     if (typeof window > "u" || !window.ElementInternals || !HTMLElement.prototype.attachInternals)
@@ -481,3 +481,3 @@ return !1;
   }
-  if (yt()) {
+  if (wt()) {
     if (typeof window < "u" && !window.CustomStateSet) {
@@ -492,3 +492,3 @@ window.CustomStateSet = V;
   } else {
-    if (typeof window < "u" && (window.ElementInternals = rt), typeof CustomElementRegistry < "u") {
+    if (typeof window < "u" && (window.ElementInternals = ot), typeof CustomElementRegistry < "u") {
       const i = CustomElementRegistry.prototype.define;
@@ -499,3 +499,3 @@ CustomElementRegistry.prototype.define = function(t, e, r) {
           e.prototype.connectedCallback = function() {
-            q.has(this) || (q.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), o != null && o.apply(this), tt(this);
+            U.has(this) || (U.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), et(this);
           };
@@ -514,9 +514,9 @@ }
         throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
-      return new rt(this);
+      return new ot(this);
     }), typeof Element < "u") {
       let i = function(...e) {
         const r = t.apply(this, e);
-        if (H.set(this, r), T()) {
-          const o = new MutationObserver(_);
-          window.ShadyDOM ? o.observe(this, P) : o.observe(r, P), g.set(this, o);
+        if (B.set(this, r), T()) {
+          const o = new MutationObserver(P);
+          window.ShadyDOM ? o.observe(this, D) : o.observe(r, D), g.set(this, o);
         }
@@ -528,12 +528,12 @@ return r;
     }
-    T() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, P), typeof HTMLFormElement < "u" && gt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
+    T() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, D), typeof HTMLFormElement < "u" && yt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
   }
 })();
-var St = Object.defineProperty, It = Object.getOwnPropertyDescriptor, m = (u, s, a, c) => {
-  for (var h = c > 1 ? void 0 : c ? It(s, a) : s, f = u.length - 1, g; f >= 0; f--)
-    (g = u[f]) && (h = (c ? g(s, a, h) : g(h)) || h);
-  return c && h && St(s, a, h), h;
+var St = Object.defineProperty, At = Object.getOwnPropertyDescriptor, m = (p, s, a, c) => {
+  for (var u = c > 1 ? void 0 : c ? At(s, a) : s, f = p.length - 1, g; f >= 0; f--)
+    (g = p[f]) && (u = (c ? g(s, a, u) : g(u)) || u);
+  return c && u && St(s, a, u), u;
 };
 const L = "pie-button";
-class d extends xt {
+class v extends Et {
   constructor() {
@@ -563,6 +563,4 @@ super(), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this.isResponsive = !1, this._handleFormKeyDown = (s) => {
   updated(s) {
-    var c, h;
-    super.updated(s);
-    const [a] = this._iconSlotElement;
-    a && (this.size === "xsmall" && a.setAttribute("size", "xs"), (this.size === "small-expressive" || this.size === "small-productive") && a.setAttribute("size", "s"), (this.size === "medium" || this.size === "large") && a.setAttribute("size", "m")), s.has("type") && (this.type === "submit" ? (c = this.form) == null || c.addEventListener("keydown", this._handleFormKeyDown) : (h = this.form) == null || h.removeEventListener("keydown", this._handleFormKeyDown));
+    var a, c;
+    super.updated(s), s.has("type") && (this.type === "submit" ? (a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown) : (c = this.form) == null || c.removeEventListener("keydown", this._handleFormKeyDown));
   }
@@ -592,7 +590,7 @@ /**
   renderSpinner() {
-    const { size: s, variant: a, disabled: c } = this, h = s.includes("small") ? "small" : "medium";
+    const { size: s, variant: a, disabled: c } = this, u = s && s.includes("small") ? "small" : "medium";
     let f;
     return c ? f = a === "ghost-inverse" ? "inverse" : "secondary" : f = ["primary", "destructive", "outline-inverse", "ghost-inverse"].includes(this.variant) ? "inverse" : "secondary", N`
                     <pie-spinner
-                        size="${h}"
+                        size="${u}"
                         variant="${f}">
@@ -606,3 +604,3 @@ </pie-spinner>`;
       isFullWidth: c,
-      variant: h,
+      variant: u,
       size: f,
@@ -612,3 +610,3 @@ isLoading: g,
       iconPlacement: M,
-      responsiveSize: z
+      responsiveSize: k
     } = this;
@@ -619,6 +617,6 @@ return N`
                 class="o-btn"
-                type=${s}
-                variant=${h}
-                size=${f}
-                responsiveSize=${zt(z)}
+                type=${R(s)}
+                variant=${R(u)}
+                size=${R(f)}
+                responsiveSize=${R(k)}
                 ?disabled=${a}
@@ -628,6 +626,6 @@ ?isFullWidth=${c}
                 ?isLoading=${g}>
-                    ${g ? this.renderSpinner() : W}
-                    ${M === "leading" ? N`<slot name="icon"></slot>` : W}
+                    ${g ? this.renderSpinner() : H}
+                    ${M === "leading" ? N`<slot name="icon"></slot>` : H}
                     <slot></slot>
-                    ${M === "trailing" ? N`<slot name="icon"></slot>` : W}
+                    ${M === "trailing" ? N`<slot name="icon"></slot>` : H}
             </button>`;
@@ -640,70 +638,67 @@ }
 }
-d.formAssociated = !0;
-d.styles = wt(Ft);
+v.formAssociated = !0;
+v.styles = xt(Ft);
 m([
-  p(),
-  R(L, Mt, "medium")
-], d.prototype, "size", 2);
+  h(),
+  _(L, zt, "medium")
+], v.prototype, "size", 2);
 m([
-  p(),
-  R(L, Ct, "submit")
-], d.prototype, "type", 2);
+  h(),
+  _(L, Mt, "submit")
+], v.prototype, "type", 2);
 m([
-  p(),
-  R(L, Lt, "primary")
-], d.prototype, "variant", 2);
+  h(),
+  _(L, Ct, "primary")
+], v.prototype, "variant", 2);
 m([
-  p({ type: String }),
-  R(L, At, "leading")
-], d.prototype, "iconPlacement", 2);
+  h({ type: String }),
+  _(L, Lt, "leading")
+], v.prototype, "iconPlacement", 2);
 m([
-  p({ type: Boolean })
-], d.prototype, "disabled", 2);
+  h({ type: Boolean })
+], v.prototype, "disabled", 2);
 m([
-  p({ type: Boolean, reflect: !0 })
-], d.prototype, "isLoading", 2);
+  h({ type: Boolean, reflect: !0 })
+], v.prototype, "isLoading", 2);
 m([
-  p({ type: Boolean })
-], d.prototype, "isFullWidth", 2);
+  h({ type: Boolean })
+], v.prototype, "isFullWidth", 2);
 m([
-  p({ type: Boolean })
-], d.prototype, "isResponsive", 2);
+  h({ type: Boolean })
+], v.prototype, "isResponsive", 2);
 m([
-  p({ type: String })
-], d.prototype, "name", 2);
+  h({ type: String })
+], v.prototype, "name", 2);
 m([
-  p({ type: String })
-], d.prototype, "value", 2);
+  h({ type: String })
+], v.prototype, "value", 2);
 m([
-  p()
-], d.prototype, "formaction", 2);
+  h()
+], v.prototype, "formaction", 2);
 m([
-  p()
-], d.prototype, "formenctype", 2);
+  h()
+], v.prototype, "formenctype", 2);
 m([
-  p()
-], d.prototype, "formmethod", 2);
+  h()
+], v.prototype, "formmethod", 2);
 m([
-  p({ type: Boolean })
-], d.prototype, "formnovalidate", 2);
+  h({ type: Boolean })
+], v.prototype, "formnovalidate", 2);
 m([
-  p()
-], d.prototype, "formtarget", 2);
+  h()
+], v.prototype, "formtarget", 2);
 m([
-  p({ type: String })
-], d.prototype, "responsiveSize", 2);
-m([
-  Et({ slot: "icon" })
-], d.prototype, "_iconSlotElement", 2);
-kt(L, d);
+  h({ type: String })
+], v.prototype, "responsiveSize", 2);
+kt(L, v);
 export {
-  d as PieButton,
-  Dt as formEncodingtypes,
-  $t as formMethodTypes,
-  Ot as formTargetTypes,
-  At as iconPlacements,
-  Pt as responsiveSizes,
-  Mt as sizes,
-  Ct as types,
-  Lt as variants
+  v as PieButton,
+  Pt as formEncodingtypes,
+  Dt as formMethodTypes,
+  $t as formTargetTypes,
+  Lt as iconPlacements,
+  _t as responsiveSizes,
+  zt as sizes,
+  Mt as types,
+  Ct as variants
 };

dist/react.d.ts

 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { PropertyValues } from 'lit';
-import type { ReactWebComponent } from '@lit/react';
+import * as React_2 from 'react';
 import type { TemplateResult } from 'lit';
@@ -11,11 +11,11 @@
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
     /**
      * What type attribute should be applied to the button. For example submit, button.
      */
-    type: typeof types[number];
+    type?: typeof types[number];
     /**
      * What style variant the button should be such as primary, outline or ghost.
      */
-    variant: Variant;
+    variant?: Variant;
     /**
@@ -28,15 +28,15 @@ * The placement of the icon slot, if provided, such as leading or trailing
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * When true, the button element will occupy the full width of its container.
      */
-    isFullWidth: boolean;
+    isFullWidth?: boolean;
     /**
      * When true, displays a loading indicator inside the button.
      */
-    isLoading: boolean;
+    isLoading?: boolean;
     /**
      * When true, enables the responsive size feature.
      */
-    isResponsive: boolean;
+    isResponsive?: boolean;
     /**
@@ -94,3 +94,3 @@ * The name of the button, submitted as a pair with the button's value as part of the form data, when that button is used to submit the form.
 
-export declare const PieButton: ReactWebComponent<PieButton_2, {}>;
+export declare const PieButton: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<PieButton_2> & ReactBaseType>;
 
@@ -126,3 +126,2 @@ /**
     responsiveSize?: ButtonProps['responsiveSize'];
-    _iconSlotElement: Array<HTMLElement>;
     /**
@@ -150,2 +149,4 @@ * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
 
+declare type ReactBaseType = Pick<React_2.AllHTMLAttributes<HTMLElement>, 'children' | 'onClick'>;
+
 export declare const responsiveSizes: readonly ["productive", "expressive"];
@@ -152,0 +153,0 @@

dist/react.js

 import * as t from "react";
 import { createComponent as e } from "@lit/react";
 import { PieButton as o } from "./index.js";
-import { formEncodingtypes as y, formMethodTypes as P, formTargetTypes as l, iconPlacements as B, responsiveSizes as d, sizes as g, types as v, variants as T } from "./index.js";
+import { formEncodingtypes as y, formMethodTypes as B, formTargetTypes as l, iconPlacements as d, responsiveSizes as g, sizes as v, types as T, variants as x } from "./index.js";
 import "lit";
@@ -10,3 +10,3 @@ import "lit/decorators.js";
 import "@justeattakeaway/pie-spinner";
-const c = e({
+const r = e({
   displayName: "PieButton",
@@ -17,13 +17,13 @@ elementClass: o,
   events: {}
-});
+}), f = r;
 export {
-  c as PieButton,
+  f as PieButton,
   y as formEncodingtypes,
-  P as formMethodTypes,
+  B as formMethodTypes,
   l as formTargetTypes,
-  B as iconPlacements,
-  d as responsiveSizes,
-  g as sizes,
-  v as types,
-  T as variants
+  d as iconPlacements,
+  g as responsiveSizes,
+  v as sizes,
+  T as types,
+  x as variants
 };

package.json

 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.0.0-snapshot-release-20240102144723",
+  "version": "0.0.0-snapshot-release-20240102161022",
   "description": "PIE design system button built using web components",
@@ -40,3 +40,3 @@ "type": "module",
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "0.3.1",
+    "@justeattakeaway/pie-spinner": "0.0.0-snapshot-release-20240102161022",
     "@justeattakeaway/pie-webc-core": "0.13.0",
@@ -43,0 +43,0 @@ "element-internals-polyfill": "1.3.9"

src/defs.ts

@@ -20,11 +20,11 @@ export const sizes = ['xsmall', 'small-productive', 'small-expressive', 'medium', 'large'] as const;
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
     /**
      * What type attribute should be applied to the button. For example submit, button.
      */
-    type: typeof types[number];
+    type?: typeof types[number];
     /**
      * What style variant the button should be such as primary, outline or ghost.
      */
-    variant: Variant;
+    variant?: Variant;
     /**
@@ -37,11 +37,11 @@ * The placement of the icon slot, if provided, such as leading or trailing
      */
-    disabled: boolean;
+    disabled?: boolean;
     /**
      * When true, the button element will occupy the full width of its container.
      */
-    isFullWidth: boolean;
+    isFullWidth?: boolean;
     /**
      * When true, displays a loading indicator inside the button.
      */
-    isLoading: boolean;
+    isLoading?: boolean;
 
@@ -51,3 +51,3 @@ /**
      */
-    isResponsive: boolean;
+    isResponsive?: boolean;
 
@@ -54,0 +54,0 @@ /**

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';
@@ -58,18 +58,2 @@ import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 
-        // Making sure that icon passed in a slot has the correct icon size
-        const [iconElement] = this._iconSlotElement;
-
-        if (iconElement) {
-            if (this.size === 'xsmall') {
-                iconElement.setAttribute('size', 'xs');
-            }
-            if (this.size === 'small-expressive' || this.size === 'small-productive') {
-                iconElement.setAttribute('size', 's');
-            }
-
-            if (this.size === 'medium' || this.size === 'large') {
-                iconElement.setAttribute('size', 'm');
-            }
-        }
-
         if (changedProperties.has('type')) {
@@ -137,5 +121,2 @@ // If the new type is "submit", add the keydown event listener
 
-    @queryAssignedElements({ slot: 'icon' })
-        _iconSlotElement!: Array<HTMLElement>;
-
     /**
@@ -235,3 +216,3 @@ * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
         const { size, variant, disabled } = this;
-        const spinnerSize = size.includes('small') ? 'small' : 'medium'; // includes("small") matches for any small size value and xsmall
+        const spinnerSize = size && size.includes('small') ? 'small' : 'medium'; // includes("small") matches for any small size value and xsmall
         let spinnerVariant;
@@ -269,5 +250,5 @@ if (disabled) {
                 class="o-btn"
-                type=${type}
-                variant=${variant}
-                size=${size}
+                type=${ifDefined(type)}
+                variant=${ifDefined(variant)}
+                size=${ifDefined(size)}
                 responsiveSize=${ifDefined(responsiveSize)}
@@ -274,0 +255,0 @@ ?disabled=${disabled}

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

Number of package files

11

increased by10%

Worsened metrics

Total package byte prevSize

77347

decreased by-0.99%

Lines of code

1342

decreased by-1.47%

Dependency changes

• + Added@justeattakeaway/pie-spinner@0.0.0-snapshot-release-20240102161022(transitive)

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

• Updated@justeattakeaway/pie-spinner@0.0.0-snapshot-release-20240102161022