@justeattakeaway/pie-modal 0.27.0 → 0.29.0

package/dist/index.d.ts

@@ -133,6 +133,7 @@ export declare const ON_MODAL_OPEN_EVENT = "pie-modal-open";
 export declare const ON_MODAL_SUPPORTING_ACTION_CLICK = "pie-modal-supporting-action-click";
 
 /**
+ * @tagname pie-modal
  * @event {CustomEvent} pie-modal-open - when the modal is opened.
  * @event {CustomEvent} pie-modal-close - when the modal is closed.
  * @event {CustomEvent} pie-modal-back - when the modal back button is clicked.

package/dist/index.js

@@ -1,7 +1,7 @@
-import { isServer as te, css as I, LitElement as O, html as M, unsafeCSS as ie, nothing as c } from "lit";
-import { html as p, unsafeStatic as oe } from "lit/static-html.js";
-import { property as l, query as $ } from "lit/decorators.js";
-const ne = (n) => {
+import { isServer as K, css as I, LitElement as $, html as M, unsafeCSS as ee, nothing as c } from "lit";
+import { html as p, unsafeStatic as te } from "lit/static-html.js";
+import { property as l, query as O } from "lit/decorators.js";
+const ie = (n) => {
   class e extends n {
     /**
      * A getter to determine whether the text direction is right-to-left (RTL).
@@ -13,7 +13,7 @@ const ne = (n) => {
      * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
      */
     get isRTL() {
-      return this.dir ? this.dir === "rtl" : !te && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
+      return this.dir ? this.dir === "rtl" : !K && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
     }
   }
   return e;
@@ -24,15 +24,15 @@ const ne = (n) => {
       return this[r];
     },
     set(h) {
-      const m = this[r];
+      const g = this[r];
       e.includes(h) ? this[r] = h : (console.error(
         `<${n}> Invalid value "${h}" provided for property "${a}".`,
         `Must be one of: ${e.join(" | ")}.`,
         `Falling back to default value: "${t}"`
-      ), this[r] = t), this.requestUpdate(a, m);
+      ), this[r] = t), this.requestUpdate(a, g);
     }
   });
-}, ae = (n) => function(t, i) {
+}, oe = (n) => function(t, i) {
   const o = `#${i}`;
   Object.defineProperty(t, i, {
     get() {
@@ -43,53 +43,60 @@ const ne = (n) => {
       (a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${i}"`), this[o] = a, this.requestUpdate(i, r);
     }
   });
-}, z = {
+};
+function ne(n, e) {
+  customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, e);
+}
+function P(n, e) {
+  customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, e);
+}
+const _ = {
   xs: 16,
   s: 20,
   m: 24,
   l: 28,
   xl: 32,
   xxl: 40
-}, W = Object.keys(z), Y = "xs", U = 8, _ = 32;
-function re(n, e, t) {
+}, W = Object.keys(_), q = "xs", V = 8, z = 32;
+function ae(n, e, t) {
   const i = parseInt(n, 10), o = i % t === 0;
   return i >= e && o;
 }
