@justeattakeaway/pie-button - npm Package Compare versions

Comparing version 0.38.0 to 0.38.1-next.0

dist/index.d.ts

@@ -36,2 +36,6 @@ import type { CSSResult } from 'lit';
     /**
+     * When true, enables the responsive size feature.
+     */
+    isResponsive: boolean;
+    /**
      * 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.
@@ -74,2 +78,6 @@ * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
     formtarget?: typeof formTargetTypes[number];
+    /**
+     * What size should be attributed to the button when isResponsive is true and the screen is wide.
+     */
+    responsiveSize?: typeof responsiveSizes[number];
 }
@@ -105,2 +113,3 @@
     isFullWidth: boolean;
+    isResponsive: boolean;
     name?: string;
@@ -113,2 +122,3 @@ value?: string;
     formtarget: ButtonProps['formtarget'];
+    responsiveSize?: ButtonProps['responsiveSize'];
     /**
@@ -136,2 +146,4 @@ * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
 
+export declare const responsiveSizes: readonly ["productive", "expressive"];
+
 export declare const sizes: readonly ["xsmall", "small-productive", "small-expressive", "medium", "large"];
@@ -138,0 +150,0 @@

dist/index.js

@@ -1,24 +0,25 @@
-import { unsafeCSS as wt, LitElement as Et, html as N, nothing as R } from "lit";
-import { property as b } from "lit/decorators.js";
+import { unsafeCSS as wt, LitElement as xt, html as N, nothing as O } from "lit";
+import { property as p } from "lit/decorators.js";
+import { ifDefined as Et } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-spinner";
-const P = (d, n, a) => function(p, y) {
-  const m = `#${y}`;
-  Object.defineProperty(p, y, {
+const R = (d, n, a) => function(b, y) {
+  const u = `#${y}`;
+  Object.defineProperty(b, y, {
     get() {
-      return this[m];
+      return this[u];
     },
-    set(u) {
-      const L = this[m];
-      n.includes(u) ? this[m] = u : (console.error(
-        `<${d}> Invalid value "${u}" provided for property "${y}".`,
+    set(f) {
+      n.includes(f) ? this[u] = f : (console.error(
+        `<${d}> Invalid value "${f}" provided for property "${y}".`,
         `Must be one of: ${n.join(" | ")}.`,
         `Falling back to default value: "${a}"`
-      ), this[m] = a), this.requestUpdate(y, L);
-    }
+      ), this[u] = a);
+    },
+    configurable: !0
   });
 };
-function xt(d, n) {
+function kt(d, n) {
   customElements.get(d) ? console.warn(`PIE Web Component: "${d}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(d, n);
 }
-const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Mt = ["submit", "button", "reset"], Ct = [
+const zt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Rt = ["productive", "expressive"], Mt = ["submit", "button", "reset"], Ct = [
   "primary",
@@ -33,6 +34,6 @@ "secondary",
   "destructive-ghost"
-], Lt = ["leading", "trailing"], Vt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Nt = ["post", "get", "dialog"], Pt = ["_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-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);--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;--btn-height: var(--btn-height--medium);--btn-icon-size: 24px;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]{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);--btn-icon-size: 16px}.o-btn[size=small-expressive],.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-icon-size: 20px}.o-btn[size=small-expressive]{--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)}.o-btn[size=small-productive]{--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)}.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)}.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(--btn-icon-size);width:var(--btn-icon-size)}
+], Lt = ["leading", "trailing"], Pt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], _t = ["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;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]{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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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);--btn-icon-size: 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(--btn-icon-size);width:var(--btn-icon-size)}
 `;
 (function() {
-  const d = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), I = {
+  const d = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), f = /* @__PURE__ */ new WeakMap(), M = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), K = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), A = {
     ariaAtomic: "aria-atomic",
@@ -79,13 +80,13 @@ ariaAutoComplete: "aria-autocomplete",
     role: "role"
-  }, it = (r, t) => {
-    for (let e in I) {
+  }, ot = (i, t) => {
+    for (let e in A) {
       t[e] = null;
-      let o = null;
-      const i = I[e];
+      let r = null;
+      const o = A[e];
       Object.defineProperty(t, e, {
         get() {
-          return o;
+          return r;
         },
         set(l) {
-          o = l, r.isConnected ? r.setAttribute(i, l) : F.set(r, t);
+          r = l, i.isConnected ? i.setAttribute(o, l) : k.set(i, t);
         }
@@ -95,8 +96,8 @@ });
   };
-  function q(r) {
-    const t = c.get(r), { form: e } = t;
-    X(r, e, t), Q(r, t.labels);
+  function j(i) {
+    const t = c.get(i), { form: e } = t;
+    X(i, e, t), Q(i, t.labels);
   }
-  const U = (r, t = !1) => {
-    const e = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
+  const q = (i, t = !1) => {
+    const e = document.createTreeWalker(i, NodeFilter.SHOW_ELEMENT, {
       acceptNode(l) {
@@ -106,136 +107,136 @@ return c.has(l) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
     });
-    let o = e.nextNode();
-    const i = !t || r.disabled;
-    for (; o; )
-      o.formDisabledCallback && i && D(o, r.disabled), o = e.nextNode();
-  }, j = { attributes: !0, attributeFilter: ["disabled", "name"] }, k = S() ? new MutationObserver((r) => {
-    for (const t of r) {
+    let r = e.nextNode();
+    const o = !t || i.disabled;
+    for (; r; )
+      r.formDisabledCallback && o && $(r, i.disabled), r = e.nextNode();
+  }, U = { 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" && U(e)), t.attributeName === "name" && e.constructor.formAssociated) {
-        const o = c.get(e), i = L.get(e);
-        o.setFormValue(i);
+      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && q(e)), t.attributeName === "name" && e.constructor.formAssociated) {
+        const r = c.get(e), o = M.get(e);
+        r.setFormValue(o);
       }
     }
   }) : {};
-  function _(r) {
-    r.forEach((t) => {
-      const { addedNodes: e, removedNodes: o } = t, i = Array.from(e), l = Array.from(o);
-      i.forEach((s) => {
-        var f;
-        if (c.has(s) && s.constructor.formAssociated && q(s), F.has(s)) {
+  function P(i) {
+    i.forEach((t) => {
+      const { addedNodes: e, removedNodes: r } = t, o = Array.from(e), l = Array.from(r);
+      o.forEach((s) => {
+        var g;
+        if (c.has(s) && s.constructor.formAssociated && j(s), k.has(s)) {
+          const v = k.get(s);
+          Object.keys(A).filter((w) => v[w] !== null).forEach((w) => {
+            s.setAttribute(A[w], v[w]);
+          }), k.delete(s);
+        }
+        if (F.has(s)) {
           const v = F.get(s);
-          Object.keys(I).filter((w) => v[w] !== null).forEach((w) => {
-            s.setAttribute(I[w], v[w]);
-          }), F.delete(s);
+          s.setAttribute("internals-valid", v.validity.valid.toString()), s.setAttribute("internals-invalid", (!v.validity.valid).toString()), s.setAttribute("aria-invalid", (!v.validity.valid).toString()), F.delete(s);
         }
-        if (A.has(s)) {
-          const v = A.get(s);
-          s.setAttribute("internals-valid", v.validity.valid.toString()), s.setAttribute("internals-invalid", (!v.validity.valid).toString()), s.setAttribute("aria-invalid", (!v.validity.valid).toString()), A.delete(s);
-        }
         if (s.localName === "form") {
-          const v = u.get(s), x = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
-            acceptNode(ot) {
-              return c.has(ot) && !(v && v.has(ot)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+          const v = f.get(s), E = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
+            acceptNode(rt) {
+              return c.has(rt) && !(v && v.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
             }
           });
-          let w = x.nextNode();
+          let w = E.nextNode();
           for (; w; )
-            q(w), w = x.nextNode();
+            j(w), w = E.nextNode();
         }
-        s.localName === "fieldset" && ((f = k.observe) == null || f.call(k, s, j), U(s, !0));
+        s.localName === "fieldset" && ((g = z.observe) == null || g.call(z, s, U), q(s, !0));
       }), l.forEach((s) => {
-        const f = c.get(s);
-        f && a.get(f) && G(f), m.has(s) && m.get(s).disconnect();
+        const g = c.get(s);
+        g && a.get(g) && G(g), u.has(s) && u.get(s).disconnect();
       });
     });
   }
-  function at(r) {
-    r.forEach((t) => {
+  function at(i) {
+    i.forEach((t) => {
       const { removedNodes: e } = t;
-      e.forEach((o) => {
-        const i = B.get(t.target);
-        c.has(o) && Z(o), i.disconnect();
+      e.forEach((r) => {
+        const o = B.get(t.target);
+        c.has(r) && Z(r), o.disconnect();
       });
     });
   }
-  const nt = (r) => {
+  const nt = (i) => {
     var e;
     const t = new MutationObserver(at);
-    (e = t.observe) == null || e.call(t, r, { childList: !0 }), B.set(r, t);
+    (e = t.observe) == null || e.call(t, i, { childList: !0 }), B.set(i, t);
   };
-  S() && new MutationObserver(_);
-  const $ = {
+  T() && new MutationObserver(P);
+  const _ = {
     childList: !0,
     subtree: !0
-  }, D = (r, t) => {
-    r.toggleAttribute("internals-disabled", t), t ? r.setAttribute("aria-disabled", "true") : r.removeAttribute("aria-disabled"), r.formDisabledCallback && r.formDisabledCallback.apply(r, [t]);
-  }, G = (r) => {
-    a.get(r).forEach((e) => {
+  }, $ = (i, t) => {
+    i.toggleAttribute("internals-disabled", t), t ? i.setAttribute("aria-disabled", "true") : i.removeAttribute("aria-disabled"), i.formDisabledCallback && i.formDisabledCallback.apply(i, [t]);
+  }, G = (i) => {
+    a.get(i).forEach((e) => {
       e.remove();
-    }), a.set(r, []);
-  }, J = (r, t) => {
+    }), a.set(i, []);
+  }, J = (i, t) => {
     const e = document.createElement("input");
-    return e.type = "hidden", e.name = r.getAttribute("name"), r.after(e), a.get(t).push(e), e;
-  }, st = (r, t) => {
+    return e.type = "hidden", e.name = i.getAttribute("name"), i.after(e), a.get(t).push(e), e;
+  }, st = (i, t) => {
     var e;
-    a.set(t, []), (e = k.observe) == null || e.call(k, r, j);
-  }, Q = (r, t) => {
+    a.set(t, []), (e = z.observe) == null || e.call(z, i, U);
+  }, Q = (i, t) => {
     if (t.length) {
-      Array.from(t).forEach((o) => o.addEventListener("click", r.click.bind(r)));
+      Array.from(t).forEach((r) => r.addEventListener("click", i.click.bind(i)));
       let e = t[0].id;
-      t[0].id || (e = `${t[0].htmlFor}_Label`, t[0].id = e), r.setAttribute("aria-labelledby", e);
+      t[0].id || (e = `${t[0].htmlFor}_Label`, t[0].id = e), i.setAttribute("aria-labelledby", e);
     }
-  }, T = (r) => {
-    const t = Array.from(r.elements).filter((l) => !l.tagName.includes("-") && l.validity).map((l) => l.validity.valid), e = u.get(r) || [], o = Array.from(e).filter((l) => l.isConnected).map((l) => c.get(l).validity.valid), i = [...t, ...o].includes(!1);
-    r.toggleAttribute("internals-invalid", i), r.toggleAttribute("internals-valid", !i);
-  }, lt = (r) => {
-    T(z(r.target));
-  }, ct = (r) => {
-    T(z(r.target));
-  }, dt = (r) => {
-    const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((e) => `${e}:not([disabled])`).map((e) => `${e}:not([form])${r.id ? `,${e}[form='${r.id}']` : ""}`).join(",");
-    r.addEventListener("click", (e) => {
+  }, S = (i) => {
+    const t = Array.from(i.elements).filter((l) => !l.tagName.includes("-") && l.validity).map((l) => l.validity.valid), e = f.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));
+  }, dt = (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(",");
+    i.addEventListener("click", (e) => {
       if (e.target.closest(t)) {
-        const i = u.get(r);
-        if (r.noValidate)
+        const o = f.get(i);
+        if (i.noValidate)
           return;
-        i.size && Array.from(i).reverse().map((f) => c.get(f).reportValidity()).includes(!1) && e.preventDefault();
+        o.size && Array.from(o).reverse().map((g) => c.get(g).reportValidity()).includes(!1) && e.preventDefault();
       }
     });
-  }, vt = (r) => {
-    const t = u.get(r.target);
+  }, vt = (i) => {
+    const t = f.get(i.target);
     t && t.size && t.forEach((e) => {
       e.constructor.formAssociated && e.formResetCallback && e.formResetCallback.apply(e);
     });
-  }, X = (r, t, e) => {
+  }, X = (i, t, e) => {
     if (t) {
-      const o = u.get(t);
-      if (o)
-        o.add(r);
+      const r = f.get(t);
+      if (r)
+        r.add(i);
       else {
-        const i = /* @__PURE__ */ new Set();
-        i.add(r), u.set(t, i), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
+        const o = /* @__PURE__ */ new Set();
+        o.add(i), f.set(t, o), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
       }
-      y.set(t, { ref: r, internals: e }), r.constructor.formAssociated && r.formAssociatedCallback && setTimeout(() => {
-        r.formAssociatedCallback.apply(r, [t]);
-      }, 0), T(t);
+      y.set(t, { ref: i, internals: e }), i.constructor.formAssociated && i.formAssociatedCallback && setTimeout(() => {
+        i.formAssociatedCallback.apply(i, [t]);
+      }, 0), S(t);
     }
-  }, z = (r) => {
-    let t = r.parentNode;
-    return t && t.tagName !== "FORM" && (t = z(t)), t;
-  }, E = (r, t, e = DOMException) => {
-    if (!r.constructor.formAssociated)
+  }, I = (i) => {
+    let t = i.parentNode;
+    return t && t.tagName !== "FORM" && (t = I(t)), t;
+  }, x = (i, t, e = DOMException) => {
+    if (!i.constructor.formAssociated)
       throw new e(t);
-  }, Y = (r, t, e) => {
-    const o = u.get(r);
-    return o && o.size && o.forEach((i) => {
-      c.get(i)[e]() || (t = !1);
+  }, Y = (i, t, e) => {
+    const r = f.get(i);
+    return r && r.size && r.forEach((o) => {
+      c.get(o)[e]() || (t = !1);
     }), t;
-  }, Z = (r) => {
-    if (r.constructor.formAssociated) {
-      const t = c.get(r), { labels: e, form: o } = t;
-      Q(r, e), X(r, o, t);
+  }, Z = (i) => {
+    if (i.constructor.formAssociated) {
+      const t = c.get(i), { labels: e, form: r } = t;
+      Q(i, e), X(i, r, t);
     }
   };
-  function S() {
+  function T() {
     return typeof MutationObserver < "u";
@@ -248,10 +249,10 @@ }
   }
-  const mt = (r) => (r.badInput = !1, r.customError = !1, r.patternMismatch = !1, r.rangeOverflow = !1, r.rangeUnderflow = !1, r.stepMismatch = !1, r.tooLong = !1, r.tooShort = !1, r.typeMismatch = !1, r.valid = !0, r.valueMissing = !1, r), ut = (r, t, e) => (r.valid = pt(t), Object.keys(t).forEach((o) => r[o] = t[o]), e && T(e), r), pt = (r) => {
+  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), mt = (i, t, e) => (i.valid = bt(t), Object.keys(t).forEach((r) => i[r] = t[r]), e && S(e), i), bt = (i) => {
     let t = !0;
-    for (let e in r)
-      e !== "valid" && r[e] !== !1 && (t = !1);
+    for (let e in i)
+      e !== "valid" && i[e] !== !1 && (t = !1);
     return t;
-  }, O = /* @__PURE__ */ new WeakMap();
-  function tt(r, t) {
-    r.toggleAttribute(t, !0), r.part && r.part.add(t);
+  }, D = /* @__PURE__ */ new WeakMap();
+  function tt(i, t) {
+    i.toggleAttribute(t, !0), i.part && i.part.add(t);
   }
@@ -265,3 +266,3 @@ class V extends Set {
         throw new TypeError("Illegal constructor");
-      O.set(this, t);
+      D.set(this, t);
     }
@@ -271,5 +272,5 @@ add(t) {
         throw new DOMException(`Failed to execute 'add' on 'CustomStateSet': The specified value ${t} must start with '--'.`);
-      const e = super.add(t), o = O.get(this), i = `state${t}`;
-      return o.isConnected ? tt(o, i) : setTimeout(() => {
-        tt(o, i);
+      const e = super.add(t), r = D.get(this), o = `state${t}`;
+      return r.isConnected ? tt(r, o) : setTimeout(() => {
+        tt(r, o);
       }), e;
@@ -283,31 +284,31 @@ }
     delete(t) {
-      const e = super.delete(t), o = O.get(this);
-      return o.isConnected ? (o.toggleAttribute(`state${t}`, !1), o.part && o.part.remove(`state${t}`)) : setTimeout(() => {
-        o.toggleAttribute(`state${t}`, !1), o.part && o.part.remove(`state${t}`);
+      const e = super.delete(t), r = D.get(this);
+      return r.isConnected ? (r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`)) : setTimeout(() => {
+        r.toggleAttribute(`state${t}`, !1), r.part && r.part.remove(`state${t}`);
       }), e;
     }
   }
-  function et(r, t, e, o) {
-    if (e === "a" && !o)
+  function et(i, t, e, r) {
+    if (e === "a" && !r)
       throw new TypeError("Private accessor was defined without a getter");
-    if (typeof t == "function" ? r !== t || !o : !t.has(r))
+    if (typeof t == "function" ? i !== t || !r : !t.has(i))
       throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return e === "m" ? o : e === "a" ? o.call(r) : o ? o.value : t.get(r);
+    return e === "m" ? r : e === "a" ? r.call(i) : r ? r.value : t.get(i);
   }
-  function ft(r, t, e, o, i) {
-    if (o === "m")
+  function ut(i, t, e, r, o) {
+    if (r === "m")
       throw new TypeError("Private method is not writable");
-    if (o === "a" && !i)
+    if (r === "a" && !o)
       throw new TypeError("Private accessor was defined without a setter");
-    if (typeof t == "function" ? r !== t || !i : !t.has(r))
+    if (typeof t == "function" ? i !== t || !o : !t.has(i))
       throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return o === "a" ? i.call(r, e) : i ? i.value = e : t.set(r, e), e;
+    return r === "a" ? o.call(i, e) : o ? o.value = e : t.set(i, e), e;
   }
-  var M;
-  class bt {
+  var C;
+  class ft {
     constructor(t) {
-      M.set(this, void 0), ft(this, M, t, "f");
+      C.set(this, void 0), ut(this, C, t, "f");
       for (let e = 0; e < t.length; e++) {
-        let o = t[e];
-        this[e] = o, o.hasAttribute("name") && (this[o.getAttribute("name")] = o);
+        let r = t[e];
+        this[e] = r, r.hasAttribute("name") && (this[r.getAttribute("name")] = r);
       }
@@ -317,6 +318,6 @@ Object.freeze(this);
     get length() {
-      return et(this, M, "f").length;
+      return et(this, C, "f").length;
     }
-    [(M = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-      return et(this, M, "f")[Symbol.iterator]();
+    [(C = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+      return et(this, C, "f")[Symbol.iterator]();
     }
@@ -331,26 +332,26 @@ item(t) {
   function gt() {
-    const r = HTMLFormElement.prototype.checkValidity;
+    const i = HTMLFormElement.prototype.checkValidity;
     HTMLFormElement.prototype.checkValidity = e;
     const t = HTMLFormElement.prototype.reportValidity;
-    HTMLFormElement.prototype.reportValidity = o;
+    HTMLFormElement.prototype.reportValidity = r;
     function e(...l) {
-      let s = r.apply(this, l);
+      let s = i.apply(this, l);
       return Y(this, s, "checkValidity");
     }
-    function o(...l) {
+    function r(...l) {
       let s = t.apply(this, l);
       return Y(this, s, "reportValidity");
     }
-    const { get: i } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
+    const { get: o } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
     Object.defineProperty(HTMLFormElement.prototype, "elements", {
       get(...l) {
-        const s = i.call(this, ...l), f = Array.from(u.get(this) || []);
-        if (f.length === 0)
+        const s = o.call(this, ...l), g = Array.from(f.get(this) || []);
+        if (g.length === 0)
           return s;
-        const v = Array.from(s).concat(f).sort((x, w) => x.compareDocumentPosition ? x.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
-        return new bt(v);
+        const v = Array.from(s).concat(g).sort((E, w) => E.compareDocumentPosition ? E.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
+        return new ft(v);
       }
     });
   }
-  class rt {
+  class it {
     static get isPolyfilled() {
@@ -362,12 +363,12 @@ return !0;
         throw new TypeError("Illegal constructor");
-      const e = t.getRootNode(), o = new ht();
-      this.states = new V(t), d.set(this, t), n.set(this, o), c.set(t, this), it(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && nt(e);
+      const e = t.getRootNode(), r = new ht();
+      this.states = new V(t), d.set(this, t), n.set(this, r), c.set(t, this), ot(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && nt(e);
     }
     checkValidity() {
       const t = d.get(this);
-      if (E(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;
       const e = n.get(this);
       if (!e.valid) {
-        const o = new Event("invalid", {
+        const r = new Event("invalid", {
           bubbles: !1,
@@ -377,3 +378,3 @@ cancelable: !0,
         });
-        t.dispatchEvent(o);
+        t.dispatchEvent(r);
       }
@@ -384,52 +385,52 @@ return e.valid;
       const t = d.get(this);
-      E(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 e;
-      return t.constructor.formAssociated === !0 && (e = z(t)), e;
+      return t.constructor.formAssociated === !0 && (e = I(t)), e;
     }
     get labels() {
       const t = d.get(this);
-      E(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
-      const e = t.getAttribute("id"), o = t.getRootNode();
-      return o && e ? o.querySelectorAll(`[for="${e}"]`) : [];
+      x(t, "Failed to read the 'labels' property from 'ElementInternals': The target element is not a form-associated custom element.");
+      const e = t.getAttribute("id"), r = t.getRootNode();
+      return r && e ? r.querySelectorAll(`[for="${e}"]`) : [];
     }
     reportValidity() {
       const t = d.get(this);
-      if (E(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 e = this.checkValidity(), o = H.get(this);
-      if (o && !t.constructor.formAssociated)
+      const e = this.checkValidity(), r = H.get(this);
+      if (r && !t.constructor.formAssociated)
         throw new DOMException("Failed to execute 'reportValidity' on 'ElementInternals': The target element is not a form-associated custom element.");
-      return !e && o && (t.focus(), o.focus()), e;
+      return !e && r && (t.focus(), r.focus()), e;
     }
     setFormValue(t) {
       const e = d.get(this);
-      if (E(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), G(this), t != null && !(t instanceof FormData)) {
+      if (x(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), G(this), t != null && !(t instanceof FormData)) {
         if (e.getAttribute("name")) {
-          const o = J(e, this);
-          o.value = t;
+          const r = J(e, this);
+          r.value = t;
         }
       } else
-        t != null && t instanceof FormData && Array.from(t).reverse().forEach(([o, i]) => {
-          if (typeof i == "string") {
+        t != null && t instanceof FormData && Array.from(t).reverse().forEach(([r, o]) => {
+          if (typeof o == "string") {
             const l = J(e, this);
-            l.name = o, l.value = i;
+            l.name = r, l.value = o;
           }
         });
-      L.set(e, t);
+      M.set(e, t);
     }
-    setValidity(t, e, o) {
-      const i = d.get(this);
-      if (E(i, "Failed to execute 'setValidity' on 'ElementInternals': The target element is not a form-associated custom element."), !t)
+    setValidity(t, e, r) {
+      const o = d.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.");
-      H.set(this, o);
+      H.set(this, r);
       const l = n.get(this), s = {};
-      for (const x in t)
-        s[x] = t[x];
-      Object.keys(s).length === 0 && mt(l);
-      const f = { ...l, ...s };
-      delete f.valid;
-      const { valid: v } = ut(l, f, this.form);
+      for (const E in t)
+        s[E] = t[E];
+      Object.keys(s).length === 0 && pt(l);
+      const g = { ...l, ...s };
+      delete g.valid;
+      const { valid: v } = mt(l, g, this.form);
       if (!v && !e)
         throw new DOMException("Failed to execute 'setValidity' on 'ElementInternals': The second argument should not be empty if one or more flags in the first argument are true.");
-      p.set(this, v ? "" : e), i.isConnected ? (i.toggleAttribute("internals-invalid", !v), i.toggleAttribute("internals-valid", v), i.setAttribute("aria-invalid", `${!v}`)) : A.set(i, this);
+      b.set(this, v ? "" : e), o.isConnected ? (o.toggleAttribute("internals-invalid", !v), o.toggleAttribute("internals-valid", v), o.setAttribute("aria-invalid", `${!v}`)) : F.set(o, this);
     }
@@ -442,11 +443,11 @@ get shadowRoot() {
       const t = d.get(this);
-      return E(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), p.get(this);
+      return x(t, "Failed to read the 'validationMessage' property from 'ElementInternals': The target element is not a form-associated custom element."), b.get(this);
     }
     get validity() {
       const t = d.get(this);
-      return E(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 = d.get(this);
-      return E(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"));
     }
@@ -457,3 +458,3 @@ }
       return !1;
-    class r extends HTMLElement {
+    class i extends HTMLElement {
       constructor() {
@@ -464,4 +465,4 @@ super(), this.internals = this.attachInternals();
     const t = `element-internals-feature-detection-${Math.random().toString(36).replace(/[^a-z]+/g, "")}`;
-    customElements.define(t, r);
-    const e = new r();
+    customElements.define(t, i);
+    const e = new i();
     return [
@@ -478,3 +479,3 @@ "shadowRoot",
       "reportValidity"
-    ].every((o) => o in e.internals);
+    ].every((r) => r in e.internals);
   }
@@ -484,5 +485,5 @@ if (yt()) {
       window.CustomStateSet = V;
-      const r = HTMLElement.prototype.attachInternals;
+      const i = HTMLElement.prototype.attachInternals;
       HTMLElement.prototype.attachInternals = function(...t) {
-        const e = r.call(this, t);
+        const e = i.call(this, t);
         return e.states = new V(this), e;
@@ -492,12 +493,12 @@ };
   } else {
-    if (typeof window < "u" && (window.ElementInternals = rt), typeof CustomElementRegistry < "u") {
-      const r = CustomElementRegistry.prototype.define;
-      CustomElementRegistry.prototype.define = function(t, e, o) {
+    if (typeof window < "u" && (window.ElementInternals = it), typeof CustomElementRegistry < "u") {
+      const i = CustomElementRegistry.prototype.define;
+      CustomElementRegistry.prototype.define = function(t, e, r) {
         if (e.formAssociated) {
-          const i = e.prototype.connectedCallback;
+          const o = e.prototype.connectedCallback;
           e.prototype.connectedCallback = function() {
-            K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && D(this, !0)), i != null && i.apply(this), Z(this);
+            K.has(this) || (K.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), o != null && o.apply(this), Z(this);
           };
         }
-        r.call(this, t, e, o);
+        i.call(this, t, e, r);
       };
@@ -513,27 +514,27 @@ }
         throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
-      return new rt(this);
+      return new it(this);
     }), typeof Element < "u") {
-      let r = function(...e) {
-        const o = t.apply(this, e);
-        if (W.set(this, o), S()) {
-          const i = new MutationObserver(_);
-          window.ShadyDOM ? i.observe(this, $) : i.observe(o, $), m.set(this, i);
+      let i = function(...e) {
+        const r = t.apply(this, e);
+        if (W.set(this, r), T()) {
+          const o = new MutationObserver(P);
+          window.ShadyDOM ? o.observe(this, _) : o.observe(r, _), u.set(this, o);
         }
-        return o;
+        return r;
       };
       const t = Element.prototype.attachShadow;
-      Element.prototype.attachShadow = r;
+      Element.prototype.attachShadow = i;
     }
-    S() && typeof document < "u" && new MutationObserver(_).observe(document.documentElement, $), typeof HTMLFormElement < "u" && gt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
+    T() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" && gt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
   }
 })();
-var At = Object.defineProperty, It = Object.getOwnPropertyDescriptor, g = (d, n, a, c) => {
-  for (var p = c > 1 ? void 0 : c ? It(n, a) : n, y = d.length - 1, m; y >= 0; y--)
-    (m = d[y]) && (p = (c ? m(n, a, p) : m(p)) || p);
-  return c && p && At(n, a, p), p;
+var At = Object.defineProperty, St = Object.getOwnPropertyDescriptor, m = (d, n, a, c) => {
+  for (var b = c > 1 ? void 0 : c ? St(n, a) : n, y = d.length - 1, u; y >= 0; y--)
+    (u = d[y]) && (b = (c ? u(n, a, b) : u(b)) || b);
+  return c && b && At(n, a, b), b;
 };
-const C = "pie-button";
-class h extends Et {
+const L = "pie-button";
+class h extends xt {
   constructor() {
-    super(), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this._handleFormKeyDown = (n) => {
+    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 = (n) => {
       if (!(n.key !== "Enter" || this.type !== "submit" || this.disabled)) {
@@ -599,6 +600,8 @@ if (n.target instanceof HTMLElement) {
       isFullWidth: c,
-      variant: p,
+      variant: b,
       size: y,
-      isLoading: m,
-      iconPlacement: u
+      isLoading: u,
+      isResponsive: f,
+      iconPlacement: M,
+      responsiveSize: k
     } = this;
@@ -610,11 +613,13 @@ return N`
                 type=${n}
-                variant=${p}
+                variant=${b}
                 size=${y}
+                responsiveSize=${Et(k)}
                 ?disabled=${a}
                 ?isFullWidth=${c}
-                ?isLoading=${m}>
-                    ${m ? this.renderSpinner() : R}
-                    ${u === "leading" ? N`<slot name="icon"></slot>` : R}
+                ?isResponsive=${f}
+                ?isLoading=${u}>
+                    ${u ? this.renderSpinner() : O}
+                    ${M === "leading" ? N`<slot name="icon"></slot>` : O}
                     <slot></slot>
-                    ${u === "trailing" ? N`<slot name="icon"></slot>` : R}
+                    ${M === "trailing" ? N`<slot name="icon"></slot>` : O}
             </button>`;
@@ -629,58 +634,65 @@ }
 h.styles = wt(Ft);
-g([
-  b(),
-  P(C, kt, "medium")
+m([
+  p(),
+  R(L, zt, "medium")
 ], h.prototype, "size", 2);
-g([
-  b(),
-  P(C, Mt, "submit")
+m([
+  p(),
+  R(L, Mt, "submit")
 ], h.prototype, "type", 2);
-g([
-  b(),
-  P(C, Ct, "primary")
+m([
+  p(),
+  R(L, Ct, "primary")
 ], h.prototype, "variant", 2);
-g([
-  b({ type: String }),
-  P(C, Lt, "leading")
+m([
+  p({ type: String }),
+  R(L, Lt, "leading")
 ], h.prototype, "iconPlacement", 2);
-g([
-  b({ type: Boolean })
+m([
+  p({ type: Boolean })
 ], h.prototype, "disabled", 2);
-g([
-  b({ type: Boolean, reflect: !0 })
+m([
+  p({ type: Boolean, reflect: !0 })
 ], h.prototype, "isLoading", 2);
-g([
-  b({ type: Boolean })
+m([
+  p({ type: Boolean })
 ], h.prototype, "isFullWidth", 2);
-g([
-  b({ type: String })
+m([
+  p({ type: Boolean })
+], h.prototype, "isResponsive", 2);
+m([
+  p({ type: String })
 ], h.prototype, "name", 2);
-g([
-  b({ type: String })
+m([
+  p({ type: String })
 ], h.prototype, "value", 2);
-g([
-  b()
+m([
+  p()
 ], h.prototype, "formaction", 2);
-g([
-  b()
+m([
+  p()
 ], h.prototype, "formenctype", 2);
-g([
-  b()
+m([
+  p()
 ], h.prototype, "formmethod", 2);
-g([
-  b({ type: Boolean })
+m([
+  p({ type: Boolean })
 ], h.prototype, "formnovalidate", 2);
-g([
-  b()
+m([
+  p()
 ], h.prototype, "formtarget", 2);
-xt(C, h);
+m([
+  p({ type: String })
+], h.prototype, "responsiveSize", 2);
+kt(L, h);
 export {
   h as PieButton,
-  Vt as formEncodingtypes,
-  Nt as formMethodTypes,
-  Pt as formTargetTypes,
+  Pt as formEncodingtypes,
+  _t as formMethodTypes,
+  $t as formTargetTypes,
   Lt as iconPlacements,
-  kt as sizes,
+  Rt 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-labs/react';
+import type { ReactWebComponent } from '@lit/react';
 import type { TemplateResult } from 'lit';
@@ -37,2 +37,6 @@
     /**
+     * When true, enables the responsive size feature.
+     */
+    isResponsive: boolean;
+    /**
      * 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.
@@ -75,2 +79,6 @@ * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
     formtarget?: typeof formTargetTypes[number];
+    /**
+     * What size should be attributed to the button when isResponsive is true and the screen is wide.
+     */
+    responsiveSize?: typeof responsiveSizes[number];
 }
@@ -108,2 +116,3 @@
     isFullWidth: boolean;
+    isResponsive: boolean;
     name?: string;
@@ -116,2 +125,3 @@ value?: string;
     formtarget: ButtonProps['formtarget'];
+    responsiveSize?: ButtonProps['responsiveSize'];
     /**
@@ -139,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.
 
+export declare const responsiveSizes: readonly ["productive", "expressive"];
+
 export declare const sizes: readonly ["xsmall", "small-productive", "small-expressive", "medium", "large"];
@@ -141,0 +153,0 @@

dist/react.js

@@ -1,6 +0,7 @@
-import * as w from "react";
+import * as y from "react";
 import { PieButton as E } from "./index.js";
-import { formEncodingtypes as k, formMethodTypes as A, formTargetTypes as D, iconPlacements as G, sizes as H, types as O, variants as S } from "./index.js";
+import { formEncodingtypes as k, formMethodTypes as C, formTargetTypes as S, iconPlacements as j, responsiveSizes as x, sizes as z, types as A, variants as H } from "./index.js";
 import "lit";
 import "lit/decorators.js";
+import "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-spinner";
@@ -12,56 +13,33 @@ /**
  */
-const b = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), g = /* @__PURE__ */ new WeakMap(), M = (t, o, m, p, d) => {
-  const i = d == null ? void 0 : d[o];
-  i === void 0 || m === p ? m == null && o in HTMLElement.prototype ? t.removeAttribute(o) : t[o] = m : ((r, n, u) => {
-    let a = g.get(r);
-    a === void 0 && g.set(r, a = /* @__PURE__ */ new Map());
-    let l = a.get(n);
-    u !== void 0 ? l === void 0 ? (a.set(n, l = { handleEvent: u }), r.addEventListener(n, l)) : l.handleEvent = u : l !== void 0 && (a.delete(n), r.removeEventListener(n, l));
-  })(t, i, m);
-}, P = (t, o) => {
-  typeof t == "function" ? t(o) : t.current = o;
-};
-function B(t = window.React, o, m, p, d) {
-  let i, r, n;
-  if (o === void 0) {
-    const c = t;
-    ({ tagName: r, elementClass: n, events: p, displayName: d } = c), i = c.react;
-  } else
-    i = t, n = m, r = o;
-  const u = i.Component, a = i.createElement, l = new Set(Object.keys(p ?? {}));
-  class f extends u {
-    constructor() {
-      super(...arguments), this.o = null;
-    }
-    t(e) {
-      if (this.o !== null)
-        for (const h in this.i)
-          M(this.o, h, this.props[h], e ? e[h] : void 0, p);
-    }
-    componentDidMount() {
+const N = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), v = /* @__PURE__ */ new WeakMap(), g = (t, c, a, l, u) => {
+  const m = u == null ? void 0 : u[c];
+  m === void 0 || a === l ? (t[c] = a, a == null && c in HTMLElement.prototype && t.removeAttribute(c)) : ((i, n, o) => {
+    let s = v.get(i);
+    s === void 0 && v.set(i, s = /* @__PURE__ */ new Map());
+    let r = s.get(n);
+    o !== void 0 ? r === void 0 ? (s.set(n, r = { handleEvent: o }), i.addEventListener(n, r)) : r.handleEvent = o : r !== void 0 && (s.delete(n), i.removeEventListener(n, r));
+  })(t, m, a);
+}, h = ({ react: t, tagName: c, elementClass: a, events: l, displayName: u }) => {
+  const m = new Set(Object.keys(l ?? {})), i = t.forwardRef((n, o) => {
+    const s = t.useRef(null), r = t.useRef(null), p = {}, d = {};
+    for (const [e, f] of Object.entries(n))
+      N.has(e) ? p[e === "className" ? "class" : e] = f : m.has(e) || e in a.prototype ? d[e] = f : p[e] = f;
+    return t.useLayoutEffect(() => {
+      if (r.current !== null) {
+        for (const e in d)
+          g(r.current, e, n[e], s.current ? s.current[e] : void 0, l);
+        s.current = n;
+      }
+    }), t.useLayoutEffect(() => {
       var e;
-      this.t(), (e = this.o) === null || e === void 0 || e.removeAttribute("defer-hydration");
-    }
-    componentDidUpdate(e) {
-      this.t(e);
-    }
-    render() {
-      const { _$Gl: e, ...h } = this.props;
-      this.h !== e && (this.u = (s) => {
-        e !== null && P(e, s), this.o = s, this.h = e;
-      }), this.i = {};
-      const v = { ref: this.u };
-      for (const [s, y] of Object.entries(h))
-        b.has(s) ? v[s === "className" ? "class" : s] = y : l.has(s) || s in n.prototype ? this.i[s] = y : v[s] = y;
-      return v.suppressHydrationWarning = !0, a(r, v);
-    }
-  }
-  f.displayName = d ?? n.name;
-  const N = i.forwardRef((c, e) => a(f, { ...c, _$Gl: e }, c == null ? void 0 : c.children));
-  return N.displayName = f.displayName, N;
-}
-const R = B({
+      (e = r.current) == null || e.removeAttribute("defer-hydration");
+    }, []), p.suppressHydrationWarning = !0, t.createElement(c, { ...p, ref: t.useCallback((e) => {
+      r.current = e, typeof o == "function" ? o(e) : o !== null && (o.current = e);
+    }, [o]) });
+  });
+  return i.displayName = u ?? a.name, i;
+}, M = h({
   displayName: "PieButton",
   elementClass: E,
-  react: w,
+  react: y,
   tagName: "pie-button",
@@ -71,10 +49,11 @@ events: {}
 export {
-  R as PieButton,
+  M as PieButton,
   k as formEncodingtypes,
-  A as formMethodTypes,
-  D as formTargetTypes,
-  G as iconPlacements,
-  H as sizes,
-  O as types,
-  S as variants
+  C as formMethodTypes,
+  S as formTargetTypes,
+  j as iconPlacements,
+  x as responsiveSizes,
+  z as sizes,
+  A as types,
+  H as variants
 };

package.json

 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.38.0",
+  "version": "0.38.1-next.0",
   "description": "PIE design system button built using web components",
@@ -40,6 +40,6 @@ "type": "module",
   "dependencies": {
-    "@justeattakeaway/pie-spinner": "0.2.1",
-    "@justeattakeaway/pie-webc-core": "0.11.0",
+    "@justeattakeaway/pie-spinner": "0.2.2-next.0",
+    "@justeattakeaway/pie-webc-core": "0.12.0-next.0",
     "element-internals-polyfill": "1.3.8"
   }
 }

README.md

@@ -89,2 +89,3 @@ <p align="center">
 | isLoading      | `Boolean` | `false`    | If `true`, displays a loading indicator inside the button.                                                           |
+| isResponsive   | `Boolean` | `false`    | If `true`, uses the next larger size on wide viewports.                                                              |
 | iconPlacement  | `String`  | `leading`  | Icon placements of the icon slot, if provided, one of `iconPlacements` - `leading`, `trailing`                       |
@@ -98,2 +99,3 @@ | name           | `String`  | `undefined`| The name of the button, to be submitted with form data. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-name) |
 | formtarget     | `String`  | `undefined`| Dictates where to display the response after form submission. [Read further on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-formtarget) |
+| responsiveSize | `String`  | `productive`| Sets a specific size for xsmall button when rendered as responsive. It can be `productive` or `expressive`.         |
 
@@ -207,2 +209,2 @@
 
-Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

src/defs.ts

 export const sizes = ['xsmall', 'small-productive', 'small-expressive', 'medium', 'large'] as const;
+export const responsiveSizes = ['productive', 'expressive'] as const;
 export const types = ['submit', 'button', 'reset'] as const;
@@ -46,2 +47,7 @@ export const variants = [
     /**
+     * When true, enables the responsive size feature.
+     */
+    isResponsive: boolean;
+
+    /**
      * 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.
@@ -90,2 +96,7 @@ * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes)
     formtarget?: typeof formTargetTypes[number]
+
+    /**
+     * What size should be attributed to the button when isResponsive is true and the screen is wide.
+     */
+    responsiveSize?: typeof responsiveSizes[number];
 }

src/index.ts

@@ -5,2 +5,3 @@ import {
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
@@ -93,2 +94,5 @@ import {
 
+    @property({ type: Boolean })
+    public isResponsive = false;
+
     @property({ type: String })
@@ -115,2 +119,5 @@ public name?: string;
 
+    @property({ type: String })
+    public responsiveSize?: ButtonProps['responsiveSize'];
+
     /**
@@ -228,3 +235,5 @@ * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
             isLoading,
+            isResponsive,
             iconPlacement,
+            responsiveSize,
         } = this;
@@ -239,4 +248,6 @@
                 size=${size}
+                responsiveSize=${ifDefined(responsiveSize)}
                 ?disabled=${disabled}
                 ?isFullWidth=${isFullWidth}
+                ?isResponsive=${isResponsive}
                 ?isLoading=${isLoading}>
@@ -243,0 +254,0 @@ ${isLoading ? this.renderSpinner() : nothing}

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

87389

increased by5.72%

Lines of code

1379

increased by2.68%

Number of lines in readme file

208

increased by1.46%

Dependency changes

• + Added@justeattakeaway/pie-spinner@0.2.2-next.0(transitive)

• + Added@justeattakeaway/pie-webc-core@0.12.0-next.0(transitive)

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

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

• Updated@justeattakeaway/pie-spinner@0.2.2-next.0

• Updated@justeattakeaway/pie-webc-core@0.12.0-next.0