@justeattakeaway/pie-modal 0.43.5 → 0.45.0

package/custom-elements.json

@@ -178,7 +178,7 @@
               "kind": "field",
               "name": "aria",
               "type": {
-                "text": "AriaProps"
+                "text": "ModalProps['aria']"
               },
               "privacy": "public",
               "attribute": "aria"
@@ -195,9 +195,6 @@
             {
               "kind": "field",
               "name": "headingLevel",
-              "type": {
-                "text": "ModalProps['headingLevel']"
-              },
               "privacy": "public",
               "attribute": "headingLevel"
             },
@@ -249,7 +246,7 @@
               "kind": "field",
               "name": "leadingAction",
               "type": {
-                "text": "ActionProps"
+                "text": "ModalProps['leadingAction']"
               },
               "privacy": "public",
               "attribute": "leadingAction"
@@ -257,9 +254,6 @@
             {
               "kind": "field",
               "name": "position",
-              "type": {
-                "text": "ModalProps['position']"
-              },
               "privacy": "public",
               "attribute": "position"
             },
@@ -267,7 +261,7 @@
               "kind": "field",
               "name": "returnFocusAfterCloseSelector",
               "type": {
-                "text": "string | undefined"
+                "text": "ModalProps['returnFocusAfterCloseSelector']"
               },
               "privacy": "public",
               "attribute": "returnFocusAfterCloseSelector"
@@ -275,9 +269,6 @@
             {
               "kind": "field",
               "name": "size",
-              "type": {
-                "text": "ModalProps['size']"
-              },
               "privacy": "public",
               "attribute": "size"
             },
@@ -285,7 +276,7 @@
               "kind": "field",
               "name": "supportingAction",
               "type": {
-                "text": "ActionProps"
+                "text": "ModalProps['supportingAction']"
               },
               "privacy": "public",
               "attribute": "supportingAction"
@@ -431,7 +422,7 @@
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "TemplateResult | typeof nothing"
                 }
               },
               "description": "Template for the close button element. Called within the\nmain render function."
@@ -442,7 +433,7 @@
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "TemplateResult"
+                  "text": "TemplateResult | typeof nothing"
                 }
               },
               "description": "Template for the back button element. Called within the\nmain render function."
@@ -456,7 +447,7 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "Render leadingAction button depending on prop availability.\n\n1. If the prop `leadingAction` is not provided, the button is not rendered.\n2. If the prop `leadingAction` is provided but any of the optional properties\nare not provided, they fall back to their default values."
+              "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",
@@ -467,7 +458,7 @@
                   "text": "TemplateResult | typeof nothing"
                 }
               },
-              "description": "Render supportingAction button depending on prop availability.\n\n1. If the prop `supportingAction` is not provided, the button is not rendered.\n2. If the prop `supportingAction` is provided but any of the optional properties\nare not provided, they fall back to their default values.\n3. If `supportingAction` is provided but not `leadingAction`, log a warning and do\nnot render `supportingAction`."
+              "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",
@@ -537,7 +528,7 @@
             {
               "name": "aria",
               "type": {
-                "text": "AriaProps"
+                "text": "ModalProps['aria']"
               },
               "fieldName": "aria"
             },