-const H = {
-  large: (n) => re(n, _, U),
+const Y = {
+  large: (n) => ae(n, z, V),
   regular: (n) => W.includes(n)
 };
-function le(n) {
-  const e = H.large(n);
-  return { isValid: e, size: e ? n : _ };
+function re(n) {
+  const e = Y.large(n);
+  return { isValid: e, size: e ? n : z };
 }
-function se(n) {
-  const e = H.regular(n), t = e ? z[n] : z[Y];
+function le(n) {
+  const e = Y.regular(n), t = e ? _[n] : _[q];
   return { isValid: e, size: t };
 }
 const u = (n, e, t, i) => {
   const o = n.endsWith("Large") || n.endsWith("-large");
   let a, r;
   if (t) {
-    if ({ isValid: a, size: r } = o ? le(t) : se(t), !a) {
-      const h = o ? `Invalid prop "size" value supplied to "${i}". The prop value should be a number equal or greater than ${_} and multiple of ${U}.` : `Invalid prop "size" value supplied to "${i}". The prop value should be one of the following values: ${W.join(", ")}.`;
+    if ({ isValid: a, size: r } = o ? re(t) : le(t), !a) {
+      const h = o ? `Invalid prop "size" value supplied to "${i}". The prop value should be a number equal or greater than ${z} and multiple of ${V}.` : `Invalid prop "size" value supplied to "${i}". The prop value should be one of the following values: ${W.join(", ")}.`;
       console.error(h);
     }
   } else
-    r = o ? _ : z[Y];
+    r = o ? z : _[q];
   return {
     class: [n, e].filter(Boolean).join(" "),
     width: r,
     height: r
   };
 };
-var de = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, P = (n, e, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? ce(e, t) : e, a = n.length - 1, r; a >= 0; a--)
+var se = Object.defineProperty, de = Object.getOwnPropertyDescriptor, D = (n, e, t, i) => {
+  for (var o = i > 1 ? void 0 : i ? de(e, t) : e, a = n.length - 1, r; a >= 0; a--)
     (r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
-  return i && o && de(e, t, o), o;
+  return i && o && se(e, t, o), o;
 };
-const R = "icon-close";
-let b = class extends O {
+const ce = "icon-close";
+class b extends $ {
   constructor() {
     super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--close";
   }
@@ -108,7 +115,7 @@ let b = class extends O {
   render() {
     return M`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--close"><path d="M11.868 3.205 8 7.072 4.133 3.205l-.928.927L7.073 8l-3.868 3.867.928.928L8 8.927l3.868 3.868.927-.928L8.928 8l3.867-3.868-.927-.927Z"></path></svg>`;
   }
-};
+}
 b.styles = I`
         :host-context(pie-icon-button) svg,
         :host-context(pie-button) svg {
@@ -117,23 +124,23 @@ b.styles = I`
             height: var(--btn-icon-size);
         }
     `;
-P([
+D([
   l({ type: String, reflect: !0 })
 ], b.prototype, "size", 2);
-P([
+D([
   l({ type: String, reflect: !0 })
 ], b.prototype, "class", 2);
-P([
-  $("svg")
+D([
+  O("svg")
 ], b.prototype, "_svg", 2);
-customElements.get(R) === void 0 && customElements.define(R, b);
-var he = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, D = (n, e, t, i) => {
+P(ce, b);
+var he = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, T = (n, e, t, i) => {
   for (var o = i > 1 ? void 0 : i ? pe(e, t) : e, a = n.length - 1, r; a >= 0; a--)
     (r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
   return i && o && he(e, t, o), o;
 };
-const N = "icon-chevron-left";
-class w extends O {
+const me = "icon-chevron-left";
+class w extends $ {
   constructor() {
     super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronLeft";
   }
@@ -161,23 +168,23 @@ w.styles = I`
             height: var(--btn-icon-size);
         }
     `;
-D([
+T([
   l({ type: String, reflect: !0 })
 ], w.prototype, "size", 2);
-D([
+T([
   l({ type: String, reflect: !0 })
 ], w.prototype, "class", 2);
-D([
-  $("svg")
+T([
+  O("svg")
 ], w.prototype, "_svg", 2);
-customElements.get(N) === void 0 && customElements.define(N, w);
-var ge = Object.defineProperty, me = Object.getOwnPropertyDescriptor, T = (n, e, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? me(e, t) : e, a = n.length - 1, r; a >= 0; a--)
+P(me, w);
+var ge = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, j = (n, e, t, i) => {
+  for (var o = i > 1 ? void 0 : i ? ue(e, t) : e, a = n.length - 1, r; a >= 0; a--)
     (r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
   return i && o && ge(e, t, o), o;
 };
-const q = "icon-chevron-right";
-class y extends O {
+const ve = "icon-chevron-right";
+class y extends $ {
   constructor() {
     super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronRight";
   }
@@ -205,17 +212,17 @@ y.styles = I`
             height: var(--btn-icon-size);
         }
     `;
-T([
+j([
   l({ type: String, reflect: !0 })
 ], y.prototype, "size", 2);
-T([
+j([
   l({ type: String, reflect: !0 })
 ], y.prototype, "class", 2);
-T([
-  $("svg")
+j([
+  O("svg")
 ], y.prototype, "_svg", 2);
-customElements.get(q) === void 0 && customElements.define(q, y);
-function ue(n) {
+P(ve, y);
+function fe(n) {
   if (Array.isArray(n)) {
     for (var e = 0, t = Array(n.length); e < n.length; e++)
       t[e] = n[e];
@@ -223,79 +230,79 @@ function ue(n) {
   } else
     return Array.from(n);
 }
-var j = !1;
+var F = !1;
 if (typeof window < "u") {
-  var V = {
+  var N = {
     get passive() {
-      j = !0;
+      F = !0;
     }
   };
-  window.addEventListener("testPassive", null, V), window.removeEventListener("testPassive", null, V);
+  window.addEventListener("testPassive", null, N), window.removeEventListener("testPassive", null, N);
 }
-var Z = 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 = [], C = !1, G = -1, v = void 0, f = void 0, X = function(e) {
-  return g.some(function(t) {
+var U = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), m = [], C = !1, H = -1, v = void 0, f = void 0, Z = function(e) {
+  return m.some(function(t) {
     return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
   });
 }, A = function(e) {
   var t = e || window.event;
-  return X(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
-}, ve = function(e) {
+  return Z(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
+}, be = function(e) {
   if (f === void 0) {
     var t = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
     t && i > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
   }
   v === void 0 && (v = document.body.style.overflow, document.body.style.overflow = "hidden");
-}, fe = function() {
+}, we = function() {
   f !== void 0 && (document.body.style.paddingRight = f, f = void 0), v !== void 0 && (document.body.style.overflow = v, v = void 0);
-}, be = function(e) {
+}, ye = function(e) {
   return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
-}, we = function(e, t) {
-  var i = e.targetTouches[0].clientY - G;
-  return X(e.target) ? !1 : t && t.scrollTop === 0 && i > 0 || be(t) && i < 0 ? A(e) : (e.stopPropagation(), !0);
-}, ye = function(e, t) {
+}, ke = function(e, t) {
+  var i = e.targetTouches[0].clientY - H;
+  return Z(e.target) ? !1 : t && t.scrollTop === 0 && i > 0 || ye(t) && i < 0 ? A(e) : (e.stopPropagation(), !0);
+}, xe = function(e, t) {
   if (!e) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
     return;
   }
-  if (!g.some(function(o) {
+  if (!m.some(function(o) {
     return o.targetElement === e;
   })) {
     var i = {
       targetElement: e,
       options: t || {}
     };
-    g = [].concat(ue(g), [i]), Z ? (e.ontouchstart = function(o) {
-      o.targetTouches.length === 1 && (G = o.targetTouches[0].clientY);
+    m = [].concat(fe(m), [i]), U ? (e.ontouchstart = function(o) {
+      o.targetTouches.length === 1 && (H = o.targetTouches[0].clientY);
     }, e.ontouchmove = function(o) {
-      o.targetTouches.length === 1 && we(o, e);
-    }, C || (document.addEventListener("touchmove", A, j ? { passive: !1 } : void 0), C = !0)) : ve(t);
+      o.targetTouches.length === 1 && ke(o, e);
+    }, C || (document.addEventListener("touchmove", A, F ? { passive: !1 } : void 0), C = !0)) : be(t);
   }
-}, ke = function(e) {
+}, _e = function(e) {
   if (!e) {
     console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
     return;
   }
-  g = g.filter(function(t) {
+  m = m.filter(function(t) {
     return t.targetElement !== e;
-  }), Z ? (e.ontouchstart = null, e.ontouchmove = null, C && g.length === 0 && (document.removeEventListener("touchmove", A, j ? { passive: !1 } : void 0), C = !1)) : g.length || fe();
+  }), U ? (e.ontouchstart = null, e.ontouchmove = null, C && m.length === 0 && (document.removeEventListener("touchmove", A, F ? { passive: !1 } : void 0), C = !1)) : m.length || we();
 };
-const xe = `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%)}*,*: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}@media (max-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)}}@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[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.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 (max-width: 767px){.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--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;grid-area:heading;margin-inline:var(--dt-spacing-d);margin-block:14px}@media (min-width: 768px){.c-modal .c-modal-heading{margin-inline: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:var(--dt-spacing-b);margin-inline:var(--dt-spacing-b) var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-c) var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-none) var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-none) var(--dt-spacing-c)}}.c-modal[isfooterpinned] .c-modal-content,.c-modal .c-modal-scrollContainer{overflow-y:auto}.c-modal .c-modal-scrollContainer{--bg-scroll-start: linear-gradient(var(--dt-color-container-default) 30%, rgba(255, 255, 255, 0));--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;--bg-scroll-top: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0));--bg-scroll-bottom: radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-start: 100% 40px;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-top: 100% 16px;--bg-size-scroll-bottom: 100% 16px;background:var(--bg-scroll-start),var(--bg-scroll-end),var(--bg-scroll-top),var(--bg-scroll-bottom);background-repeat:no-repeat;background-color:var(--dt-color-container-default);background-size:var(--bg-size-scroll-start),var(--bg-size-scroll-end),var(--bg-size-scroll-top),var(--bg-size-scroll-bottom);background-attachment:local,local,scroll,scroll}.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);--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: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:var(--modal-content-padding-inline);padding-block:var(--modal-content-padding-block)}@media (min-width: 768px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.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}
-`, ze = ["h1", "h2", "h3", "h4", "h5", "h6"], _e = ["small", "medium", "large"], Ce = ["top", "center"], S = "pie-modal-close", x = "pie-modal-open", B = "pie-modal-back", Ae = "pie-modal-leading-action-click", Oe = "pie-modal-supporting-action-click";
-var $e = Object.defineProperty, Le = Object.getOwnPropertyDescriptor, d = (n, e, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? Le(e, t) : e, a = n.length - 1, r; a >= 0; a--)
+const ze = `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%)}*,*: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}@media (max-width: 767px){.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)}}@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[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.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 (max-width: 767px){.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: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: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:var(--dt-spacing-b);margin-inline:var(--dt-spacing-b) var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-c) var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-none) var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-none) 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);--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: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:var(--modal-content-padding-inline);padding-block:var(--modal-content-padding-block);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--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>.c-modal-scrollContainer{display:flex;flex-direction:column;height:100%;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: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}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}
+`, Ce = ["h1", "h2", "h3", "h4", "h5", "h6"], Ae = ["small", "medium", "large"], $e = ["top", "center"], B = "pie-modal-close", x = "pie-modal-open", S = "pie-modal-back", Oe = "pie-modal-leading-action-click", Le = "pie-modal-supporting-action-click";
+var Be = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, d = (n, e, t, i) => {
+  for (var o = i > 1 ? void 0 : i ? Se(e, t) : e, a = n.length - 1, r; a >= 0; a--)
     (r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
-  return i && o && $e(e, t, o), o;
+  return i && o && Be(e, t, o), o;
 };
 const k = "pie-modal";
-class s extends ne(O) {
+class s extends ie($) {
   constructor() {
     super(...arguments), this.headingLevel = "h2", this.hasBackButton = !1, this.hasStackedActions = !1, this.isDismissible = !1, this.isFooterPinned = !0, this.isFullWidthBelowMid = !1, this.isLoading = !1, this.isOpen = !1, this.position = "center", this.size = "medium", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
       this.isDismissible || e.preventDefault();
     }, this._handleDialogLightDismiss = (e) => {
-      var m;
+      var g;
       if (!this.isDismissible)
         return;
-      const t = (m = this._dialog) == null ? void 0 : m.getBoundingClientRect(), {
+      const t = (g = this._dialog) == null ? void 0 : g.getBoundingClientRect(), {
         top: i = 0,
         bottom: o = 0,
         left: a = 0,
@@ -313,10 +320,10 @@ class s extends ne(O) {
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(x, this._handleModalOpened.bind(this)), document.addEventListener(S, this._handleModalClosed.bind(this)), document.addEventListener(B, this._handleModalClosed.bind(this));
+    super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(x, this._handleModalOpened.bind(this)), document.addEventListener(B, this._handleModalClosed.bind(this)), document.addEventListener(S, this._handleModalClosed.bind(this));
   }
   disconnectedCallback() {
-    document.removeEventListener(x, this._handleModalOpened.bind(this)), document.removeEventListener(S, this._handleModalClosed.bind(this)), document.removeEventListener(B, this._handleModalClosed.bind(this)), super.disconnectedCallback();
+    document.removeEventListener(x, this._handleModalOpened.bind(this)), document.removeEventListener(B, this._handleModalClosed.bind(this)), document.removeEventListener(S, this._handleModalClosed.bind(this)), super.disconnectedCallback();
   }
   async firstUpdated(e) {
     super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.js").then((i) => i.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (i) => this._handleDialogCancelEvent(i)), this._dialog.addEventListener("close", () => {
@@ -332,7 +339,7 @@ class s extends ne(O) {
   _handleModalOpened() {
     var t, i, o, a;
     const e = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
-    e && ye(e), !((i = this._dialog) != null && i.hasAttribute("open") || !((o = this._dialog) != null && o.isConnected)) && ((a = this._dialog) == null || a.showModal());
+    e && xe(e), !((i = this._dialog) != null && i.hasAttribute("open") || !((o = this._dialog) != null && o.isConnected)) && ((a = this._dialog) == null || a.showModal());
   }
   /**
    * Closes the dialog element and re-enables page scrolling
@@ -340,7 +347,7 @@ class s extends ne(O) {
   _handleModalClosed() {
     var t, i;
     const e = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
-    e && ke(e), (i = this._dialog) == null || i.close(), this._returnFocus();
+    e && _e(e), (i = this._dialog) == null || i.close(), this._returnFocus();
   }
   // Handles the value of the isOpen property on first render of the component
   _handleModalOpenStateOnFirstRender(e) {
@@ -349,11 +356,11 @@ class s extends ne(O) {
   // Handles changes to the modal isOpen property by dispatching any appropriate events
   _handleModalOpenStateChanged(e) {
     const t = e.get("isOpen");
-    t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(B)) : this._dispatchModalCustomEvent(S) : this._dispatchModalCustomEvent(x));
+    t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(S)) : this._dispatchModalCustomEvent(B) : this._dispatchModalCustomEvent(x));
   }
   _handleActionClick(e) {
     var t, i;
-    e === "leading" ? ((t = this._dialog) == null || t.close("leading"), this._dispatchModalCustomEvent(Ae)) : e === "supporting" && ((i = this._dialog) == null || i.close("supporting"), this._dispatchModalCustomEvent(Oe));
+    e === "leading" ? ((t = this._dialog) == null || t.close("leading"), this._dispatchModalCustomEvent(Oe)) : e === "supporting" && ((i = this._dialog) == null || i.close("supporting"), this._dispatchModalCustomEvent(Le));
   }
   /**
    * Return focus to the specified element, providing the selector is valid
@@ -478,34 +485,34 @@ class s extends ne(O) {
       headingLevel: a = "h2",
       isDismissible: r,
       isFooterPinned: h,
-      isFullWidthBelowMid: m,
+      isFullWidthBelowMid: g,
       isLoading: L,
-      leadingAction: J,
-      position: Q,
-      size: K,
-      supportingAction: ee
-    } = this, F = oe(a);
+      leadingAction: G,
+      position: X,
+      size: J,
+      supportingAction: Q
+    } = this, R = te(a);
     return p`
         <dialog
             id="dialog"
             class="c-modal"
