@justeattakeaway/pie-button - npm Package Compare versions

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

custom-elements.json

@@ -78,2 +78,10 @@ {
           "default": "['_self', '_blank', '_parent', '_top']"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    size: 'medium',\n    type:  'submit',\n    variant: 'primary',\n    iconPlacement: 'leading',\n    disabled: false,\n    isLoading: false,\n    isFullWidth: false,\n    isResponsive: false,\n}"
         }
@@ -145,2 +153,10 @@ ],
           }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
         }
@@ -175,3 +191,2 @@ ]
               "privacy": "public",
-              "default": "'medium'",
               "attribute": "size"
@@ -186,3 +201,2 @@ },
               "privacy": "public",
-              "default": "'submit'",
               "attribute": "type"
@@ -197,3 +211,2 @@ },
               "privacy": "public",
-              "default": "'primary'",
               "attribute": "variant"
@@ -208,3 +221,2 @@ },
               "privacy": "public",
-              "default": "'leading'",
               "attribute": "iconPlacement"
@@ -215,7 +227,3 @@ },
               "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "disabled"
@@ -226,7 +234,3 @@ },
               "name": "isLoading",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isLoading",
@@ -238,7 +242,3 @@ "reflects": true
               "name": "isFullWidth",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isFullWidth"
@@ -249,7 +249,3 @@ },
               "name": "isResponsive",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isResponsive"
@@ -375,3 +371,2 @@ },
               },
-              "default": "'medium'",
               "fieldName": "size"
@@ -384,3 +379,2 @@ },
               },
-              "default": "'submit'",
               "fieldName": "type"
@@ -393,3 +387,2 @@ },
               },
-              "default": "'primary'",
               "fieldName": "variant"
@@ -402,3 +395,2 @@ },
               },
-              "default": "'leading'",
               "fieldName": "iconPlacement"
@@ -408,6 +400,2 @@ },
               "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "disabled"
@@ -417,6 +405,2 @@ },
               "name": "isLoading",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isLoading"
@@ -426,6 +410,2 @@ },
               "name": "isFullWidth",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isFullWidth"
@@ -435,6 +415,2 @@ },
               "name": "isResponsive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isResponsive"
@@ -441,0 +417,0 @@ },

dist/index.d.ts

@@ -0,1 +1,2 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
@@ -85,2 +86,6 @@ import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<ButtonProps, 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isLoading' | 'isFullWidth' | 'isResponsive'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const formEncodingtypes: readonly ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"];
@@ -87,0 +92,0 @@

dist/index.js

