@justeattakeaway/pie-modal 0.45.0 → 0.46.1

package/custom-elements.json

@@ -460,6 +460,28 @@
               },
               "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",
+              "name": "renderModalFooter",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "description": "Renders the modal footer if a leading action is provided.\nAdditionally renders the supporting action if it is provided."
+            },
+            {
+              "kind": "method",
+              "name": "renderLoadingSpinner",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              },
+              "description": "Renders the loading spinner if `isLoading` is true."
+            },
             {
               "kind": "method",
               "name": "renderModalContentAndFooter",

package/dist/index.d.ts

@@ -232,6 +232,18 @@ export declare class PieModal extends PieModal_base implements ModalProps {
      * @private
      */
     private renderSupportingAction;
+    /**
+     * Renders the modal footer if a leading action is provided.
+     * Additionally renders the supporting action if it is provided.
+     *
+     * @private
+     */
+    private renderModalFooter;
+    /**
+     * Renders the loading spinner if `isLoading` is true.
+     * @private
+     */
+    private renderLoadingSpinner;
     /**
      * Renders the modal inner content and footer of the modal.
      * @private

package/dist/index.js

@@ -1,81 +1,81 @@
-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 { LitElement as T, nothing as h, unsafeCSS as I } from "lit";
+import { html as m, unsafeStatic as N } from "lit/static-html.js";
+import { property as r, query as W } from "lit/decorators.js";
+import { classMap as L } from "lit/directives/class-map.js";
+import { ifDefined as w } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
-import { RtlMixin as Y, dispatchCustomEvent as u, requiredProperty as V, validPropertyValues as S, defineCustomElement as q } from "@justeattakeaway/pie-webc-core";
+import { RtlMixin as R, dispatchCustomEvent as u, requiredProperty as j, validPropertyValues as B, defineCustomElement as Y } 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(n) {
+function V(n) {
   if (Array.isArray(n)) {
-    for (var e = 0, i = Array(n.length); e < n.length; e++)
-      i[e] = n[e];
-    return i;
+    for (var e = 0, o = Array(n.length); e < n.length; e++)
+      o[e] = n[e];
+    return o;
   } else
     return Array.from(n);
 }
-var A = !1;
+var O = !1;
 if (typeof window < "u") {
-  var $ = {
+  var S = {
     get passive() {
-      A = !0;
+      O = !0;
     }
   };
-  window.addEventListener("testPassive", null, $), window.removeEventListener("testPassive", null, $);
+  window.addEventListener("testPassive", null, S), window.removeEventListener("testPassive", null, S);
 }
-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));
+var A = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), g = [], x = !1, D = -1, f = void 0, v = void 0, $ = function(e) {
+  return g.some(function(o) {
+    return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
   });
-}, x = function(e) {
-  var i = e || window.event;
-  return P(i.target) || i.touches.length > 1 ? !0 : (i.preventDefault && i.preventDefault(), !1);
-}, K = function(e) {
+}, _ = function(e) {
+  var o = e || window.event;
+  return $(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
+}, q = 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");
+    var o = !!e && e.reserveScrollBarGap === !0, t = window.innerWidth - document.documentElement.clientWidth;
+    o && t > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = t + "px");
   }
   f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
-}, U = function() {
+}, H = function() {
   v !== void 0 && (document.body.style.paddingRight = v, v = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
-}, G = function(e) {
+}, K = function(e) {
   return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
-}, 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) {
+}, U = function(e, o) {
+  var t = e.targetTouches[0].clientY - D;
+  return $(e.target) ? !1 : o && o.scrollTop === 0 && t > 0 || K(o) && t < 0 ? _(e) : (e.stopPropagation(), !0);
+}, G = function(e, o) {
   if (!e) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
     return;
   }
-  if (!p.some(function(t) {
-    return t.targetElement === e;
+  if (!g.some(function(i) {
+    return i.targetElement === e;
   })) {
-    var o = {
+    var t = {
       targetElement: e,
-      options: i || {}
+      options: o || {}
     };
-    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);
+    g = [].concat(V(g), [t]), A ? (e.ontouchstart = function(i) {
+      i.targetTouches.length === 1 && (D = i.targetTouches[0].clientY);
+    }, e.ontouchmove = function(i) {
+      i.targetTouches.length === 1 && U(i, e);
+    }, x || (document.addEventListener("touchmove", _, O ? { passive: !1 } : void 0), x = !0)) : q(o);
   }
-}, Q = function(e) {
+}, X = 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;
-  }), 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();
+  g = g.filter(function(o) {
+    return o.targetElement !== e;
+  }), A ? (e.ontouchstart = null, e.ontouchmove = null, x && g.length === 0 && (document.removeEventListener("touchmove", _, O ? { passive: !1 } : void 0), x = !1)) : g.length || H();
 };
-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 = {
+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.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--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.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--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.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (width < 768px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--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 .c-modal-footer.c-modal-footer--stackedActions{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 .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal.c-modal--dismissible .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:not(:last-child){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.c-modal--pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.c-modal--loading .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.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}.c-modal.c-modal--loading .c-modal-content:not(:last-child) pie-spinner{top:50%}@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"], z = "pie-modal-close", y = "pie-modal-open", C = "pie-modal-back", oe = "pie-modal-leading-action-click", te = "pie-modal-supporting-action-click", s = {
   hasBackButton: !1,
   hasStackedActions: !1,
   headingLevel: "h2",
@@ -87,13 +87,13 @@ const Z = `*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
   position: "center",
   size: "medium"
 };
-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;
+var ie = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, l = (n, e, o, t) => {
+  for (var i = t > 1 ? void 0 : t ? ae(e, o) : e, d = n.length - 1, c; d >= 0; d--)
+    (c = n[d]) && (i = (t ? c(e, o, i) : c(i)) || i);
+  return t && i && ie(e, o, i), i;
 };
 const b = "pie-modal";
-class a extends Y(I) {
+class a extends R(T) {
   constructor() {
     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();
@@ -101,25 +101,25 @@ class a extends Y(I) {
       var k;
       if (!this.isDismissible)
         return;
-      const i = (k = this._dialog) == null ? void 0 : k.getBoundingClientRect(), {
-        top: o = 0,
-        bottom: t = 0,
-        left: r = 0,
+      const o = (k = this._dialog) == null ? void 0 : k.getBoundingClientRect(), {
+        top: t = 0,
+        bottom: i = 0,
+        left: d = 0,
         right: c = 0
-      } = i || {};
-      if (o === 0 && t === 0 && r === 0 && c === 0)
+      } = o || {};
+      if (t === 0 && i === 0 && d === 0 && c === 0)
         return;
-      (e.clientY < o || e.clientY > t || e.clientX < r || e.clientX > c) && (this.isOpen = !1);
+      (e.clientY < t || e.clientY > i || e.clientX < d || 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(O, (e) => this._handleModalClosed(e)), document.addEventListener(L, (e) => this._handleModalClosed(e));
+    super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(y, (e) => this._handleModalOpened(e)), document.addEventListener(z, (e) => this._handleModalClosed(e)), document.addEventListener(C, (e) => this._handleModalClosed(e));
   }
   disconnectedCallback() {
-    document.removeEventListener(w, (e) => this._handleModalOpened(e)), document.removeEventListener(O, (e) => this._handleModalClosed(e)), document.removeEventListener(L, (e) => this._handleModalClosed(e)), super.disconnectedCallback();
+    document.removeEventListener(y, (e) => this._handleModalOpened(e)), document.removeEventListener(z, (e) => this._handleModalClosed(e)), document.removeEventListener(C, (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", () => {
+    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", () => {
       this.isOpen = !1;
     })), this._handleModalOpenStateOnFirstRender(e);
   }
@@ -130,11 +130,11 @@ class a extends Y(I) {
    * Opens the dialog element and disables page scrolling
    */
   _handleModalOpened(e) {
-    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), J(h)), (t = this._dialog) != null && t.hasAttribute("open") || !((r = this._dialog) != null && r.isConnected))
+    var t, i, d, c;
+    const { targetModal: o } = e.detail;
+    if (o === this) {
+      const p = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
+      if (p && ("scrollTo" in window && window.scrollTo(0, 0), G(p)), (i = this._dialog) != null && i.hasAttribute("open") || !((d = this._dialog) != null && d.isConnected))
         return;
       (c = this._dialog) == null || c.showModal();
     }
