@justeattakeaway/pie-modal 0.44.0 → 0.45.0

package/custom-elements.json

@@ -87,7 +87,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    hasBackButton: false,\n    hasStackedActions: false,\n    headingLevel: 'h2',\n    isOpen: false,\n    isDismissible: false,\n    isFooterPinned: true,\n    isFullWidthBelowMid: false,\n    isLoading: false,\n    leadingActionVariant: 'primary',\n    position: 'center',\n    size: 'medium',\n    supportingActionVariant: 'ghost',\n}"
+          "default": "{\n    hasBackButton: false,\n    hasStackedActions: false,\n    headingLevel: 'h2',\n    isOpen: false,\n    isDismissible: false,\n    isFooterPinned: true,\n    isFullWidthBelowMid: false,\n    isLoading: false,\n    position: 'center',\n    size: 'medium',\n}"
         }
       ],
       "exports": [
@@ -244,18 +244,12 @@
             },
             {
               "kind": "field",
-              "name": "leadingActionText",
+              "name": "leadingAction",
               "type": {
-                "text": "ModalProps['leadingActionText']"
+                "text": "ModalProps['leadingAction']"
               },
               "privacy": "public",
-              "attribute": "leadingActionText"
-            },
-            {
-              "kind": "field",
-              "name": "leadingActionVariant",
-              "privacy": "public",
-              "attribute": "leadingActionVariant"
+              "attribute": "leadingAction"
             },
             {
               "kind": "field",
@@ -267,7 +261,7 @@
               "kind": "field",
               "name": "returnFocusAfterCloseSelector",
               "type": {
-                "text": "ModalProps['returnFocusAfterCloseSelector'] | undefined"
+                "text": "ModalProps['returnFocusAfterCloseSelector']"
               },
               "privacy": "public",
               "attribute": "returnFocusAfterCloseSelector"
@@ -280,18 +274,12 @@
             },
             {
               "kind": "field",
-              "name": "supportingActionText",
+              "name": "supportingAction",
               "type": {
-                "text": "ModalProps['supportingActionText']"
+                "text": "ModalProps['supportingAction']"
               },
               "privacy": "public",
-              "attribute": "supportingActionText"
-            },
-            {
-              "kind": "field",
-              "name": "supportingActionVariant",
-              "privacy": "public",
-              "attribute": "supportingActionVariant"
+              "attribute": "supportingAction"
             },
             {
               "kind": "field",
@@ -459,7 +447,7 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "Renders the \"leadingAction\" button if the text is provided.\n\nIf `leadingActionText` is not provided, the button is not rendered.\nIf `leadingActionVariant` is not provided, the default value is used.\nThe (optional) aria-label is read from the `aria` prop's `leadingActionLabel` property."
+              "description": "Renders the \"leadingAction\" button if the text is provided.\n\nIf `leadingAction.text` is not provided, the button is not rendered.\nIf `leadingAction.variant` is not provided, the default value of \"primary\" is used.\nThe (optional) aria-label is read from `leadingAction.ariaLabel`."
             },
             {
               "kind": "method",
@@ -470,7 +458,7 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "Renders the \"supportingAction\" button if the text is provided.\nYou cannot have a supporting action without a leading action.\n\nIf `supportingActionText` or `leadingActionText` are not provided, the button is not rendered.\nIf `supportingActionVariant` is not provided, the default value is used."
+              "description": "Renders the \"supportingAction\" button if the text is provided.\nYou cannot have a supporting action without a leading action.\n\nIf either `supportingAction.text` or `leadingAction.text` are not provided, the button is not rendered.\nIf `supportingAction.variant` is not provided, the default value of \"ghost\" is used.\nThe (optional) aria-label is read from `supportingAction.ariaLabel`."
             },
             {
               "kind": "method",
@@ -584,15 +572,11 @@
               "fieldName": "isOpen"
             },
             {
-              "name": "leadingActionText",
+              "name": "leadingAction",
               "type": {
-                "text": "ModalProps['leadingActionText']"
+                "text": "ModalProps['leadingAction']"
               },
-              "fieldName": "leadingActionText"
-            },
-            {
-              "name": "leadingActionVariant",
-              "fieldName": "leadingActionVariant"
+              "fieldName": "leadingAction"
             },
             {
               "name": "position",
@@ -601,7 +585,7 @@
             {
               "name": "returnFocusAfterCloseSelector",
               "type": {
-                "text": "ModalProps['returnFocusAfterCloseSelector'] | undefined"
+                "text": "ModalProps['returnFocusAfterCloseSelector']"
               },
               "fieldName": "returnFocusAfterCloseSelector"
             },
@@ -610,15 +594,11 @@
               "fieldName": "size"
             },
             {
-              "name": "supportingActionText",
+              "name": "supportingAction",
               "type": {
-                "text": "ModalProps['supportingActionText']"
+                "text": "ModalProps['supportingAction']"
               },
-              "fieldName": "supportingActionText"
-            },
-            {
-              "name": "supportingActionVariant",
-              "fieldName": "supportingActionVariant"
+              "fieldName": "supportingAction"
             }
           ],
           "mixins": [

package/dist/index.d.ts

@@ -7,15 +7,28 @@ import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
 import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
 
+declare 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 declare type AriaProps = {
     close?: string;
     back?: string;
     loading?: string;
-    leadingActionLabel?: string;
-    supportingActionLabel?: string;
 };
 
-export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingActionText' | 'supportingActionText' | 'returnFocusAfterCloseSelector'>>;
+export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -29,7 +42,7 @@ export declare interface ModalEventDetail {
 
 export declare type ModalProps = {
     /**
-     * The ARIA labels used for the modal leading action, supporting action, close and back buttons, as well as for the loading state.
+     * The ARIA labels used for the modal close and back buttons, as well as for the loading state.
      */
     aria?: AriaProps;
     /**
@@ -77,21 +90,13 @@ export declare type ModalProps = {
      */
     isLoading?: boolean;
     /**
-     * The text to display inside the leading action button.
-     */
-    leadingActionText?: string;
-    /**
-     * The button variant for the leading action button.
-     */
-    leadingActionVariant?: Variant;
-    /**
-     * The text to display inside the supporting action button.
+     * The leading action configuration for the modal.
      */
-    supportingActionText?: string;
+    leadingAction?: ActionProps;
     /**
-     * The button variant for the supporting action button.
+     * The supporting action configuration for the modal.
      */
-    supportingActionVariant?: Variant;
+    supportingAction?: 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
@@ -157,13 +162,11 @@ export declare class PieModal extends PieModal_base implements ModalProps {
     isFullWidthBelowMid: boolean;
     isLoading: boolean;
     isOpen: boolean;
-    leadingActionText: ModalProps['leadingActionText'];
-    leadingActionVariant: "primary" | "secondary" | "outline" | "outline-inverse" | "ghost" | "inverse" | "ghost-inverse" | "destructive" | "destructive-ghost";
+    leadingAction: ModalProps['leadingAction'];
     position: "top" | "center";
-    returnFocusAfterCloseSelector?: ModalProps['returnFocusAfterCloseSelector'];
+    returnFocusAfterCloseSelector: ModalProps['returnFocusAfterCloseSelector'];
     size: "medium" | "large" | "small";
-    supportingActionText: ModalProps['supportingActionText'];
-    supportingActionVariant: "primary" | "secondary" | "outline" | "outline-inverse" | "ghost" | "inverse" | "ghost-inverse" | "destructive" | "destructive-ghost";
+    supportingAction: ModalProps['supportingAction'];
     private _dialog?;
     private _backButtonClicked;
     static styles: CSSResult;
@@ -211,9 +214,9 @@ export declare class PieModal extends PieModal_base implements ModalProps {
     /**
      * Renders the "leadingAction" button if the text is provided.
      *
-     * If `leadingActionText` is not provided, the button is not rendered.
-     * If `leadingActionVariant` is not provided, the default value is used.
-     * The (optional) aria-label is read from the `aria` prop's `leadingActionLabel` property.
+     * If `leadingAction.text` is not provided, the button is not rendered.
+     * If `leadingAction.variant` is not provided, the default value of "primary" is used.
+     * The (optional) aria-label is read from `leadingAction.ariaLabel`.
      *
      * @private
      */
@@ -222,8 +225,9 @@ export declare class PieModal extends PieModal_base implements ModalProps {
      * Renders the "supportingAction" button if the text is provided.
      * You cannot have a supporting action without a leading action.
      *
-     * If `supportingActionText` or `leadingActionText` are not provided, the button is not rendered.
-     * If `supportingActionVariant` is not provided, the default value is used.
+     * If either `supportingAction.text` or `leadingAction.text` are not provided, the button is not rendered.
+     * If `supportingAction.variant` is not provided, the default value of "ghost" is used.
+     * The (optional) aria-label is read from `supportingAction.ariaLabel`.
      *
      * @private
      */

package/dist/index.js

@@ -1,43 +1,43 @@
-import { LitElement as V, nothing as g, unsafeCSS as I } from "lit";
-import { html as m, unsafeStatic as N } from "lit/static-html.js";
-import { property as d, query as R } from "lit/decorators.js";
-import { classMap as W } from "lit/directives/class-map.js";
-import { ifDefined as _ } from "lit/directives/if-defined.js";
+import { LitElement as I, nothing as g, unsafeCSS as N } from "lit";
+import { html as m, unsafeStatic as R } from "lit/static-html.js";
+import { property as d, query as W } from "lit/decorators.js";
+import { classMap as j } from "lit/directives/class-map.js";
+import { ifDefined as B } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
-import { RtlMixin as Y, dispatchCustomEvent as u, requiredProperty as j, validPropertyValues as B, defineCustomElement as q } from "@justeattakeaway/pie-webc-core";
+import { RtlMixin as Y, dispatchCustomEvent as u, requiredProperty as V, validPropertyValues as S, defineCustomElement as q } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
 import "@justeattakeaway/pie-spinner";
-function H(l) {
-  if (Array.isArray(l)) {
-    for (var e = 0, i = Array(l.length); e < l.length; e++)
-      i[e] = l[e];
+function H(n) {
+  if (Array.isArray(n)) {
+    for (var e = 0, i = Array(n.length); e < n.length; e++)
+      i[e] = n[e];
     return i;
   } else
-    return Array.from(l);
+    return Array.from(n);
 }
-var S = !1;
+var A = !1;
 if (typeof window < "u") {
-  var L = {
+  var $ = {
     get passive() {
-      S = !0;
+      A = !0;
     }
   };
-  window.addEventListener("testPassive", null, L), window.removeEventListener("testPassive", null, L);
+  window.addEventListener("testPassive", null, $), window.removeEventListener("testPassive", null, $);
 }
-var M = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), p = [], y = !1, $ = -1, f = void 0, v = void 0, D = function(e) {
+var D = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), p = [], y = !1, F = -1, f = void 0, v = void 0, P = function(e) {
   return p.some(function(i) {
     return !!(i.options.allowTouchMove && i.options.allowTouchMove(e));
   });
 }, x = function(e) {
   var i = e || window.event;
-  return D(i.target) || i.touches.length > 1 ? !0 : (i.preventDefault && i.preventDefault(), !1);
+  return P(i.target) || i.touches.length > 1 ? !0 : (i.preventDefault && i.preventDefault(), !1);
 }, K = function(e) {
   if (v === void 0) {
-    var i = !!e && e.reserveScrollBarGap === !0, t = window.innerWidth - document.documentElement.clientWidth;
-    i && t > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = t + "px");
+    var i = !!e && e.reserveScrollBarGap === !0, o = window.innerWidth - document.documentElement.clientWidth;
+    i && o > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = o + "px");
   }
   f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
 }, U = function() {
@@ -45,25 +45,25 @@ var M = typeof window < "u" && window.navigator && window.navigator.platform &&
 }, G = function(e) {
   return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
 }, X = function(e, i) {
-  var t = e.targetTouches[0].clientY - $;
-  return D(e.target) ? !1 : i && i.scrollTop === 0 && t > 0 || G(i) && t < 0 ? x(e) : (e.stopPropagation(), !0);
+  var o = e.targetTouches[0].clientY - F;
+  return P(e.target) ? !1 : i && i.scrollTop === 0 && o > 0 || G(i) && o < 0 ? x(e) : (e.stopPropagation(), !0);
 }, J = function(e, i) {
   if (!e) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
     return;
   }
-  if (!p.some(function(o) {
-    return o.targetElement === e;
+  if (!p.some(function(t) {
+    return t.targetElement === e;
   })) {
-    var t = {
+    var o = {
       targetElement: e,
       options: i || {}
     };
-    p = [].concat(H(p), [t]), M ? (e.ontouchstart = function(o) {
-      o.targetTouches.length === 1 && ($ = o.targetTouches[0].clientY);
-    }, e.ontouchmove = function(o) {
-      o.targetTouches.length === 1 && X(o, e);
-    }, y || (document.addEventListener("touchmove", x, S ? { passive: !1 } : void 0), y = !0)) : K(i);
+    p = [].concat(H(p), [o]), D ? (e.ontouchstart = function(t) {
+      t.targetTouches.length === 1 && (F = t.targetTouches[0].clientY);
+    }, e.ontouchmove = function(t) {
+      t.targetTouches.length === 1 && X(t, e);
+    }, y || (document.addEventListener("touchmove", x, A ? { passive: !1 } : void 0), y = !0)) : K(i);
   }
 }, Q = function(e) {
   if (!e) {
@@ -72,10 +72,10 @@ var M = typeof window < "u" && window.navigator && window.navigator.platform &&
   }
   p = p.filter(function(i) {
     return i.targetElement !== e;
-  }), M ? (e.ontouchstart = null, e.ontouchmove = null, y && p.length === 0 && (document.removeEventListener("touchmove", x, S ? { passive: !1 } : void 0), y = !1)) : p.length || U();
+  }), D ? (e.ontouchstart = null, e.ontouchmove = null, y && p.length === 0 && (document.removeEventListener("touchmove", x, A ? { passive: !1 } : void 0), y = !1)) : p.length || U();
 };
-const Z = `*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-l-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (width < 768px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (width < 768px){.c-modal[size=large],.c-modal[size=medium][isfullwidthbelowmid]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal[size=large]>.c-modal-scrollContainer,.c-modal[size=medium][isfullwidthbelowmid]>.c-modal-scrollContainer{block-size:100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (width < 768px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (width < 768px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:14px}@media (min-width: 768px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:20px}}.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-c)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);position:relative;min-block-size:var(--dt-spacing-j);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 768px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content.c-modal-hasFooterActions{padding-block-end:var(--modal-content-padding-block)}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal[isfooterpinned] .c-modal-content{overflow-y:auto}.c-modal[isLoading] .c-modal-content pie-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{display:none}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}
-`, ee = ["h1", "h2", "h3", "h4", "h5", "h6"], ie = ["small", "medium", "large"], te = ["top", "center"], A = "pie-modal-close", w = "pie-modal-open", C = "pie-modal-back", oe = "pie-modal-leading-action-click", ne = "pie-modal-supporting-action-click", r = {
+const Z = `*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-l-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (width < 768px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (width < 768px){.c-modal[size=large],.c-modal[size=medium][isfullwidthbelowmid]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal[size=large]>.c-modal-scrollContainer,.c-modal[size=medium][isfullwidthbelowmid]>.c-modal-scrollContainer{block-size:100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (width < 768px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (width < 768px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:14px}@media (min-width: 768px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:20px}}.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-c)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--modal-content-padding-block-end: var(--dt-spacing-e);--modal-content-min-block-size: var(--dt-spacing-j);position:relative;min-block-size:calc(var(--modal-content-min-block-size) + var(--modal-content-padding-block) + var(--modal-content-padding-block-end));font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 768px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content.c-modal-hasFooterActions{padding-block-end:var(--modal-content-padding-block);min-block-size:var(--modal-content-min-block-size)}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal[isfooterpinned] .c-modal-content{overflow-y:auto}.c-modal[isLoading] .c-modal-content pie-spinner{position:absolute;left:50%;top:calc(50% - (var(--modal-content-padding-block-end) - var(--modal-content-padding-block)) / 2);transform:translate(-50%,-50%)}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{display:none}.c-modal[isLoading] .c-modal-content.c-modal-hasFooterActions pie-spinner{top:50%}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}
+`, ee = ["h1", "h2", "h3", "h4", "h5", "h6"], ie = ["small", "medium", "large"], oe = ["top", "center"], O = "pie-modal-close", w = "pie-modal-open", L = "pie-modal-back", te = "pie-modal-leading-action-click", ae = "pie-modal-supporting-action-click", s = {
   hasBackButton: !1,
   hasStackedActions: !1,
   headingLevel: "h2",
@@ -84,44 +84,42 @@ const Z = `*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
   isFooterPinned: !0,
   isFullWidthBelowMid: !1,
   isLoading: !1,
-  leadingActionVariant: "primary",
   position: "center",
-  size: "medium",
-  supportingActionVariant: "ghost"
+  size: "medium"
 };
-var ae = Object.defineProperty, le = Object.getOwnPropertyDescriptor, a = (l, e, i, t) => {
-  for (var o = t > 1 ? void 0 : t ? le(e, i) : e, s = l.length - 1, c; s >= 0; s--)
-    (c = l[s]) && (o = (t ? c(e, i, o) : c(o)) || o);
-  return t && o && ae(e, i, o), o;
+var ne = Object.defineProperty, le = Object.getOwnPropertyDescriptor, l = (n, e, i, o) => {
+  for (var t = o > 1 ? void 0 : o ? le(e, i) : e, r = n.length - 1, c; r >= 0; r--)
+    (c = n[r]) && (t = (o ? c(e, i, t) : c(t)) || t);
+  return o && t && ne(e, i, t), t;
 };
 const b = "pie-modal";
-class n extends Y(V) {
+class a extends Y(I) {
   constructor() {
-    super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.leadingActionVariant = r.leadingActionVariant, this.position = r.position, this.size = r.size, this.supportingActionVariant = r.supportingActionVariant, this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
+    super(...arguments), this.headingLevel = s.headingLevel, this.hasBackButton = s.hasBackButton, this.hasStackedActions = s.hasStackedActions, this.isDismissible = s.isDismissible, this.isFooterPinned = s.isFooterPinned, this.isFullWidthBelowMid = s.isFullWidthBelowMid, this.isLoading = s.isLoading, this.isOpen = s.isOpen, this.position = s.position, this.size = s.size, this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
       this.isDismissible || e.preventDefault();
     }, this._handleDialogLightDismiss = (e) => {
       var k;
       if (!this.isDismissible)
         return;
       const i = (k = this._dialog) == null ? void 0 : k.getBoundingClientRect(), {
-        top: t = 0,
-        bottom: o = 0,
-        left: s = 0,
+        top: o = 0,
+        bottom: t = 0,
+        left: r = 0,
         right: c = 0
       } = i || {};
-      if (t === 0 && o === 0 && s === 0 && c === 0)
+      if (o === 0 && t === 0 && r === 0 && c === 0)
         return;
-      (e.clientY < t || e.clientY > o || e.clientX < s || e.clientX > c) && (this.isOpen = !1);
+      (e.clientY < o || e.clientY > t || e.clientX < r || e.clientX > c) && (this.isOpen = !1);
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(w, (e) => this._handleModalOpened(e)), document.addEventListener(A, (e) => this._handleModalClosed(e)), document.addEventListener(C, (e) => this._handleModalClosed(e));
+    super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(w, (e) => this._handleModalOpened(e)), document.addEventListener(O, (e) => this._handleModalClosed(e)), document.addEventListener(L, (e) => this._handleModalClosed(e));
   }
   disconnectedCallback() {
-    document.removeEventListener(w, (e) => this._handleModalOpened(e)), document.removeEventListener(A, (e) => this._handleModalClosed(e)), document.removeEventListener(C, (e) => this._handleModalClosed(e)), super.disconnectedCallback();
+    document.removeEventListener(w, (e) => this._handleModalOpened(e)), document.removeEventListener(O, (e) => this._handleModalClosed(e)), document.removeEventListener(L, (e) => this._handleModalClosed(e)), super.disconnectedCallback();
   }
   async firstUpdated(e) {
-    super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-209f54f8.js").then((t) => t.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (t) => this._handleDialogCancelEvent(t)), this._dialog.addEventListener("close", () => {
+    super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-209f54f8.js").then((o) => o.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (o) => this._handleDialogCancelEvent(o)), this._dialog.addEventListener("close", () => {
       this.isOpen = !1;
     })), this._handleModalOpenStateOnFirstRender(e);
   }
@@ -132,11 +130,11 @@ class n extends Y(V) {
    * Opens the dialog element and disables page scrolling
    */
   _handleModalOpened(e) {
-    var t, o, s, c;
+    var o, t, r, c;
     const { targetModal: i } = e.detail;
     if (i === this) {
-      const h = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
-      if (h && ("scrollTo" in window && window.scrollTo(0, 0), J(h)), (o = this._dialog) != null && o.hasAttribute("open") || !((s = this._dialog) != null && s.isConnected))
+      const h = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
+      if (h && ("scrollTo" in window && window.scrollTo(0, 0), J(h)), (t = this._dialog) != null && t.hasAttribute("open") || !((r = this._dialog) != null && r.isConnected))
         return;
       (c = this._dialog) == null || c.showModal();
     }
@@ -145,11 +143,11 @@ class n extends Y(V) {
    * Closes the dialog element and re-enables page scrolling
    */
   _handleModalClosed(e) {
-    var t, o;
+    var o, t;
     const { targetModal: i } = e.detail;
     if (i === this) {
-      const s = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
-      s && Q(s), (o = this._dialog) == null || o.close(), this._returnFocus();
+      const r = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
+      r && Q(r), (t = this._dialog) == null || t.close(), this._returnFocus();
     }
   }
   // Handles the value of the isOpen property on first render of the component
@@ -159,20 +157,20 @@ class n extends Y(V) {
   // Handles changes to the modal isOpen property by dispatching any appropriate events
   _handleModalOpenStateChanged(e) {
     const i = e.get("isOpen");
-    i !== void 0 && (i ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, C, { targetModal: this })) : u(this, A, { targetModal: this }) : u(this, w, { targetModal: this }));
+    i !== void 0 && (i ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, L, { targetModal: this })) : u(this, O, { targetModal: this }) : u(this, w, { targetModal: this }));
   }
   _handleActionClick(e) {
-    var i, t;
-    e === "leading" ? ((i = this._dialog) == null || i.close("leading"), u(this, oe, { targetModal: this })) : e === "supporting" && ((t = this._dialog) == null || t.close("supporting"), u(this, ne, { targetModal: this }));
+    var i, o;
+    e === "leading" ? ((i = this._dialog) == null || i.close("leading"), u(this, te, { targetModal: this })) : e === "supporting" && ((o = this._dialog) == null || o.close("supporting"), u(this, ae, { targetModal: this }));
   }
   /**
    * Return focus to the specified element, providing the selector is valid
    * and the chosen element can be found.
    */
   _returnFocus() {
-    var i, t;
+    var i, o;
     const e = (i = this.returnFocusAfterCloseSelector) == null ? void 0 : i.trim();
-    e && ((t = document.querySelector(e)) == null || t.focus());
+    e && ((o = document.querySelector(e)) == null || o.focus());
   }
   /**
    * Template for the close button element. Called within the
@@ -209,7 +207,7 @@ class n extends Y(V) {
     }}"
                 variant="ghost-secondary"
                 class="c-modal-backBtn"
-                aria-label="${_((e = this.aria) == null ? void 0 : e.back)}"
+                aria-label="${B((e = this.aria) == null ? void 0 : e.back)}"
                 data-test-id="modal-back-button">
                 ${this.isRTL ? m`<icon-chevron-right></icon-chevron-right>` : m`<icon-chevron-left></icon-chevron-left>`}
             </pie-icon-button>
@@ -218,23 +216,23 @@ class n extends Y(V) {
   /**
    * Renders the "leadingAction" button if the text is provided.
    *
-   * If `leadingActionText` is not provided, the button is not rendered.
-   * If `leadingActionVariant` is not provided, the default value is used.
-   * The (optional) aria-label is read from the `aria` prop's `leadingActionLabel` property.
+   * If `leadingAction.text` is not provided, the button is not rendered.
+   * If `leadingAction.variant` is not provided, the default value of "primary" is used.
+   * The (optional) aria-label is read from `leadingAction.ariaLabel`.
    *
    * @private
    */
   renderLeadingAction() {
-    var e;
-    return this.leadingActionText ? m`
+    const { ariaLabel: e, text: i, variant: o = "primary" } = this.leadingAction || {};
+    return i ? m`
             <pie-button
-                variant="${this.leadingActionVariant}"
-                aria-label="${_((e = this.aria) == null ? void 0 : e.leadingActionLabel)}"
+                variant="${o}"
+                aria-label="${B(e)}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("leading")}"
                 data-test-id="modal-leading-action">
-                ${this.leadingActionText}
+                ${i}
             </pie-button>
         ` : g;
   }
@@ -242,22 +240,24 @@ class n extends Y(V) {
    * Renders the "supportingAction" button if the text is provided.
    * You cannot have a supporting action without a leading action.
    *
-   * If `supportingActionText` or `leadingActionText` are not provided, the button is not rendered.
-   * If `supportingActionVariant` is not provided, the default value is used.
+   * If either `supportingAction.text` or `leadingAction.text` are not provided, the button is not rendered.
+   * If `supportingAction.variant` is not provided, the default value of "ghost" is used.
+   * The (optional) aria-label is read from `supportingAction.ariaLabel`.
    *
    * @private
    */
   renderSupportingAction() {
-    var e;
-    return this.supportingActionText ? this.leadingActionText ? m`
+    var t;
+    const { ariaLabel: e, text: i, variant: o = "ghost" } = this.supportingAction || {};
+    return i ? (t = this.leadingAction) != null && t.text ? m`
             <pie-button
-                variant="${this.supportingActionVariant}"
-                aria-label="${_((e = this.aria) == null ? void 0 : e.supportingActionLabel)}"
+                variant="${o}"
+                aria-label="${B(e)}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("supporting")}"
                 data-test-id="modal-supporting-action">
-                ${this.supportingActionText}
+                ${i}
             </pie-button>
         ` : (console.warn("You cannot have a supporting action without a leading action. If you only need one button then use a leading action instead."), g) : g;
   }
@@ -266,9 +266,10 @@ class n extends Y(V) {
    * @private
    */
   renderModalContentAndFooter() {
-    const e = !!this.leadingActionText;
+    var o;
+    const e = !!((o = this.leadingAction) != null && o.text);
     return m`
-            <article class=${W({
+            <article class=${j({
       "c-modal-scrollContainer": !0,
       "c-modal-content": !0,
       "c-modal-content--scrollable": !0,
@@ -289,27 +290,27 @@ class n extends Y(V) {
     const {
       aria: e,
       hasBackButton: i,
-      hasStackedActions: t,
-      heading: o,
-      headingLevel: s,
+      hasStackedActions: o,
+      heading: t,
+      headingLevel: r,
       isDismissible: c,
       isFooterPinned: h,
       isFullWidthBelowMid: k,
       isLoading: z,
-      leadingActionText: T,
-      position: F,
-      size: P,
-      supportingActionText: E
-    } = this, O = N(s);
+      leadingAction: _,
+      position: E,
+      size: T,
+      supportingAction: C
+    } = this, M = R(r);
     return m`
         <dialog
             id="dialog"
             class="c-modal"
-            size="${P}"
-            position="${F}"
-            ?hasActions=${T || E}
+            size="${T}"
+            position="${E}"
+            ?hasActions=${(_ == null ? void 0 : _.text) || (C == null ? void 0 : C.text)}
             ?hasBackButton=${i}
-            ?hasStackedActions=${t}
+            ?hasStackedActions=${o}
             ?isDismissible=${c}
             ?isFooterPinned=${h}
             ?isFullWidthBelowMid=${k}
@@ -320,9 +321,9 @@ class n extends Y(V) {
             <header class="c-modal-header"
             data-test-id="modal-header">
                 ${this.renderBackButton()}
-                <${O} class="c-modal-heading">
-                    ${o}
-                </${O}>
+                <${M} class="c-modal-heading">
+                    ${t}
+                </${M}>
                 ${this.renderCloseButton()}
             </header>
             ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
@@ -334,75 +335,69 @@ class n extends Y(V) {
         </dialog>`;
   }
 }
-n.styles = I(Z);
-a([
+a.styles = N(Z);
+l([
   d({ type: Object })
-], n.prototype, "aria", 2);
-a([
+], a.prototype, "aria", 2);
+l([
   d({ type: String }),
-  j(b)
-], n.prototype, "heading", 2);
-a([
+  V(b)
+], a.prototype, "heading", 2);
+l([
   d(),
-  B(b, ee, r.headingLevel)
-], n.prototype, "headingLevel", 2);
-a([
+  S(b, ee, s.headingLevel)
+], a.prototype, "headingLevel", 2);
+l([
   d({ type: Boolean })
-], n.prototype, "hasBackButton", 2);
-a([
+], a.prototype, "hasBackButton", 2);
+l([
   d({ type: Boolean })
-], n.prototype, "hasStackedActions", 2);
-a([
+], a.prototype, "hasStackedActions", 2);
+l([
   d({ type: Boolean, reflect: !0 })
-], n.prototype, "isDismissible", 2);
-a([
+], a.prototype, "isDismissible", 2);
+l([
   d({ type: Boolean })
-], n.prototype, "isFooterPinned", 2);
-a([
+], a.prototype, "isFooterPinned", 2);
+l([
   d({ type: Boolean })
-], n.prototype, "isFullWidthBelowMid", 2);
-a([
+], a.prototype, "isFullWidthBelowMid", 2);
+l([
   d({ type: Boolean, reflect: !0 })
-], n.prototype, "isLoading", 2);
-a([
+], a.prototype, "isLoading", 2);
+l([
   d({ type: Boolean })
-], n.prototype, "isOpen", 2);
-a([
-  d({ type: String })
-], n.prototype, "leadingActionText", 2);
-a([
-  d({ type: String })
-], n.prototype, "leadingActionVariant", 2);
-a([
+], a.prototype, "isOpen", 2);
+l([
+  d({ type: Object })
+], a.prototype, "leadingAction", 2);
+l([
   d(),
-  B(b, te, r.position)
-], n.prototype, "position", 2);
-a([
+  S(b, oe, s.position)
+], a.prototype, "position", 2);
+l([
   d()
-], n.prototype, "returnFocusAfterCloseSelector", 2);
-a([
+], a.prototype, "returnFocusAfterCloseSelector", 2);
+l([
   d(),
-  B(b, ie, r.size)
-], n.prototype, "size", 2);
-a([
-  d({ type: String })
-], n.prototype, "supportingActionText", 2);
-a([
-  d({ type: String })
-], n.prototype, "supportingActionVariant", 2);
-a([
-  R("dialog")
-], n.prototype, "_dialog", 2);
-q(b, n);
+  S(b, ie, s.size)
+], a.prototype, "size", 2);
+l([
+  d({ type: Object })
+], a.prototype, "supportingAction", 2);
+l([
+  W("dialog")
+], a.prototype, "_dialog", 2);
+q(b, a);
 export {
-  C as ON_MODAL_BACK_EVENT,
-  A as ON_MODAL_CLOSE_EVENT,
-  oe as ON_MODAL_LEADING_ACTION_CLICK,
+  L as ON_MODAL_BACK_EVENT,
+  O as ON_MODAL_CLOSE_EVENT,
+  te as ON_MODAL_LEADING_ACTION_CLICK,
   w as ON_MODAL_OPEN_EVENT,
-  ne as ON_MODAL_SUPPORTING_ACTION_CLICK,
-  n as PieModal,
-  r as defaultProps,
+  ae as ON_MODAL_SUPPORTING_ACTION_CLICK,
+  a as PieModal,
+  s as defaultProps,
   ee as headingLevels,
-  te as positions,
+  oe as positions,
   ie as sizes
 };

package/dist/react.d.ts

@@ -8,15 +8,28 @@ import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
 import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
 
+declare 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 declare type AriaProps = {
     close?: string;
     back?: string;
     loading?: string;
-    leadingActionLabel?: string;
-    supportingActionLabel?: string;
 };
 
-export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingActionText' | 'supportingActionText' | 'returnFocusAfterCloseSelector'>>;
+export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -26,7 +39,7 @@ export declare type ModalActionType = 'leading' | 'supporting';
 
 export declare type ModalProps = {
     /**
-     * The ARIA labels used for the modal leading action, supporting action, close and back buttons, as well as for the loading state.
+     * The ARIA labels used for the modal close and back buttons, as well as for the loading state.
      */
     aria?: AriaProps;
     /**
@@ -74,21 +87,13 @@ export declare type ModalProps = {
      */
     isLoading?: boolean;
     /**
-     * The text to display inside the leading action button.
-     */
-    leadingActionText?: string;
-    /**
-     * The button variant for the leading action button.
-     */
-    leadingActionVariant?: Variant;
-    /**
-     * The text to display inside the supporting action button.
+     * The leading action configuration for the modal.
      */
-    supportingActionText?: string;
+    leadingAction?: ActionProps;
     /**
-     * The button variant for the supporting action button.
+     * The supporting action configuration for the modal.
      */
-    supportingActionVariant?: Variant;
+    supportingAction?: 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
@@ -156,13 +161,11 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
     isFullWidthBelowMid: boolean;
     isLoading: boolean;
     isOpen: boolean;
-    leadingActionText: ModalProps['leadingActionText'];
-    leadingActionVariant: "primary" | "secondary" | "outline" | "outline-inverse" | "ghost" | "inverse" | "ghost-inverse" | "destructive" | "destructive-ghost";
+    leadingAction: ModalProps['leadingAction'];
     position: "top" | "center";
-    returnFocusAfterCloseSelector?: ModalProps['returnFocusAfterCloseSelector'];
+    returnFocusAfterCloseSelector: ModalProps['returnFocusAfterCloseSelector'];
     size: "medium" | "large" | "small";
-    supportingActionText: ModalProps['supportingActionText'];
-    supportingActionVariant: "primary" | "secondary" | "outline" | "outline-inverse" | "ghost" | "inverse" | "ghost-inverse" | "destructive" | "destructive-ghost";
+    supportingAction: ModalProps['supportingAction'];
     private _dialog?;
     private _backButtonClicked;
     static styles: CSSResult;
@@ -210,9 +213,9 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
     /**
      * Renders the "leadingAction" button if the text is provided.
      *
-     * If `leadingActionText` is not provided, the button is not rendered.
-     * If `leadingActionVariant` is not provided, the default value is used.
-     * The (optional) aria-label is read from the `aria` prop's `leadingActionLabel` property.
+     * If `leadingAction.text` is not provided, the button is not rendered.
+     * If `leadingAction.variant` is not provided, the default value of "primary" is used.
+     * The (optional) aria-label is read from `leadingAction.ariaLabel`.
      *
      * @private
      */
@@ -221,8 +224,9 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
      * Renders the "supportingAction" button if the text is provided.
      * You cannot have a supporting action without a leading action.
      *
-     * If `supportingActionText` or `leadingActionText` are not provided, the button is not rendered.
-     * If `supportingActionVariant` is not provided, the default value is used.
+     * If either `supportingAction.text` or `leadingAction.text` are not provided, the button is not rendered.
+     * If `supportingAction.variant` is not provided, the default value of "ghost" is used.
+     * The (optional) aria-label is read from `supportingAction.ariaLabel`.
      *
      * @private
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -37,7 +37,8 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeat/pie-design-tokens": "6.3.1",
-    "@justeattakeaway/pie-components-config": "0.16.0",
+    "@justeattakeaway/pie-components-config": "0.17.0",
+    "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "@types/body-scroll-lock": "3.1.2",
     "cem-plugin-module-file-extensions": "0.0.5"
@@ -46,10 +47,10 @@
     "extends": "../../../package.json"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "0.48.0",
-    "@justeattakeaway/pie-icon-button": "0.28.9",
-    "@justeattakeaway/pie-icons-webc": "0.24.2",
-    "@justeattakeaway/pie-spinner": "0.6.6",
+    "@justeattakeaway/pie-button": "0.48.1",
+    "@justeattakeaway/pie-icon-button": "0.28.10",
+    "@justeattakeaway/pie-icons-webc": "0.25.0",
+    "@justeattakeaway/pie-spinner": "0.6.7",
     "@justeattakeaway/pie-webc-core": "0.24.0",
     "body-scroll-lock": "3.1.5",
     "dialog-polyfill": "0.5.6"

package/src/defs.ts

@@ -10,13 +10,28 @@ export type AriaProps = {
     close?: string;
     back?: string;
     loading?: string;
-    leadingActionLabel?: string;
-    supportingActionLabel?: string;
+};
+
+type ActionProps = {
+    /**
+     * The text to display inside the button.
+     */
+    text: string;
+
+    /**
+     * The button variant.
+     */
+    variant?: ButtonVariant;
+
+    /**
+     * The aria label for the button.
+     */
+    ariaLabel?: string;
 };
 
 export type ModalProps = {
     /**
-     * The ARIA labels used for the modal leading action, supporting action, close and back buttons, as well as for the loading state.
+     * The ARIA labels used for the modal close and back buttons, as well as for the loading state.
      */
     aria?: AriaProps;
 
@@ -74,24 +89,14 @@ export type ModalProps = {
     isLoading?: boolean;
 
     /**
-     * The text to display inside the leading action button.
-     */
-    leadingActionText?: string;
-
-    /**
-     * The button variant for the leading action button.
-     */
-    leadingActionVariant?: ButtonVariant;
-
-    /**
-     * The text to display inside the supporting action button.
+     * The leading action configuration for the modal.
      */
-    supportingActionText?: string;
+    leadingAction?: ActionProps;
 
     /**
-     * The button variant for the supporting action button.
+     * The supporting action configuration for the modal.
      */
-    supportingActionVariant?: ButtonVariant;
+    supportingAction?: ActionProps;
 
     /*
      * The position of the modal; this controls where it will appear on the page.
@@ -146,7 +151,7 @@ export const ON_MODAL_SUPPORTING_ACTION_CLICK = 'pie-modal-supporting-action-cli
 
 export type ModalActionType = 'leading' | 'supporting';
 
-export type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingActionText' | 'supportingActionText' | 'returnFocusAfterCloseSelector'>>;
+export type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
 
 export const defaultProps: DefaultProps = {
     hasBackButton: false,
@@ -157,8 +162,6 @@ export const defaultProps: DefaultProps = {
     isFooterPinned: true,
     isFullWidthBelowMid: false,
     isLoading: false,
-    leadingActionVariant: 'primary',
     position: 'center',
     size: 'medium',
-    supportingActionVariant: 'ghost',
 };

package/src/index.ts

@@ -86,28 +86,22 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     @property({ type: Boolean })
     public isOpen = defaultProps.isOpen;
 
-    @property({ type: String })
-    public leadingActionText: ModalProps['leadingActionText'];
-
-    @property({ type: String })
-    public leadingActionVariant = defaultProps.leadingActionVariant;
+    @property({ type: Object })
+    public leadingAction: ModalProps['leadingAction'];
 
     @property()
     @validPropertyValues(componentSelector, positions, defaultProps.position)
     public position = defaultProps.position;
 
     @property()
-    public returnFocusAfterCloseSelector?: ModalProps['returnFocusAfterCloseSelector'];
+    public returnFocusAfterCloseSelector: ModalProps['returnFocusAfterCloseSelector'];
 
     @property()
     @validPropertyValues(componentSelector, sizes, defaultProps.size)
     public size = defaultProps.size;
 
-    @property({ type: String })
-    public supportingActionText: ModalProps['supportingActionText'];
-
-    @property({ type: String })
-    public supportingActionVariant = defaultProps.supportingActionVariant;
+    @property({ type: Object })
+    public supportingAction: ModalProps['supportingAction'];
 
     @query('dialog')
     private _dialog?: HTMLDialogElement;
@@ -307,26 +301,26 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     /**
      * Renders the "leadingAction" button if the text is provided.
      *
-     * If `leadingActionText` is not provided, the button is not rendered.
-     * If `leadingActionVariant` is not provided, the default value is used.
-     * The (optional) aria-label is read from the `aria` prop's `leadingActionLabel` property.
+     * If `leadingAction.text` is not provided, the button is not rendered.
+     * If `leadingAction.variant` is not provided, the default value of "primary" is used.
+     * The (optional) aria-label is read from `leadingAction.ariaLabel`.
      *
      * @private
      */
     private renderLeadingAction () : TemplateResult | typeof nothing {
-        if (!this.leadingActionText) {
-            return nothing;
-        }
+        const { ariaLabel, text, variant = 'primary' } = this.leadingAction || {};
+
+        if (!text) return nothing;
 
         return html`
             <pie-button
-                variant="${this.leadingActionVariant}"
-                aria-label="${ifDefined(this.aria?.leadingActionLabel)}"
+                variant="${variant}"
+                aria-label="${ifDefined(ariaLabel)}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick('leading')}"
                 data-test-id="modal-leading-action">
-                ${this.leadingActionText}
+                ${text}
             </pie-button>
         `;
     }
@@ -335,30 +329,31 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      * Renders the "supportingAction" button if the text is provided.
      * You cannot have a supporting action without a leading action.
      *
-     * If `supportingActionText` or `leadingActionText` are not provided, the button is not rendered.
-     * If `supportingActionVariant` is not provided, the default value is used.
+     * If either `supportingAction.text` or `leadingAction.text` are not provided, the button is not rendered.
+     * If `supportingAction.variant` is not provided, the default value of "ghost" is used.
+     * The (optional) aria-label is read from `supportingAction.ariaLabel`.
      *
      * @private
      */
     private renderSupportingAction (): TemplateResult | typeof nothing {
-        if (!this.supportingActionText) {
-            return nothing;
-        }
+        const { ariaLabel, text, variant = 'ghost' } = this.supportingAction || {};
+
+        if (!text) return nothing;
 
-        if (!this.leadingActionText) {
+        if (!this.leadingAction?.text) {
             console.warn('You cannot have a supporting action without a leading action. If you only need one button then use a leading action instead.');
             return nothing;
         }
 
         return html`
             <pie-button
-                variant="${this.supportingActionVariant}"
-                aria-label="${ifDefined(this.aria?.supportingActionLabel)}"
+                variant="${variant}"
+                aria-label="${ifDefined(ariaLabel)}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick('supporting')}"
                 data-test-id="modal-supporting-action">
-                ${this.supportingActionText}
+                ${text}
             </pie-button>
         `;
     }
@@ -368,7 +363,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      * @private
      */
     private renderModalContentAndFooter (): TemplateResult {
-        const hasFooterLeadingAction = Boolean(this.leadingActionText);
+        const hasFooterLeadingAction = Boolean(this.leadingAction?.text);
 
         const scrollContainerClasses = {
             'c-modal-scrollContainer': true,
@@ -402,10 +397,10 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
             isFooterPinned,
             isFullWidthBelowMid,
             isLoading,
-            leadingActionText,
+            leadingAction,
             position,
             size,
-            supportingActionText,
+            supportingAction,
         } = this;
 
         const headingTag = unsafeStatic(headingLevel);
@@ -416,7 +411,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
             class="c-modal"
             size="${size}"
             position="${position}"
-            ?hasActions=${leadingActionText || supportingActionText}
+            ?hasActions=${leadingAction?.text || supportingAction?.text}
             ?hasBackButton=${hasBackButton}
             ?hasStackedActions=${hasStackedActions}
             ?isDismissible=${isDismissible}

package/src/modal.scss

@@ -235,13 +235,16 @@
         --modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
         --modal-content-padding-block: var(--dt-spacing-a);
         --modal-content-padding-inline: var(--dt-spacing-d);
+        --modal-content-padding-block-end: var(--dt-spacing-e);
+        --modal-content-min-block-size: var(--dt-spacing-j);
+
 
         @media (min-width: $breakpoint-wide) {
             --modal-content-padding-inline: var(--dt-spacing-e);
         }
 
         position: relative;
-        min-block-size: var(--dt-spacing-j);
+        min-block-size: calc(var(--modal-content-min-block-size) + var(--modal-content-padding-block) + var(--modal-content-padding-block-end)); // The sum of the minimum height and block paddings, when footerActions aren't rendered
 
         font-size: var(--modal-content-font-size);
         line-height: var(--modal-content-line-height);
@@ -255,6 +258,7 @@
 
         &.c-modal-hasFooterActions {
           padding-block-end: var(--modal-content-padding-block);
+          min-block-size: var(--modal-content-min-block-size);
         }
 
         &--scrollable {
@@ -307,13 +311,21 @@
         pie-spinner {
             position: absolute;
             left: 50%;
-            top: 50%;
+
+            // Compensates different block paddings, when footerActions aren't rendered
+            top: calc(50% - (var(--modal-content-padding-block-end) - var(--modal-content-padding-block)) / 2);
             transform: translate(-50%, -50%);
         }
 
         & .c-modal-contentInner {
             display: none;
         }
+
+        &.c-modal-hasFooterActions {
+          pie-spinner {
+            top: 50%;
+          }
+        }
     }
 
     // removes the scroll shadow effect if "background-attachment" isn't supported.