@justeattakeaway/pie-modal 0.14.0 → 0.17.0

package/dist/types/packages/components/pie-modal/src/defs.d.ts

@@ -3,7 +3,38 @@ import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
 export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 export declare const sizes: readonly ["small", "medium", "large"];
 export declare const positions: readonly ["top", "center"];
-export interface ModalProps extends RTLComponentProps {
+export type AriaProps = {
+    close?: string;
+    back?: string;
+    loading?: string;
+};
+export type ActionProps = {
+    /**
+     * The text to display inside the button.
+     */
+    text: string;
+    /**
+     * The button variant.
+     */
+    variant?: Variant;
+    /**
+     * The ARIA label for the button.
+     */
+    ariaLabel?: string;
+};
+export type ModalProps = RTLComponentProps & {
+    /**
+     * The ARIA labels used for the modal close and back buttons, as well as loading state.
+     */
+    aria?: AriaProps;
+    /**
+     * When true, the modal will have a back button. This currently behaves the same as the close button.
+     */
+    hasBackButton: boolean;
+    /**
+     * When true, the modal will have a back button. This currently behaves the same as the close button.
+     */
+    hasStackedActions: boolean;
     /**
      * The text to display in the modal's heading.
      */
@@ -29,17 +60,22 @@ export interface ModalProps extends RTLComponentProps {
      */
     isDismissible: boolean;
     /**
-     * When true, displays a loading spinner in the modal.
+     * When false, the modal footer will scroll with the content inside the modal body.
      */
-    isLoading: boolean;
-    /**
-     * When true, the modal will have a back button. This currently behaves the same as the close button.
-     */
-    hasBackButton: boolean;
+    isFooterPinned: boolean;
     /**
      * This controls whether a *medium-sized* modal will cover the full width of the page when below the mid breakpoint.
      */
     isFullWidthBelowMid: boolean;
+    /**
+     * When true, displays a loading spinner in the modal.
+     */
+    isLoading: boolean;
+    /**
+     * The leading action configuration for the modal.
+     */
+    leadingAction: ActionProps;
+    position: typeof positions[number];
     /**
      * The selector for the element that you would like focus to be returned to when the modal is closed, e.g., #skipToMain
      */
@@ -49,25 +85,10 @@ export interface ModalProps extends RTLComponentProps {
      */
     size: typeof sizes[number];
     /**
-     * The leading action configuration for the modal.
+     * The supporting action configuration for the modal.
      */
-    leadingAction: {
-        /**
-         * The text to display for the leading action button.
-         */
-        text: string;
-        /**
-         * The variant of the leading action button.
-         * Default: 'primary'
-         */
-        variant?: Variant;
-        /**
-         * The ARIA label for the leading action button.
-         */
-        ariaLabel?: string;
-    };
-    position: typeof positions[number];
-}
+    supportingAction: ActionProps;
+};
 /**
  * Event name for when the modal is closed.
  *

package/dist/types/packages/components/pie-modal/src/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAElE,eAAO,MAAM,aAAa,+CAAgD,CAAC;AAC3E,eAAO,MAAM,KAAK,uCAAwC,CAAC;AAC3D,eAAO,MAAM,SAAS,4BAA6B,CAAC;AAEpD,MAAM,WAAW,UAAW,SAAQ,iBAAiB;IACjD;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,YAAY,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;IAE3C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;;;;;OAUG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,mBAAmB,EAAE,OAAO,CAAC;IAE7B;;OAEG;IACH,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAEvC;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAE3B;;OAEG;IACH,aAAa,EAAE;QACX;;WAEG;QACH,IAAI,EAAE,MAAM,CAAC;QAEb;;;WAGG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAElB;;WAEG;QACH,SAAS,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IAKF,QAAQ,EAAE,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;CACtC;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAC;AAEpD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAElE,eAAO,MAAM,aAAa,+CAAgD,CAAC;AAC3E,eAAO,MAAM,KAAK,uCAAwC,CAAC;AAC3D,eAAO,MAAM,SAAS,4BAA6B,CAAC;AAEpD,MAAM,MAAM,SAAS,GAAG;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IAClB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,iBAAiB,GAAG;IACzC;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,iBAAiB,EAAE,OAAO,CAAC;IAE3B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,YAAY,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;IAE3C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;;;;;OAUG;IACH,aAAa,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,cAAc,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,mBAAmB,EAAE,OAAO,CAAC;IAE7B;;OAEG;IACH,SAAS,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,aAAa,EAAE,WAAW,CAAC;IAK3B,QAAQ,EAAE,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;IAEnC;;OAEG;IACH,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAEvC;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAE3B;;OAEG;IACH,gBAAgB,EAAE,WAAW,CAAC;CACjC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAC;AAEpD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAC"}

package/dist/types/packages/components/pie-modal/src/index.d.ts

@@ -1,7 +1,6 @@
 import { LitElement, TemplateResult } from 'lit';
 import type { DependentMap } from '@justeattakeaway/pie-webc-core';
-import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
-import { ModalProps, headingLevels, sizes } from './defs';
+import { type AriaProps, type ActionProps, type ModalProps, headingLevels, sizes } from './defs';
 export { type ModalProps, headingLevels, sizes };
 declare const componentSelector = "pie-modal";
 declare const PieModal_base: (new (...args: any[]) => {
@@ -14,21 +13,21 @@ declare const PieModal_base: (new (...args: any[]) => {
  * @event {CustomEvent} pie-modal-back - when the modal back button is clicked.
  */
 export declare class PieModal extends PieModal_base implements ModalProps {
+    aria: AriaProps;
     heading: string;
     headingLevel: ModalProps['headingLevel'];
-    isDismissible: boolean;
     hasBackButton: boolean;
+    hasStackedActions: boolean;
+    isDismissible: boolean;
+    isFooterPinned: boolean;
     isFullWidthBelowMid: boolean;
-    isOpen: boolean;
     isLoading: boolean;
+    isOpen: boolean;
+    leadingAction: ActionProps;
+    position: ModalProps['position'];
     returnFocusAfterCloseSelector?: string;
     size: ModalProps['size'];
-    leadingAction: {
-        text: string;
-        variant?: Variant;
-        ariaLabel?: string;
-    };
-    position: ModalProps['position'];
+    supportingAction: ActionProps;
     private _dialog?;
     private _backButtonClicked;
     static styles: import("lit").CSSResult;
@@ -83,6 +82,23 @@ export declare class PieModal extends PieModal_base implements ModalProps {
      * @private
      */
     private renderLeadingAction;
+    /**
+     * Render supportingAction button depending on prop availability.
+     *
+     * 1. If the prop `supportingAction` is not provided, the button is not rendered.
+     * 2. If the prop `supportingAction` is provided but any of the optional properties
+     * are not provided, they fall back to their default values.
+     * 3. If `supportingAction` is provided but not `leadingAction`, log a warning and do
+     * not render `supportingAction`.
+     *
+     * @private
+     */
+    private renderSupportingAction;
+    /**
+     * Renders the modal inner content and footer of the modal.
+     * @private
+     */
+    private renderModalContentAndFooter;
     render(): TemplateResult;
     /**
      * Dismisses the modal on backdrop click if `isDismissible` is `true`.

package/dist/types/packages/components/pie-modal/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,EAAW,cAAc,EACtC,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,iDAAiD,CAAC;AACzD,OAAO,uDAAuD,CAAC;AAC/D,OAAO,wDAAwD,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAGlE,OAAO,EACH,UAAU,EACV,aAAa,EAIb,KAAK,EAER,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,KAAK,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;AAEjD,QAAA,MAAM,iBAAiB,cAAc,CAAC;;;;;AAEtC;;;;GAIG;AACH,qBAAa,QAAS,SAAQ,aAAqB,YAAW,UAAU;IAG7D,OAAO,EAAG,MAAM,CAAC;IAIjB,YAAY,EAAE,UAAU,CAAC,cAAc,CAAC,CAAQ;IAGhD,aAAa,UAAS;IAGtB,aAAa,UAAS;IAGtB,mBAAmB,UAAS;IAG5B,MAAM,UAAS;IAGf,SAAS,UAAS;IAGlB,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAIvC,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAY;IAGpC,aAAa,EAAG;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IAGK,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAY;IAGnD,OAAO,CAAC,OAAO,CAAC,CAAoB;IAEpC,OAAO,CAAC,kBAAkB,CAAS;IAGnC,MAAM,CAAC,MAAM,0BAAqB;;IAOlC,iBAAiB,IAAM,IAAI;IAO3B,oBAAoB,IAAM,IAAI;IAO9B,YAAY,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IASjE,OAAO,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IAI5D;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAS1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB,CAI9B;IAGF,OAAO,CAAC,kCAAkC;IAU1C,OAAO,CAAC,4BAA4B;IAkBpC;;;OAGG;IACH,OAAO,CAAC,YAAY;IAQpB;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAUzB;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAYxB;;;;;;;;OAQG;IACH,OAAO,CAAC,mBAAmB;IAmBpB,MAAM;IAoDb;;;OAGG;IACH,OAAO,CAAC,yBAAyB,CAyB/B;IAEF;;;;;;;;;;OAUG;IACH,OAAO,CAAC,yBAAyB,CAO/B;CACL;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,QAAQ,CAAC;KACjC;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,EAAW,cAAc,EACtC,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,yDAAyD,CAAC;AACjE,OAAO,+DAA+D,CAAC;AACvE,OAAO,gEAAgE,CAAC;AAKxE,OAAO,EACH,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,aAAa,EAEb,KAAK,EAIR,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,KAAK,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;AAEjD,QAAA,MAAM,iBAAiB,cAAc,CAAC;;;;;AAEtC;;;;GAIG;AACH,qBAAa,QAAS,SAAQ,aAAqB,YAAW,UAAU;IAE7D,IAAI,EAAG,SAAS,CAAC;IAIjB,OAAO,EAAG,MAAM,CAAC;IAIjB,YAAY,EAAE,UAAU,CAAC,cAAc,CAAC,CAAQ;IAGhD,aAAa,UAAS;IAGtB,iBAAiB,UAAS;IAG1B,aAAa,UAAS;IAGtB,cAAc,UAAQ;IAGtB,mBAAmB,UAAS;IAG5B,SAAS,UAAS;IAGlB,MAAM,UAAS;IAGf,aAAa,EAAG,WAAW,CAAC;IAI5B,QAAQ,EAAE,UAAU,CAAC,UAAU,CAAC,CAAY;IAG5C,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAIvC,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAY;IAGpC,gBAAgB,EAAG,WAAW,CAAC;IAGtC,OAAO,CAAC,OAAO,CAAC,CAAoB;IAEpC,OAAO,CAAC,kBAAkB,CAAS;IAGnC,MAAM,CAAC,MAAM,0BAAqB;;IAOlC,iBAAiB,IAAM,IAAI;IAO3B,oBAAoB,IAAM,IAAI;IAO9B,YAAY,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IAYjE,OAAO,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IAI5D;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAS1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB,CAI9B;IAGF,OAAO,CAAC,kCAAkC;IAU1C,OAAO,CAAC,4BAA4B;IAkBpC;;;OAGG;IACH,OAAO,CAAC,YAAY;IAQpB;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAYzB;;;;;OAKG;IACH,OAAO,CAAC,gBAAgB;IAaxB;;;;;;;;OAQG;IACH,OAAO,CAAC,mBAAmB;IAoB3B;;;;;;;;;;OAUG;IACH,OAAO,CAAC,sBAAsB;IAyB9B;;;OAGG;IACH,OAAO,CAAC,2BAA2B;IAa5B,MAAM;IAuDb;;;OAGG;IACH,OAAO,CAAC,yBAAyB,CAyB/B;IAEF;;;;;;;;;;OAUG;IACH,OAAO,CAAC,yBAAyB,CAO/B;CACL;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,QAAQ,CAAC;KACjC;CACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.14.0",
+  "version": "0.17.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -8,6 +8,8 @@
   "types": "dist/types/index.d.ts",
   "scripts": {
     "build": "yarn build:wrapper pie-modal && run -T vite build",
+    "lint:scripts": "run -T eslint .",
+    "lint:scripts:fix": "run -T eslint . --fix",
     "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
     "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
@@ -33,5 +35,8 @@
   },
   "volta": {
     "extends": "../../../package.json"
+  },
+  "dependencies": {
+    "dialog-polyfill": "0.5.6"
   }
 }

package/playwright/index.ts

@@ -1 +1 @@
-//Import common styles here
+// Import common styles here

package/playwright-lit-visual.config.ts

@@ -1,5 +1,4 @@
 import { defineConfig } from '@sand4rt/experimental-ct-web';
 import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
 
-// @ts-ignore
 export default defineConfig(getPlaywrightVisualConfig());

package/playwright-lit.config.ts

@@ -1,5 +1,4 @@
 import { defineConfig } from '@sand4rt/experimental-ct-web';
-import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config'
+import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config';
 
-// @ts-ignore
 export default defineConfig(getPlaywrightConfig());

package/src/defs.ts

@@ -5,7 +5,45 @@ export const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
 export const sizes = ['small', 'medium', 'large'] as const;
 export const positions = ['top', 'center'] as const;
 
-export interface ModalProps extends RTLComponentProps {
+export type AriaProps = {
+    close?: string;
+    back?: string;
+    loading?: string;
+};
+
+export type ActionProps = {
+        /**
+         * The text to display inside the button.
+         */
+        text: string;
+
+        /**
+         * The button variant.
+         */
+        variant?: Variant;
+
+        /**
+         * The ARIA label for the button.
+         */
+        ariaLabel?: string;
+};
+
+export type ModalProps = RTLComponentProps & {
+    /**
+     * The ARIA labels used for the modal close and back buttons, as well as loading state.
+     */
+    aria?: AriaProps;
+
+    /**
+     * When true, the modal will have a back button. This currently behaves the same as the close button.
+     */
+    hasBackButton: boolean;
+
+    /**
+     * When true, the modal will have a back button. This currently behaves the same as the close button.
+     */
+    hasStackedActions: boolean;
+
     /**
      * The text to display in the modal's heading.
      */
@@ -34,20 +72,30 @@ export interface ModalProps extends RTLComponentProps {
      */
     isDismissible: boolean;
 
+    /**
+     * When false, the modal footer will scroll with the content inside the modal body.
+     */
+    isFooterPinned: boolean;
+
+    /**
+     * This controls whether a *medium-sized* modal will cover the full width of the page when below the mid breakpoint.
+     */
+    isFullWidthBelowMid: boolean;
+
     /**
      * When true, displays a loading spinner in the modal.
      */
     isLoading: boolean;
 
     /**
-     * When true, the modal will have a back button. This currently behaves the same as the close button.
+     * The leading action configuration for the modal.
      */
-    hasBackButton: boolean;
+    leadingAction: ActionProps;
 
-    /**
-     * This controls whether a *medium-sized* modal will cover the full width of the page when below the mid breakpoint.
+    /*
+     * The position of the modal; this controls where it will appear on the page.
      */
-    isFullWidthBelowMid: boolean;
+    position: typeof positions[number];
 
     /**
      * The selector for the element that you would like focus to be returned to when the modal is closed, e.g., #skipToMain
@@ -60,31 +108,10 @@ export interface ModalProps extends RTLComponentProps {
     size: typeof sizes[number];
 
     /**
-     * The leading action configuration for the modal.
+     * The supporting action configuration for the modal.
      */
-    leadingAction: {
-        /**
-         * The text to display for the leading action button.
-         */
-        text: string;
-
-        /**
-         * The variant of the leading action button.
-         * Default: 'primary'
-         */
-        variant?: Variant;
-
-        /**
-         * The ARIA label for the leading action button.
-         */
-        ariaLabel?: string;
-    };
-
-    /*
-     * The position of the modal; this controls where it will appear on the page.
-     */
-    position: typeof positions[number];
-}
+    supportingAction: ActionProps;
+};
 
 /**
  * Event name for when the modal is closed.

package/src/index.ts

@@ -4,24 +4,27 @@ import {
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { property, query } from 'lit/decorators.js';
 import {
-    RtlMixin, validPropertyValues, requiredProperty,
+    requiredProperty, RtlMixin, validPropertyValues,
 } from '@justeattakeaway/pie-webc-core';
 import type { DependentMap } from '@justeattakeaway/pie-webc-core';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
-import '@justeattakeaway/pie-icons-webc/icons/IconClose';
-import '@justeattakeaway/pie-icons-webc/icons/IconChevronLeft';
-import '@justeattakeaway/pie-icons-webc/icons/IconChevronRight';
-import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
+import '@justeattakeaway/pie-icons-webc/dist/icons/IconClose.js';
+import '@justeattakeaway/pie-icons-webc/dist/icons/IconChevronLeft.js';
+import '@justeattakeaway/pie-icons-webc/dist/icons/IconChevronRight.js';
+
+import dialogPolyfill from 'dialog-polyfill';
 
 import styles from './modal.scss?inline';
 import {
-    ModalProps,
+    type AriaProps,
+    type ActionProps,
+    type ModalProps,
     headingLevels,
+    positions,
+    sizes,
+    ON_MODAL_BACK_EVENT,
     ON_MODAL_CLOSE_EVENT,
     ON_MODAL_OPEN_EVENT,
-    ON_MODAL_BACK_EVENT,
-    sizes,
-    positions,
 } from './defs';
 
 // Valid values available to consumers
@@ -35,6 +38,9 @@ const componentSelector = 'pie-modal';
  * @event {CustomEvent} pie-modal-back - when the modal back button is clicked.
  */
 export class PieModal extends RtlMixin(LitElement) implements ModalProps {
+    @property({ type: Object })
+    public aria!: AriaProps;
+
     @property({ type: String })
     @requiredProperty(componentSelector)
     public heading!: string;
@@ -43,20 +49,33 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     @validPropertyValues(componentSelector, headingLevels, 'h2')
     public headingLevel: ModalProps['headingLevel'] = 'h2';
 
+    @property({ type: Boolean })
+    public hasBackButton = false;
+
+    @property({ type: Boolean })
+    public hasStackedActions = false;
+
     @property({ type: Boolean, reflect: true })
     public isDismissible = false;
 
     @property({ type: Boolean })
-    public hasBackButton = false;
+    public isFooterPinned = true;
 
     @property({ type: Boolean })
     public isFullWidthBelowMid = false;
 
+    @property({ type: Boolean, reflect: true })
+    public isLoading = false;
+
     @property({ type: Boolean })
     public isOpen = false;
 
-    @property({ type: Boolean, reflect: true })
-    public isLoading = false;
+    @property({ type: Object })
+    public leadingAction!: ActionProps;
+
+    @property()
+    @validPropertyValues(componentSelector, positions, 'center')
+    public position: ModalProps['position'] = 'center';
 
     @property()
     public returnFocusAfterCloseSelector?: string;
@@ -65,15 +84,8 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     @validPropertyValues(componentSelector, sizes, 'medium')
     public size: ModalProps['size'] = 'medium';
 
-    @property()
-    public leadingAction!: {
-        text: string;
-        variant?: Variant;
-        ariaLabel?: string;
-    };
-
-    @validPropertyValues(componentSelector, positions, 'center')
-    public position: ModalProps['position'] = 'center';
+    @property({ type: Object })
+    public supportingAction!: ActionProps;
 
     @query('dialog')
     private _dialog?: HTMLDialogElement;
@@ -103,12 +115,15 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     }
 
     firstUpdated (changedProperties: DependentMap<ModalProps>) : void {
-        this._dialog?.addEventListener('cancel', (event) => this._handleDialogCancelEvent(event));
-        this._handleModalOpenStateOnFirstRender(changedProperties);
+        if (this._dialog) {
+            dialogPolyfill.registerDialog(this._dialog);
+            this._dialog.addEventListener('cancel', (event) => this._handleDialogCancelEvent(event));
+            this._dialog.addEventListener('close', () => {
+                this.isOpen = false;
+            });
+        }
 
-        this._dialog?.addEventListener('close', () => {
-            this.isOpen = false;
-        });
+        this._handleModalOpenStateOnFirstRender(changedProperties);
     }
 
     updated (changedProperties: DependentMap<ModalProps>) : void {
@@ -201,8 +216,10 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
                 @click="${() => { this.isOpen = false; }}"
                 variant="ghost-secondary"
                 class="c-modal-closeBtn"
-                data-test-id="modal-close-button"><icon-close /></pie-icon-button>
-        `;
+                aria-label="${this.aria?.close || nothing}"
+                data-test-id="modal-close-button">
+                <icon-close></icon-close>
+            </pie-icon-button>`;
     }
 
     /**
@@ -217,8 +234,9 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
                 @click="${() => { this._backButtonClicked = true; this.isOpen = false; }}"
                 variant="ghost-secondary"
                 class="c-modal-backBtn"
+                aria-label="${this.aria?.back || nothing}"
                 data-test-id="modal-back-button">
-                ${this.isRTL ? html`<icon-chevron-right />` : html`<icon-chevron-left />`}
+                ${this.isRTL ? html`<icon-chevron-right></icon-chevron-right>` : html`<icon-chevron-left></icon-chevron-left>`}
             </pie-icon-button>
         `;
     }
@@ -232,8 +250,8 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      *
      * @private
      */
-    private renderLeadingAction (): TemplateResult | typeof nothing {
-        const { text = 'Confirm', variant = 'primary', ariaLabel } = this.leadingAction;
+    private renderLeadingAction () : TemplateResult | typeof nothing {
+        const { text, variant = 'primary', ariaLabel } = this.leadingAction;
 
         if (!text) {
             return nothing;
@@ -241,27 +259,85 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
 
         return html`
             <pie-button
-                  variant="${variant}"
-                  aria-label="${ariaLabel || nothing}"
-                  type="submit"
-                  @click="${() => this._dialog?.close('leading')}"
-                  data-test-id="modal-leading-action">
+                variant="${variant}"
+                aria-label="${ariaLabel || nothing}"
+                type="submit"
+                ?isFullWidth="${this.hasStackedActions}"
+                @click="${() => this._dialog?.close('leading')}"
+                data-test-id="modal-leading-action">
                 ${text}
-              </pie-button>
+            </pie-button>
         `;
     }
 
+    /**
+     * Render supportingAction button depending on prop availability.
+     *
+     * 1. If the prop `supportingAction` is not provided, the button is not rendered.
+     * 2. If the prop `supportingAction` is provided but any of the optional properties
+     * are not provided, they fall back to their default values.
+     * 3. If `supportingAction` is provided but not `leadingAction`, log a warning and do
+     * not render `supportingAction`.
+     *
+     * @private
+     */
+    private renderSupportingAction (): TemplateResult | typeof nothing {
+        const { text, variant = 'ghost', ariaLabel } = this.supportingAction;
+
+        if (!text) {
+            return nothing;
+        }
+
+        if (!this.leadingAction) {
+            console.warn('Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored.');
+            return nothing;
+        }
+
+        return html`
+            <pie-button
+                variant="${variant}"
+                aria-label="${ariaLabel || nothing}"
+                type="reset"
+                ?isFullWidth="${this.hasStackedActions}"
+                @click="${() => this._dialog?.close('supporting')}"
+                data-test-id="modal-supporting-action">
+                ${text}
+            </pie-button>
+        `;
+    }
+
+    /**
+     * Renders the modal inner content and footer of the modal.
+     * @private
+     */
+    private renderModalContentAndFooter (): TemplateResult {
+        return html`
+        <article class="c-modal-content c-modal-content--scrollable">
+            <div class="c-modal-contentInner">
+                <slot></slot>
+            </div>
+        </article>
+        <footer class="c-modal-footer">
+            ${this.leadingAction ? this.renderLeadingAction() : nothing}
+            ${this.supportingAction ? this.renderSupportingAction() : nothing}
+        </footer>`;
+    }
+
     public render () {
         const {
+            aria,
             hasBackButton,
+            hasStackedActions,
             heading,
             headingLevel = 'h2',
             isDismissible,
+            isFooterPinned,
             isFullWidthBelowMid,
             isLoading,
-            size,
             leadingAction,
             position,
+            size,
+            supportingAction,
         } = this;
 
         const headingTag = unsafeStatic(headingLevel);
@@ -270,13 +346,17 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         <dialog
             id="dialog"
             class="c-modal"
-            data-test-id="pie-modal"
             size="${size}"
             position="${position}"
+            ?hasActions=${leadingAction || supportingAction}
             ?hasBackButton=${hasBackButton}
+            ?hasStackedActions=${hasStackedActions}
             ?isDismissible=${isDismissible}
+            ?isFooterPinned=${isFooterPinned}
             ?isFullWidthBelowMid=${isFullWidthBelowMid}
             ?isLoading=${isLoading}
+            aria-busy="${isLoading ? 'true' : 'false'}"
+            aria-label="${(isLoading && aria?.loading) || nothing}"
             data-test-id="pie-modal">
             <header class="c-modal-header">
                 ${hasBackButton ? this.renderBackButton() : nothing}
@@ -285,21 +365,16 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
                 </${headingTag}>
                 ${isDismissible ? this.renderCloseButton() : nothing}
             </header>
-            <article class="c-modal-content c-modal-content--scrollable">
-                <div class="c-modal-contentInner">
-                    <slot></slot>
-                </div>
-            </article>
-            <footer class="c-modal-footer">
-                ${leadingAction ? this.renderLeadingAction() : nothing}
-                <pie-button
-                    variant="ghost"
-                    type="reset"
-                    @click="${() => this._dialog?.close('supporting')}"
-                    data-test-id="modal-supporting-action">
-                    Cancel
-                </pie-button>
-            </footer>
+            ${
+            // We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
+            isFooterPinned
+                ? this.renderModalContentAndFooter()
+                : html`
+                        <div class="c-modal-scrollContainer">
+                            ${this.renderModalContentAndFooter()}
+                        </div>
+                        `
+            }
         </dialog>`;
     }
 
@@ -325,9 +400,9 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         }
 
         const isClickOutsideDialog = event.clientY < top ||
-                event.clientY > bottom ||
-                event.clientX < left ||
-                event.clientX > right;
+            event.clientY > bottom ||
+            event.clientX < left ||
+            event.clientX > right;
 
         if (isClickOutsideDialog) {
             this.isOpen = false;