@justeattakeaway/pie-modal 0.24.0 → 0.26.0

package/README.md

@@ -11,18 +11,54 @@
 # Table of Contents
 
 1. [Introduction](#pie-modal)
-2. [Local Development](#local-development)
+2. [Installation](#installation)
 3. [Importing the component](#importing-the-component)
-4. [Props](#props)
-5. [Testing](#testing)
-5. [Legacy browser support](#legacy-browser-support)
+4. [Peer Dependencies](#peer-dependencies)
+5. [Local Development](#local-development)
+6. [Props](#props)
+7. [Testing](#testing)
+8. [Legacy browser support](#legacy-browser-support)
 
-# pie-modal
+
+## pie-modal
 
 `pie-modal` is a Web Component built using the Lit library. It offers a simple and accessible modal component for web applications, which uses the native HTML `dialog` element under the hood.
 
 This component can be easily integrated into various frontend frameworks and customized through a set of properties.
 
+
+## Installation
+
+To install `pie-modal` in your application, run the following on your command line:
+
+```bash
+# npm
+$ npm i @justeattakeaway/pie-modal
+
+# yarn
+$ yarn add @justeattakeaway/pie-modal
+```
+
+For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
+
+
+### Importing the component
+
+```js
+// default
+import { PieModal } from '@justeattakeaway/pie-modal';
+
+// react
+import { PieModal } from '@justeattakeaway/pie-modal/dist/react';
+```
+
+
+## Peer Dependencies
+
+> [!IMPORTANT]
+> When using `pie-modal`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
+
+
 ## Local development
 
 Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
@@ -46,15 +82,6 @@ yarn watch --filter=pie-modal
 yarn dev --filter=pie-storybook
 ```
 
-### Importing the component
-
-```js
-// default
-import { PieModal } from '@justeattakeaway/pie-modal';
-
-// react
-import { PieModal } from '@justeattakeaway/pie-modal/dist/react';
-```
 
 ## Props
 

package/dist/index.js

@@ -1,6 +1,6 @@
-import { isServer as te, css as I, LitElement as O, html as M, unsafeCSS as oe, nothing as c } from "lit";
-import { html as p, unsafeStatic as ie } from "lit/static-html.js";
-import { property as r, query as $ } from "lit/decorators.js";
+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) => {
   class e extends n {
     /**
@@ -17,30 +17,30 @@ const ne = (n) => {
     }
   }
   return e;
-}, E = (n, e, t) => function(i, a) {
-  const l = `#${a}`;
-  Object.defineProperty(i, a, {
+}, E = (n, e, t) => function(o, a) {
+  const r = `#${a}`;
+  Object.defineProperty(o, a, {
     get() {
-      return this[l];
+      return this[r];
     },
     set(h) {
-      const u = this[l];
-      e.includes(h) ? this[l] = h : (console.error(
+      const m = 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[l] = t), this.requestUpdate(a, u);
+      ), this[r] = t), this.requestUpdate(a, m);
     }
   });
-}, ae = (n) => function(t, o) {
-  const i = `#${o}`;
-  Object.defineProperty(t, o, {
+}, ae = (n) => function(t, i) {
+  const o = `#${i}`;
+  Object.defineProperty(t, i, {
     get() {
-      return this[i];
+      return this[o];
     },
     set(a) {
-      const l = this[i];
-      (a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${o}"`), this[i] = a, this.requestUpdate(o, l);
+      const r = this[o];
+      (a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${i}"`), this[o] = a, this.requestUpdate(i, r);
     }
   });
 }, _ = {
@@ -51,15 +51,15 @@ const ne = (n) => {
   xl: 32,
   xxl: 40
 }, W = Object.keys(_), Y = "xs", U = 8, z = 32;
-function le(n, e, t) {
-  const o = parseInt(n, 10), i = o % t === 0;
-  return o >= e && i;
+function re(n, e, t) {
+  const i = parseInt(n, 10), o = i % t === 0;
+  return i >= e && o;
 }
 const H = {
-  large: (n) => le(n, z, U),
+  large: (n) => re(n, z, U),
   regular: (n) => W.includes(n)
 };
-function re(n) {
+function le(n) {
   const e = H.large(n);
   return { isValid: e, size: e ? n : z };
 }
@@ -67,26 +67,26 @@ function se(n) {
   const e = H.regular(n), t = e ? _[n] : _[Y];
   return { isValid: e, size: t };
 }
-const m = (n, e, t, o) => {
-  const i = n.endsWith("Large") || n.endsWith("-large");
-  let a, l;
+const u = (n, e, t, i) => {
+  const o = n.endsWith("Large") || n.endsWith("-large");
+  let a, r;
   if (t) {
-    if ({ isValid: a, size: l } = i ? re(t) : se(t), !a) {
-      const h = i ? `Invalid prop "size" value supplied to "${o}". The prop value should be a number equal or greater than ${z} and multiple of ${U}.` : `Invalid prop "size" value supplied to "${o}". The prop value should be one of the following values: ${W.join(", ")}.`;
+    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 ${z} and multiple of ${U}.` : `Invalid prop "size" value supplied to "${i}". The prop value should be one of the following values: ${W.join(", ")}.`;
       console.error(h);
     }
   } else
-    l = i ? z : _[Y];
+    r = o ? z : _[Y];
   return {
     class: [n, e].filter(Boolean).join(" "),
-    width: l,
-    height: l
+    width: r,
+    height: r
   };
 };
-var de = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, P = (n, e, t, o) => {
-  for (var i = o > 1 ? void 0 : o ? ce(e, t) : e, a = n.length - 1, l; a >= 0; a--)
-    (l = n[a]) && (i = (o ? l(e, t, i) : l(i)) || i);
-  return o && i && de(e, t, i), i;
+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--)
+    (r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
+  return i && o && de(e, t, o), o;
 };
 const R = "icon-close";
 let b = class extends O {
@@ -94,16 +94,16 @@ let b = class extends O {
     super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--close";
   }
   connectedCallback() {
-    var e, t, o;
+    var e, t, i;
     if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
-      const i = m("c-pieIcon c-pieIcon--close", "", null, "IconClose");
-      (t = this._svg) == null || t.setAttribute("width", i.width), (o = this._svg) == null || o.setAttribute("height", i.height);
+      const o = u("c-pieIcon c-pieIcon--close", "", null, "IconClose");
+      (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height);
     }
   }
   updated(e) {
-    var t, o;
-    let i;
-    e.has("size") && (i = m("c-pieIcon c-pieIcon--close", "", this.size, "IconClose"), (t = this._svg) == null || t.setAttribute("width", i.width), (o = this._svg) == null || o.setAttribute("height", i.height));
+    var t, i;
+    let o;
+    e.has("size") && (o = u("c-pieIcon c-pieIcon--close", "", this.size, "IconClose"), (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height));
   }
   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>`;
@@ -118,19 +118,19 @@ b.styles = I`
         }
     `;
 P([
-  r({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], b.prototype, "size", 2);
 P([
-  r({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], b.prototype, "class", 2);
 P([
   $("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, o) => {
-  for (var i = o > 1 ? void 0 : o ? pe(e, t) : e, a = n.length - 1, l; a >= 0; a--)
-    (l = n[a]) && (i = (o ? l(e, t, i) : l(i)) || i);
-  return o && i && he(e, t, i), i;
+var he = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, D = (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 {
@@ -138,16 +138,16 @@ class w extends O {
     super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronLeft";
   }
   connectedCallback() {
-    var e, t, o;
+    var e, t, i;
     if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
-      const i = m("c-pieIcon c-pieIcon--chevronLeft", "", null, "IconChevronLeft");
-      (t = this._svg) == null || t.setAttribute("width", i.width), (o = this._svg) == null || o.setAttribute("height", i.height);
+      const o = u("c-pieIcon c-pieIcon--chevronLeft", "", null, "IconChevronLeft");
+      (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height);
     }
   }
   updated(e) {
-    var t, o;
-    let i;
-    e.has("size") && (i = m("c-pieIcon c-pieIcon--chevronLeft", "", this.size, "IconChevronLeft"), (t = this._svg) == null || t.setAttribute("width", i.width), (o = this._svg) == null || o.setAttribute("height", i.height));
+    var t, i;
+    let o;
+    e.has("size") && (o = u("c-pieIcon c-pieIcon--chevronLeft", "", this.size, "IconChevronLeft"), (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height));
   }
   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--chevronLeft"><path d="M10.96 2.82 5.605 8l5.399 5.197-.875.963-5.565-5.364a1.164 1.164 0 0 1 0-1.671l5.495-5.25.901.945Z"></path></svg>`;
@@ -162,19 +162,19 @@ w.styles = I`
         }
     `;
 D([
-  r({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], w.prototype, "size", 2);
 D([
-  r({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], w.prototype, "class", 2);
 D([
   $("svg")
 ], w.prototype, "_svg", 2);
 customElements.get(N) === void 0 && customElements.define(N, w);
-var ge = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, T = (n, e, t, o) => {
-  for (var i = o > 1 ? void 0 : o ? ue(e, t) : e, a = n.length - 1, l; a >= 0; a--)
-    (l = n[a]) && (i = (o ? l(e, t, i) : l(i)) || i);
-  return o && i && ge(e, t, i), i;
+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--)
+    (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 {
@@ -182,16 +182,16 @@ class y extends O {
     super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronRight";
   }
   connectedCallback() {
-    var e, t, o;
+    var e, t, i;
     if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
-      const i = m("c-pieIcon c-pieIcon--chevronRight", "", null, "IconChevronRight");
-      (t = this._svg) == null || t.setAttribute("width", i.width), (o = this._svg) == null || o.setAttribute("height", i.height);
+      const o = u("c-pieIcon c-pieIcon--chevronRight", "", null, "IconChevronRight");
+      (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height);
     }
   }
   updated(e) {
-    var t, o;
-    let i;
-    e.has("size") && (i = m("c-pieIcon c-pieIcon--chevronRight", "", this.size, "IconChevronRight"), (t = this._svg) == null || t.setAttribute("width", i.width), (o = this._svg) == null || o.setAttribute("height", i.height));
+    var t, i;
+    let o;
+    e.has("size") && (o = u("c-pieIcon c-pieIcon--chevronRight", "", this.size, "IconChevronRight"), (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height));
   }
   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--chevronRight"><path d="M5.044 13.18 10.399 8 5 2.82l.875-.962 5.539 5.346a1.164 1.164 0 0 1 0 1.636l-5.469 5.285-.901-.945Z"></path></svg>`;
@@ -206,16 +206,16 @@ y.styles = I`
         }
     `;
 T([
-  r({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], y.prototype, "size", 2);
 T([
-  r({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], y.prototype, "class", 2);
 T([
   $("svg")
 ], y.prototype, "_svg", 2);
 customElements.get(q) === void 0 && customElements.define(q, y);
-function me(n) {
+function ue(n) {
   if (Array.isArray(n)) {
     for (var e = 0, t = Array(n.length); e < n.length; e++)
       t[e] = n[e];
@@ -241,8 +241,8 @@ var Z = typeof window < "u" && window.navigator && window.navigator.platform &&
   return X(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
 }, ve = function(e) {
   if (f === void 0) {
-    var t = !!e && e.reserveScrollBarGap === !0, o = window.innerWidth - document.documentElement.clientWidth;
-    t && o > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = o + "px");
+    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() {
@@ -250,24 +250,24 @@ var Z = typeof window < "u" && window.navigator && window.navigator.platform &&
 }, be = function(e) {
   return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
 }, we = function(e, t) {
-  var o = e.targetTouches[0].clientY - G;
-  return X(e.target) ? !1 : t && t.scrollTop === 0 && o > 0 || be(t) && o < 0 ? A(e) : (e.stopPropagation(), !0);
+  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) {
   if (!e) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
     return;
   }
-  if (!g.some(function(i) {
-    return i.targetElement === e;
+  if (!g.some(function(o) {
+    return o.targetElement === e;
   })) {
-    var o = {
+    var i = {
       targetElement: e,
       options: t || {}
     };
-    g = [].concat(me(g), [o]), Z ? (e.ontouchstart = function(i) {
-      i.targetTouches.length === 1 && (G = i.targetTouches[0].clientY);
-    }, e.ontouchmove = function(i) {
-      i.targetTouches.length === 1 && we(i, e);
+    g = [].concat(ue(g), [i]), Z ? (e.ontouchstart = function(o) {
+      o.targetTouches.length === 1 && (G = 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);
   }
 }, ke = function(e) {
@@ -279,12 +279,12 @@ var Z = typeof window < "u" && window.navigator && window.navigator.platform &&
     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();
 };
-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)}@media (max-width: 767px){.c-modal[position=top][isfullwidthbelowmid]{margin-block-start:var(--dt-spacing-none)}}.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{padding-inline:var(--dt-spacing-d);padding-block:14px;display:grid;grid-template-areas:"back heading close" ". heading .";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:center}@media (min-width: 768px){.c-modal .c-modal-header{padding-inline:var(--dt-spacing-e);padding-block:20px}}.c-modal[hasbackbutton] .c-modal-header{padding-block:var(--dt-spacing-b);padding-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.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{padding-block:var(--dt-spacing-b);padding-inline-end:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-header{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;grid-area:heading}.c-modal[hasbackbutton] .c-modal-heading{padding-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{padding-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{padding-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{padding-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back}.c-modal .c-modal-closeBtn{grid-area:close}.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: 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: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);padding-block:var(--modal-content-padding-block)}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal .c-modal-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}
+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)}@media (max-width: 767px){.c-modal[position=top][isfullwidthbelowmid]{margin-block-start:var(--dt-spacing-none)}}.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}
 `, _e = ["h1", "h2", "h3", "h4", "h5", "h6"], ze = ["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, o) => {
-  for (var i = o > 1 ? void 0 : o ? Le(e, t) : e, a = n.length - 1, l; a >= 0; a--)
-    (l = n[a]) && (i = (o ? l(e, t, i) : l(i)) || i);
-  return o && i && $e(e, t, i), i;
+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--)
+    (r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
+  return i && o && $e(e, t, o), o;
 };
 const k = "pie-modal";
 class s extends ne(O) {
@@ -292,18 +292,18 @@ class s extends ne(O) {
     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 u;
+      var m;
       if (!this.isDismissible)
         return;
-      const t = (u = this._dialog) == null ? void 0 : u.getBoundingClientRect(), {
-        top: o = 0,
-        bottom: i = 0,
+      const t = (m = this._dialog) == null ? void 0 : m.getBoundingClientRect(), {
+        top: i = 0,
+        bottom: o = 0,
         left: a = 0,
-        right: l = 0
+        right: r = 0
       } = t || {};
-      if (o === 0 && i === 0 && a === 0 && l === 0)
+      if (i === 0 && o === 0 && a === 0 && r === 0)
         return;
-      (e.clientY < o || e.clientY > i || e.clientX < a || e.clientX > l) && (this.isOpen = !1);
+      (e.clientY < i || e.clientY > o || e.clientX < a || e.clientX > r) && (this.isOpen = !1);
     }, this._dispatchModalCustomEvent = (e) => {
       const t = new CustomEvent(e, {
         bubbles: !0,
@@ -319,7 +319,7 @@ class s extends ne(O) {
     document.removeEventListener(x, this._handleModalOpened.bind(this)), document.removeEventListener(S, this._handleModalClosed.bind(this)), document.removeEventListener(B, this._handleModalClosed.bind(this)), super.disconnectedCallback();
   }
   async firstUpdated(e) {
-    super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.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-29edb142.js").then((i) => i.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (i) => this._handleDialogCancelEvent(i)), this._dialog.addEventListener("close", () => {
       this.isOpen = !1;
     })), this._handleModalOpenStateOnFirstRender(e);
   }
@@ -330,17 +330,17 @@ class s extends ne(O) {
    * Opens the dialog element and disables page scrolling
    */
   _handleModalOpened() {
-    var t, o, i, a;
+    var t, i, o, a;
     const e = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
-    e && ye(e), !((o = this._dialog) != null && o.hasAttribute("open") || !((i = this._dialog) != null && i.isConnected)) && ((a = this._dialog) == null || a.showModal());
+    e && ye(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
    */
   _handleModalClosed() {
-    var t, o;
+    var t, i;
     const e = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
-    e && ke(e), (o = this._dialog) == null || o.close(), this._returnFocus();
+    e && ke(e), (i = this._dialog) == null || i.close(), this._returnFocus();
   }
   // Handles the value of the isOpen property on first render of the component
   _handleModalOpenStateOnFirstRender(e) {
@@ -352,17 +352,17 @@ class s extends ne(O) {
     t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(B)) : this._dispatchModalCustomEvent(S) : this._dispatchModalCustomEvent(x));
   }
   _handleActionClick(e) {
-    var t, o;
-    e === "leading" ? ((t = this._dialog) == null || t.close("leading"), this._dispatchModalCustomEvent(Ae)) : e === "supporting" && ((o = this._dialog) == null || o.close("supporting"), this._dispatchModalCustomEvent(Oe));
+    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));
   }
   /**
    * Return focus to the specified element, providing the selector is valid
    * and the chosen element can be found.
    */
   _returnFocus() {
-    var t, o;
+    var t, i;
     const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
-    e && ((o = document.querySelector(e)) == null || o.focus());
+    e && ((i = document.querySelector(e)) == null || i.focus());
   }
   /**
    * Template for the close button element. Called within the
@@ -415,11 +415,11 @@ class s extends ne(O) {
    * @private
    */
   renderLeadingAction() {
-    const { text: e, variant: t = "primary", ariaLabel: o } = this.leadingAction;
+    const { text: e, variant: t = "primary", ariaLabel: i } = this.leadingAction;
     return e ? p`
             <pie-button
                 variant="${t}"
-                aria-label="${o || c}"
+                aria-label="${i || c}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("leading")}"
@@ -440,11 +440,11 @@ class s extends ne(O) {
    * @private
    */
   renderSupportingAction() {
-    const { text: e, variant: t = "ghost", ariaLabel: o } = this.supportingAction;
+    const { text: e, variant: t = "ghost", ariaLabel: i } = this.supportingAction;
     return e ? this.leadingAction ? p`
             <pie-button
                 variant="${t}"
-                aria-label="${o || c}"
+                aria-label="${i || c}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("supporting")}"
@@ -473,18 +473,18 @@ class s extends ne(O) {
     const {
       aria: e,
       hasBackButton: t,
-      hasStackedActions: o,
-      heading: i,
+      hasStackedActions: i,
+      heading: o,
       headingLevel: a = "h2",
-      isDismissible: l,
+      isDismissible: r,
       isFooterPinned: h,
-      isFullWidthBelowMid: u,
+      isFullWidthBelowMid: m,
       isLoading: L,
       leadingAction: J,
       position: Q,
       size: K,
       supportingAction: ee
-    } = this, F = ie(a);
+    } = this, F = oe(a);
     return p`
         <dialog
             id="dialog"
@@ -493,10 +493,10 @@ class s extends ne(O) {
             position="${Q}"
             ?hasActions=${J || ee}
             ?hasBackButton=${t}
-            ?hasStackedActions=${o}
-            ?isDismissible=${l}
+            ?hasStackedActions=${i}
+            ?isDismissible=${r}
             ?isFooterPinned=${h}
-            ?isFullWidthBelowMid=${u}
+            ?isFullWidthBelowMid=${m}
             ?isLoading=${L}
             aria-busy="${L ? "true" : "false"}"
             aria-label="${L && (e == null ? void 0 : e.loading) || c}"
@@ -504,9 +504,9 @@ class s extends ne(O) {
             <header class="c-modal-header">
                 ${t ? this.renderBackButton() : c}
                 <${F} class="c-modal-heading">
-                    ${i}
+                    ${o}
                 </${F}>
-                ${l ? this.renderCloseButton() : c}
+                ${r ? this.renderCloseButton() : c}
             </header>
             ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
     h ? this.renderModalContentAndFooter() : p`
@@ -517,55 +517,55 @@ class s extends ne(O) {
         </dialog>`;
   }
 }
-s.styles = oe(xe);
+s.styles = ie(xe);
 d([
-  r({ type: Object })
+  l({ type: Object })
 ], s.prototype, "aria", 2);
 d([
-  r({ type: String }),
+  l({ type: String }),
   ae(k)
 ], s.prototype, "heading", 2);
 d([
-  r(),
+  l(),
   E(k, _e, "h2")
 ], s.prototype, "headingLevel", 2);
 d([
-  r({ type: Boolean })
+  l({ type: Boolean })
 ], s.prototype, "hasBackButton", 2);
 d([
-  r({ type: Boolean })
+  l({ type: Boolean })
 ], s.prototype, "hasStackedActions", 2);
 d([
-  r({ type: Boolean, reflect: !0 })
+  l({ type: Boolean, reflect: !0 })
 ], s.prototype, "isDismissible", 2);
 d([
-  r({ type: Boolean })
+  l({ type: Boolean })
 ], s.prototype, "isFooterPinned", 2);
 d([
-  r({ type: Boolean })
+  l({ type: Boolean })
 ], s.prototype, "isFullWidthBelowMid", 2);
 d([
-  r({ type: Boolean, reflect: !0 })
+  l({ type: Boolean, reflect: !0 })
 ], s.prototype, "isLoading", 2);
 d([
-  r({ type: Boolean })
+  l({ type: Boolean })
 ], s.prototype, "isOpen", 2);
 d([
-  r({ type: Object })
+  l({ type: Object })
 ], s.prototype, "leadingAction", 2);
 d([
-  r(),
+  l(),
   E(k, Ce, "center")
 ], s.prototype, "position", 2);
 d([
-  r()
+  l()
 ], s.prototype, "returnFocusAfterCloseSelector", 2);
 d([
-  r(),
+  l(),
   E(k, ze, "medium")
 ], s.prototype, "size", 2);
 d([
-  r({ type: Object })
+  l({ type: Object })
 ], s.prototype, "supportingAction", 2);
 d([
   $("dialog")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.24.0",
+  "version": "0.26.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -25,15 +25,15 @@
     "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_MODAL} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
     "test:visual:ci": "yarn test:visual"
   },
-  "author": "JustEatTakeaway - Design System Web Team",
+  "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeat/pie-design-tokens": "5.8.2",
-    "@justeattakeaway/pie-button": "0.29.0",
+    "@justeattakeaway/pie-button": "0.31.0",
     "@justeattakeaway/pie-components-config": "0.4.0",
-    "@justeattakeaway/pie-icon-button": "0.15.0",
-    "@justeattakeaway/pie-icons-webc": "0.8.1",
-    "@justeattakeaway/pie-webc-core": "0.9.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"
   },
   "peerDependencies": {
@@ -44,5 +44,8 @@
   },
   "dependencies": {
     "dialog-polyfill": "0.5.6"
-  }
+  },
+  "sideEffects": [
+    "dist/*.js"
+  ]
 }

package/src/modal.scss

@@ -162,39 +162,10 @@
     }
 
     & .c-modal-header {
-        padding-inline: var(--dt-spacing-d);
-        padding-block: 14px; // This is deliberately not a custom property
         display: grid;
-        grid-template-areas:
-            'back heading close'
-            '. heading .';
+        grid-template-areas: 'back heading close';
         grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content);
-        align-items: center;
-
-        @media (min-width: $breakpoint-wide) {
-            padding-inline: var(--dt-spacing-e);
-            padding-block: 20px; // This is deliberately not a custom property
-        }
-    }
-
-    &[hasbackbutton] .c-modal-header {
-        padding-block: var(--dt-spacing-b);
-        padding-inline-start: var(--dt-spacing-b);
-
-        @media (min-width: $breakpoint-wide) {
-            padding-block: var(--dt-spacing-c);
-            padding-inline-start: var(--dt-spacing-c);
-        }
-    }
-
-    &[isdismissible] .c-modal-header {
-        padding-block: var(--dt-spacing-b);
-        padding-inline-end: var(--dt-spacing-b);
-
-        @media (min-width: $breakpoint-wide) {
-            padding-block: var(--dt-spacing-c);
-            padding-inline-end: var(--dt-spacing-c);
-        }
+        align-items: start;
     }
 
     & .c-modal-heading {
@@ -207,32 +178,54 @@
         font-weight: var(--modal-header-font-weight);
         margin: 0;
         grid-area: heading;
+
+        margin-inline: var(--dt-spacing-d);
+        margin-block: 14px; // This is deliberately not a custom property
+
+        @media (min-width: $breakpoint-wide) {
+            margin-inline: var(--dt-spacing-e);
+            margin-block: 20px; // This is deliberately not a custom property
+        }
     }
 
     // Ensure correct padding when there is a back button in front of the heading
     &[hasbackbutton] .c-modal-heading {
-        padding-inline-start: var(--dt-spacing-b);
+        margin-inline-start: var(--dt-spacing-b);
 
         @media (min-width: $breakpoint-wide) {
-            padding-inline-start: var(--dt-spacing-c);
+            margin-inline-start: var(--dt-spacing-c);
         }
     }
 
     // Ensure correct padding when there is a close button behind the heading
     &[isdismissible] .c-modal-heading {
-        padding-inline-end: var(--dt-spacing-d);
+        margin-inline-end: var(--dt-spacing-d);
 
         @media (min-width: $breakpoint-wide) {
-            padding-inline-end: var(--dt-spacing-e);
+            margin-inline-end: var(--dt-spacing-e);
         }
     }
 
     & .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: $breakpoint-wide) {
+            margin-block: var(--dt-spacing-c);
+            margin-inline: var(--dt-spacing-c) var(--dt-spacing-none);
+        }
     }
 
     & .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: $breakpoint-wide) {
+            margin-block: var(--dt-spacing-c);
+            margin-inline: var(--dt-spacing-none) var(--dt-spacing-c);
+        }
     }
 
     &[isfooterpinned] .c-modal-content,
@@ -266,8 +259,12 @@
         --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);
+        --modal-content-padding-inline: var(--dt-spacing-d);
+
+        @media (min-width: $breakpoint-wide) {
+            --modal-content-padding-inline: var(--dt-spacing-e);
+        }
 
         // Spinner sizes defaults
         --spinner-size: 48px;
@@ -293,7 +290,7 @@
         line-height: var(--modal-content-line-height);
         font-weight: var(--modal-content-font-weight);
 
-        padding-inline: var(--modal-content-padding);
+        padding-inline: var(--modal-content-padding-inline);
         padding-block: var(--modal-content-padding-block);
 
         &--scrollable {

package/LICENSE

@@ -1,17 +0,0 @@
-Apache License
-Version 2.0, January 2004
-http://www.apache.org/licenses/
-
-Copyright (c) Just Eat Takeaway.com
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.