@@ -143,34 +143,34 @@ class a extends Y(I) {
    * Closes the dialog element and re-enables page scrolling
    */
   _handleModalClosed(e) {
-    var o, t;
-    const { targetModal: i } = e.detail;
-    if (i === this) {
-      const r = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
-      r && Q(r), (t = this._dialog) == null || t.close(), this._returnFocus();
+    var t, i;
+    const { targetModal: o } = e.detail;
+    if (o === this) {
+      const d = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
+      d && X(d), (i = this._dialog) == null || i.close(), this._returnFocus();
     }
   }
   // Handles the value of the isOpen property on first render of the component
   _handleModalOpenStateOnFirstRender(e) {
-    e.get("isOpen") === void 0 && this.isOpen && u(this, w, { targetModal: this });
+    e.get("isOpen") === void 0 && this.isOpen && u(this, y, { targetModal: this });
   }
   // 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, L, { targetModal: this })) : u(this, O, { targetModal: this }) : u(this, w, { targetModal: this }));
+    const o = e.get("isOpen");
+    o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, C, { targetModal: this })) : u(this, z, { targetModal: this }) : u(this, y, { targetModal: this }));
   }
   _handleActionClick(e) {
-    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 }));
+    var o, t;
+    e === "leading" ? ((o = this._dialog) == null || o.close("leading"), u(this, oe, { targetModal: this })) : e === "supporting" && ((t = this._dialog) == null || t.close("supporting"), u(this, te, { targetModal: this }));
   }
   /**
    * Return focus to the specified element, providing the selector is valid
    * and the chosen element can be found.
    */
   _returnFocus() {
-    var i, o;
-    const e = (i = this.returnFocusAfterCloseSelector) == null ? void 0 : i.trim();
-    e && ((o = document.querySelector(e)) == null || o.focus());
+    var o, t;
+    const e = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
+    e && ((t = document.querySelector(e)) == null || t.focus());
   }
   /**
    * Template for the close button element. Called within the
@@ -187,10 +187,10 @@ class a extends Y(I) {
     }}"
                 variant="ghost-secondary"
                 class="c-modal-closeBtn"
-                aria-label="${((e = this.aria) == null ? void 0 : e.close) || g}"
+                aria-label="${((e = this.aria) == null ? void 0 : e.close) || h}"
                 data-test-id="modal-close-button">
                 <icon-close></icon-close>
-            </pie-icon-button>` : g;
+            </pie-icon-button>` : h;
   }
   /**
    * Template for the back button element. Called within the
@@ -207,11 +207,11 @@ class a extends Y(I) {
     }}"
                 variant="ghost-secondary"
                 class="c-modal-backBtn"
-                aria-label="${B((e = this.aria) == null ? void 0 : e.back)}"
+                aria-label="${w((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>
-        ` : g;
+        ` : h;
   }
   /**
    * Renders the "leadingAction" button if the text is provided.
@@ -223,18 +223,18 @@ class a extends Y(I) {
    * @private
    */
   renderLeadingAction() {
-    const { ariaLabel: e, text: i, variant: o = "primary" } = this.leadingAction || {};
-    return i ? m`
+    const { ariaLabel: e, text: o, variant: t = "primary" } = this.leadingAction || {};
+    return o ? m`
             <pie-button
-                variant="${o}"
-                aria-label="${B(e)}"
+                variant="${t}"
+                aria-label="${w(e)}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("leading")}"
                 data-test-id="modal-leading-action">
-                ${i}
+                ${o}
             </pie-button>
-        ` : g;
+        ` : h;
   }
   /**
    * Renders the "supportingAction" button if the text is provided.
@@ -247,157 +247,167 @@ class a extends Y(I) {
    * @private
    */
   renderSupportingAction() {
-    var t;
-    const { ariaLabel: e, text: i, variant: o = "ghost" } = this.supportingAction || {};
-    return i ? (t = this.leadingAction) != null && t.text ? m`
+    var i;
+    const { ariaLabel: e, text: o, variant: t = "ghost" } = this.supportingAction || {};
+    return !o || !((i = this.leadingAction) != null && i.text) ? h : m`
             <pie-button
-                variant="${o}"
-                aria-label="${B(e)}"
+                variant="${t}"
+                aria-label="${w(e)}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("supporting")}"
                 data-test-id="modal-supporting-action">
-                ${i}
+                ${o}
             </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;
+        `;
+  }
+  /**
+   * Renders the modal footer if a leading action is provided.
+   * Additionally renders the supporting action if it is provided.
+   *
+   * @private
+   */
+  renderModalFooter() {
+    var o, t;
+    if (!((o = this.leadingAction) != null && o.text))
+      return (t = this.supportingAction) != null && t.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."), h;
+    const e = {
+      "c-modal-footer": !0,
+      "c-modal-footer--stackedActions": this.hasStackedActions
+    };
+    return m`
+            <footer class="${L(e)}" data-test-id="pie-modal-footer">
+                ${this.renderLeadingAction()}
+                ${this.renderSupportingAction()}
+            </footer>`;
+  }
+  /**
+   * Renders the loading spinner if `isLoading` is true.
+   * @private
+   */
+  renderLoadingSpinner() {
+    return this.isLoading ? m`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : h;
   }
   /**
    * Renders the modal inner content and footer of the modal.
    * @private
    */
   renderModalContentAndFooter() {
-    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
-    })}>
+            <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
                 <div class="c-modal-contentInner" data-test-id="modal-content-inner">
                     <slot></slot>
                 </div>