@@ -550,9 +541,6 @@
             },
             {
               "name": "headingLevel",
-              "type": {
-                "text": "ModalProps['headingLevel']"
-              },
               "fieldName": "headingLevel"
             },
             {
@@ -586,35 +574,29 @@
             {
               "name": "leadingAction",
               "type": {
-                "text": "ActionProps"
+                "text": "ModalProps['leadingAction']"
               },
               "fieldName": "leadingAction"
             },
             {
               "name": "position",
-              "type": {
-                "text": "ModalProps['position']"
-              },
               "fieldName": "position"
             },
             {
               "name": "returnFocusAfterCloseSelector",
               "type": {
-                "text": "string | undefined"
+                "text": "ModalProps['returnFocusAfterCloseSelector']"
               },
               "fieldName": "returnFocusAfterCloseSelector"
             },
             {
               "name": "size",
-              "type": {
-                "text": "ModalProps['size']"
-              },
               "fieldName": "size"
             },
             {
               "name": "supportingAction",
               "type": {
-                "text": "ActionProps"
+                "text": "ModalProps['supportingAction']"
               },
               "fieldName": "supportingAction"
             }

package/dist/index.d.ts

@@ -7,7 +7,7 @@ import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
 import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
 
-export declare type ActionProps = {
+declare type ActionProps = {
     /**
      * The text to display inside the button.
      */
@@ -17,7 +17,7 @@ export declare type ActionProps = {
      */
     variant?: Variant;
     /**
-     * The ARIA label for the button.
+     * The aria label for the button.
      */
     ariaLabel?: string;
 };
@@ -42,7 +42,7 @@ export declare interface ModalEventDetail {
 
 export declare type ModalProps = {
     /**
-     * The ARIA labels used for the modal close and back buttons, as well as loading state.
+     * The ARIA labels used for the modal close and back buttons, as well as for the loading state.
      */
     aria?: AriaProps;
     /**
@@ -152,9 +152,9 @@ export declare const ON_MODAL_SUPPORTING_ACTION_CLICK = "pie-modal-supporting-ac
  * @event {CustomEvent} pie-modal-supporting-action-click - when the modal supporting action is clicked.
  */
 export declare class PieModal extends PieModal_base implements ModalProps {
-    aria: AriaProps;
+    aria: ModalProps['aria'];
     heading: string;
-    headingLevel: ModalProps['headingLevel'];
+    headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     hasBackButton: boolean;
     hasStackedActions: boolean;
     isDismissible: boolean;
@@ -162,11 +162,11 @@ export declare class PieModal extends PieModal_base implements ModalProps {
     isFullWidthBelowMid: boolean;
     isLoading: boolean;
     isOpen: boolean;
-    leadingAction: ActionProps;
-    position: ModalProps['position'];
-    returnFocusAfterCloseSelector?: string;
-    size: ModalProps['size'];
-    supportingAction: ActionProps;
+    leadingAction: ModalProps['leadingAction'];
+    position: "top" | "center";
+    returnFocusAfterCloseSelector: ModalProps['returnFocusAfterCloseSelector'];
+    size: "medium" | "large" | "small";
+    supportingAction: ModalProps['supportingAction'];
     private _dialog?;
     private _backButtonClicked;
     static styles: CSSResult;
@@ -212,23 +212,22 @@ export declare class PieModal extends PieModal_base implements ModalProps {
      */
     private renderBackButton;
     /**
-     * Render leadingAction button depending on prop availability.
+     * Renders the "leadingAction" button if the text is provided.
      *
-     * 1. If the prop `leadingAction` is not provided, the button is not rendered.
-     * 2. If the prop `leadingAction` is provided but any of the optional properties
-     * are not provided, they fall back to their default values.
+     * 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;
     /**
-     * Render supportingAction button depending on prop availability.
+     * Renders the "supportingAction" button if the text is provided.
+     * You cannot have a supporting action without a leading action.
      *
-     * 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`.
+     * 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,14 +1,16 @@
-import { LitElement as T, nothing as c, unsafeCSS as N } from "lit";
-import { html as g, unsafeStatic as I } from "lit/static-html.js";
-import { property as r, query as R } from "lit/decorators.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 W, dispatchCustomEvent as u, requiredProperty as j, validPropertyValues as B, defineCustomElement as Y } 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 V(n) {
+function H(n) {
   if (Array.isArray(n)) {
     for (var e = 0, i = Array(n.length); e < n.length; e++)
       i[e] = n[e];
@@ -18,34 +20,34 @@ function V(n) {
 }
 var A = !1;
 if (typeof window < "u") {
-  var L = {
+  var $ = {
     get passive() {
       A = !0;
     }
   };
-  window.addEventListener("testPassive", null, L), window.removeEventListener("testPassive", null, L);
+  window.addEventListener("testPassive", null, $), window.removeEventListener("testPassive", null, $);
 }
-var S = 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, M = -1, f = void 0, v = void 0, $ = 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 $(i.target) || i.touches.length > 1 ? !0 : (i.preventDefault && i.preventDefault(), !1);
-}, q = function(e) {
+  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, 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");
-}, H = function() {
+}, U = function() {
   v !== void 0 && (document.body.style.paddingRight = v, v = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
-}, U = function(e) {
+}, G = function(e) {
   return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
-}, K = function(e, i) {
-  var o = e.targetTouches[0].clientY - M;
-  return $(e.target) ? !1 : i && i.scrollTop === 0 && o > 0 || U(i) && o < 0 ? x(e) : (e.stopPropagation(), !0);
-}, G = function(e, i) {
+}, X = function(e, i) {
+  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;
@@ -57,23 +59,23 @@ var S = typeof window < "u" && window.navigator && window.navigator.platform &&
       targetElement: e,
       options: i || {}
     };
-    p = [].concat(V(p), [o]), S ? (e.ontouchstart = function(t) {
-      t.targetTouches.length === 1 && (M = t.targetTouches[0].clientY);
+    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 && K(t, e);
-    }, y || (document.addEventListener("touchmove", x, A ? { passive: !1 } : void 0), y = !0)) : q(i);
+      t.targetTouches.length === 1 && X(t, e);
+    }, y || (document.addEventListener("touchmove", x, A ? { passive: !1 } : void 0), y = !0)) : K(i);
   }
-}, X = function(e) {
+}, Q = function(e) {
   if (!e) {
     console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
     return;
   }
   p = p.filter(function(i) {
     return i.targetElement !== e;
-  }), S ? (e.ontouchstart = null, e.ontouchmove = null, y && p.length === 0 && (document.removeEventListener("touchmove", x, A ? { passive: !1 } : void 0), y = !1)) : p.length || H();
+  }), 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 J = `*,*: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}}
-`, Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], ee = ["top", "center"], _ = "pie-modal-close", w = "pie-modal-open", C = "pie-modal-back", ie = "pie-modal-leading-action-click", oe = "pie-modal-supporting-action-click", d = {
+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",
@@ -85,15 +87,15 @@ const J = `*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
   position: "center",
   size: "medium"
 };
-var te = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, l = (n, e, i, o) => {
-  for (var t = o > 1 ? void 0 : o ? ae(e, i) : e, s = n.length - 1, m; s >= 0; s--)
-    (m = n[s]) && (t = (o ? m(e, i, t) : m(t)) || t);
-  return o && t && te(e, i, t), t;
+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 a extends W(T) {
+class a extends Y(I) {
   constructor() {
-    super(...arguments), this.headingLevel = d.headingLevel, this.hasBackButton = d.hasBackButton, this.hasStackedActions = d.hasStackedActions, this.isDismissible = d.isDismissible, this.isFooterPinned = d.isFooterPinned, this.isFullWidthBelowMid = d.isFullWidthBelowMid, this.isLoading = d.isLoading, this.isOpen = d.isOpen, this.position = d.position, this.size = d.size, 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;
@@ -102,19 +104,19 @@ class a extends W(T) {
       const i = (k = this._dialog) == null ? void 0 : k.getBoundingClientRect(), {
         top: o = 0,
         bottom: t = 0,
-        left: s = 0,
-        right: m = 0
+        left: r = 0,
+        right: c = 0
       } = i || {};
-      if (o === 0 && t === 0 && s === 0 && m === 0)
+      if (o === 0 && t === 0 && r === 0 && c === 0)
         return;
-      (e.clientY < o || e.clientY > t || e.clientX < s || e.clientX > m) && (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(_, (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(_, (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((o) => o.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (o) => this._handleDialogCancelEvent(o)), this._dialog.addEventListener("close", () => {
@@ -128,13 +130,13 @@ class a extends W(T) {
    * Opens the dialog element and disables page scrolling
    */
   _handleModalOpened(e) {
-    var o, t, s, m;
+    var o, t, r, c;
     const { targetModal: i } = e.detail;
     if (i === this) {
       const h = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
-      if (h && ("scrollTo" in window && window.scrollTo(0, 0), G(h)), (t = this._dialog) != null && t.hasAttribute("open") || !((s = this._dialog) != null && s.isConnected))
+      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;
-      (m = this._dialog) == null || m.showModal();
+      (c = this._dialog) == null || c.showModal();
     }
   }
   /**
@@ -144,8 +146,8 @@ class a extends W(T) {
     var o, t;
     const { targetModal: i } = e.detail;
     if (i === this) {
-      const s = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
-      s && X(s), (t = this._dialog) == null || t.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
@@ -155,11 +157,11 @@ class a extends W(T) {
   // 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, _, { 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, o;
-    e === "leading" ? ((i = this._dialog) == null || i.close("leading"), u(this, ie, { targetModal: this })) : e === "supporting" && ((o = this._dialog) == null || o.close("supporting"), u(this, oe, { targetModal: this }));
+    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
@@ -178,17 +180,17 @@ class a extends W(T) {
    */
   renderCloseButton() {
     var e;
-    return g`
+    return this.isDismissible ? m`
             <pie-icon-button
                 @click="${() => {
       this.isOpen = !1;
     }}"
                 variant="ghost-secondary"
                 class="c-modal-closeBtn"
-                aria-label="${((e = this.aria) == null ? void 0 : e.close) || c}"
+                aria-label="${((e = this.aria) == null ? void 0 : e.close) || g}"
                 data-test-id="modal-close-button">
                 <icon-close></icon-close>
-            </pie-icon-button>`;
+            </pie-icon-button>` : g;
   }
   /**
    * Template for the back button element. Called within the
@@ -198,88 +200,91 @@ class a extends W(T) {
    */
   renderBackButton() {
     var e;
-    return g`
+    return this.hasBackButton ? m`
             <pie-icon-button
                 @click="${() => {
       this._backButtonClicked = !0, this.isOpen = !1;
     }}"
                 variant="ghost-secondary"
                 class="c-modal-backBtn"
-                aria-label="${((e = this.aria) == null ? void 0 : e.back) || c}"
+                aria-label="${B((e = this.aria) == null ? void 0 : e.back)}"
                 data-test-id="modal-back-button">
-                ${this.isRTL ? g`<icon-chevron-right></icon-chevron-right>` : g`<icon-chevron-left></icon-chevron-left>`}
+                ${this.isRTL ? m`<icon-chevron-right></icon-chevron-right>` : m`<icon-chevron-left></icon-chevron-left>`}
             </pie-icon-button>
-        `;
+        ` : g;
   }
   /**
-   * Render leadingAction button depending on prop availability.
+   * Renders the "leadingAction" button if the text is provided.
    *
-   * 1. If the prop `leadingAction` is not provided, the button is not rendered.
-   * 2. If the prop `leadingAction` is provided but any of the optional properties
-   * are not provided, they fall back to their default values.
+   * 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() {
-    const { text: e, variant: i = "primary", ariaLabel: o } = this.leadingAction;
-    return e ? g`
+    const { ariaLabel: e, text: i, variant: o = "primary" } = this.leadingAction || {};
+    return i ? m`
             <pie-button
-                variant="${i}"
-                aria-label="${o || c}"
+                variant="${o}"
+                aria-label="${B(e)}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("leading")}"
                 data-test-id="modal-leading-action">
-                ${e}
+                ${i}
             </pie-button>
-        ` : c;
+        ` : g;
   }
   /**
-   * Render supportingAction button depending on prop availability.
+   * Renders the "supportingAction" button if the text is provided.
+   * You cannot have a supporting action without a leading action.
    *
-   * 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`.
+   * 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() {
-    const { text: e, variant: i = "ghost", ariaLabel: o } = this.supportingAction;
-    return e ? this.leadingAction ? g`
+    var t;
+    const { ariaLabel: e, text: i, variant: o = "ghost" } = this.supportingAction || {};
+    return i ? (t = this.leadingAction) != null && t.text ? m`
             <pie-button
-                variant="${i}"
-                aria-label="${o || c}"
+                variant="${o}"
+                aria-label="${B(e)}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("supporting")}"
                 data-test-id="modal-supporting-action">
-                ${e}
+                ${i}
             </pie-button>
-        ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), c) : c;
+        ` : (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;
   }
   /**
    * Renders the modal inner content and footer of the modal.
    * @private
    */
   renderModalContentAndFooter() {
-    var i, o;
-    const e = (i = this.leadingAction) == null ? void 0 : i.text;
-    return g`
-            <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable ${e ? "c-modal-hasFooterActions" : ""}">
-                <div class="c-modal-contentInner"
-                     data-test-id="modal-content-inner">
+    var o;
+    const e = !!((o = this.leadingAction) != null && o.text);
+    return m`
+            <article class=${j({
+      "c-modal-scrollContainer": !0,
+      "c-modal-content": !0,
+      "c-modal-content--scrollable": !0,
+      "c-modal-hasFooterActions": e
+    })}>
+                <div class="c-modal-contentInner" data-test-id="modal-content-inner">
                     <slot></slot>
                 </div>
-                ${this.isLoading ? g`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : c}
+                ${this.isLoading ? m`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : g}
             </article>
-            ${e ? g`
-                <footer class="c-modal-footer"
-                        data-test-id="pie-modal-footer">
+            ${e ? m`
+                <footer class="c-modal-footer" data-test-id="pie-modal-footer">
                     ${this.renderLeadingAction()}
-                    ${(o = this.supportingAction) != null && o.text ? this.renderSupportingAction() : c}
-                </footer>` : c}`;
+                    ${this.renderSupportingAction()}
+                </footer>` : g}`;
   }
   render() {
     const {
@@ -287,42 +292,42 @@ class a extends W(T) {
       hasBackButton: i,
       hasStackedActions: o,
       heading: t,
-      headingLevel: s = "h2",
-      isDismissible: m,
+      headingLevel: r,
+      isDismissible: c,
       isFooterPinned: h,
       isFullWidthBelowMid: k,
       isLoading: z,
-      leadingAction: D,
-      position: F,
-      size: P,
-      supportingAction: E
-    } = this, O = I(s);
-    return g`
+      leadingAction: _,
+      position: E,
+      size: T,
+      supportingAction: C
+    } = this, M = R(r);
+    return m`
         <dialog
             id="dialog"
             class="c-modal"
-            size="${P || d.size}"
-            position="${F || d.position}"
-            ?hasActions=${D || E}
+            size="${T}"
+            position="${E}"
+            ?hasActions=${(_ == null ? void 0 : _.text) || (C == null ? void 0 : C.text)}
             ?hasBackButton=${i}
             ?hasStackedActions=${o}
-            ?isDismissible=${m}
+            ?isDismissible=${c}
             ?isFooterPinned=${h}
             ?isFullWidthBelowMid=${k}
             ?isLoading=${z}
             aria-busy="${z ? "true" : "false"}"
-            aria-label="${z && (e == null ? void 0 : e.loading) || c}"
+            aria-label="${z && (e == null ? void 0 : e.loading) || g}"
             data-test-id="pie-modal">
             <header class="c-modal-header"
             data-test-id="modal-header">
-                ${i ? this.renderBackButton() : c}
-                <${O} class="c-modal-heading">
+                ${this.renderBackButton()}
+                <${M} class="c-modal-heading">
                     ${t}
-                </${O}>
-                ${m ? this.renderCloseButton() : c}
+                </${M}>
+                ${this.renderCloseButton()}
             </header>
             ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
-    h ? this.renderModalContentAndFooter() : g`
+    h ? this.renderModalContentAndFooter() : m`
                         <div class="c-modal-scrollContainer">
                             ${this.renderModalContentAndFooter()}
                         </div>
@@ -330,69 +335,69 @@ class a extends W(T) {
         </dialog>`;
   }
 }
-a.styles = N(J);
+a.styles = N(Z);
 l([
-  r({ type: Object })
+  d({ type: Object })
 ], a.prototype, "aria", 2);
 l([
-  r({ type: String }),
-  j(b)
+  d({ type: String }),
+  V(b)
 ], a.prototype, "heading", 2);
 l([
-  r(),
-  B(b, Q, d.headingLevel)
+  d(),
+  S(b, ee, s.headingLevel)
 ], a.prototype, "headingLevel", 2);
 l([
-  r({ type: Boolean })
+  d({ type: Boolean })
 ], a.prototype, "hasBackButton", 2);
 l([
-  r({ type: Boolean })
+  d({ type: Boolean })
 ], a.prototype, "hasStackedActions", 2);
 l([
-  r({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], a.prototype, "isDismissible", 2);
 l([
-  r({ type: Boolean })
+  d({ type: Boolean })
 ], a.prototype, "isFooterPinned", 2);
 l([
-  r({ type: Boolean })
+  d({ type: Boolean })
 ], a.prototype, "isFullWidthBelowMid", 2);
 l([
-  r({ type: Boolean, reflect: !0 })
+  d({ type: Boolean, reflect: !0 })
 ], a.prototype, "isLoading", 2);
 l([
-  r({ type: Boolean })
+  d({ type: Boolean })
 ], a.prototype, "isOpen", 2);
 l([
-  r({ type: Object })
+  d({ type: Object })
 ], a.prototype, "leadingAction", 2);
 l([
-  r(),
-  B(b, ee, d.position)
+  d(),
+  S(b, oe, s.position)
 ], a.prototype, "position", 2);
 l([
-  r()
+  d()
 ], a.prototype, "returnFocusAfterCloseSelector", 2);
 l([
-  r(),
-  B(b, Z, d.size)
+  d(),
+  S(b, ie, s.size)
 ], a.prototype, "size", 2);
 l([
-  r({ type: Object })
+  d({ type: Object })
 ], a.prototype, "supportingAction", 2);
 l([
-  R("dialog")
+  W("dialog")
 ], a.prototype, "_dialog", 2);
-Y(b, a);
+q(b, a);
 export {
-  C as ON_MODAL_BACK_EVENT,
-  _ as ON_MODAL_CLOSE_EVENT,
-  ie 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,
-  oe as ON_MODAL_SUPPORTING_ACTION_CLICK,
+  ae as ON_MODAL_SUPPORTING_ACTION_CLICK,
   a as PieModal,
-  d as defaultProps,
-  Q as headingLevels,
-  ee as positions,
-  Z as sizes
+  s as defaultProps,
+  ee as headingLevels,
+  oe as positions,
+  ie as sizes
 };

package/dist/react.d.ts

@@ -8,7 +8,7 @@ import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit';
 import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
 
-export declare type ActionProps = {
+declare type ActionProps = {
     /**
      * The text to display inside the button.
      */
@@ -18,7 +18,7 @@ export declare type ActionProps = {
      */
     variant?: Variant;
     /**
-     * The ARIA label for the button.
+     * The aria label for the button.
      */
     ariaLabel?: string;
 };
@@ -39,7 +39,7 @@ export declare type ModalActionType = 'leading' | 'supporting';
 
 export declare type ModalProps = {
     /**
-     * The ARIA labels used for the modal close and back buttons, as well as loading state.
+     * The ARIA labels used for the modal close and back buttons, as well as for the loading state.
      */
     aria?: AriaProps;
     /**
@@ -151,9 +151,9 @@ export declare const PieModal: React_2.ForwardRefExoticComponent<ModalProps & Re
  * @event {CustomEvent} pie-modal-supporting-action-click - when the modal supporting action is clicked.
  */
 declare class PieModal_2 extends PieModal_base implements ModalProps {
-    aria: AriaProps;
+    aria: ModalProps['aria'];
     heading: string;
-    headingLevel: ModalProps['headingLevel'];
+    headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
     hasBackButton: boolean;
     hasStackedActions: boolean;
     isDismissible: boolean;
@@ -161,11 +161,11 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
     isFullWidthBelowMid: boolean;
     isLoading: boolean;
     isOpen: boolean;
-    leadingAction: ActionProps;
-    position: ModalProps['position'];
-    returnFocusAfterCloseSelector?: string;
-    size: ModalProps['size'];
-    supportingAction: ActionProps;
+    leadingAction: ModalProps['leadingAction'];
+    position: "top" | "center";
+    returnFocusAfterCloseSelector: ModalProps['returnFocusAfterCloseSelector'];
+    size: "medium" | "large" | "small";
+    supportingAction: ModalProps['supportingAction'];
     private _dialog?;
     private _backButtonClicked;
     static styles: CSSResult;
@@ -211,23 +211,22 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
      */
     private renderBackButton;
     /**
-     * Render leadingAction button depending on prop availability.
+     * Renders the "leadingAction" button if the text is provided.
      *
-     * 1. If the prop `leadingAction` is not provided, the button is not rendered.
-     * 2. If the prop `leadingAction` is provided but any of the optional properties
-     * are not provided, they fall back to their default values.
+     * 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;
     /**
-     * Render supportingAction button depending on prop availability.
+     * Renders the "supportingAction" button if the text is provided.
+     * You cannot have a supporting action without a leading action.
      *
-     * 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`.
+     * 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/react.js

@@ -1,10 +1,12 @@
 import * as o from "react";
 import { createComponent as i } from "@lit/react";
 import { PieModal as e } from "./index.js";
-import { ON_MODAL_BACK_EVENT as A, ON_MODAL_CLOSE_EVENT as L, ON_MODAL_LEADING_ACTION_CLICK as E, ON_MODAL_OPEN_EVENT as g, ON_MODAL_SUPPORTING_ACTION_CLICK as k, defaultProps as D, headingLevels as I, positions as T, sizes as f } from "./index.js";
+import { ON_MODAL_BACK_EVENT as E, ON_MODAL_CLOSE_EVENT as g, ON_MODAL_LEADING_ACTION_CLICK as k, ON_MODAL_OPEN_EVENT as D, ON_MODAL_SUPPORTING_ACTION_CLICK as I, defaultProps as T, headingLevels as f, positions as u, sizes as K } from "./index.js";
 import "lit";
 import "lit/static-html.js";
 import "lit/decorators.js";
+import "lit/directives/class-map.js";
+import "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-webc-core";
@@ -29,16 +31,16 @@ const a = i({
     onPieModalSupportingActionClick: "pie-modal-supporting-action-click"
     // when the modal supporting action is clicked.
   }
-}), N = a;
+}), C = a;
 export {
-  A as ON_MODAL_BACK_EVENT,
-  L as ON_MODAL_CLOSE_EVENT,
-  E as ON_MODAL_LEADING_ACTION_CLICK,
-  g as ON_MODAL_OPEN_EVENT,
-  k as ON_MODAL_SUPPORTING_ACTION_CLICK,
-  N as PieModal,
-  D as defaultProps,
-  I as headingLevels,
-  T as positions,
-  f as sizes
+  E as ON_MODAL_BACK_EVENT,
+  g as ON_MODAL_CLOSE_EVENT,
+  k as ON_MODAL_LEADING_ACTION_CLICK,
+  D as ON_MODAL_OPEN_EVENT,
+  I as ON_MODAL_SUPPORTING_ACTION_CLICK,
+  C as PieModal,
+  T as defaultProps,
+  f as headingLevels,
+  u as positions,
+  K as sizes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.43.5",
+  "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

@@ -1,6 +1,6 @@
 import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 
-import { Variant } from '@justeattakeaway/pie-button/src/defs.ts';
+import { type Variant as ButtonVariant } from '@justeattakeaway/pie-button/src/defs.ts';
 
 export const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
 export const sizes = ['small', 'medium', 'large'] as const;
@@ -12,26 +12,26 @@ export type AriaProps = {
     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;
+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 close and back buttons, as well as loading state.
+     * The ARIA labels used for the modal close and back buttons, as well as for the loading state.
      */
     aria?: AriaProps;
 

package/src/index.ts

@@ -3,6 +3,8 @@ import {
 } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 
 import '@justeattakeaway/pie-button';
@@ -21,8 +23,6 @@ import '@justeattakeaway/pie-spinner';
 
 import styles from './modal.scss?inline';
 import {
-    type AriaProps,
-    type ActionProps,
     type ModalProps,
     type ModalActionType,
     headingLevels,
@@ -55,7 +55,7 @@ export interface ModalEventDetail {
  */
 export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     @property({ type: Object })
-    public aria!: AriaProps;
+    public aria: ModalProps['aria'];
 
     @property({ type: String })
     @requiredProperty(componentSelector)
@@ -63,7 +63,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
 
     @property()
     @validPropertyValues(componentSelector, headingLevels, defaultProps.headingLevel)
-    public headingLevel: ModalProps['headingLevel'] = defaultProps.headingLevel;
+    public headingLevel = defaultProps.headingLevel;
 
     @property({ type: Boolean })
     public hasBackButton = defaultProps.hasBackButton;
@@ -87,21 +87,21 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     public isOpen = defaultProps.isOpen;
 
     @property({ type: Object })
-    public leadingAction!: ActionProps;
+    public leadingAction: ModalProps['leadingAction'];
 
     @property()
     @validPropertyValues(componentSelector, positions, defaultProps.position)
-    public position: ModalProps['position'] = defaultProps.position;
+    public position = defaultProps.position;
 
     @property()
-    public returnFocusAfterCloseSelector?: string;
+    public returnFocusAfterCloseSelector: ModalProps['returnFocusAfterCloseSelector'];
 
     @property()
     @validPropertyValues(componentSelector, sizes, defaultProps.size)
-    public size: ModalProps['size'] = defaultProps.size;
+    public size = defaultProps.size;
 
     @property({ type: Object })
-    public supportingAction!: ActionProps;
+    public supportingAction: ModalProps['supportingAction'];
 
     @query('dialog')
     private _dialog?: HTMLDialogElement;
@@ -259,7 +259,11 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      *
      * @private
      */
-    private renderCloseButton (): TemplateResult {
+    private renderCloseButton (): TemplateResult | typeof nothing {
+        if (!this.isDismissible) {
+            return nothing;
+        }
+
         return html`
             <pie-icon-button
                 @click="${() => { this.isOpen = false; }}"
@@ -277,13 +281,17 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      *
      * @private
      */
-    private renderBackButton () : TemplateResult {
+    private renderBackButton () : TemplateResult | typeof nothing {
+        if (!this.hasBackButton) {
+            return nothing;
+        }
+
         return html`
             <pie-icon-button
                 @click="${() => { this._backButtonClicked = true; this.isOpen = false; }}"
                 variant="ghost-secondary"
                 class="c-modal-backBtn"
-                aria-label="${this.aria?.back || nothing}"
+                aria-label="${ifDefined(this.aria?.back)}"
                 data-test-id="modal-back-button">
                 ${this.isRTL ? html`<icon-chevron-right></icon-chevron-right>` : html`<icon-chevron-left></icon-chevron-left>`}
             </pie-icon-button>
@@ -291,25 +299,23 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     }
 
     /**
-     * Render leadingAction button depending on prop availability.
+     * Renders the "leadingAction" button if the text is provided.
      *
-     * 1. If the prop `leadingAction` is not provided, the button is not rendered.
-     * 2. If the prop `leadingAction` is provided but any of the optional properties
-     * are not provided, they fall back to their default values.
+     * 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 {
-        const { text, variant = 'primary', ariaLabel } = this.leadingAction;
+        const { ariaLabel, text, variant = 'primary' } = this.leadingAction || {};
 
-        if (!text) {
-            return nothing;
-        }
+        if (!text) return nothing;
 
         return html`
             <pie-button
                 variant="${variant}"
-                aria-label="${ariaLabel || nothing}"
+                aria-label="${ifDefined(ariaLabel)}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick('leading')}"
@@ -320,32 +326,29 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     }
 
     /**
-     * Render supportingAction button depending on prop availability.
+     * Renders the "supportingAction" button if the text is provided.
+     * You cannot have a supporting action without a leading action.
      *
-     * 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`.
+     * 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 {
-        const { text, variant = 'ghost', ariaLabel } = this.supportingAction;
+        const { ariaLabel, text, variant = 'ghost' } = this.supportingAction || {};
 
-        if (!text) {
-            return nothing;
-        }
+        if (!text) return nothing;
 
-        if (!this.leadingAction) {
-            console.warn('Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored.');
+        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="${variant}"
-                aria-label="${ariaLabel || nothing}"
+                aria-label="${ifDefined(ariaLabel)}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick('supporting')}"
@@ -360,21 +363,26 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
      * @private
      */
     private renderModalContentAndFooter (): TemplateResult {
-        const hasFooterLeadingAction = this.leadingAction?.text;
+        const hasFooterLeadingAction = Boolean(this.leadingAction?.text);
+
+        const scrollContainerClasses = {
+            'c-modal-scrollContainer': true,
+            'c-modal-content': true,
+            'c-modal-content--scrollable': true,
+            'c-modal-hasFooterActions': hasFooterLeadingAction,
+        };
 
         return html`
-            <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable ${hasFooterLeadingAction ? 'c-modal-hasFooterActions' : ''}">
-                <div class="c-modal-contentInner"
-                     data-test-id="modal-content-inner">
+            <article class=${classMap(scrollContainerClasses)}>
+                <div class="c-modal-contentInner" data-test-id="modal-content-inner">
                     <slot></slot>
                 </div>
                 ${this.isLoading ? html`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : nothing}
             </article>
             ${hasFooterLeadingAction ? html`
-                <footer class="c-modal-footer"
-                        data-test-id="pie-modal-footer">
+                <footer class="c-modal-footer" data-test-id="pie-modal-footer">
                     ${this.renderLeadingAction()}
-                    ${this.supportingAction?.text ? this.renderSupportingAction() : nothing}
+                    ${this.renderSupportingAction()}
                 </footer>` : nothing}`;
     }
 
@@ -384,7 +392,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
             hasBackButton,
             hasStackedActions,
             heading,
-            headingLevel = 'h2',
+            headingLevel,
             isDismissible,
             isFooterPinned,
             isFullWidthBelowMid,
@@ -401,9 +409,9 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         <dialog
             id="dialog"
             class="c-modal"
-            size="${size || defaultProps.size}"
-            position="${position || defaultProps.position}"
-            ?hasActions=${leadingAction || supportingAction}
+            size="${size}"
+            position="${position}"
+            ?hasActions=${leadingAction?.text || supportingAction?.text}
             ?hasBackButton=${hasBackButton}
             ?hasStackedActions=${hasStackedActions}
             ?isDismissible=${isDismissible}
@@ -415,11 +423,11 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
             data-test-id="pie-modal">
             <header class="c-modal-header"
             data-test-id="modal-header">
-                ${hasBackButton ? this.renderBackButton() : nothing}
+                ${this.renderBackButton()}
                 <${headingTag} class="c-modal-heading">
                     ${heading}
                 </${headingTag}>
-                ${isDismissible ? this.renderCloseButton() : nothing}
+                ${this.renderCloseButton()}
             </header>
             ${
             // We need to wrap the remaining content in a shared scrollable container if the footer is not pinned

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.