@justeattakeaway/pie-button 0.34.0 → 0.36.0

package/README.md

@@ -14,16 +14,13 @@
 2. [Installation](#installation)
 3. [Importing the component](#importing-the-component)
 4. [Peer Dependencies](#peer-dependencies)
-5. [Local Development](#local-development)
-6. [Props](#props)
-7. [Events](#events)
+5. [Props](#props)
+6. [Events](#events)
    - [HTML example](#html)
    - [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3)
    - [React example (using Next 13)](#react-templates-using-next-13)
-6. [Forms usage](#forms-usage)
-7. [Testing](#testing)
-   - [Browser Tests](#browser-tests)
-   - [Visual Tests](#visual-tests)
+7. [Forms usage](#forms-usage)
+8. [Contributing](#contributing)
 
 
 ## pie-button
@@ -71,30 +68,6 @@ import { PieButton } from '@justeattakeaway/pie-button/dist/react';
 > When using `pie-button`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki for more information and how to include these in your application](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies).
 
 
-## Local development
-
-Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
-
-```bash
-yarn
-```
-
-To build the `pie-button` package, run the following command:
-
-```bash
-yarn build --filter=pie-button
-```
-
-If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
-
-```bash
-yarn watch --filter=pie-button
-
-# in a separate terminal tab, run
-yarn dev --filter=pie-storybook
-```
-
-
 ## Props
 
 | Property       | Type      | Default    | Description                                                                                                          |
@@ -219,36 +192,6 @@ In this example:
 - No validation will be performed during submission, thanks to formnovalidate.
 - The form's submission response will be opened in a new browser tab/window because of the formtarget="_blank" attribute.
 
-## Testing
-
-### Browser tests
-
-To run the browser tests, run the following command from the root of the monorepo:
+## Contributing
 
-```bash
-yarn test:browsers --filter=pie-button
-```
-
-### Visual tests
-
-To run the visual regression tests, run the following command from the root of the monorepo:
-
-```bash
-yarn test:visual --filter=pie-button
-```
-
-Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
-
-#### Setup via bash
-
-```bash
-export PERCY_TOKEN_PIE_BUTTON=abcde
-```
-
-#### Setup via package.json
-
-Under scripts `test:visual` replace the environment variable with the below:
-
-```bash
-PERCY_TOKEN_PIE_BUTTON=abcde
-```
+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).

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import type { TemplateResult } from 'lit-html';
 
 export declare interface ButtonProps {
@@ -89,6 +90,9 @@ export declare class PieButton extends LitElement implements ButtonProps {
     private readonly _internals;
     get form(): HTMLFormElement | null;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues<this>): void;
     size: ButtonProps['size'];
     type: ButtonProps['type'];
     variant: ButtonProps['variant'];
@@ -113,6 +117,7 @@ export declare class PieButton extends LitElement implements ButtonProps {
      */
     private _simulateNativeButtonClick;
     private _handleClick;
+    private _handleFormKeyDown;
     render(): TemplateResult<1>;
     focus(): void;
     static styles: CSSResult;

package/dist/index.js

@@ -1,25 +1,25 @@
-import { unsafeCSS as wt, LitElement as Et, html as R, nothing as ot } from "lit";
+import { unsafeCSS as wt, LitElement as Et, html as O, nothing as ot } from "lit";
 import { property as f } from "lit/decorators.js";
-const N = (c, l, a) => function(m, y) {
+const N = (d, n, a) => function(m, y) {
   const b = `#${y}`;
   Object.defineProperty(m, y, {
     get() {
       return this[b];
     },
     set(p) {
-      const C = this[b];
-      l.includes(p) ? this[b] = p : (console.error(
-        `<${c}> Invalid value "${p}" provided for property "${y}".`,
-        `Must be one of: ${l.join(" | ")}.`,
+      const L = this[b];
+      n.includes(p) ? this[b] = p : (console.error(
+        `<${d}> Invalid value "${p}" provided for property "${y}".`,
+        `Must be one of: ${n.join(" | ")}.`,
         `Falling back to default value: "${a}"`
-      ), this[b] = a), this.requestUpdate(y, C);
+      ), this[b] = a), this.requestUpdate(y, L);
     }
   });
 };
-function xt(c, l) {
-  customElements.get(c) ? console.warn(`PIE Web Component: "${c}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(c, l);
+function xt(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 Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], kt = ["submit", "button", "reset"], zt = [
+const kt = ["xsmall", "small-productive", "small-expressive", "medium", "large"], Mt = ["submit", "button", "reset"], Ct = [
   "primary",
   "secondary",
   "outline",
@@ -29,10 +29,10 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
   "ghost-inverse",
   "destructive",
   "destructive-ghost"
-], Ct = ["leading", "trailing"], St = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Vt = ["post", "get", "dialog"], Nt = ["_self", "_blank", "_parent", "_top"], At = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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;--spinner-size-s: 20px;--spinner-size-m: 24px;--spinner-border-width-s: 2.5px;--spinner-border-width-m: 3px;--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m);--spinner-base-color-h: var(--dt-color-content-interactive-primary-h);--spinner-base-color-s: var(--dt-color-content-interactive-primary-s);--spinner-base-color-l: var(--dt-color-content-interactive-primary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;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: calc(-1 * 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: calc(-1 * 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);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.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);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.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);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.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);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.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);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.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;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-expressive],.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.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);--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m)}.o-btn[isLoading]:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count)}.o-btn[isLoading]>*{visibility:hidden}.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"], St = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Vt = ["post", "get", "dialog"], Nt = ["_self", "_blank", "_parent", "_top"], Ft = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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;--spinner-size-s: 20px;--spinner-size-m: 24px;--spinner-border-width-s: 2.5px;--spinner-border-width-m: 3px;--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m);--spinner-base-color-h: var(--dt-color-content-interactive-primary-h);--spinner-base-color-s: var(--dt-color-content-interactive-primary-s);--spinner-base-color-l: var(--dt-color-content-interactive-primary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;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: calc(-1 * 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: calc(-1 * 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);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.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);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.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);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.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);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.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);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.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;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-expressive],.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.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);--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m)}.o-btn[isLoading]:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count)}.o-btn[isLoading]>*{visibility:hidden}.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 c = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), L = {
+  const d = /* @__PURE__ */ new WeakMap(), n = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), c = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), L = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), A = {
     ariaAtomic: "aria-atomic",
     ariaAutoComplete: "aria-autocomplete",
     ariaBusy: "aria-busy",
@@ -75,72 +75,72 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     ariaValueText: "aria-valuetext",
     role: "role"
   }, it = (r, t) => {
-    for (let e in L) {
+    for (let e in A) {
       t[e] = null;
       let o = null;
-      const i = L[e];
+      const i = A[e];
       Object.defineProperty(t, e, {
         get() {
           return o;
         },
-        set(s) {
-          o = s, r.isConnected ? r.setAttribute(i, s) : A.set(r, t);
+        set(l) {
+          o = l, r.isConnected ? r.setAttribute(i, l) : F.set(r, t);
         }
       });
     }
   };
-  function q(r) {
-    const t = d.get(r), { form: e } = t;
+  function K(r) {
+    const t = c.get(r), { form: e } = t;
     Q(r, e, t), J(r, t.labels);
   }
-  const U = (r, t = !1) => {
+  const q = (r, t = !1) => {
     const e = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
-      acceptNode(s) {
-        return d.has(s) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+      acceptNode(l) {
+        return c.has(l) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
       }
     });
     let o = e.nextNode();
     const i = !t || r.disabled;
     for (; o; )
-      o.formDisabledCallback && i && _(o, r.disabled), o = e.nextNode();
-  }, j = { attributes: !0, attributeFilter: ["disabled", "name"] }, M = S() ? new MutationObserver((r) => {
+      o.formDisabledCallback && i && $(o, r.disabled), o = e.nextNode();
+  }, U = { attributes: !0, attributeFilter: ["disabled", "name"] }, k = S() ? new MutationObserver((r) => {
     for (const t of r) {
       const e = t.target;
-      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? _(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && U(e)), t.attributeName === "name" && e.constructor.formAssociated) {
-        const o = d.get(e), i = C.get(e);
+      if (t.attributeName === "disabled" && (e.constructor.formAssociated ? $(e, e.hasAttribute("disabled")) : e.localName === "fieldset" && q(e)), t.attributeName === "name" && e.constructor.formAssociated) {
+        const o = c.get(e), i = L.get(e);
         o.setFormValue(i);
       }
     }
   }) : {};
   function P(r) {
     r.forEach((t) => {
-      const { addedNodes: e, removedNodes: o } = t, i = Array.from(e), s = Array.from(o);
-      i.forEach((n) => {
+      const { addedNodes: e, removedNodes: o } = t, i = Array.from(e), l = Array.from(o);
+      i.forEach((s) => {
         var u;
-        if (d.has(n) && n.constructor.formAssociated && q(n), A.has(n)) {
-          const v = A.get(n);
-          Object.keys(L).filter((w) => v[w] !== null).forEach((w) => {
-            n.setAttribute(L[w], v[w]);
-          }), A.delete(n);
+        if (c.has(s) && s.constructor.formAssociated && K(s), F.has(s)) {
+          const v = F.get(s);
+          Object.keys(A).filter((w) => v[w] !== null).forEach((w) => {
+            s.setAttribute(A[w], v[w]);
+          }), F.delete(s);
         }
-        if (F.has(n)) {
-          const v = F.get(n);
-          n.setAttribute("internals-valid", v.validity.valid.toString()), n.setAttribute("internals-invalid", (!v.validity.valid).toString()), n.setAttribute("aria-invalid", (!v.validity.valid).toString()), F.delete(n);
+        if (z.has(s)) {
+          const v = z.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()), z.delete(s);
         }
-        if (n.localName === "form") {
-          const v = p.get(n), x = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
+        if (s.localName === "form") {
+          const v = p.get(s), x = document.createTreeWalker(s, NodeFilter.SHOW_ELEMENT, {
             acceptNode(rt) {
-              return d.has(rt) && !(v && v.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+              return c.has(rt) && !(v && v.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
             }
           });
           let w = x.nextNode();
           for (; w; )
-            q(w), w = x.nextNode();
+            K(w), w = x.nextNode();
         }
-        n.localName === "fieldset" && ((u = M.observe) == null || u.call(M, n, j), U(n, !0));
-      }), s.forEach((n) => {
-        const u = d.get(n);
-        u && a.get(u) && K(u), b.has(n) && b.get(n).disconnect();
+        s.localName === "fieldset" && ((u = k.observe) == null || u.call(k, s, U), q(s, !0));
+      }), l.forEach((s) => {
+        const u = c.get(s);
+        u && a.get(u) && j(u), b.has(s) && b.get(s).disconnect();
       });
     });
   }
@@ -148,23 +148,23 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     r.forEach((t) => {
       const { removedNodes: e } = t;
       e.forEach((o) => {
-        const i = D.get(t.target);
-        d.has(o) && Y(o), i.disconnect();
+        const i = H.get(t.target);
+        c.has(o) && Y(o), i.disconnect();
       });
     });
   }
   const nt = (r) => {
     var e;
     const t = new MutationObserver(at);
-    (e = t.observe) == null || e.call(t, r, { childList: !0 }), D.set(r, t);
+    (e = t.observe) == null || e.call(t, r, { childList: !0 }), H.set(r, t);
   };
   S() && new MutationObserver(P);
-  const $ = {
+  const _ = {
     childList: !0,
     subtree: !0
-  }, _ = (r, t) => {
+  }, $ = (r, t) => {
     r.toggleAttribute("internals-disabled", t), t ? r.setAttribute("aria-disabled", "true") : r.removeAttribute("aria-disabled"), r.formDisabledCallback && r.formDisabledCallback.apply(r, [t]);
-  }, K = (r) => {
+  }, j = (r) => {
     a.get(r).forEach((e) => {
       e.remove();
     }), a.set(r, []);
@@ -173,7 +173,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     return e.type = "hidden", e.name = r.getAttribute("name"), r.after(e), a.get(t).push(e), e;
   }, st = (r, t) => {
     var e;
-    a.set(t, []), (e = M.observe) == null || e.call(M, r, j);
+    a.set(t, []), (e = k.observe) == null || e.call(k, r, U);
   }, J = (r, t) => {
     if (t.length) {
       Array.from(t).forEach((o) => o.addEventListener("click", r.click.bind(r)));
@@ -181,7 +181,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       t[0].id || (e = `${t[0].htmlFor}_Label`, t[0].id = e), r.setAttribute("aria-labelledby", e);
     }
   }, I = (r) => {
-    const t = Array.from(r.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), e = p.get(r) || [], o = Array.from(e).filter((s) => s.isConnected).map((s) => d.get(s).validity.valid), i = [...t, ...o].includes(!1);
+    const t = Array.from(r.elements).filter((l) => !l.tagName.includes("-") && l.validity).map((l) => l.validity.valid), e = p.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) => {
     I(T(r.target));
@@ -194,7 +194,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         const i = p.get(r);
         if (r.noValidate)
           return;
-        i.size && Array.from(i).reverse().map((u) => d.get(u).reportValidity()).includes(!1) && e.preventDefault();
+        i.size && Array.from(i).reverse().map((u) => c.get(u).reportValidity()).includes(!1) && e.preventDefault();
       }
     });
   }, vt = (r) => {
@@ -224,11 +224,11 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
   }, X = (r, t, e) => {
     const o = p.get(r);
     return o && o.size && o.forEach((i) => {
-      d.get(i)[e]() || (t = !1);
+      c.get(i)[e]() || (t = !1);
     }), t;
   }, Y = (r) => {
     if (r.constructor.formAssociated) {
-      const t = d.get(r), { labels: e, form: o } = t;
+      const t = c.get(r), { labels: e, form: o } = t;
       J(r, e), Q(r, o, t);
     }
   };
@@ -245,7 +245,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     for (let e in r)
       e !== "valid" && r[e] !== !1 && (t = !1);
     return t;
-  }, O = /* @__PURE__ */ new WeakMap();
+  }, D = /* @__PURE__ */ new WeakMap();
   function Z(r, t) {
     r.toggleAttribute(t, !0), r.part && r.part.add(t);
   }
@@ -256,12 +256,12 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     constructor(t) {
       if (super(), !t || !t.tagName || t.tagName.indexOf("-") === -1)
         throw new TypeError("Illegal constructor");
-      O.set(this, t);
+      D.set(this, t);
     }
     add(t) {
       if (!/^--/.test(t) || typeof t != "string")
         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}`;
+      const e = super.add(t), o = D.get(this), i = `state${t}`;
       return o.isConnected ? Z(o, i) : setTimeout(() => {
         Z(o, i);
       }), e;
@@ -272,7 +272,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       super.clear();
     }
     delete(t) {
-      const e = super.delete(t), o = O.get(this);
+      const e = super.delete(t), o = D.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}`);
       }), e;
@@ -294,10 +294,10 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       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;
   }
-  var k;
+  var M;
   class ft {
     constructor(t) {
-      k.set(this, void 0), ut(this, k, t, "f");
+      M.set(this, void 0), ut(this, M, 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);
@@ -305,10 +305,10 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       Object.freeze(this);
     }
     get length() {
-      return tt(this, k, "f").length;
+      return tt(this, M, "f").length;
     }
-    [(k = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
-      return tt(this, k, "f")[Symbol.iterator]();
+    [(M = /* @__PURE__ */ new WeakMap(), Symbol.iterator)]() {
+      return tt(this, M, "f")[Symbol.iterator]();
     }
     item(t) {
       return this[t] == null ? null : this[t];
@@ -322,21 +322,21 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
     HTMLFormElement.prototype.checkValidity = e;
     const t = HTMLFormElement.prototype.reportValidity;
     HTMLFormElement.prototype.reportValidity = o;
-    function e(...s) {
-      let n = r.apply(this, s);
-      return X(this, n, "checkValidity");
+    function e(...l) {
+      let s = r.apply(this, l);
+      return X(this, s, "checkValidity");
     }
-    function o(...s) {
-      let n = t.apply(this, s);
-      return X(this, n, "reportValidity");
+    function o(...l) {
+      let s = t.apply(this, l);
+      return X(this, s, "reportValidity");
     }
     const { get: i } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
     Object.defineProperty(HTMLFormElement.prototype, "elements", {
-      get(...s) {
-        const n = i.call(this, ...s), u = Array.from(p.get(this) || []);
+      get(...l) {
+        const s = i.call(this, ...l), u = Array.from(p.get(this) || []);
         if (u.length === 0)
-          return n;
-        const v = Array.from(n).concat(u).sort((x, w) => x.compareDocumentPosition ? x.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
+          return s;
+        const v = Array.from(s).concat(u).sort((x, w) => x.compareDocumentPosition ? x.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
         return new ft(v);
       }
     });
@@ -349,13 +349,13 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
         throw new TypeError("Illegal constructor");
       const e = t.getRootNode(), o = new ht();
-      this.states = new V(t), c.set(this, t), l.set(this, o), d.set(t, this), it(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && nt(e);
+      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);
     }
     checkValidity() {
-      const t = c.get(this);
+      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)
         return !0;
-      const e = l.get(this);
+      const e = n.get(this);
       if (!e.valid) {
         const o = new Event("invalid", {
           bubbles: !1,
@@ -367,29 +367,29 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       return e.valid;
     }
     get form() {
-      const t = c.get(this);
+      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.");
       let e;
       return t.constructor.formAssociated === !0 && (e = T(t)), e;
     }
     get labels() {
-      const t = c.get(this);
+      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}"]`) : [];
     }
     reportValidity() {
-      const t = c.get(this);
+      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)
         return !0;
-      const e = this.checkValidity(), o = H.get(this);
+      const e = this.checkValidity(), o = W.get(this);
       if (o && !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;
     }
     setFormValue(t) {
-      const e = c.get(this);
-      if (E(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), K(this), t != null && !(t instanceof FormData)) {
+      const e = d.get(this);
+      if (E(e, "Failed to execute 'setFormValue' on 'ElementInternals': The target element is not a form-associated custom element."), j(this), t != null && !(t instanceof FormData)) {
         if (e.getAttribute("name")) {
           const o = G(e, this);
           o.value = t;
@@ -397,42 +397,42 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
       } else
         t != null && t instanceof FormData && Array.from(t).reverse().forEach(([o, i]) => {
           if (typeof i == "string") {
-            const s = G(e, this);
-            s.name = o, s.value = i;
+            const l = G(e, this);
+            l.name = o, l.value = i;
           }
         });
-      C.set(e, t);
+      L.set(e, t);
     }
     setValidity(t, e, o) {
-      const i = c.get(this);
+      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)
         throw new TypeError("Failed to execute 'setValidity' on 'ElementInternals': 1 argument required, but only 0 present.");
-      H.set(this, o);
-      const s = l.get(this), n = {};
+      W.set(this, o);
+      const l = n.get(this), s = {};
       for (const x in t)
-        n[x] = t[x];
-      Object.keys(n).length === 0 && pt(s);
-      const u = { ...s, ...n };
+        s[x] = t[x];
+      Object.keys(s).length === 0 && pt(l);
+      const u = { ...l, ...s };
       delete u.valid;
-      const { valid: v } = mt(s, u, this.form);
+      const { valid: v } = mt(l, u, 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.");
-      m.set(this, v ? "" : e), i.isConnected ? (i.toggleAttribute("internals-invalid", !v), i.toggleAttribute("internals-valid", v), i.setAttribute("aria-invalid", `${!v}`)) : F.set(i, this);
+      m.set(this, v ? "" : e), i.isConnected ? (i.toggleAttribute("internals-invalid", !v), i.toggleAttribute("internals-valid", v), i.setAttribute("aria-invalid", `${!v}`)) : z.set(i, this);
     }
     get shadowRoot() {
-      const t = c.get(this), e = W.get(t);
+      const t = d.get(this), e = R.get(t);
       return e || null;
     }
     get validationMessage() {
-      const t = c.get(this);
+      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."), m.get(this);
     }
     get validity() {
-      const t = c.get(this);
-      return E(t, "Failed to read the 'validity' property from 'ElementInternals': The target element is not a form-associated custom element."), l.get(this);
+      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);
     }
     get willValidate() {
-      const t = c.get(this);
+      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"));
     }
   }
@@ -476,7 +476,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
         if (e.formAssociated) {
           const i = e.prototype.connectedCallback;
           e.prototype.connectedCallback = function() {
-            B.has(this) || (B.set(this, !0), this.hasAttribute("disabled") && _(this, !0)), i != null && i.apply(this), Y(this);
+            B.has(this) || (B.set(this, !0), this.hasAttribute("disabled") && $(this, !0)), i != null && i.apply(this), Y(this);
           };
         }
         r.call(this, t, e, o);
@@ -488,37 +488,58 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
           throw new Error("Failed to execute 'attachInternals' on 'HTMLElement': Unable to attach ElementInternals to non-custom elements.");
       } else
         return {};
-      if (d.has(this))
+      if (c.has(this))
         throw new DOMException("DOMException: Failed to execute 'attachInternals' on 'HTMLElement': ElementInternals for the specified element was already attached.");
       return new et(this);
     }), typeof Element < "u") {
       let r = function(...e) {
         const o = t.apply(this, e);
-        if (W.set(this, o), S()) {
+        if (R.set(this, o), S()) {
           const i = new MutationObserver(P);
-          window.ShadyDOM ? i.observe(this, $) : i.observe(o, $), b.set(this, i);
+          window.ShadyDOM ? i.observe(this, _) : i.observe(o, _), b.set(this, i);
         }
         return o;
       };
       const t = Element.prototype.attachShadow;
       Element.prototype.attachShadow = r;
     }
-    S() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, $), typeof HTMLFormElement < "u" && gt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
+    S() && typeof document < "u" && new MutationObserver(P).observe(document.documentElement, _), typeof HTMLFormElement < "u" && gt(), typeof window < "u" && !window.CustomStateSet && (window.CustomStateSet = V);
   }
 })();
-var Ft = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, g = (c, l, a, d) => {
-  for (var m = d > 1 ? void 0 : d ? Lt(l, a) : l, y = c.length - 1, b; y >= 0; y--)
-    (b = c[y]) && (m = (d ? b(l, a, m) : b(m)) || m);
-  return d && m && Ft(l, a, m), m;
+var zt = Object.defineProperty, At = Object.getOwnPropertyDescriptor, g = (d, n, a, c) => {
+  for (var m = c > 1 ? void 0 : c ? At(n, a) : n, y = d.length - 1, b; y >= 0; y--)
+    (b = d[y]) && (m = (c ? b(n, a, m) : b(m)) || m);
+  return c && m && zt(n, a, m), m;
 };
-const z = "pie-button";
+const C = "pie-button";
 class h extends Et {
   constructor() {
-    super(), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this._internals = this.attachInternals();
+    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) => {
+      if (!(n.key !== "Enter" || this.type !== "submit" || this.disabled)) {
+        if (n.target instanceof HTMLElement) {
+          const a = n.target.tagName.toLowerCase();
+          if (a === "button" || a === "pie-button")
+            return;
+        }
+        n.preventDefault(), this._handleClick();
+      }
+    }, this._internals = this.attachInternals();
   }
   get form() {
     return this._internals.form;
   }
+  connectedCallback() {
+    var n;
+    super.connectedCallback(), this.type === "submit" && ((n = this.form) == null || n.addEventListener("keydown", this._handleFormKeyDown));
+  }
+  disconnectedCallback() {
+    var n;
+    super.disconnectedCallback(), this.type === "submit" && ((n = this.form) == null || n.removeEventListener("keydown", this._handleFormKeyDown));
+  }
+  updated(n) {
+    var a, c;
+    super.updated(n), n.has("type") && (this.type === "submit" ? (a = this.form) == null || a.addEventListener("keydown", this._handleFormKeyDown) : (c = this.form) == null || c.removeEventListener("keydown", this._handleFormKeyDown));
+  }
   /**
    * This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.
    * This is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM
@@ -527,62 +548,62 @@ class h extends Et {
    *
    * TODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin.
    */
-  _simulateNativeButtonClick(l) {
+  _simulateNativeButtonClick(n) {
     if (!this.form)
       return;
     const a = document.createElement("button");
-    a.type = l, a.style.position = "absolute", a.style.width = "1px", a.style.height = "1px", a.style.padding = "0", a.style.margin = "-1px", a.style.overflow = "hidden", a.style.border = "0", a.style.whiteSpace = "nowrap", l === "submit" && (this.name && (a.name = this.name), this.value && (a.value = this.value), this.formaction && a.setAttribute("formaction", this.formaction), this.formenctype && a.setAttribute("formenctype", this.formenctype), this.formmethod && a.setAttribute("formmethod", this.formmethod), this.formnovalidate && a.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && a.setAttribute("formtarget", this.formtarget)), this.form.append(a), a.click(), a.remove();
+    a.type = n, a.style.position = "absolute", a.style.width = "1px", a.style.height = "1px", a.style.padding = "0", a.style.margin = "-1px", a.style.overflow = "hidden", a.style.border = "0", a.style.whiteSpace = "nowrap", n === "submit" && (this.name && (a.name = this.name), this.value && (a.value = this.value), this.formaction && a.setAttribute("formaction", this.formaction), this.formenctype && a.setAttribute("formenctype", this.formenctype), this.formmethod && a.setAttribute("formmethod", this.formmethod), this.formnovalidate && a.setAttribute("formnovalidate", "formnovalidate"), this.formtarget && a.setAttribute("formtarget", this.formtarget)), this.form.append(a), a.click(), a.remove();
   }
   _handleClick() {
     !this.isLoading && this.form && (this.type === "submit" && (this.formnovalidate || this.form.reportValidity()) && this._simulateNativeButtonClick("submit"), this.type === "reset" && this._simulateNativeButtonClick("reset"));
   }
   render() {
     const {
-      type: l,
+      type: n,
       disabled: a,
-      isFullWidth: d,
+      isFullWidth: c,
       variant: m,
       size: y,
       isLoading: b,
       iconPlacement: p
     } = this;
-    return R`
+    return O`
             <button
                 @click=${this._handleClick}
                 class="o-btn"
-                type=${l}
+                type=${n}
                 variant=${m}
                 size=${y}
                 ?disabled=${a}
-                ?isFullWidth=${d}
+                ?isFullWidth=${c}
                 ?isLoading=${b}>
-                    ${p === "leading" ? R`<slot name="icon"></slot>` : ot}
+                    ${p === "leading" ? O`<slot name="icon"></slot>` : ot}
                     <slot></slot>
-                    ${p === "trailing" ? R`<slot name="icon"></slot>` : ot}
+                    ${p === "trailing" ? O`<slot name="icon"></slot>` : ot}
             </button>`;
   }
   focus() {
-    var l, a;
-    (a = (l = this.shadowRoot) == null ? void 0 : l.querySelector("button")) == null || a.focus();
+    var n, a;
+    (a = (n = this.shadowRoot) == null ? void 0 : n.querySelector("button")) == null || a.focus();
   }
 }
 h.formAssociated = !0;
-h.styles = wt(At);
+h.styles = wt(Ft);
 g([
   f(),
-  N(z, Mt, "medium")
+  N(C, kt, "medium")
 ], h.prototype, "size", 2);
 g([
   f(),
-  N(z, kt, "submit")
+  N(C, Mt, "submit")
 ], h.prototype, "type", 2);
 g([
   f(),
-  N(z, zt, "primary")
+  N(C, Ct, "primary")
 ], h.prototype, "variant", 2);
 g([
   f({ type: String }),
-  N(z, Ct, "leading")
+  N(C, Lt, "leading")
 ], h.prototype, "iconPlacement", 2);
 g([
   f({ type: Boolean })
@@ -614,14 +635,14 @@ g([
 g([
   f()
 ], h.prototype, "formtarget", 2);
-xt(z, h);
+xt(C, h);
 export {
   h as PieButton,
   St as formEncodingtypes,
   Vt as formMethodTypes,
   Nt as formTargetTypes,
-  Ct as iconPlacements,
-  Mt as sizes,
-  kt as types,
-  zt as variants
+  Lt as iconPlacements,
+  kt as sizes,
+  Mt as types,
+  Ct as variants
 };

package/dist/react.d.ts

@@ -1,5 +1,6 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import type { ReactWebComponent } from '@lit-labs/react';
 import type { TemplateResult } from 'lit-html';
 
@@ -92,6 +93,9 @@ declare class PieButton_2 extends LitElement implements ButtonProps {
     private readonly _internals;
     get form(): HTMLFormElement | null;
     constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues<this>): void;
     size: ButtonProps['size'];
     type: ButtonProps['type'];
     variant: ButtonProps['variant'];
@@ -116,6 +120,7 @@ declare class PieButton_2 extends LitElement implements ButtonProps {
      */
     private _simulateNativeButtonClick;
     private _handleClick;
+    private _handleFormKeyDown;
     render(): TemplateResult<1>;
     focus(): void;
     static styles: CSSResult;

package/dist/react.js

@@ -1,6 +1,6 @@
-import * as E from "react";
-import { PieButton as M } from "./index.js";
-import { formEncodingtypes as j, formMethodTypes as k, formTargetTypes as D, iconPlacements as G, sizes as O, types as S, variants as _ } from "./index.js";
+import * as w from "react";
+import { PieButton as E } from "./index.js";
+import { formEncodingtypes as j, formMethodTypes as k, formTargetTypes as A, iconPlacements as D, sizes as G, types as H, variants as O } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 /**
@@ -8,59 +8,60 @@ import "lit/decorators.js";
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const P = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), w = /* @__PURE__ */ new WeakMap(), b = (m, r, p, d, u) => {
-  const o = u == null ? void 0 : u[r];
-  o === void 0 || p === d ? p == null && r in HTMLElement.prototype ? m.removeAttribute(r) : m[r] = p : ((s, t, h) => {
-    let i = w.get(s);
-    i === void 0 && w.set(s, i = /* @__PURE__ */ new Map());
-    let a = i.get(t);
-    h !== void 0 ? a === void 0 ? (i.set(t, a = { handleEvent: h }), s.addEventListener(t, a)) : a.handleEvent = h : a !== void 0 && (i.delete(t), s.removeEventListener(t, a));
-  })(m, o, p);
+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(m = window.React, r, p, d, u) {
-  let o, s, t;
-  if (r === void 0) {
-    const l = m;
-    ({ tagName: s, elementClass: t, events: d, displayName: u } = l), o = l.react;
+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
-    o = m, t = p, s = r;
-  const h = o.Component, i = o.createElement, a = new Set(Object.keys(d ?? {}));
-  class v extends h {
+    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 f in this.i)
-          b(this.o, f, this.props[f], e ? e[f] : void 0, d);
+        for (const h in this.i)
+          M(this.o, h, this.props[h], e ? e[h] : void 0, p);
     }
     componentDidMount() {
-      this.t();
+      var e;
+      this.t(), (e = this.o) === null || e === void 0 || e.removeAttribute("defer-hydration");
     }
     componentDidUpdate(e) {
       this.t(e);
     }
     render() {
-      const { _$Gl: e, ...f } = this.props;
-      this.h !== e && (this.u = (n) => {
-        e !== null && ((c, g) => {
-          typeof c == "function" ? c(g) : c.current = g;
-        })(e, n), this.o = n, this.h = e;
+      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 y = { ref: this.u };
-      for (const [n, c] of Object.entries(f))
-        P.has(n) ? y[n === "className" ? "class" : n] = c : a.has(n) || n in t.prototype ? this.i[n] = c : y[n] = c;
-      return i(s, y);
+      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);
     }
   }
-  v.displayName = u ?? t.name;
-  const N = o.forwardRef((l, e) => i(v, { ...l, _$Gl: e }, l == null ? void 0 : l.children));
-  return N.displayName = v.displayName, N;
+  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 L = B({
   displayName: "PieButton",
-  elementClass: M,
-  react: E,
+  elementClass: E,
+  react: w,
   tagName: "pie-button",
   events: {}
 });
@@ -68,9 +69,9 @@ export {
   L as PieButton,
   j as formEncodingtypes,
   k as formMethodTypes,
-  D as formTargetTypes,
-  G as iconPlacements,
-  O as sizes,
-  S as types,
-  _ as variants
+  A as formTargetTypes,
+  D as iconPlacements,
+  G as sizes,
+  H as types,
+  O as variants
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.34.0",
+  "version": "0.36.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
   "devDependencies": {
     "@justeat/pie-design-tokens": "5.8.2",
     "@justeattakeaway/pie-components-config": "0.4.0",
-    "@justeattakeaway/pie-css": "0.6.0",
+    "@justeattakeaway/pie-css": "0.7.0",
     "@justeattakeaway/pie-webc-core": "0.11.0"
   },
   "volta": {

package/src/button.scss

@@ -6,46 +6,6 @@
     box-sizing: border-box;
 }
 
-/**
-* Defines button interactive states for hover, active and loading.
-* $bg-color: design token name to be used for the states
-* $mode: 'default': apply the default lighten/darken to the color via hsl
-*        'transparent': uses hsla syntax to make the color semi-opaque (used for ghost and outline button variants)
-*/
-@mixin button-interactive-states($bg-color, $mode: 'default') {
-    &:hover:not(:disabled) {
-        @if $mode == 'alt' {
-            --hover-modifier: calc(-1 * var(--dt-color-hover-02));
-        } @else {
-            --hover-modifier: calc(-1 * var(--dt-color-hover-01));
-        }
-
-        // for mode=transparent, use the hsla syntax to make the button background opaque by a set percentage
-        @if $mode == 'transparent' {
-            --hover-modifier: var(--dt-color-hover-01);
-            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--hover-modifier));
-        } @else {
-            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
-        }
-    }
-
-    &:active:not(:disabled),
-    &[isLoading]:not(:disabled) {
-        @if $mode == 'alt' {
-            --active-modifier: calc(-1 * var(--dt-color-active-02));
-        } @else {
-            --active-modifier: calc(-1 * var(--dt-color-active-01));
-        }
-
-        @if $mode == 'transparent' {
-            --active-modifier: var(--dt-color-active-01);
-            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), var(#{$bg-color}-l), var(--active-modifier));
-        } @else {
-            --btn-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--active-modifier)));
-        }
-    }
-}
-
 /**
 * Shorthand mixin for updating the HSL custom properties for the loading spinner.
 * Takes in the name of the color to be split into its HSL components.
@@ -142,7 +102,7 @@
 
     // Variant
     &[variant='primary'] {
-        @include button-interactive-states('--dt-color-interactive-brand');
+        @include p.button-interactive-states('--dt-color-interactive-brand');
 
         &[size='xsmall'],
         &[size='small-productive'] {
@@ -152,7 +112,7 @@
             **/
             --btn-bg-color: var(--dt-color-interactive-primary);
 
-            @include button-interactive-states('--dt-color-interactive-primary', 'alt');
+            @include p.button-interactive-states('--dt-color-interactive-primary', 'alt');
         }
     }
 
@@ -160,7 +120,7 @@
         --btn-bg-color: var(--dt-color-interactive-secondary);
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
-        @include button-interactive-states('--dt-color-interactive-secondary');
+        @include p.button-interactive-states('--dt-color-interactive-secondary');
         @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
@@ -172,7 +132,7 @@
 
         // use black as the background color for hover and inverse,
         // as this variant uses a shade of transparent black showing through the container background
-        @include button-interactive-states('--dt-color-black', 'transparent');
+        @include p.button-interactive-states('--dt-color-black', 'transparent');
         @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
@@ -182,7 +142,7 @@
 
         // use black as the background color for hover and inverse,
         // as this variant uses a shade of transparent black showing through the container background
-        @include button-interactive-states('--dt-color-black', 'transparent');
+        @include p.button-interactive-states('--dt-color-black', 'transparent');
         @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
@@ -190,7 +150,7 @@
         --btn-bg-color: var(--dt-color-interactive-inverse);
         --btn-text-color: var(--dt-color-content-interactive-secondary);
 
-        @include button-interactive-states('--dt-color-interactive-inverse');
+        @include p.button-interactive-states('--dt-color-interactive-inverse');
         @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 
@@ -201,7 +161,7 @@
 
         // use white as the background color for hover and inverse,
         // as these variants use a shade of transparent white showing through the container background
-        @include button-interactive-states('--dt-color-container-default', 'transparent');
+        @include p.button-interactive-states('--dt-color-container-default', 'transparent');
     }
 
     &[variant='outline-inverse'] {
@@ -211,7 +171,7 @@
     &[variant='destructive'] {
         --btn-bg-color: var(--dt-color-support-error);
 
-        @include button-interactive-states('--dt-color-support-error');
+        @include p.button-interactive-states('--dt-color-support-error');
     }
 
     &[variant='destructive-ghost'] {
@@ -220,7 +180,7 @@
 
         // use black as the background color for hover and inverse,
         // as this variant uses a shade of transparent black showing through the container background
-        @include button-interactive-states('--dt-color-black', 'transparent');
+        @include p.button-interactive-states('--dt-color-black', 'transparent');
         @include spinner-base-colors('--dt-color-content-interactive-secondary');
     }
 

package/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    LitElement, html, unsafeCSS, nothing,
+    LitElement, html, unsafeCSS, nothing, PropertyValues,
 } from 'lit';
 import { property } from 'lit/decorators.js';
 import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
@@ -34,6 +34,35 @@ export class PieButton extends LitElement implements ButtonProps {
         this._internals = this.attachInternals();
     }
 
+    connectedCallback () {
+        super.connectedCallback();
+
+        if (this.type === 'submit') {
+            this.form?.addEventListener('keydown', this._handleFormKeyDown);
+        }
+    }
+
+    disconnectedCallback () {
+        super.disconnectedCallback();
+
+        if (this.type === 'submit') {
+            this.form?.removeEventListener('keydown', this._handleFormKeyDown);
+        }
+    }
+
+    updated (changedProperties: PropertyValues<this>): void {
+        super.updated(changedProperties);
+
+        if (changedProperties.has('type')) {
+            // If the new type is "submit", add the keydown event listener
+            if (this.type === 'submit') {
+                this.form?.addEventListener('keydown', this._handleFormKeyDown);
+            } else {
+                this.form?.removeEventListener('keydown', this._handleFormKeyDown);
+            }
+        }
+    }
+
     @property()
     @validPropertyValues(componentSelector, sizes, 'medium')
     public size: ButtonProps['size'] = 'medium';
@@ -148,6 +177,25 @@ export class PieButton extends LitElement implements ButtonProps {
         }
     }
 
+    // This allows a user to press enter anywhere inside the form and trigger a form submission
+    private _handleFormKeyDown = (event: KeyboardEvent) => {
+        if (event.key !== 'Enter' || this.type !== 'submit' || this.disabled) {
+            return;
+        }
+
+        if (event.target instanceof HTMLElement) {
+            const targetTagName = event.target.tagName.toLowerCase();
+
+            // We want to ignore the enter key if the user is on a button or another pie-button
+            if (targetTagName === 'button' || targetTagName === 'pie-button') {
+                return;
+            }
+        }
+
+        event.preventDefault();
+        this._handleClick();
+    };
+
     render () {
         const {
             type,