-                ${this.isLoading ? m`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : g}
+                ${this.renderLoadingSpinner()}
             </article>
-            ${e ? m`
-                <footer class="c-modal-footer" data-test-id="pie-modal-footer">
-                    ${this.renderLeadingAction()}
-                    ${this.renderSupportingAction()}
-                </footer>` : g}`;
+            ${this.renderModalFooter()}`;
   }
   render() {
     const {
       aria: e,
-      hasBackButton: i,
-      hasStackedActions: o,
-      heading: t,
-      headingLevel: r,
-      isDismissible: c,
-      isFooterPinned: h,
-      isFullWidthBelowMid: k,
-      isLoading: z,
-      leadingAction: _,
-      position: E,
-      size: T,
-      supportingAction: C
-    } = this, M = R(r);
+      heading: o,
+      headingLevel: t,
+      isDismissible: i,
+      isFooterPinned: d,
+      isFullWidthBelowMid: c,
+      isLoading: p,
+      position: k,
+      size: F
+    } = this, M = N(t), P = p && (e == null ? void 0 : e.loading) || void 0, E = {
+      "c-modal": !0,
+      [`c-modal--${F}`]: !0,
+      "c-modal--top": k === "top",
+      "c-modal--dismissible": i,
+      "c-modal--loading": p,
+      "c-modal--pinnedFooter": d,
+      "c-modal--fullWidthBelowMid": c
+    };
     return m`
         <dialog
             id="dialog"
-            class="c-modal"
-            size="${T}"
-            position="${E}"
-            ?hasActions=${(_ == null ? void 0 : _.text) || (C == null ? void 0 : C.text)}
-            ?hasBackButton=${i}
-            ?hasStackedActions=${o}
-            ?isDismissible=${c}
-            ?isFooterPinned=${h}
-            ?isFullWidthBelowMid=${k}
-            ?isLoading=${z}
-            aria-busy="${z ? "true" : "false"}"
-            aria-label="${z && (e == null ? void 0 : e.loading) || g}"
+            class="${L(E)}"
+            aria-busy="${p ? "true" : "false"}"
+            aria-label="${w(P)}"
             data-test-id="pie-modal">
             <header class="c-modal-header"
             data-test-id="modal-header">
                 ${this.renderBackButton()}
                 <${M} class="c-modal-heading">
-                    ${t}
+                    ${o}
                 </${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() : m`
-                        <div class="c-modal-scrollContainer">
-                            ${this.renderModalContentAndFooter()}
-                        </div>
-                        `}
+    d ? this.renderModalContentAndFooter() : m`
+                    <div class="c-modal-scrollContainer">
+                        ${this.renderModalContentAndFooter()}
+                    </div>`}
         </dialog>`;
   }
 }
-a.styles = N(Z);
+a.styles = I(J);
 l([
-  d({ type: Object })
+  r({ type: Object })
 ], a.prototype, "aria", 2);
 l([
-  d({ type: String }),
-  V(b)
+  r({ type: String }),
+  j(b)
 ], a.prototype, "heading", 2);
 l([
-  d(),
-  S(b, ee, s.headingLevel)
+  r(),
+  B(b, Q, s.headingLevel)
 ], a.prototype, "headingLevel", 2);
 l([
-  d({ type: Boolean })
+  r({ type: Boolean })
 ], a.prototype, "hasBackButton", 2);
 l([
-  d({ type: Boolean })
+  r({ type: Boolean })
 ], a.prototype, "hasStackedActions", 2);
 l([
-  d({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], a.prototype, "isDismissible", 2);
 l([
-  d({ type: Boolean })
+  r({ type: Boolean })
 ], a.prototype, "isFooterPinned", 2);
 l([
-  d({ type: Boolean })
+  r({ type: Boolean })
 ], a.prototype, "isFullWidthBelowMid", 2);
 l([
-  d({ type: Boolean, reflect: !0 })
+  r({ type: Boolean, reflect: !0 })
 ], a.prototype, "isLoading", 2);
 l([
-  d({ type: Boolean })
+  r({ type: Boolean })
 ], a.prototype, "isOpen", 2);
 l([
-  d({ type: Object })
+  r({ type: Object })
 ], a.prototype, "leadingAction", 2);
 l([
-  d(),
-  S(b, oe, s.position)
+  r(),
+  B(b, ee, s.position)
 ], a.prototype, "position", 2);
 l([
-  d()
+  r()
 ], a.prototype, "returnFocusAfterCloseSelector", 2);
 l([
-  d(),
-  S(b, ie, s.size)
+  r(),
+  B(b, Z, s.size)
 ], a.prototype, "size", 2);
 l([
-  d({ type: Object })
+  r({ type: Object })
 ], a.prototype, "supportingAction", 2);
 l([
   W("dialog")
 ], a.prototype, "_dialog", 2);
-q(b, a);
+Y(b, a);
 export {
-  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,
-  ae as ON_MODAL_SUPPORTING_ACTION_CLICK,
+  C as ON_MODAL_BACK_EVENT,
+  z as ON_MODAL_CLOSE_EVENT,
+  oe as ON_MODAL_LEADING_ACTION_CLICK,
+  y as ON_MODAL_OPEN_EVENT,
+  te as ON_MODAL_SUPPORTING_ACTION_CLICK,
   a as PieModal,
   s as defaultProps,
-  ee as headingLevels,
-  oe as positions,
-  ie as sizes
+  Q as headingLevels,
+  ee as positions,
+  Z as sizes
 };

package/dist/react.d.ts

@@ -231,6 +231,18 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
      * @private
      */
     private renderSupportingAction;
+    /**
+     * Renders the modal footer if a leading action is provided.
+     * Additionally renders the supporting action if it is provided.
+     *
+     * @private
+     */
+    private renderModalFooter;
+    /**
+     * Renders the loading spinner if `isLoading` is true.
+     * @private
+     */
+    private renderLoadingSpinner;
     /**
      * Renders the modal inner content and footer of the modal.
      * @private

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.45.0",
+  "version": "0.46.1",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -37,7 +37,7 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeat/pie-design-tokens": "6.3.1",
-    "@justeattakeaway/pie-components-config": "0.17.0",
+    "@justeattakeaway/pie-components-config": "0.18.0",
     "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",
     "@types/body-scroll-lock": "3.1.2",
@@ -47,9 +47,9 @@
     "extends": "../../../package.json"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "0.48.1",
-    "@justeattakeaway/pie-icon-button": "0.28.10",
-    "@justeattakeaway/pie-icons-webc": "0.25.0",
+    "@justeattakeaway/pie-button": "0.49.0",
+    "@justeattakeaway/pie-icon-button": "0.28.11",
+    "@justeattakeaway/pie-icons-webc": "0.25.1",
     "@justeattakeaway/pie-spinner": "0.6.7",
     "@justeattakeaway/pie-webc-core": "0.24.0",
     "body-scroll-lock": "3.1.5",

package/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    LitElement, nothing, TemplateResult, unsafeCSS, PropertyValues,
+    LitElement, nothing, type TemplateResult, unsafeCSS, type PropertyValues,
 } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { property, query } from 'lit/decorators.js';
@@ -338,10 +338,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     private renderSupportingAction (): TemplateResult | typeof nothing {
         const { ariaLabel, text, variant = 'ghost' } = this.supportingAction || {};
 
-        if (!text) return nothing;
-
-        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.');
+        if (!text || !this.leadingAction?.text) {
             return nothing;
         }
 
@@ -359,67 +356,90 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     }
 
     /**
-     * Renders the modal inner content and footer of the modal.
+     * Renders the modal footer if a leading action is provided.
+     * Additionally renders the supporting action if it is provided.
+     *
      * @private
      */
-    private renderModalContentAndFooter (): TemplateResult {
-        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,
+    private renderModalFooter () : TemplateResult | typeof nothing {
+        if (!this.leadingAction?.text) {
+            if (this.supportingAction?.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;
+        }
+
+        const footerClasses = {
+            'c-modal-footer': true,
+            'c-modal-footer--stackedActions': this.hasStackedActions,
         };
 
         return html`