@@ -1,7 +0,7 @@
-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 O, defineCustomElement as Lt } from "@justeattakeaway/pie-webc-core";
+import { LitElement as Ct, html as N, nothing as K, unsafeCSS as Ft } from "lit";
+import { property as p } from "lit/decorators.js";
+import { ifDefined as Lt } from "lit/directives/if-defined.js";
+import { FormControlMixin as St, validPropertyValues as R, defineCustomElement as At } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-spinner";
-const At = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Bt = ["productive", "expressive"], It = ["submit", "button", "reset"], Tt = [
+const It = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Kt = ["productive", "expressive"], Tt = ["submit", "button", "reset"], Vt = [
   "primary",
@@ -16,7 +16,16 @@ "secondary",
   "destructive-ghost"
-], Vt = ["leading", "trailing"], Kt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], jt = ["post", "get", "dialog"], Ut = ["_self", "_blank", "_parent", "_top"], Nt = `*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}
+], Pt = ["leading", "trailing"], Ut = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], qt = ["post", "get", "dialog"], jt = ["_self", "_blank", "_parent", "_top"], b = {
+  size: "medium",
+  type: "submit",
+  variant: "primary",
+  iconPlacement: "leading",
+  disabled: !1,
+  isLoading: !1,
+  isFullWidth: !1,
+  isResponsive: !1
+}, Nt = `*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-l-family);--btn-font-weight: var(--dt-font-interactive-l-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)}
 `;
 (function() {
-  (function(E) {
-    const a = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), L = {
+  (function(k) {
+    const a = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), g = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), U = /* @__PURE__ */ new WeakMap(), q = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), I = {
       ariaAtomic: "aria-atomic",
@@ -31,3 +40,2 @@ ariaAutoComplete: "aria-autocomplete",
       ariaCurrent: "aria-current",
-      ariaDescription: "aria-description",
       ariaDisabled: "aria-disabled",
@@ -65,7 +73,7 @@ ariaExpanded: "aria-expanded",
       role: "role"
-    }, ct = (e, t) => {
-      for (let i in L) {
+    }, dt = (e, t) => {
+      for (let i in I) {
         t[i] = null;
         let r = null;
-        const o = L[i];
+        const o = I[i];
         Object.defineProperty(t, i, {
@@ -81,7 +89,7 @@ get() {
     };
-    function G(e) {
+    function J(e) {
       const t = c.get(e), { form: i } = t;
-      tt(e, i, t), Z(e, t.labels);
+      et(e, i, t), tt(e, t.labels);
     }
-    const J = (e, t = !1) => {
+    const Q = (e, t = !1) => {
       const i = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT, {
@@ -95,8 +103,8 @@ acceptNode(s) {
       for (; r; )
-        r.formDisabledCallback && o && R(r, e.disabled), r = i.nextNode();
-    }, Q = { attributes: !0, attributeFilter: ["disabled", "name"] }, A = V() ? new MutationObserver((e) => {
+        r.formDisabledCallback && o && O(r, e.disabled), r = i.nextNode();
+    }, X = { attributes: !0, attributeFilter: ["disabled", "name"] }, z = P() ? new MutationObserver((e) => {
       for (const t of e) {
         const i = t.target;
-        if (t.attributeName === "disabled" && (i.constructor.formAssociated ? R(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && J(i)), t.attributeName === "name" && i.constructor.formAssociated) {
-          const r = c.get(i), o = C.get(i);
+        if (t.attributeName === "disabled" && (i.constructor.formAssociated ? O(i, i.hasAttribute("disabled")) : i.localName === "fieldset" && Q(i)), t.attributeName === "name" && i.constructor.formAssociated) {
+          const r = c.get(i), o = L.get(i);
           r.setFormValue(o);
@@ -106,3 +114,3 @@ }
     }) : {};
-    function P(e) {
+    function _(e) {
       e.forEach((t) => {
@@ -112,60 +120,60 @@ const { addedNodes: i, removedNodes: r } = t, o = Array.from(i), s = Array.from(r);
           var u;
-          if (c.has(l) && l.constructor.formAssociated && G(l), S.has(l)) {
+          if (c.has(l) && l.constructor.formAssociated && J(l), S.has(l)) {
             const d = S.get(l);
-            Object.keys(L).filter((g) => d[g] !== null).forEach((g) => {
-              l.setAttribute(L[g], d[g]);
+            Object.keys(I).filter((y) => d[y] !== null).forEach((y) => {
+              l.setAttribute(I[y], d[y]);
             }), S.delete(l);
           }
-          if (F.has(l)) {
-            const d = F.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()), F.delete(l);
+          if (A.has(l)) {
+            const d = A.get(l);
+            l.setAttribute("internals-valid", d.validity.valid.toString()), l.setAttribute("internals-invalid", (!d.validity.valid).toString()), l.setAttribute("aria-invalid", (!d.validity.valid).toString()), A.delete(l);
           }
           if (l.localName === "form") {
-            const d = b.get(l), x = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
-              acceptNode(H) {
-                return c.has(H) && H.constructor.formAssociated && !(d && d.has(H)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+            const d = g.get(l), E = document.createTreeWalker(l, NodeFilter.SHOW_ELEMENT, {
+              acceptNode(B) {
+                return c.has(B) && B.constructor.formAssociated && !(d && d.has(B)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
               }
             });
-            let g = x.nextNode();
-            for (; g; )
-              G(g), g = x.nextNode();
+            let y = E.nextNode();
+            for (; y; )
+              J(y), y = E.nextNode();
           }
-          l.localName === "fieldset" && ((u = A.observe) === null || u === void 0 || u.call(A, l, Q), J(l, !0));
+          l.localName === "fieldset" && ((u = z.observe) == null || u.call(z, l, X), Q(l, !0));
         }), s.forEach((l) => {
           const u = c.get(l);
-          u && h.get(u) && X(u), k.has(l) && k.get(l).disconnect();
+          u && h.get(u) && Y(u), M.has(l) && M.get(l).disconnect();
         });
       });
     }
-    function dt(e) {
+    function vt(e) {
       e.forEach((t) => {
         const { removedNodes: i } = t;
         i.forEach((r) => {
-          const o = U.get(t.target);
-          c.has(r) && it(r), o.disconnect();
+          const o = j.get(t.target);
+          c.has(r) && rt(r), o.disconnect();
         });
       });
     }
-    const vt = (e) => {
-      var t, i;
-      const r = new MutationObserver(dt);
-      !((t = window == null ? void 0 : window.ShadyDOM) === null || t === void 0) && t.inUse && e.mode && e.host && (e = e.host), (i = r.observe) === null || i === void 0 || i.call(r, e, { childList: !0 }), U.set(e, r);
+    const ht = (e) => {
+      var i, r;
+      const t = new MutationObserver(vt);
+      (i = window == null ? void 0 : window.ShadyDOM) != null && i.inUse && e.mode && e.host && (e = e.host), (r = t.observe) == null || r.call(t, e, { childList: !0 }), j.set(e, t);
     };
-    V() && new MutationObserver(P);
-    const _ = {
+    P() && new MutationObserver(_);
+    const D = {
       childList: !0,
       subtree: !0
-    }, R = (e, t) => {
+    }, O = (e, t) => {
       e.toggleAttribute("internals-disabled", t), t ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), e.formDisabledCallback && e.formDisabledCallback.apply(e, [t]);
-    }, X = (e) => {
+    }, Y = (e) => {
       h.get(e).forEach((i) => {
         i.remove();
       }), h.set(e, []);
-    }, Y = (e, t) => {
+    }, Z = (e, t) => {
       const i = document.createElement("input");
       return i.type = "hidden", i.name = e.getAttribute("name"), e.after(i), h.get(t).push(i), i;
-    }, ht = (e, t) => {
+    }, pt = (e, t) => {
       var i;
-      h.set(t, []), (i = A.observe) === null || i === void 0 || i.call(A, e, Q);
-    }, Z = (e, t) => {
+      h.set(t, []), (i = z.observe) == null || i.call(z, e, X);
+    }, tt = (e, t) => {
       if (t.length) {
@@ -176,14 +184,14 @@ Array.from(t).forEach((r) => r.addEventListener("click", e.click.bind(e)));
       }
-    }, I = (e) => {
-      const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = b.get(e) || [], r = Array.from(i).filter((s) => s.isConnected).map((s) => c.get(s).validity.valid), o = [...t, ...r].includes(!1);
+    }, T = (e) => {
+      const t = Array.from(e.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), i = g.get(e) || [], r = Array.from(i).filter((s) => s.isConnected).map((s) => c.get(s).validity.valid), o = [...t, ...r].includes(!1);
       e.toggleAttribute("internals-invalid", o), e.toggleAttribute("internals-valid", !o);
     }, mt = (e) => {
-      I(T(e.target));
-    }, pt = (e) => {
-      I(T(e.target));
+      T(V(e.target));
     }, ut = (e) => {
+      T(V(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(",");
       e.addEventListener("click", (i) => {
         if (i.target.closest(t)) {
-          const o = b.get(e);
+          const o = g.get(e);
           if (e.noValidate)
@@ -194,10 +202,10 @@ return;
       });
-    }, ft = (e) => {
-      const t = b.get(e.target);
+    }, bt = (e) => {
+      const t = g.get(e.target);
       t && t.size && t.forEach((i) => {
         i.constructor.formAssociated && i.formResetCallback && i.formResetCallback.apply(i);
       });
-    }, tt = (e, t, i) => {
+    }, et = (e, t, i) => {
       if (t) {
-        const r = b.get(t);
+        const r = g.get(t);
         if (r)
@@ -207,29 +215,29 @@ r.add(e);
           const o = /* @__PURE__ */ new Set();
-          o.add(e), b.set(t, o), ut(t), t.addEventListener("reset", ft), t.addEventListener("input", mt), t.addEventListener("change", pt);
+          o.add(e), g.set(t, o), ft(t), t.addEventListener("reset", bt), t.addEventListener("input", mt), t.addEventListener("change", ut);
         }
-        y.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
+        w.set(t, { ref: e, internals: i }), e.constructor.formAssociated && e.formAssociatedCallback && setTimeout(() => {
           e.formAssociatedCallback.apply(e, [t]);
-        }, 0), I(t);
+        }, 0), T(t);
       }
-    }, T = (e) => {
+    }, V = (e) => {
       let t = e.parentNode;
-      return t && t.tagName !== "FORM" && (t = T(t)), t;
-    }, w = (e, t, i = DOMException) => {
+      return t && t.tagName !== "FORM" && (t = V(t)), t;
+    }, x = (e, t, i = DOMException) => {
       if (!e.constructor.formAssociated)
         throw new i(t);
-    }, et = (e, t, i) => {
-      const r = b.get(e);
+    }, it = (e, t, i) => {
+      const r = g.get(e);
       return r && r.size && r.forEach((o) => {
         c.get(o)[i]() || (t = !1);
       }), t;
-    }, it = (e) => {
+    }, rt = (e) => {
       if (e.constructor.formAssociated) {
         const t = c.get(e), { labels: i, form: r } = t;
-        Z(e, i), tt(e, r, t);
+        tt(e, i), et(e, r, t);
       }
     };
-    function V() {
+    function P() {
       return typeof MutationObserver < "u";
     }
-    class bt {
+    class gt {
       constructor() {
@@ -239,3 +247,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 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) => {
+    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 && T(i), e), xt = (e) => {
       let t = !0;
@@ -245,4 +253,4 @@ for (let i in e)
       return t;
-    }, D = /* @__PURE__ */ new WeakMap();
-    function rt(e, t) {
+    }, W = /* @__PURE__ */ new WeakMap();
+    function ot(e, t) {
       e.toggleAttribute(t, !0), e.part && e.part.add(t);
@@ -257,3 +265,3 @@ }
           throw new TypeError("Illegal constructor");
-        D.set(this, t);
+        W.set(this, t);
       }
@@ -263,5 +271,5 @@ add(t) {
           throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
-        const i = super.add(t), r = D.get(this), o = `state${t}`;
-        return r.isConnected ? rt(r, o) : setTimeout(() => {
-          rt(r, o);
+        const i = super.add(t), r = W.get(this), o = `state${t}`;
+        return r.isConnected ? ot(r, o) : setTimeout(() => {
+          ot(r, o);
         }), i;
@@ -275,3 +283,3 @@ }
       delete(t) {
-        const i = super.delete(t), r = D.get(this);
+        const i = super.delete(t), r = W.get(this);
         return r.isConnected ? (r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`)) : setTimeout(() => {
@@ -282,3 +290,3 @@ r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`);
     }
-    function ot(e, t, i, r) {
+    function at(e, t, i, r) {
       if (i === "a" && !r)
@@ -290,3 +298,3 @@ throw new TypeError("Private accessor was defined without a getter");
     }
-    function xt(e, t, i, r, o) {
+    function Et(e, t, i, r, o) {
       if (r === "m")
@@ -300,6 +308,6 @@ throw new TypeError("Private method is not writable");
     }
-    var M;
-    class Et {
+    var C;
+    class kt {
       constructor(t) {
-        M.set(this, void 0), xt(this, M, t, "f");
+        C.set(this, void 0), Et(this, C, t, "f");
         for (let i = 0; i < t.length; i++) {
@@ -312,6 +320,6 @@ let r = t[i];
       get length() {
-        return ot(this, M, "f").length;
+        return at(this, C, "f").length;
       }
-      [(M = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-        return ot(this, M, "f")[Symbol.iterator]();
+      [(C = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+        return at(this, C, "f")[Symbol.iterator]();
       }
@@ -325,3 +333,3 @@ item(t) {
     }
-    function kt() {
+    function zt() {
       const e = HTMLFormElement.prototype.checkValidity;
@@ -333,7 +341,7 @@ HTMLFormElement.prototype.checkValidity = i;
         let l = e.apply(this, s);
-        return et(this, l, "checkValidity");
+        return it(this, l, "checkValidity");
       }
       function r(...s) {
         let l = t.apply(this, s);
-        return et(this, l, "reportValidity");
+        return it(this, l, "reportValidity");
       }
@@ -343,11 +351,11 @@ const { get: o } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
         get(...s) {
-          const l = o.call(this, ...s), u = Array.from(b.get(this) || []);
+          const l = o.call(this, ...s), u = Array.from(g.get(this) || []);
           if (u.length === 0)
             return l;
-          const d = Array.from(l).concat(u).sort((x, g) => x.compareDocumentPosition ? x.compareDocumentPosition(g) & 2 ? 1 : -1 : 0);
-          return new Et(d);
+          const d = Array.from(l).concat(u).sort((E, y) => E.compareDocumentPosition ? E.compareDocumentPosition(y) & 2 ? 1 : -1 : 0);
+          return new kt(d);
         }
       });
     }
-    class at {
+    class nt {
       static get isPolyfilled() {
@@ -359,8 +367,8 @@ return !0;
           throw new TypeError("Illegal constructor");
-        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);
+        const i = t.getRootNode(), r = new gt();
+        this.states = new $(t), a.set(this, t), n.set(this, r), c.set(t, this), dt(t, this), pt(t, this), Object.seal(this), i instanceof DocumentFragment && ht(i);
       }
       checkValidity() {
         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)
+        if (x(t, "Failed to execute 'checkValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
@@ -380,9 +388,9 @@ const i = 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.");
+        x(t, "Failed to read the 'form' property from 'ElementInternals': The target element is not a form-associated custom element.");
         let i;
-        return t.constructor.formAssociated === !0 && (i = T(t)), i;
+        return t.constructor.formAssociated === !0 && (i = V(t)), i;
       }
       get labels() {
         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.");
+        x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
         const i = t.getAttribute("id"), r = t.getRootNode();
@@ -393,5 +401,5 @@ return r && i ? r.querySelectorAll(`[for="${i}"]`) : [];
         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)
+        if (x(t, "Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !this.willValidate)
           return !0;
-        const i = this.checkValidity(), r = j.get(this);
+        const i = this.checkValidity(), r = q.get(this);
         if (r && !t.constructor.formAssociated)
@@ -403,5 +411,5 @@ throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
         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)) {
+        if (x(i, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), Y(this), t != null && !(t instanceof FormData)) {
           if (i.getAttribute("name")) {
-            const r = Y(i, this);
+            const r = Z(i, this);
             r.value = t;
@@ -412,26 +420,26 @@ }
             if (typeof o == "string") {
-              const s = Y(i, this);
+              const s = Z(i, this);
               s.name = r, s.value = o;
             }
           });
-        C.set(i, t);
+        L.set(i, t);
       }
       setValidity(t, i, r) {
         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)
+        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.");
-        j.set(this, r);
+        q.set(this, r);
         const s = n.get(this), l = {};
-        for (const x in t)
-          l[x] = t[x];
-        Object.keys(l).length === 0 && gt(s);
-        const u = Object.assign(Object.assign({}, s), l);
+        for (const E in t)
+          l[E] = t[E];
+        Object.keys(l).length === 0 && yt(s);
+        const u = { ...s, ...l };
         delete u.valid;
-        const { valid: d } = yt(s, u, this.form);
+        const { valid: d } = wt(s, u, this.form);
         if (!d && !i)
           throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
-        f.set(this, d ? "" : i), o.isConnected ? (o.toggleAttribute("internals-invalid", !d), o.toggleAttribute("internals-valid", d), o.setAttribute("aria-invalid", `${!d}`)) : 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}`)) : A.set(o, this);
       }
       get shadowRoot() {
-        const t = a.get(this), i = K.get(t);
+        const t = a.get(this), i = U.get(t);
         return i || null;
@@ -441,11 +449,11 @@ }
         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);
