@justeattakeaway/pie-modal 0.11.0 → 0.13.0

package/.turbo/turbo-build.log

@@ -1,14 +1,14 @@
-[5:08:22 PM] @custom-elements-manifest/analyzer: Created new manifest.
+[7:14:15 AM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
 vite v4.3.9 building for production...
 transforming...
-✓ 25 modules transformed.
+✓ 27 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js  13.38 kB │ gzip:  4.21 kB
-dist/react.js  59.04 kB │ gzip: 15.92 kB
+dist/index.js  18.85 kB │ gzip:  5.33 kB
+dist/react.js  59.27 kB │ gzip: 15.99 kB
 
 [vite:dts] Start generate declaration files...
-✓ built in 10.29s
-[vite:dts] Declaration files built in 9310ms.
+✓ built in 11.11s
+[vite:dts] Declaration files built in 9971ms.
 

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @justeattakeaway/pie-modal
 
+## 0.13.0
+
+### Minor Changes
+
+- [Added] - Default modal footer ([#619](https://github.com/justeattakeaway/pie/pull/619)) by [@xander-marjoram](https://github.com/xander-marjoram)
+
+  [Added] - Height styles for the different sizes
+  [Removed] - Unnecessary `:focus-visible` outline for the modal
+  [Fixed] - Modal width should be able to exceed 600px for `isFullWidthBelowMid`
+
+- [Added] - loading spinner to modal ([#628](https://github.com/justeattakeaway/pie/pull/628)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Added] - Scroll shadow for modal contents ([#619](https://github.com/justeattakeaway/pie/pull/619)) by [@xander-marjoram](https://github.com/xander-marjoram)
+
+- [Added] - Tests to validate leading/supporting action buttons ([#619](https://github.com/justeattakeaway/pie/pull/619)) by [@xander-marjoram](https://github.com/xander-marjoram)
+
+  [Added] - Missing tests to check that the modal closes when expected to
+  [Changed] - Updated tests to verify that the correct event is being triggered
+
+- [Added] - hasBackButton prop to modal ([#623](https://github.com/justeattakeaway/pie/pull/623)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+## 0.12.0
+
+### Minor Changes
+
+- [Added] - @event jsdoc comments for modal events for react wrapper to analyse ([#612](https://github.com/justeattakeaway/pie/pull/612)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
 ## 0.11.0
 
 ### Minor Changes

package/README.md

@@ -66,8 +66,10 @@ import { PieModal } from '@justeattakeaway/pie-modal/dist/react';
 | heading | `String` | n/a (Required) | The heading text of the modal |
 | headingLevel | `String` | `h2` | The HTML tag to use for the modal's heading (can be `h1`-`h6`) |
 | isDismissible | `Boolean` | `false` | If true, the modal includes a close button and can be dismissed by clicking on the backdrop or pressing the Esc key |
+| hasBackButton | `Boolean` | `false` | If true, the modal includes a back button which closes the modal when clicked |
 | isFullWidthBelowMid | `Boolean` | `false` | If true and the page is narrower than the mid breakpoint, a **medium-sized** modal will take up the full width of the screen. |
 | isOpen | `Boolean` | `false` | Controls if the modal element is open or closed |
+| isLoading | `Boolean` | `false` | When true, displays a loading spinner in the modal |
 | size | `String` | `medium` | Determines the maximum width of the modal. Large modals will expand to fill the entire page width at narrow viewports. Can be `small`, `medium` or `large`. |
 | returnFocusAfterCloseSelector | `String` | `undefined` | If provided, focus will be sent to the first element that matches this selector when the modal is closed. If not provided, the `dialog` element will return focus to the element that opened the modal. |
 

package/dist/index.js

@@ -1,16 +1,16 @@
-import { nothing as x, unsafeCSS as D, LitElement as B } from "lit";
-import { unsafeStatic as E, html as z } from "lit/static-html.js";
-import { property as u, query as L } from "lit/decorators.js";
+import { nothing as B, unsafeCSS as P, LitElement as E } from "lit";
+import { html as f, unsafeStatic as $ } from "lit/static-html.js";
+import { property as s, query as D } from "lit/decorators.js";
 import { property as T } from "lit/decorators/property.js";
-var $ = Object.defineProperty, F = Object.getOwnPropertyDescriptor, A = (n, e, t, o) => {
-  for (var i = o > 1 ? void 0 : o ? F(e, t) : e, d = n.length - 1, l; d >= 0; d--)
-    (l = n[d]) && (i = (o ? l(e, t, i) : l(i)) || i);
-  return o && i && $(e, t, i), i;
+var A = Object.defineProperty, F = Object.getOwnPropertyDescriptor, R = (n, e, o, t) => {
+  for (var i = t > 1 ? void 0 : t ? F(e, o) : e, a = n.length - 1, r; a >= 0; a--)
+    (r = n[a]) && (i = (t ? r(e, o, i) : r(i)) || i);
+  return t && i && A(e, o, i), i;
 };
-const k = (n) => {
+const I = (n) => {
   class e extends n {
     constructor() {
-      super(...arguments), this.dir = "";
+      super(...arguments), this.dir = "ltr";
     }
     /**
      * Returns true if the element is in Right to Left mode.
@@ -22,171 +22,171 @@ const k = (n) => {
      * will not be reactive and is only computed once
      */
     get isRTL() {
-      var o;
-      return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((o = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : o.direction) === "rtl";
+      var t;
+      return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((t = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : t.direction) === "rtl";
     }
   }
-  return A([
-    T({ type: String })
+  return R([
+    T({ type: String, reflect: !0 })
   ], e.prototype, "dir", 2), e;
-}, C = (n, e, t) => function(i, d) {
-  const l = `#${d}`;
-  Object.defineProperty(i, d, {
+}, S = (n, e, o) => function(i, a) {
+  const r = `#${a}`;
+  Object.defineProperty(i, a, {
     get() {
-      return this[l];
+      return this[r];
     },
-    set(m) {
-      const p = this[l];
-      e.includes(m) ? this[l] = m : (console.error(
-        `<${n}> Invalid value "${m}" provided for property "${d}".`,
+    set(p) {
+      const c = this[r];
+      e.includes(p) ? this[r] = p : (console.error(
+        `<${n}> Invalid value "${p}" provided for property "${a}".`,
         `Must be one of: ${e.join(" | ")}.`,
-        `Falling back to default value: "${t}"`
-      ), this[l] = t), this.requestUpdate(d, p);
+        `Falling back to default value: "${o}"`
+      ), this[r] = o), this.requestUpdate(a, c);
     }
   });
-}, R = (n) => function(t, o) {
-  const i = `#${o}`;
-  Object.defineProperty(t, o, {
+}, j = (n) => function(o, t) {
+  const i = `#${t}`;
+  Object.defineProperty(o, t, {
     get() {
       return this[i];
     },
-    set(d) {
-      const l = this[i];
-      (d == null || typeof d == "string" && d.trim() === "") && console.error(`<${n}> Missing required attribute "${o}"`), this[i] = d, this.requestUpdate(o, l);
+    set(a) {
+      const r = this[i];
+      (a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${t}"`), this[i] = a, this.requestUpdate(t, r);
     }
   });
 };
 function q(n) {
   if (Array.isArray(n)) {
-    for (var e = 0, t = Array(n.length); e < n.length; e++)
-      t[e] = n[e];
-    return t;
+    for (var e = 0, o = Array(n.length); e < n.length; e++)
+      o[e] = n[e];
+    return o;
   } else
     return Array.from(n);
 }
 var O = !1;
 if (typeof window < "u") {
-  var S = {
+  var C = {
     get passive() {
       O = !0;
     }
   };
-  window.addEventListener("testPassive", null, S), window.removeEventListener("testPassive", null, S);
+  window.addEventListener("testPassive", null, C), window.removeEventListener("testPassive", null, C);
 }
-var g = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), c = [], y = !1, P = -1, h = void 0, r = void 0, f = void 0, M = function(e) {
-  return c.some(function(t) {
-    return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
+var y = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), u = [], w = !1, L = -1, v = void 0, m = void 0, g = void 0, M = function(e) {
+  return u.some(function(o) {
+    return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
   });
-}, b = function(e) {
-  var t = e || window.event;
-  return M(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
-}, I = function(e) {
-  if (f === void 0) {
-    var t = !!e && e.reserveScrollBarGap === !0, o = window.innerWidth - document.documentElement.clientWidth;
-    if (t && o > 0) {
+}, _ = function(e) {
+  var o = e || window.event;
+  return M(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
+}, V = function(e) {
+  if (g === void 0) {
+    var o = !!e && e.reserveScrollBarGap === !0, t = window.innerWidth - document.documentElement.clientWidth;
+    if (o && t > 0) {
       var i = parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"), 10);
-      f = document.body.style.paddingRight, document.body.style.paddingRight = i + o + "px";
+      g = document.body.style.paddingRight, document.body.style.paddingRight = i + t + "px";
     }
   }
-  h === void 0 && (h = document.body.style.overflow, document.body.style.overflow = "hidden");
-}, V = function() {
-  f !== void 0 && (document.body.style.paddingRight = f, f = void 0), h !== void 0 && (document.body.style.overflow = h, h = void 0);
-}, j = function() {
+  v === void 0 && (v = document.body.style.overflow, document.body.style.overflow = "hidden");
+}, N = function() {
+  g !== void 0 && (document.body.style.paddingRight = g, g = void 0), v !== void 0 && (document.body.style.overflow = v, v = void 0);
+}, H = function() {
   return window.requestAnimationFrame(function() {
-    if (r === void 0) {
-      r = {
+    if (m === void 0) {
+      m = {
         position: document.body.style.position,
         top: document.body.style.top,
         left: document.body.style.left
       };
-      var e = window, t = e.scrollY, o = e.scrollX, i = e.innerHeight;
-      document.body.style.position = "fixed", document.body.style.top = -t, document.body.style.left = -o, setTimeout(function() {
+      var e = window, o = e.scrollY, t = e.scrollX, i = e.innerHeight;
+      document.body.style.position = "fixed", document.body.style.top = -o, document.body.style.left = -t, setTimeout(function() {
         return window.requestAnimationFrame(function() {
-          var d = i - window.innerHeight;
-          d && t >= i && (document.body.style.top = -(t + d));
+          var a = i - window.innerHeight;
+          a && o >= i && (document.body.style.top = -(o + a));
         });
       }, 300);
     }
   });
-}, H = function() {
-  if (r !== void 0) {
-    var e = -parseInt(document.body.style.top, 10), t = -parseInt(document.body.style.left, 10);
-    document.body.style.position = r.position, document.body.style.top = r.top, document.body.style.left = r.left, window.scrollTo(t, e), r = void 0;
+}, W = function() {
+  if (m !== void 0) {
+    var e = -parseInt(document.body.style.top, 10), o = -parseInt(document.body.style.left, 10);
+    document.body.style.position = m.position, document.body.style.top = m.top, document.body.style.left = m.left, window.scrollTo(o, e), m = void 0;
   }
-}, W = function(e) {
+}, Y = function(e) {
   return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
-}, N = function(e, t) {
-  var o = e.targetTouches[0].clientY - P;
-  return M(e.target) ? !1 : t && t.scrollTop === 0 && o > 0 || W(t) && o < 0 ? b(e) : (e.stopPropagation(), !0);
-}, Y = function(e, t) {
+}, U = function(e, o) {
+  var t = e.targetTouches[0].clientY - L;
+  return M(e.target) ? !1 : o && o.scrollTop === 0 && t > 0 || Y(o) && t < 0 ? _(e) : (e.stopPropagation(), !0);
+}, X = function(e, o) {
   if (!e) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
     return;
   }
-  if (!c.some(function(i) {
+  if (!u.some(function(i) {
     return i.targetElement === e;
   })) {
-    var o = {
+    var t = {
       targetElement: e,
-      options: t || {}
+      options: o || {}
     };
-    c = [].concat(q(c), [o]), g ? j() : I(t), g && (e.ontouchstart = function(i) {
-      i.targetTouches.length === 1 && (P = i.targetTouches[0].clientY);
+    u = [].concat(q(u), [t]), y ? H() : V(o), y && (e.ontouchstart = function(i) {
+      i.targetTouches.length === 1 && (L = i.targetTouches[0].clientY);
     }, e.ontouchmove = function(i) {
-      i.targetTouches.length === 1 && N(i, e);
-    }, y || (document.addEventListener("touchmove", b, O ? { passive: !1 } : void 0), y = !0));
+      i.targetTouches.length === 1 && U(i, e);
+    }, w || (document.addEventListener("touchmove", _, O ? { passive: !1 } : void 0), w = !0));
   }
-}, U = function(e) {
+}, G = function(e) {
   if (!e) {
     console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
     return;
   }
-  c = c.filter(function(t) {
-    return t.targetElement !== e;
-  }), g && (e.ontouchstart = null, e.ontouchmove = null, y && c.length === 0 && (document.removeEventListener("touchmove", b, O ? { passive: !1 } : void 0), y = !1)), g ? H() : V();
+  u = u.filter(function(o) {
+    return o.targetElement !== e;
+  }), y && (e.ontouchstart = null, e.ontouchmove = null, w && u.length === 0 && (document.removeEventListener("touchmove", _, O ? { passive: !1 } : void 0), w = !1)), y ? W() : N();
 };
-const X = `.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-m-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-max-inline-size: var(--modal-size-m);--modal-inline-size: 75%;max-inline-size:var(--modal-max-inline-size);inline-size:var(--modal-inline-size)}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (max-width: 768px){.c-modal[size=medium][isfullwidthbelowmid]{--modal-inline-size: 100%}}.c-modal[size=large]{--modal-max-inline-size: var(--modal-size-l);--modal-inline-size: 100%}@media (min-width: 768px){.c-modal[size=large]{--modal-inline-size: 75%}}.c-modal::backdrop{background:rgba(0,0,0,.5)}.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);--modal-header-font-weight: var(--dt-font-heading-m-weight);--modal-header-padding: var(--dt-spacing-e);--modal-header-padding-block-end: var(--dt-spacing-d);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;padding-block:var(--modal-header-padding) var(--modal-header-padding-block-end);padding-inline:var(--modal-header-padding)}.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: var(--dt-spacing-e);--modal-content-padding-block-start: var(--dt-spacing-a);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-block:var(--modal-content-padding-block-start) var(--modal-content-padding);padding-inline:var(--modal-content-padding);overflow-y:scroll;max-block-size:300px}.c-modal .c-modal-closeBtn{position:absolute;inset-inline-end:var(--dt-spacing-d);inset-block-start:var(--dt-spacing-d)}
-`, G = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], _ = "pie-modal-close", v = "pie-modal-open";
-var Q = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, s = (n, e, t, o) => {
-  for (var i = o > 1 ? void 0 : o ? Z(e, t) : e, d = n.length - 1, l; d >= 0; d--)
-    (l = n[d]) && (i = (o ? l(e, t, i) : l(i)) || i);
-  return o && i && Q(e, t, i), i;
+const J = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.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-m-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}.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)}}@media (max-width: 767px){.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]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal::backdrop{background:rgba(0,0,0,.5)}.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)}}.c-modal .c-modal-header{--modal-header-padding: var(--dt-spacing-e);padding-inline:var(--modal-header-padding);padding-block:var(--modal-header-padding);align-items:center;display:flex}.c-modal[hasbackbutton] .c-modal-header{padding-block:var(--dt-spacing-c);padding-inline-start:var(--dt-spacing-c)}.c-modal[isdismissible] .c-modal-header{justify-content:space-between;padding-block:var(--dt-spacing-c);padding-inline-end:var(--dt-spacing-c)}.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);--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}.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-e)}.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: var(--dt-spacing-e);--modal-content-padding-block: var(--dt-spacing-a);--spinner-size: 48px;--spinner-border-width: 6px;--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;min-block-size:60px;font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline:var(--modal-content-padding);padding-block:var(--modal-content-padding-block);overflow-y:auto}.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-content:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;opacity:0}.c-modal[isLoading] .c-modal-content:before{animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);opacity:1}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{opacity:0}.c-modal .c-modal-closeBtn{margin-inline-start:auto}
+`, Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], z = "pie-modal-close", b = "pie-modal-open", x = "pie-modal-back";
+var K = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, d = (n, e, o, t) => {
+  for (var i = t > 1 ? void 0 : t ? ee(e, o) : e, a = n.length - 1, r; a >= 0; a--)
+    (r = n[a]) && (i = (t ? r(e, o, i) : r(i)) || i);
+  return t && i && K(e, o, i), i;
 };
-const w = "pie-modal";
-class a extends k(B) {
+const k = "pie-modal";
+class l extends I(E) {
   constructor() {
-    super(), this.headingLevel = "h2", this.isDismissible = !1, this.isFullWidthBelowMid = !1, this.isOpen = !1, this.size = "medium", this._handleDialogCancelEvent = (e) => {
+    super(), this.headingLevel = "h2", this.isDismissible = !1, this.hasBackButton = !1, this.isFullWidthBelowMid = !1, this.isOpen = !1, this.isLoading = !1, this.size = "medium", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
       this.isDismissible || e.preventDefault();
     }, this._handleDialogLightDismiss = (e) => {
-      var p;
+      var c;
       if (!this.isDismissible)
         return;
-      const t = (p = this._dialog) == null ? void 0 : p.getBoundingClientRect(), {
-        top: o = 0,
+      const o = (c = this._dialog) == null ? void 0 : c.getBoundingClientRect(), {
+        top: t = 0,
         bottom: i = 0,
-        left: d = 0,
-        right: l = 0
-      } = t || {};
-      if (o === 0 && i === 0 && d === 0 && l === 0)
+        left: a = 0,
+        right: r = 0
+      } = o || {};
+      if (t === 0 && i === 0 && a === 0 && r === 0)
         return;
-      (e.clientY < o || e.clientY > i || e.clientX < d || e.clientX > l) && (this.isOpen = !1);
+      (e.clientY < t || e.clientY > i || e.clientX < a || e.clientX > r) && (this.isOpen = !1);
     }, this._dispatchModalCustomEvent = (e) => {
-      const t = new CustomEvent(e, {
+      const o = new CustomEvent(e, {
         bubbles: !0,
         composed: !0
       });
-      this.dispatchEvent(t);
+      this.dispatchEvent(o);
     }, this.addEventListener("click", (e) => this._handleDialogLightDismiss(e));
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener(v, this._handleModalOpened.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this));
+    super.connectedCallback(), document.addEventListener(b, this._handleModalOpened.bind(this)), document.addEventListener(z, this._handleModalClosed.bind(this)), document.addEventListener(x, this._handleModalClosed.bind(this));
   }
   disconnectedCallback() {
-    document.removeEventListener(v, this._handleModalOpened.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), super.disconnectedCallback();
+    document.removeEventListener(b, this._handleModalOpened.bind(this)), document.removeEventListener(z, this._handleModalClosed.bind(this)), document.removeEventListener(x, this._handleModalClosed.bind(this)), super.disconnectedCallback();
   }
   firstUpdated(e) {
-    var t, o;
-    (t = this._dialog) == null || t.addEventListener("cancel", (i) => this._handleDialogCancelEvent(i)), this._handleModalOpenStateOnFirstRender(e), (o = this._dialog) == null || o.addEventListener("close", () => {
+    var o, t;
+    (o = this._dialog) == null || o.addEventListener("cancel", (i) => this._handleDialogCancelEvent(i)), this._handleModalOpenStateOnFirstRender(e), (t = this._dialog) == null || t.addEventListener("close", () => {
       this.isOpen = !1;
     });
   }
@@ -197,57 +197,33 @@ class a extends k(B) {
    * Opens the dialog element and disables page scrolling
    */
   _handleModalOpened() {
-    var e, t, o;
-    Y(this), !((e = this._dialog) != null && e.hasAttribute("open") || !((t = this._dialog) != null && t.isConnected)) && ((o = this._dialog) == null || o.showModal());
+    var e, o, t;
+    X(this), !((e = this._dialog) != null && e.hasAttribute("open") || !((o = this._dialog) != null && o.isConnected)) && ((t = this._dialog) == null || t.showModal());
   }
   /**
    * Closes the dialog element and re-enables page scrolling
    */
   _handleModalClosed() {
     var e;
-    U(this), (e = this._dialog) == null || e.close(), this._returnFocus();
+    G(this), (e = this._dialog) == null || e.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 && this._dispatchModalCustomEvent(v);
+    e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(b);
   }
   // Handles changes to the modal isOpen property by dispatching any appropriate events
   _handleModalOpenStateChanged(e) {
-    const t = e.get("isOpen");
-    t !== void 0 && (t ? this._dispatchModalCustomEvent(_) : this._dispatchModalCustomEvent(v));
+    const o = e.get("isOpen");
+    o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(x)) : this._dispatchModalCustomEvent(z) : this._dispatchModalCustomEvent(b));
   }
   /**
    * Return focus to the specified element, providing the selector is valid
    * and the chosen element can be found.
-   * Fails silently.
    */
   _returnFocus() {
-    var t, o;
-    const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
-    e && ((o = document.querySelector(e)) == null || o.focus());
-  }
-  render() {
-    const {
-      heading: e,
-      headingLevel: t = "h2",
-      size: o,
-      isFullWidthBelowMid: i
-    } = this, d = E(t);
-    return z`
-            <dialog
-                id="dialog"
-                class="c-modal"
-                size="${o}"
-                ?isFullWidthBelowMid=${i}>
-                <header>
-                    <${d} class="c-modal-heading">${e}</${d}>
-                     ${this.isDismissible ? this.renderCloseButton() : x}
-                </header>
-                <article class="c-modal-content">
-                    <slot></slot>
-                </article>
-            </dialog>
-        `;
+    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
@@ -256,7 +232,7 @@ class a extends k(B) {
    * @private
    */
   renderCloseButton() {
-    return z`
+    return f`
             <pie-icon-button
                 @click="${() => {
       this.isOpen = !1;
@@ -266,38 +242,119 @@ class a extends k(B) {
                 data-test-id="modal-close-button"><icon-close /></pie-icon-button>
         `;
   }
+  /**
+   * Template for the back button element. Called within the
+   * main render function.
+   *
+   * @private
+   */
+  renderBackButton() {
+    return f`
+            <pie-icon-button
+                @click="${() => {
+      this._backButtonClicked = !0, this.isOpen = !1;
+    }}"
+                variant="ghost-secondary"
+                class="c-modal-backBtn"
+                data-test-id="modal-back-button">
+                ${this.isRTL ? f`<icon-chevron-right />` : f`<icon-chevron-left />`}
+            </pie-icon-button>
+        `;
+  }
+  render() {
+    const {
+      hasBackButton: e,
+      heading: o,
+      headingLevel: t = "h2",
+      isDismissible: i,
+      isFullWidthBelowMid: a,
+      isLoading: r,
+      size: p
+    } = this, c = $(t);
+    return f`
+        <dialog
+            id="dialog"
+            class="c-modal"
+            size="${p}"
+            ?hasBackButton=${e}
+            ?isDismissible=${i}
+            ?isFullWidthBelowMid=${a}
+            ?isLoading=${r}
+            data-test-id="pie-modal">
+            <header class="c-modal-header">
+                ${e ? this.renderBackButton() : B}
+                <${c} class="c-modal-heading">
+                    ${o}
+                </${c}>
+                ${i ? this.renderCloseButton() : B}
+            </header>
+            <article class="c-modal-content c-modal-content--scrollable">
+                <div class="c-modal-contentInner">
+                    <slot></slot>
+                </div>
+            </article>
+            <footer class="c-modal-footer">
+                <pie-button
+                    variant="primary"
+                    type="submit"
+                    @click="${() => {
+      var h;
+      return (h = this._dialog) == null ? void 0 : h.close("leading");
+    }}"
+                    data-test-id="modal-leading-action">
+                    Confirm
+                </pie-button>
+                <pie-button
+                    variant="ghost"
+                    type="reset"
+                    @click="${() => {
+      var h;
+      return (h = this._dialog) == null ? void 0 : h.close("supporting");
+    }}"
+                    data-test-id="modal-supporting-action">
+                    Cancel
+                </pie-button>
+            </footer>
+        </dialog>`;
+  }
 }
-a.styles = D(X);
-s([
-  u({ type: String }),
-  R(w)
-], a.prototype, "heading", 2);
-s([
-  u(),
-  C(w, G, "h2")
-], a.prototype, "headingLevel", 2);
-s([
-  u({ type: Boolean, reflect: !0 })
-], a.prototype, "isDismissible", 2);
-s([
-  u({ type: Boolean })
-], a.prototype, "isFullWidthBelowMid", 2);
-s([
-  u({ type: Boolean })
-], a.prototype, "isOpen", 2);
-s([
-  u()
-], a.prototype, "returnFocusAfterCloseSelector", 2);
-s([
-  u(),
-  C(w, J, "medium")
-], a.prototype, "size", 2);
-s([
-  L("dialog")
-], a.prototype, "_dialog", 2);
-customElements.define(w, a);
+l.styles = P(J);
+d([
+  s({ type: String }),
+  j(k)
+], l.prototype, "heading", 2);
+d([
+  s(),
+  S(k, Q, "h2")
+], l.prototype, "headingLevel", 2);
+d([
+  s({ type: Boolean, reflect: !0 })
+], l.prototype, "isDismissible", 2);
+d([
+  s({ type: Boolean })
+], l.prototype, "hasBackButton", 2);
+d([
+  s({ type: Boolean })
+], l.prototype, "isFullWidthBelowMid", 2);
+d([
+  s({ type: Boolean })
+], l.prototype, "isOpen", 2);
+d([
+  s({ type: Boolean, reflect: !0 })
+], l.prototype, "isLoading", 2);
+d([
+  s()
+], l.prototype, "returnFocusAfterCloseSelector", 2);
+d([
+  s(),
+  S(k, Z, "medium")
+], l.prototype, "size", 2);
+d([
+  D("dialog")
+], l.prototype, "_dialog", 2);
+customElements.define(k, l);
 export {
-  a as PieModal,
-  G as headingLevels,
-  J as sizes
+  l as PieModal,
+  Q as headingLevels,
+  Z as sizes
 };