-            <article class=${classMap(scrollContainerClasses)}>
+            <footer class="${classMap(footerClasses)}" data-test-id="pie-modal-footer">
+                ${this.renderLeadingAction()}
+                ${this.renderSupportingAction()}
+            </footer>`;
+    }
+
+    /**
+     * Renders the loading spinner if `isLoading` is true.
+     * @private
+     */
+    private renderLoadingSpinner () : TemplateResult | typeof nothing {
+        if (!this.isLoading) {
+            return nothing;
+        }
+
+        return html`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>`;
+    }
+
+    /**
+     * Renders the modal inner content and footer of the modal.
+     * @private
+     */
+    private renderModalContentAndFooter () : TemplateResult {
+        return html`
+            <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
                 <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}
+                ${this.renderLoadingSpinner()}
             </article>
-            ${hasFooterLeadingAction ? html`
-                <footer class="c-modal-footer" data-test-id="pie-modal-footer">
-                    ${this.renderLeadingAction()}
-                    ${this.renderSupportingAction()}
-                </footer>` : nothing}`;
+            ${this.renderModalFooter()}`;
     }
 
-    public render () {
+    render () {
         const {
             aria,
-            hasBackButton,
-            hasStackedActions,
             heading,
             headingLevel,
             isDismissible,
             isFooterPinned,
             isFullWidthBelowMid,
             isLoading,
-            leadingAction,
             position,
             size,
-            supportingAction,
         } = this;
 
         const headingTag = unsafeStatic(headingLevel);
+        const ariaLabel = (isLoading && aria?.loading) || undefined;
+
+        const modalClasses = {
+            'c-modal': true,
+            [`c-modal--${size}`]: true,
+            'c-modal--top': position === 'top',
+            'c-modal--dismissible': isDismissible,
+            'c-modal--loading': isLoading,
+            'c-modal--pinnedFooter': isFooterPinned,
+            'c-modal--fullWidthBelowMid': isFullWidthBelowMid,
+        };
 
         return html`
         <dialog
             id="dialog"
-            class="c-modal"
-            size="${size}"
-            position="${position}"
-            ?hasActions=${leadingAction?.text || supportingAction?.text}
-            ?hasBackButton=${hasBackButton}
-            ?hasStackedActions=${hasStackedActions}
-            ?isDismissible=${isDismissible}
-            ?isFooterPinned=${isFooterPinned}
-            ?isFullWidthBelowMid=${isFullWidthBelowMid}
-            ?isLoading=${isLoading}
+            class="${classMap(modalClasses)}"
             aria-busy="${isLoading ? 'true' : 'false'}"
-            aria-label="${(isLoading && aria?.loading) || nothing}"
+            aria-label="${ifDefined(ariaLabel)}"
             data-test-id="pie-modal">
             <header class="c-modal-header"
             data-test-id="modal-header">
@@ -434,10 +454,9 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
             isFooterPinned
                 ? this.renderModalContentAndFooter()
                 : html`
-                        <div class="c-modal-scrollContainer">
-                            ${this.renderModalContentAndFooter()}
-                        </div>
-                        `
+                    <div class="c-modal-scrollContainer">
+                        ${this.renderModalContentAndFooter()}
+                    </div>`
             }
         </dialog>`;
     }

package/src/modal.scss

@@ -66,7 +66,7 @@
     max-block-size: var(--modal-max-block-size);
     max-inline-size: var(--modal-max-inline-size);
 
-    &[size='small'] {
+    &.c-modal--small {
         --modal-max-inline-size: var(--modal-size-s);
 
         @media (min-width: $breakpoint-wide) {
@@ -74,19 +74,19 @@
         }
     }
 
-    &[size='medium'] {
+    &.c-modal--medium {
         /* Same as default styles */
     }
 
-    &[size='large'] {
+    &.c-modal--large {
         --modal-inline-size: 75%;
         --modal-max-inline-size: var(--modal-size-l);
         --modal-margin-block: var(--modal-margin-large);
     }
 
     // Fullscreen styles
-    &[size='large'],
-    &[size='medium'][isfullwidthbelowmid] {
+    &.c-modal--large,
+    &.c-modal--medium.c-modal--fullWidthBelowMid {
         @media (width < $breakpoint-wide) {
             --modal-margin-block: var(--modal-margin-none);
             --modal-border-radius: var(--dt-radius-rounded-none);
@@ -104,12 +104,12 @@
         }
     }
 
-    &[position='top'] {
+    &.c-modal--top {
         margin-block-start: var(--dt-spacing-j);
         max-block-size: calc(100% - var(--dt-spacing-j) * 2);
 
-        &[size='large'],
-        &[isfullwidthbelowmid][size='medium'] {
+        &.c-modal--large,
+        &.c-modal--fullWidthBelowMid.c-modal--medium {
             @media (width < $breakpoint-wide) {
                 margin-block-start: var(--dt-spacing-none);
                 max-block-size: 100%;
@@ -136,12 +136,8 @@
         @media (min-width: $breakpoint-wide) {
             --modal-footer-padding: var(--dt-spacing-e);
         }
-    }
 
-    // When hasStackedActions is set
-    // change the direction of the footer flex container so buttons are full width of modal
-    &[hasstackedactions] {
-        & .c-modal-footer {
+        &.c-modal-footer--stackedActions {
             // TODO: Move breakpoint sizes into shared CSS component utilities
             @media (width < $breakpoint-wide) {
                 flex-direction: column;
@@ -181,7 +177,7 @@
     }
 
     // Ensure correct padding when there is a back button in front of the heading
-    &[hasbackbutton] .c-modal-heading {
+    .c-modal-backBtn + .c-modal-heading {
         margin-inline-start: var(--dt-spacing-b);
 
         @media (min-width: $breakpoint-wide) {
@@ -189,8 +185,7 @@
         }
     }
 
-    // Ensure correct padding when there is a close button behind the heading
-    &[isdismissible] .c-modal-heading {
+    &.c-modal--dismissible .c-modal-heading {
         margin-inline-end: var(--dt-spacing-d);
 
         @media (min-width: $breakpoint-wide) {
@@ -256,7 +251,8 @@
         padding-block-end: var(--modal-content-padding-block-end); // We require a larger bottom padding when there's no footer
         flex-grow: 1;
 
-        &.c-modal-hasFooterActions {
+        // If the footer is rendered, the modal content is not the last child
+        &:not(:last-child) {
           padding-block-end: var(--modal-content-padding-block);
           min-block-size: var(--modal-content-min-block-size);
         }
@@ -303,11 +299,11 @@
         }
     }
 
-    &[isfooterpinned] .c-modal-content {
+    &.c-modal--pinnedFooter .c-modal-content {
         overflow-y: auto;
     }
 
-    &[isLoading] .c-modal-content {
+    &.c-modal--loading .c-modal-content {
         pie-spinner {
             position: absolute;
             left: 50%;
@@ -321,7 +317,8 @@
             display: none;
         }
 
-        &.c-modal-hasFooterActions {
+        // If the footer is rendered, the modal content is not the last child
+        &:not(:last-child) {
           pie-spinner {
             top: 50%;
           }