+        return x(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 = 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);
+        return x(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 = 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"));
+        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"));
       }
@@ -477,5 +485,5 @@ }
     }
-    let nt = !1, st = !1;
-    function W(e) {
-      st || (st = !0, window.CustomStateSet = $, e && (HTMLElement.prototype.attachInternals = function(...t) {
+    let st = !1, lt = !1;
+    function H(e) {
+      lt || (lt = !0, window.CustomStateSet = $, e && (HTMLElement.prototype.attachInternals = function(...t) {
         const i = e.call(this, t);
@@ -485,5 +493,5 @@ return i.states = new $(this), i;
     }
-    function lt(e = !0) {
-      if (!nt) {
-        if (nt = !0, typeof window < "u" && (window.ElementInternals = at), typeof CustomElementRegistry < "u") {
+    function ct(e = !0) {
+      if (!st) {
+        if (st = !0, typeof window < "u" && (window.ElementInternals = nt), typeof CustomElementRegistry < "u") {
           const t = CustomElementRegistry.prototype.define;
@@ -494,3 +502,3 @@ CustomElementRegistry.prototype.define = function(i, r, o) {
               r.prototype.connectedCallback = function() {
-                q.has(this) || (q.set(this, !0), this.hasAttribute("disabled") && R(this, !0)), s != null && s.apply(this), it(this);
+                G.has(this) || (G.set(this, !0), this.hasAttribute("disabled") && O(this, !0)), s != null && s.apply(this), rt(this);
               };
@@ -509,9 +517,9 @@ }
             throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
-          return new at(this);
+          return new nt(this);
         }), typeof Element < "u") {
           let t = function(...r) {
             const o = i.apply(this, r);
-            if (K.set(this, o), V()) {
-              const s = new MutationObserver(P);
-              window.ShadyDOM ? s.observe(this, _) : s.observe(o, _), k.set(this, s);
+            if (U.set(this, o), P()) {
+              const s = new MutationObserver(_);
+              window.ShadyDOM ? s.observe(this, D) : s.observe(o, D), M.set(this, s);
             }
@@ -523,17 +531,17 @@ return o;
         }
-        V() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" && kt(), (e || typeof window < "u" && !window.CustomStateSet) && W();
+        P() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, D), typeof HTMLFormElement < "u" && zt(), (e || typeof window < "u" && !window.CustomStateSet) && H();
       }
     }
-    return !!customElements.polyfillWrapFlushCallback || (Mt() ? typeof window < "u" && !window.CustomStateSet && W(HTMLElement.prototype.attachInternals) : lt(!1)), E.forceCustomStateSetPolyfill = W, E.forceElementInternalsPolyfill = lt, Object.defineProperty(E, "__esModule", { value: !0 }), E;
+    return !!customElements.polyfillWrapFlushCallback || (Mt() ? typeof window < "u" && !window.CustomStateSet && H(HTMLElement.prototype.attachInternals) : ct(!1)), k.forceCustomStateSetPolyfill = H, k.forceElementInternalsPolyfill = ct, Object.defineProperty(k, "__esModule", { value: !0 }), k;
   })({});
 })();
-var Ot = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, p = (E, a, n, h) => {
-  for (var c = h > 1 ? void 0 : h ? Pt(a, n) : a, f = E.length - 1, y; f >= 0; f--)
-    (y = E[f]) && (c = (h ? y(a, n, c) : y(c)) || c);
-  return h && c && Ot(a, n, c), c;
+var Rt = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, m = (k, a, n, h) => {
+  for (var c = h > 1 ? void 0 : h ? _t(a, n) : a, f = k.length - 1, w; f >= 0; f--)
+    (w = k[f]) && (c = (h ? w(a, n, c) : w(c)) || c);
+  return h && c && Rt(a, n, c), c;
 };
-const z = "pie-button";
-class v extends Ft(zt) {
+const F = "pie-button";
+class v extends St(Ct) {
   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 = (a) => {
+    super(...arguments), this.size = b.size, this.type = b.type, this.variant = b.variant, this.iconPlacement = b.iconPlacement, this.disabled = b.disabled, this.isLoading = b.isLoading, this.isFullWidth = b.isFullWidth, this.isResponsive = b.isResponsive, this._handleFormKeyDown = (a) => {
       if (!(a.key !== "Enter" || this.type !== "submit" || this.disabled)) {
@@ -599,6 +607,6 @@ if (a.target instanceof HTMLElement) {
       size: f,
-      isLoading: y,
-      isResponsive: k,
-      iconPlacement: b,
-      responsiveSize: C
+      isLoading: w,
+      isResponsive: M,
+      iconPlacement: g,
+      responsiveSize: L
     } = this;
@@ -612,11 +620,11 @@ return N`
                 size=${f || "medium"}
-                responsiveSize=${St(C)}
+                responsiveSize=${Lt(L)}
                 ?disabled=${n}
                 ?isFullWidth=${h}
-                ?isResponsive=${k}
-                ?isLoading=${y}>
-                    ${y ? this.renderSpinner() : B}
-                    ${b === "leading" ? N`<slot name="icon"></slot>` : B}
+                ?isResponsive=${M}
+                ?isLoading=${w}>
+                    ${w ? this.renderSpinner() : K}
+                    ${g === "leading" ? N`<slot name="icon"></slot>` : K}
                     <slot></slot>
-                    ${b === "trailing" ? N`<slot name="icon"></slot>` : B}
+                    ${g === "trailing" ? N`<slot name="icon"></slot>` : K}
             </button>`;
@@ -629,66 +637,67 @@ }
 }
-v.styles = Ct(Nt);
-p([
-  m(),
-  O(z, At, "medium")
+v.styles = Ft(Nt);
+m([
+  p(),
+  R(F, It, b.size)
 ], v.prototype, "size", 2);
-p([
-  m(),
-  O(z, It, "submit")
+m([
+  p(),
+  R(F, Tt, b.type)
 ], v.prototype, "type", 2);
-p([
-  m(),
-  O(z, Tt, "primary")
+m([
+  p(),
+  R(F, Vt, b.variant)
 ], v.prototype, "variant", 2);
-p([
-  m({ type: String }),
-  O(z, Vt, "leading")
+m([
+  p({ type: String }),
+  R(F, Pt, b.iconPlacement)
 ], v.prototype, "iconPlacement", 2);
-p([
-  m({ type: Boolean })
+m([
+  p({ type: Boolean })
 ], v.prototype, "disabled", 2);
-p([
-  m({ type: Boolean, reflect: !0 })
+m([
+  p({ type: Boolean, reflect: !0 })
 ], v.prototype, "isLoading", 2);
-p([
-  m({ type: Boolean })
+m([
+  p({ type: Boolean })
 ], v.prototype, "isFullWidth", 2);
-p([
-  m({ type: Boolean })
+m([
+  p({ type: Boolean })
 ], v.prototype, "isResponsive", 2);
-p([
-  m({ type: String })
+m([
+  p({ type: String })
 ], v.prototype, "name", 2);
-p([
-  m({ type: String })
+m([
+  p({ type: String })
 ], v.prototype, "value", 2);
-p([
-  m()
+m([
+  p()
 ], v.prototype, "formaction", 2);
-p([
-  m()
+m([
+  p()
 ], v.prototype, "formenctype", 2);
-p([
-  m()
+m([
+  p()
 ], v.prototype, "formmethod", 2);
-p([
-  m({ type: Boolean })
+m([
+  p({ type: Boolean })
 ], v.prototype, "formnovalidate", 2);
-p([
-  m()
+m([
+  p()
 ], v.prototype, "formtarget", 2);
-p([
-  m({ type: String })
+m([
+  p({ type: String })
 ], v.prototype, "responsiveSize", 2);
-Lt(z, v);
+At(F, v);
 export {
   v as PieButton,
-  Kt as formEncodingtypes,
-  jt as formMethodTypes,
-  Ut as formTargetTypes,
-  Vt as iconPlacements,
-  Bt as responsiveSizes,
-  At as sizes,
-  It as types,
-  Tt as variants
+  b as defaultProps,
+  Ut as formEncodingtypes,
+  qt as formMethodTypes,
+  jt as formTargetTypes,
+  Pt as iconPlacements,
+  Kt as responsiveSizes,
+  It as sizes,
+  Tt as types,
+  Vt as variants
 };

dist/react.d.ts

@@ -0,1 +1,2 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
@@ -86,2 +87,6 @@ import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<ButtonProps, 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isLoading' | 'isFullWidth' | 'isResponsive'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const formEncodingtypes: readonly ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"];
@@ -88,0 +93,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 B, formTargetTypes as l, iconPlacements as d, responsiveSizes as g, sizes as v, types as T, variants as x } from "./index.js";
+import { defaultProps as l, formEncodingtypes as y, formMethodTypes as B, formTargetTypes as d, iconPlacements as g, responsiveSizes as v, sizes as T, types as x, variants as z } from "./index.js";
 import "lit";
@@ -19,10 +19,11 @@ import "lit/decorators.js";
   f as PieButton,
+  l as defaultProps,
   y as formEncodingtypes,
   B as formMethodTypes,
-  l as formTargetTypes,
-  d as iconPlacements,
-  g as responsiveSizes,
-  v as sizes,
-  T as types,
-  x as variants
+  d as formTargetTypes,
+  g as iconPlacements,
+  v as responsiveSizes,
+  T as sizes,
+  x as types,
+  z as variants
 };

package.json

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

src/defs.ts

@@ -0,1 +1,3 @@
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
 export const sizes = ['xsmall', 'small-productive', 'small-expressive', 'medium', 'large'] as const;
@@ -101,1 +103,14 @@ export const responsiveSizes = ['productive', 'expressive'] as const;
 }
+
+export type DefaultProps = ComponentDefaultPropsGeneric<ButtonProps, 'size' | 'type' | 'variant' | 'iconPlacement' | 'disabled' | 'isLoading' | 'isFullWidth' | 'isResponsive'>;
+
+export const defaultProps: DefaultProps = {
+    size: 'medium',
+    type:  'submit',
+    variant: 'primary',
+    iconPlacement: 'leading',
+    disabled: false,
+    isLoading: false,
+    isFullWidth: false,
+    isResponsive: false,
+};

src/index.ts

@@ -8,3 +8,3 @@ import {
 import {
-    ButtonProps, sizes, types, variants, iconPlacements,
+    ButtonProps, sizes, types, variants, iconPlacements, defaultProps,
 } from './defs';
@@ -56,28 +56,28 @@ import styles from './button.scss?inline';
     @property()
-    @validPropertyValues(componentSelector, sizes, 'medium')
-    public size: ButtonProps['size'] = 'medium';
+    @validPropertyValues(componentSelector, sizes, defaultProps.size)
+    public size: ButtonProps['size'] = defaultProps.size;
 
     @property()
-    @validPropertyValues(componentSelector, types, 'submit')
-    public type: ButtonProps['type'] = 'submit';
+    @validPropertyValues(componentSelector, types, defaultProps.type)
+    public type: ButtonProps['type'] = defaultProps.type;
 
     @property()
-    @validPropertyValues(componentSelector, variants, 'primary')
-    public variant: ButtonProps['variant'] = 'primary';
+    @validPropertyValues(componentSelector, variants, defaultProps.variant)
+    public variant: ButtonProps['variant'] = defaultProps.variant;
 
     @property({ type: String })
-    @validPropertyValues(componentSelector, iconPlacements, 'leading')
-    public iconPlacement: ButtonProps['iconPlacement'] = 'leading';
+    @validPropertyValues(componentSelector, iconPlacements, defaultProps.iconPlacement)
+    public iconPlacement: ButtonProps['iconPlacement'] = defaultProps.iconPlacement;
 
     @property({ type: Boolean })
-    public disabled = false;
+    public disabled = defaultProps.disabled;
 
     @property({ type: Boolean, reflect: true })
-    public isLoading = false;
+    public isLoading = defaultProps.isLoading;
 
     @property({ type: Boolean })
-    public isFullWidth = false;
+    public isFullWidth = defaultProps.isFullWidth;
 
     @property({ type: Boolean })
-    public isResponsive = false;
+    public isResponsive = defaultProps.isResponsive;
 
@@ -84,0 +84,0 @@ @property({ type: String })

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

95255

increased by0.96%

Lines of code

1867

increased by0.21%

Dependency changes

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

• + Added@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240516144918(transitive)

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

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

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

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

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

• Updated@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240516144918

• Updatedelement-internals-polyfill@1.3.10