-            size="${K}"
-            position="${Q}"
-            ?hasActions=${J || ee}
+            size="${J}"
+            position="${X}"
+            ?hasActions=${G || Q}
             ?hasBackButton=${t}
             ?hasStackedActions=${i}
             ?isDismissible=${r}
             ?isFooterPinned=${h}
-            ?isFullWidthBelowMid=${m}
+            ?isFullWidthBelowMid=${g}
             ?isLoading=${L}
             aria-busy="${L ? "true" : "false"}"
             aria-label="${L && (e == null ? void 0 : e.loading) || c}"
             data-test-id="pie-modal">
             <header class="c-modal-header">
                 ${t ? this.renderBackButton() : c}
-                <${F} class="c-modal-heading">
+                <${R} class="c-modal-heading">
                     ${o}
-                </${F}>
+                </${R}>
                 ${r ? this.renderCloseButton() : c}
             </header>
             ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
@@ -517,17 +524,17 @@ class s extends ne(O) {
         </dialog>`;
   }
 }
-s.styles = ie(xe);
+s.styles = ee(ze);
 d([
   l({ type: Object })
 ], s.prototype, "aria", 2);
 d([
   l({ type: String }),
-  ae(k)
+  oe(k)
 ], s.prototype, "heading", 2);
 d([
   l(),
-  E(k, ze, "h2")
+  E(k, Ce, "h2")
 ], s.prototype, "headingLevel", 2);
 d([
   l({ type: Boolean })
@@ -555,30 +562,30 @@ d([
 ], s.prototype, "leadingAction", 2);
 d([
   l(),
-  E(k, Ce, "center")
+  E(k, $e, "center")
 ], s.prototype, "position", 2);
 d([
   l()
 ], s.prototype, "returnFocusAfterCloseSelector", 2);
 d([
   l(),
-  E(k, _e, "medium")
+  E(k, Ae, "medium")
 ], s.prototype, "size", 2);
 d([
   l({ type: Object })
 ], s.prototype, "supportingAction", 2);
 d([
-  $("dialog")
+  O("dialog")
 ], s.prototype, "_dialog", 2);
-customElements.define(k, s);
+ne(k, s);
 export {
-  B as ON_MODAL_BACK_EVENT,
-  S as ON_MODAL_CLOSE_EVENT,
-  Ae as ON_MODAL_LEADING_ACTION_CLICK,
+  S as ON_MODAL_BACK_EVENT,
+  B as ON_MODAL_CLOSE_EVENT,
+  Oe as ON_MODAL_LEADING_ACTION_CLICK,
   x as ON_MODAL_OPEN_EVENT,
-  Oe as ON_MODAL_SUPPORTING_ACTION_CLICK,
+  Le as ON_MODAL_SUPPORTING_ACTION_CLICK,
   s as PieModal,
-  ze as headingLevels,
-  Ce as positions,
-  _e as sizes
+  Ce as headingLevels,
+  $e as positions,
+  Ae as sizes
 };

package/dist/react.d.ts

@@ -143,6 +143,7 @@ export declare const PieModal: ReactWebComponent<PieModal_2, {
 }>;
 
 /**
+ * @tagname pie-modal
  * @event {CustomEvent} pie-modal-open - when the modal is opened.
  * @event {CustomEvent} pie-modal-close - when the modal is closed.
  * @event {CustomEvent} pie-modal-back - when the modal back button is clicked.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.27.0",
+  "version": "0.29.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -29,12 +29,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeat/pie-design-tokens": "5.8.2",
-    "@justeattakeaway/pie-button": "0.32.0",
+    "@justeattakeaway/pie-button": "0.34.0",
     "@justeattakeaway/pie-components-config": "0.4.0",
-    "@justeattakeaway/pie-icon-button": "0.17.0",
-    "@justeattakeaway/pie-icons-webc": "0.10.0",
-    "@justeattakeaway/pie-webc-core": "0.10.0",
-    "@types/body-scroll-lock": "3.1.0"
+    "@justeattakeaway/pie-icon-button": "0.18.0",
+    "@justeattakeaway/pie-icons-webc": "0.11.1",
+    "@justeattakeaway/pie-webc-core": "0.11.0",
+    "@types/body-scroll-lock": "3.1.1"
   },
   "peerDependencies": {
     "body-scroll-lock": "3.1.5"

package/src/index.ts

@@ -4,7 +4,7 @@ import {
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { property, query } from 'lit/decorators.js';
 import {
-    requiredProperty, RtlMixin, validPropertyValues,
+    requiredProperty, RtlMixin, validPropertyValues, defineCustomElement,
 } from '@justeattakeaway/pie-webc-core';
 import '@justeattakeaway/pie-icons-webc/IconClose';
 import '@justeattakeaway/pie-icons-webc/IconChevronLeft';
@@ -33,6 +33,7 @@ export * from './defs';
 const componentSelector = 'pie-modal';
 
 /**
+ * @tagname pie-modal
  * @event {CustomEvent} pie-modal-open - when the modal is opened.
  * @event {CustomEvent} pie-modal-close - when the modal is closed.
  * @event {CustomEvent} pie-modal-back - when the modal back button is clicked.
@@ -452,7 +453,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     };
 }
 
-customElements.define(componentSelector, PieModal);
+defineCustomElement(componentSelector, PieModal);
 
 declare global {
     interface HTMLElementTagNameMap {

package/src/modal.scss

@@ -40,7 +40,7 @@
 
     // We need to override the icon sizes at different screen sizes regardless of size prop passed in
     pie-icon-button {
-        @media (max-width: $breakpoint-wide) {
+        @media (max-width: calc($breakpoint-wide - 1px)) {
             --btn-dimension: 40px;
         }
     }
@@ -172,8 +172,8 @@
     }
 
     & .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-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);
@@ -186,6 +186,8 @@
         margin-block: 14px; // This is deliberately not a custom property
 
         @media (min-width: $breakpoint-wide) {
+            --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: var(--dt-spacing-e);
             margin-block: 20px; // This is deliberately not a custom property
         }
@@ -231,32 +233,6 @@
         }
     }
 
-    &[isfooterpinned] .c-modal-content,
-    & .c-modal-scrollContainer {
-        overflow-y: auto;
-    }
-
-    & .c-modal-scrollContainer {
-        // These are the shadows used to indicate scrolling above and below content
-        --bg-scroll-start: linear-gradient(var(--dt-color-container-default) 30%, rgba(255, 255, 255, 0));
-        --bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--dt-color-container-default) 70%) 0 100%;
-        --bg-scroll-top: radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
-        --bg-scroll-bottom: radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) 0 100%;
-
-        // Sizes of the scroll shadows
-        --bg-size-scroll-start: 100% 40px;
-        --bg-size-scroll-end: 100% 40px;
-        --bg-size-scroll-top: 100% 16px;
-        --bg-size-scroll-bottom: 100% 16px;
-
-        background: var(--bg-scroll-start), var(--bg-scroll-end), var(--bg-scroll-top), var(--bg-scroll-bottom);
-        background-repeat: no-repeat;
-        background-color: var(--dt-color-container-default);
-        background-size: var(--bg-size-scroll-start), var(--bg-size-scroll-end), var(--bg-size-scroll-top), var(--bg-size-scroll-bottom);
-
-        background-attachment: local, local, scroll, scroll;
-    }
-
     & .c-modal-content {
         // Modal content Custom Props
         --modal-content-font-size: calc(var(--dt-font-size-16) * 1px);
@@ -295,6 +271,7 @@
 
         padding-inline: var(--modal-content-padding-inline);
         padding-block: var(--modal-content-padding-block);
+        flex-grow: 1;
 
         &--scrollable {
             background:
@@ -335,6 +312,35 @@
         }
     }
 
+    & > .c-modal-scrollContainer {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow-y: auto;
+
+        // These are the shadows used to indicate scrolling above and below content
+        --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, 0.3), rgba(0, 0, 0, 0)) 0 100%;
+
+        // Sizes of the scroll shadows
+        --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-content {
+            flex-shrink: 0;
+        }
+    }
+
+    &[isfooterpinned] .c-modal-content {
+        overflow-y: auto;
+    }
+
     &[isLoading] .c-modal-content {
         &:before {
             animation: rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);
@@ -345,4 +351,13 @@
             opacity: 0;
         }
     }
+
+    // removes the scroll shadow effect if "background-attachment" isn't supported.
+    // @supports (background-attachment: local) isn't used as Safari 14 recognizes the property but it has no effect.
+    // thus, "aspect-ratio" is used instead as it's only supported in Safari>=15
+    @supports not (aspect-ratio: 1 / 1) {
+        .c-modal-scrollContainer {
+            background: none;
+        }
+    }
 }