@justeattakeaway/pie-modal 1.23.0 → 1.24.1

package/dist/index.js

@@ -1,7 +1,7 @@
 import { LitElement as T, unsafeCSS as K, nothing as c } from "lit";
 import { html as s, unsafeStatic as H } from "lit/static-html.js";
 import { property as d, query as R } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
+import { classMap as x } from "lit/directives/class-map.js";
 import { ifDefined as h } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
@@ -14,15 +14,15 @@ const S = class S extends T {
     this.getAttribute("v") || this.setAttribute("v", S.v);
   }
 };
-S.v = "1.23.0";
+S.v = "1.24.1";
 let C = S;
-function j(e) {
-  if (Array.isArray(e)) {
-    for (var o = 0, t = Array(e.length); o < e.length; o++)
-      t[o] = e[o];
+function j(a) {
+  if (Array.isArray(a)) {
+    for (var o = 0, t = Array(a.length); o < a.length; o++)
+      t[o] = a[o];
     return t;
   } else
-    return Array.from(e);
+    return Array.from(a);
 }
 var B = !1;
 if (typeof window < "u") {
@@ -42,8 +42,8 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
   return D(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
 }, V = function(o) {
   if (v === void 0) {
-    var t = !1, a = window.innerWidth - document.documentElement.clientWidth;
-    t && a > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = a + "px");
+    var t = !1, e = window.innerWidth - document.documentElement.clientWidth;
+    t && e > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = e + "px");
   }
   f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
 }, Y = function() {
@@ -51,8 +51,8 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
 }, q = function(o) {
   return o ? o.scrollHeight - o.scrollTop <= o.clientHeight : !1;
 }, U = function(o, t) {
-  var a = o.targetTouches[0].clientY - $;
-  return D(o.target) ? !1 : t && t.scrollTop === 0 && a > 0 || q(t) && a < 0 ? w(o) : (o.stopPropagation(), !0);
+  var e = o.targetTouches[0].clientY - $;
+  return D(o.target) ? !1 : t && t.scrollTop === 0 && e > 0 || q(t) && e < 0 ? w(o) : (o.stopPropagation(), !0);
 }, X = function(o, t) {
   if (!o) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
@@ -61,11 +61,11 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
   if (!g.some(function(i) {
     return i.targetElement === o;
   })) {
-    var a = {
+    var e = {
       targetElement: o,
       options: {}
     };
-    g = [].concat(j(g), [a]), O ? (o.ontouchstart = function(i) {
+    g = [].concat(j(g), [e]), O ? (o.ontouchstart = function(i) {
       i.targetTouches.length === 1 && ($ = i.targetTouches[0].clientY);
     }, o.ontouchmove = function(i) {
       i.targetTouches.length === 1 && U(i, o);
@@ -80,7 +80,7 @@ var O = typeof window < "u" && window.navigator && window.navigator.platform &&
     return t.targetElement !== o;
   }), O ? (o.ontouchstart = null, o.ontouchmove = null, k && g.length === 0 && (document.removeEventListener("touchmove", w, B ? { passive: !1 } : void 0), k = !1)) : g.length || Y();
 };
-const J = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-l-family);--modal-content-color: var(--dt-color-content-default);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-below-20);--modal-image-slot-bg-color: none;position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--modal-content-color);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: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--large{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay)}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-c)}}.c-modal .c-modal-imageSlot.c-modal-imageSlot--illustration{display:flex;justify-content:center;align-items:center;height:200px;background-color:var(--modal-image-slot-bg-color)}.c-modal .c-modal-imageSlot.c-modal-imageSlot--illustration ::slotted([slot=image]){width:168px;height:168px;overflow:hidden}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image{overflow:hidden;aspect-ratio:16/9}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--small{aspect-ratio:3/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--large{aspect-ratio:4/3}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image ::slotted([slot=image]){width:100%}@media (min-width: 769px){.c-modal .c-modal-imageSlot.c-modal-imageSlot--image{aspect-ratio:3/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--small{aspect-ratio:4/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--large{aspect-ratio:21/9}}.c-modal .c-modal-imageSlot .c-modal-closeBtn{position:absolute;inset-block-start:0;inset-inline-end:0;margin-block-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d)}.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: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{flex-direction:column}}.c-modal ::slotted([slot=footer]){display:flex;width:100%}.c-modal ::slotted([slot=headerContent]){grid-area:content;padding-inline-start:var(--dt-spacing-e);padding-inline-end:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-d)}.c-modal .c-modal-header{display:grid;grid-template-areas:"back   heading   close" "content content content";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);--modal-header-font-style: normal;font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);font-style:var(--modal-header-font-style);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:16px}@media (min-width: 769px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:22px}}.c-modal .c-modal-heading.c-modal-heading--emphasised{--modal-header-font-size: calc(var(--dt-font-heading-xl-italic-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-italic-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-xl-italic-weight);--modal-header-font-style: var(--dt-font-heading-xl-italic-font-style);font-variation-settings:"slnt" -20}@media (min-width: 769px){.c-modal .c-modal-heading.c-modal-heading--emphasised{--modal-header-font-size: calc(var(--dt-font-heading-xl-italic-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-italic-line-height--wide) * 1px)}}.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 769px){.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 769px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-body-l-size) * 1px);--modal-content-font-weight: var(--dt-font-body-l-weight);--modal-content-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--modal-content-padding-block-end: var(--dt-spacing-e);position:relative;font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 769px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content:has(+slot>footer){padding-block-end:var(--modal-content-padding-block)}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--modal-bg-color) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal.c-modal--pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.c-modal--loading .c-modal-content pie-spinner{display:flex;justify-content:center;align-items:center;padding:var(--dt-spacing-j) calc(var(--dt-spacing-j) + var(--dt-spacing-d))}.c-modal.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}.c-modal .c-modal-backBtn-icon:dir(rtl){transform:rotate(180deg)}.c-modal.c-modal--bg-subtle{--modal-image-slot-bg-color: var(--dt-color-container-subtle)}.c-modal.c-modal--bg-brand-01{--modal-bg-color: var(--dt-color-support-brand-01)}.c-modal.c-modal--bg-brand-02{--modal-bg-color: var(--dt-color-support-brand-02)}.c-modal.c-modal--bg-brand-03{--modal-bg-color: var(--dt-color-support-brand-03)}.c-modal.c-modal--bg-brand-03-subtle{--modal-bg-color: var(--dt-color-support-brand-03-subtle)}.c-modal.c-modal--bg-brand-04{--modal-bg-color: var(--dt-color-support-brand-04)}.c-modal.c-modal--bg-brand-04-subtle{--modal-bg-color: var(--dt-color-support-brand-04-subtle)}.c-modal.c-modal--bg-brand-05{--modal-bg-color: var(--dt-color-support-brand-05)}.c-modal.c-modal--bg-brand-05-subtle{--modal-bg-color: var(--dt-color-support-brand-05-subtle)}.c-modal.c-modal--bg-brand-06{--modal-content-color: var(--dt-color-content-inverse);--modal-bg-color: var(--dt-color-support-brand-06)}.c-modal.c-modal--bg-brand-06-subtle{--modal-bg-color: var(--dt-color-support-brand-06-subtle)}.c-modal.c-modal--bg-brand-08{--modal-bg-color: var(--dt-color-support-brand-08)}.c-modal.c-modal--bg-brand-08-subtle{--modal-bg-color: var(--dt-color-support-brand-08-subtle)}', Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], oo = ["top", "center"], ko = ["image", "illustration"], eo = ["small", "medium", "large"], to = [
+const J = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-l-family);--modal-content-color: var(--dt-color-content-default);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-below-20);--modal-image-slot-bg-color: none;--modal-easing: var(--dt-motion-easing-persistent-functional);--modal-transition-duration: var(--dt-motion-timing-150);--backdrop-transition-duration: var(--dt-motion-timing-200);opacity:0;transform:translateY(-40px);transition:opacity var(--modal-transition-duration) var(--modal-easing),transform var(--modal-transition-duration) var(--modal-easing),display var(--modal-transition-duration) allow-discrete,overlay var(--backdrop-transition-duration) allow-discrete;position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--modal-content-color);background-color:var(--modal-bg-color);padding:0;display:flex;flex-direction:column;--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]{--modal-transition-duration: var(--dt-motion-timing-250);--backdrop-transition-duration: var(--dt-motion-timing-300);opacity:1;transform:translateY(0)}@starting-style{.c-modal[open]{opacity:0;transform:translateY(-40px)}}.c-modal[open]::backdrop{opacity:1}@starting-style{.c-modal[open]::backdrop{opacity:0}}@media (min-width: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--large{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay);opacity:0;transition:opacity var(--backdrop-transition-duration) var(--modal-easing),display var(--backdrop-transition-duration) allow-discrete,overlay var(--backdrop-transition-duration) allow-discrete}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-c)}}.c-modal .c-modal-imageSlot.c-modal-imageSlot--illustration{display:flex;justify-content:center;align-items:center;height:200px;background-color:var(--modal-image-slot-bg-color)}.c-modal .c-modal-imageSlot.c-modal-imageSlot--illustration ::slotted([slot=image]){width:168px;height:168px;overflow:hidden}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image{overflow:hidden;aspect-ratio:16/9}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--small{aspect-ratio:3/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--large{aspect-ratio:4/3}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image ::slotted([slot=image]){width:100%}@media (min-width: 769px){.c-modal .c-modal-imageSlot.c-modal-imageSlot--image{aspect-ratio:3/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--small{aspect-ratio:4/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--large{aspect-ratio:21/9}}.c-modal .c-modal-imageSlot .c-modal-closeBtn{position:absolute;inset-block-start:0;inset-inline-end:0;margin-block-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d)}.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: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{flex-direction:column}}.c-modal ::slotted([slot=footer]){display:flex;width:100%}.c-modal ::slotted([slot=headerContent]){grid-area:content;padding-inline-start:var(--dt-spacing-e);padding-inline-end:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-d)}.c-modal .c-modal-header{display:grid;grid-template-areas:"back   heading   close" "content content content";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);--modal-header-font-style: normal;font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);font-style:var(--modal-header-font-style);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:16px}@media (min-width: 769px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:22px}}.c-modal .c-modal-heading.c-modal-heading--emphasised{--modal-header-font-size: calc(var(--dt-font-heading-xl-italic-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-italic-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-xl-italic-weight);--modal-header-font-style: var(--dt-font-heading-xl-italic-font-style);font-variation-settings:"slnt" -20}@media (min-width: 769px){.c-modal .c-modal-heading.c-modal-heading--emphasised{--modal-header-font-size: calc(var(--dt-font-heading-xl-italic-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-italic-line-height--wide) * 1px)}}.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 769px){.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 769px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-body-l-size) * 1px);--modal-content-font-weight: var(--dt-font-body-l-weight);--modal-content-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--modal-content-padding-block-end: var(--dt-spacing-e);position:relative;font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 769px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content:has(+slot>footer){padding-block-end:var(--modal-content-padding-block)}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--modal-bg-color) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal.c-modal--pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.c-modal--loading .c-modal-content pie-spinner{display:flex;justify-content:center;align-items:center;padding:var(--dt-spacing-j) calc(var(--dt-spacing-j) + var(--dt-spacing-d))}.c-modal.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}.c-modal .c-modal-backBtn-icon:dir(rtl){transform:rotate(180deg)}.c-modal.c-modal--bg-subtle{--modal-image-slot-bg-color: var(--dt-color-container-subtle)}.c-modal.c-modal--bg-brand-01{--modal-bg-color: var(--dt-color-support-brand-01)}.c-modal.c-modal--bg-brand-02{--modal-bg-color: var(--dt-color-support-brand-02)}.c-modal.c-modal--bg-brand-03{--modal-bg-color: var(--dt-color-support-brand-03)}.c-modal.c-modal--bg-brand-03-subtle{--modal-bg-color: var(--dt-color-support-brand-03-subtle)}.c-modal.c-modal--bg-brand-04{--modal-bg-color: var(--dt-color-support-brand-04)}.c-modal.c-modal--bg-brand-04-subtle{--modal-bg-color: var(--dt-color-support-brand-04-subtle)}.c-modal.c-modal--bg-brand-05{--modal-bg-color: var(--dt-color-support-brand-05)}.c-modal.c-modal--bg-brand-05-subtle{--modal-bg-color: var(--dt-color-support-brand-05-subtle)}.c-modal.c-modal--bg-brand-06{--modal-content-color: var(--dt-color-content-inverse);--modal-bg-color: var(--dt-color-support-brand-06)}.c-modal.c-modal--bg-brand-06-subtle{--modal-bg-color: var(--dt-color-support-brand-06-subtle)}.c-modal.c-modal--bg-brand-08{--modal-bg-color: var(--dt-color-support-brand-08)}.c-modal.c-modal--bg-brand-08-subtle{--modal-bg-color: var(--dt-color-support-brand-08-subtle)}@media (prefers-reduced-motion: reduce){.c-modal,.c-modal::backdrop{transition:none;transform:none}}', Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], oo = ["top", "center"], ko = ["image", "illustration"], ao = ["small", "medium", "large"], to = [
   "default",
   "subtle",
   "brand-01",
@@ -95,7 +95,7 @@ const J = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
   "brand-06-subtle",
   "brand-08",
   "brand-08-subtle"
-], L = "pie-modal-close", x = "pie-modal-open", M = "pie-modal-back", ao = "pie-modal-leading-action-click", io = "pie-modal-supporting-action-click", r = {
+], L = "pie-modal-close", _ = "pie-modal-open", M = "pie-modal-back", eo = "pie-modal-leading-action-click", io = "pie-modal-supporting-action-click", r = {
   hasBackButton: !1,
   hasStackedActions: !1,
   headingLevel: "h2",
@@ -110,61 +110,61 @@ const J = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
   backgroundColor: "default",
   imageSlotAspectRatio: "medium"
 };
-var no = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, l = (e, o, t, a) => {
-  for (var i = a > 1 ? void 0 : a ? lo(o, t) : o, m = e.length - 1, p; m >= 0; m--)
-    (p = e[m]) && (i = (a ? p(o, t, i) : p(i)) || i);
-  return a && i && no(o, t, i), i;
+var no = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, l = (a, o, t, e) => {
+  for (var i = e > 1 ? void 0 : e ? lo(o, t) : o, m = a.length - 1, p; m >= 0; m--)
+    (p = a[m]) && (i = (e ? p(o, t, i) : p(i)) || i);
+  return e && i && no(o, t, i), i;
 };
 const b = "pie-modal";
 let n = class extends C {
   constructor() {
-    super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isHeadingEmphasised = r.isHeadingEmphasised, this.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, this.backgroundColor = r.backgroundColor, this.imageSlotAspectRatio = r.imageSlotAspectRatio, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (e) => {
-      e.key === "Escape" && e.preventDefault();
-    }, this._handleDialogLightDismiss = (e) => {
-      if (!this.isDismissible || e.target !== e.currentTarget)
+    super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isHeadingEmphasised = r.isHeadingEmphasised, this.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, this.backgroundColor = r.backgroundColor, this.imageSlotAspectRatio = r.imageSlotAspectRatio, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (a) => {
+      a.key === "Escape" && a.preventDefault();
+    }, this._handleDialogLightDismiss = (a) => {
+      if (!this.isDismissible || a.target !== a.currentTarget)
         return;
       const o = this._dialog.getBoundingClientRect(), {
         top: t = 0,
-        bottom: a = 0,
+        bottom: e = 0,
         left: i = 0,
         right: m = 0
       } = o || {};
-      if (t === 0 && a === 0 && i === 0 && m === 0)
+      if (t === 0 && e === 0 && i === 0 && m === 0)
         return;
-      (e.clientY < t || e.clientY > a || e.clientX < i || e.clientX > m) && (this.isOpen = !1);
+      (a.clientY < t || a.clientY > e || a.clientX < i || a.clientX > m) && (this.isOpen = !1);
     };
   }
   get _modalScrollContainer() {
-    var e;
-    return this._scrollableContainer || (this._scrollableContainer = (e = this._dialog) == null ? void 0 : e.querySelector(".c-modal-scrollContainer")), this._scrollableContainer;
+    var a;
+    return this._scrollableContainer || (this._scrollableContainer = (a = this._dialog) == null ? void 0 : a.querySelector(".c-modal-scrollContainer")), this._scrollableContainer;
   }
   connectedCallback() {
     super.connectedCallback(), this._abortController = new AbortController();
-    const { signal: e } = this._abortController;
-    this.addEventListener("click", (o) => this._handleDialogLightDismiss(o)), this._setupEscKeyListener(), document.addEventListener(x, (o) => this._handleModalOpened(o), { signal: e }), document.addEventListener(L, (o) => this._handleModalClosed(o), { signal: e }), document.addEventListener(M, (o) => this._handleModalClosed(o), { signal: e });
+    const { signal: a } = this._abortController;
+    this.addEventListener("click", (o) => this._handleDialogLightDismiss(o)), this._setupEscKeyListener(), document.addEventListener(_, (o) => this._handleModalOpened(o), { signal: a }), document.addEventListener(L, (o) => this._handleModalClosed(o), { signal: a }), document.addEventListener(M, (o) => this._handleModalClosed(o), { signal: a });
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._abortController.abort(), this._enableBodyScroll(), this._removeEscKeyEventListener();
   }
-  async firstUpdated(e) {
-    (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((a) => a.default)).registerDialog(this._dialog);
+  async firstUpdated(a) {
+    (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((e) => e.default)).registerDialog(this._dialog);
     const { signal: t } = this._abortController;
     this._dialog.addEventListener("close", () => {
       this.isOpen = !1;
-    }, { signal: t }), this._handleModalOpenStateOnFirstRender(e);
+    }, { signal: t }), this._handleModalOpenStateOnFirstRender(a);
   }
-  updated(e) {
-    this._handleModalOpenStateChanged(e), this._handleIsDismissibleChanged(e);
+  updated(a) {
+    this._handleModalOpenStateChanged(a), this._handleIsDismissibleChanged(a);
   }
-  _handleIsDismissibleChanged(e) {
-    const o = e.get("isDismissible"), t = this.isDismissible;
+  _handleIsDismissibleChanged(a) {
+    const o = a.get("isDismissible"), t = this.isDismissible;
     !o && t && this._removeEscKeyEventListener(), o && !t && this._setupEscKeyListener();
   }
   /**
    * Opens the dialog element and disables page scrolling
    */
-  _handleModalOpened(e) {
-    const { targetModal: o } = e.detail;
+  _handleModalOpened(a) {
+    const { targetModal: o } = a.detail;
     if (o === this) {
       if (this._dialog.hasAttribute("open") || !this._dialog.isConnected)
         return;
@@ -176,8 +176,8 @@ let n = class extends C {
   /**
    * Closes the dialog element and re-enables page scrolling
    */
-  _handleModalClosed(e) {
-    const { targetModal: o } = e.detail;
+  _handleModalClosed(a) {
+    const { targetModal: o } = a.detail;
     o === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
   }
   /**
@@ -186,28 +186,28 @@ let n = class extends C {
   _setupEscKeyListener() {
     if (!this._escKeyAbortController && !this.isDismissible) {
       this._escKeyAbortController = new AbortController();
-      const { signal: e } = this._escKeyAbortController;
-      document.addEventListener("keydown", (o) => this._preventModalKeyboardDismissal(o), { signal: e });
+      const { signal: a } = this._escKeyAbortController;
+      document.addEventListener("keydown", (o) => this._preventModalKeyboardDismissal(o), { signal: a });
     }
   }
   /**
    * Removes any event listeners set up that are listening to keyboard events and nulls the existing AbortController.
    */
   _removeEscKeyEventListener() {
-    var e;
-    (e = this._escKeyAbortController) == null || e.abort(), this._escKeyAbortController = null;
+    var a;
+    (a = this._escKeyAbortController) == null || a.abort(), this._escKeyAbortController = null;
   }
   // Handles the value of the isOpen property on first render of the component
-  _handleModalOpenStateOnFirstRender(e) {
-    e.get("isOpen") === void 0 && this.isOpen && u(this, x, { targetModal: this });
+  _handleModalOpenStateOnFirstRender(a) {
+    a.get("isOpen") === void 0 && this.isOpen && u(this, _, { targetModal: this });
   }
   // Handles changes to the modal isOpen property by dispatching any appropriate events
-  _handleModalOpenStateChanged(e) {
-    const o = e.get("isOpen");
-    o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, M, { targetModal: this })) : u(this, L, { targetModal: this }) : u(this, x, { targetModal: this }));
+  _handleModalOpenStateChanged(a) {
+    const o = a.get("isOpen");
+    o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, M, { targetModal: this })) : u(this, L, { targetModal: this }) : u(this, _, { targetModal: this }));
   }
-  _handleActionClick(e) {
-    e === "leading" ? (this._dialog.close("leading"), u(this, ao, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), u(this, io, { targetModal: this }));
+  _handleActionClick(a) {
+    a === "leading" ? (this._dialog.close("leading"), u(this, eo, { targetModal: this })) : a === "supporting" && (this._dialog.close("supporting"), u(this, io, { targetModal: this }));
   }
   /**
    * Return focus to the specified element, providing the selector is valid
@@ -215,8 +215,8 @@ let n = class extends C {
    */
   _returnFocus() {
     var o, t;
-    const e = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
-    e && ((t = document.querySelector(e)) == null || t.focus());
+    const a = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
+    a && ((t = document.querySelector(a)) == null || t.focus());
   }
   /**
    * Enables body scroll by unlocking the scroll container.
@@ -231,8 +231,8 @@ let n = class extends C {
     this._modalScrollContainer && X(this._modalScrollContainer);
   }
   _getHeaderButtonVariant() {
-    const { imageSlotMode: e, backgroundColor: o } = this, t = !!e, a = !!o && o !== "default", i = o === "brand-06";
-    return t ? e === "illustration" && !a ? "ghost-secondary" : i ? "ghost-inverse" : "secondary" : i ? "ghost-inverse" : "ghost-secondary";
+    const { imageSlotMode: a, backgroundColor: o } = this, t = !!a, e = !!o && o !== "default", i = o === "brand-06";
+    return t ? a === "illustration" && !e ? "ghost-secondary" : i ? "ghost-inverse" : "secondary" : i ? "ghost-inverse" : "ghost-secondary";
   }
   /**
    * Template for the close button element. Called within the
@@ -244,13 +244,13 @@ let n = class extends C {
     var o, t;
     if (!this.isDismissible)
       return c;
-    const e = this._getHeaderButtonVariant();
+    const a = this._getHeaderButtonVariant();
     return s`
             <pie-icon-button
                 @click="${() => {
       this.isOpen = !1;
     }}"
-                variant="${e}"
+                variant="${a}"
                 class="c-modal-closeBtn"
                 .aria=${h((o = this.aria) == null ? void 0 : o.close) ? { label: (t = this.aria) == null ? void 0 : t.close } : c}
                 data-test-id="modal-close-button">
@@ -258,9 +258,9 @@ let n = class extends C {
             </pie-icon-button>`;
   }
   renderModalImageSlot() {
-    const { imageSlotMode: e, imageSlotAspectRatio: o } = this;
-    return e ? s`
-            <div class="c-modal-imageSlot c-modal-imageSlot--${e} c-modal-imageSlot--${o}" data-test-id="modal-image">
+    const { imageSlotMode: a, imageSlotAspectRatio: o } = this;
+    return a ? s`
+            <div class="c-modal-imageSlot c-modal-imageSlot--${a} c-modal-imageSlot--${o}" data-test-id="modal-image">
                 <slot name="image"></slot>
                 ${this.renderCloseButton()}
             </div>
@@ -276,13 +276,13 @@ let n = class extends C {
     var o, t;
     if (!this.hasBackButton)
       return c;
-    const e = this._getHeaderButtonVariant();
+    const a = this._getHeaderButtonVariant();
     return s`
             <pie-icon-button
                 @click="${() => {
       this._backButtonClicked = !0, this.isOpen = !1;
     }}"
-                variant="${e}"
+                variant="${a}"
                 class="c-modal-backBtn"
                 .aria=${h((o = this.aria) == null ? void 0 : o.back) ? { label: (t = this.aria) == null ? void 0 : t.back } : c}
                 data-test-id="modal-back-button">
@@ -300,11 +300,11 @@ let n = class extends C {
    * @private
    */
   renderLeadingAction() {
-    const { ariaLabel: e, text: o, variant: t = "primary" } = this.leadingAction || {};
+    const { ariaLabel: a, text: o, variant: t = "primary" } = this.leadingAction || {};
     return o ? s`
             <pie-button
                 variant="${t}"
-                aria-label="${h(e)}"
+                aria-label="${h(a)}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("leading")}"
@@ -324,12 +324,12 @@ let n = class extends C {
    * @private
    */
   renderSupportingAction() {
-    var a;
-    const { ariaLabel: e, text: o, variant: t = "ghost" } = this.supportingAction || {};
-    return !o || !((a = this.leadingAction) != null && a.text) ? c : s`
+    var e;
+    const { ariaLabel: a, text: o, variant: t = "ghost" } = this.supportingAction || {};
+    return !o || !((e = this.leadingAction) != null && e.text) ? c : s`
             <pie-button
                 variant="${t}"
-                aria-label="${h(e)}"
+                aria-label="${h(a)}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("supporting")}"
@@ -345,14 +345,14 @@ let n = class extends C {
    * @private
    */
   renderModalFooter() {
-    var a, i;
-    const e = (a = this.leadingAction) == null ? void 0 : a.text;
-    e || (i = this.supportingAction) != null && i.text && console.warn("You cannot have a supporting action without a leading action. If you only need one button then use a leading action instead.");
+    var e, i;
+    const a = (e = this.leadingAction) == null ? void 0 : e.text;
+    a || (i = this.supportingAction) != null && i.text && console.warn("You cannot have a supporting action without a leading action. If you only need one button then use a leading action instead.");
     const o = {
       "c-modal-footer": !0,
       "c-modal-footer--stackedActions": this.hasStackedActions
-    }, t = e ? s`
-            <footer class="${_(o)}" data-test-id="pie-modal-footer">
+    }, t = a ? s`
+            <footer class="${x(o)}" data-test-id="pie-modal-footer">
                 ${this.renderLeadingAction()}
                 ${this.renderSupportingAction()}
             </footer>` : c;
@@ -368,8 +368,8 @@ let n = class extends C {
   renderLoadingSpinner() {
     if (!this.isLoading)
       return c;
-    const e = this.backgroundColor === "brand-06" ? "inverse" : "secondary";
-    return s`<pie-spinner size="xlarge" variant="${e}"></pie-spinner>`;
+    const a = this.backgroundColor === "brand-06" ? "inverse" : "secondary";
+    return s`<pie-spinner size="xlarge" variant="${a}"></pie-spinner>`;
   }
   /**
    * Renders the modal inner content and footer of the modal.
@@ -390,22 +390,22 @@ let n = class extends C {
    * @private
    */
   renderHeading() {
-    const { heading: e, headingLevel: o, isHeadingEmphasised: t } = this, a = H(o);
+    const { heading: a, headingLevel: o, isHeadingEmphasised: t } = this, e = H(o);
     return s`
-            <${a} id="modal-heading" class="${_({
+            <${e} id="modal-heading" class="${x({
       "c-modal-heading": !0,
       "c-modal-heading--emphasised": t
     })}" part="heading" data-test-id="modal-heading">
-                ${e}
-            </${a}>
+                ${a}
+            </${e}>
         `;
   }
   render() {
     const {
-      aria: e,
+      aria: a,
       isDismissible: o,
       isFooterPinned: t,
-      isFullWidthBelowMid: a,
+      isFullWidthBelowMid: e,
       isLoading: i,
       position: m,
       size: p,
@@ -418,15 +418,15 @@ let n = class extends C {
       "c-modal--dismissible": o,
       "c-modal--loading": i,
       "c-modal--pinnedFooter": t,
-      "c-modal--fullWidthBelowMid": a,
+      "c-modal--fullWidthBelowMid": e,
       [`c-modal--bg-${E}`]: !0
-    }, A = i && (e == null ? void 0 : e.loading) || void 0;
+    }, A = i && (a == null ? void 0 : a.loading) || void 0;
     return s`
         <dialog
             id="dialog"
             aria-label="${h(A)}"
             aria-labelledby="${h(A ? void 0 : "modal-heading")}"
-            class="${_(I)}"
+            class="${x(I)}"
             aria-live="polite"
             aria-busy="${i ? "true" : "false"}"
             data-test-id="pie-modal">
@@ -507,7 +507,7 @@ l([
 ], n.prototype, "imageSlotMode", 2);
 l([
   d({ type: String }),
-  y(b, eo, r.imageSlotAspectRatio)
+  y(b, ao, r.imageSlotAspectRatio)
 ], n.prototype, "imageSlotAspectRatio", 2);
 l([
   R("dialog")
@@ -518,14 +518,14 @@ n = l([
 export {
   M as ON_MODAL_BACK_EVENT,
   L as ON_MODAL_CLOSE_EVENT,
-  ao as ON_MODAL_LEADING_ACTION_CLICK,
-  x as ON_MODAL_OPEN_EVENT,
+  eo as ON_MODAL_LEADING_ACTION_CLICK,
+  _ as ON_MODAL_OPEN_EVENT,
   io as ON_MODAL_SUPPORTING_ACTION_CLICK,
   n as PieModal,
   to as backgroundColors,
   r as defaultProps,
   Q as headingLevels,
-  eo as imageSlotAspectRatios,
+  ao as imageSlotAspectRatios,
   ko as imageSlotModes,
   oo as positions,
   Z as sizes

package/dist/react.d.ts

@@ -160,7 +160,7 @@ export declare const ON_MODAL_OPEN_EVENT = "pie-modal-open";
  */
 export declare const ON_MODAL_SUPPORTING_ACTION_CLICK = "pie-modal-supporting-action-click";
 
-export declare const PieModal: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<ModalProps> & React_2.RefAttributes<PieModal_2> & PieModalEvents & ReactBaseType>;
+export declare const PieModal: React_2.ForwardRefExoticComponent<React_2.PropsWithChildren<Omit<React_2.PropsWithoutRef<ModalProps>, "children">> & React_2.RefAttributes<PieModal_2> & PieModalEvents & ReactBaseType>;
 
 /**
  * @tagname pie-modal

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "1.23.0",
+  "version": "1.24.1",
   "description": "PIE design system modal built using web components",
   "repository": {
     "type": "git",
@@ -48,11 +48,11 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeat/pie-design-tokens": "7.10.2",
-    "@justeattakeaway/pie-button": "1.11.0",
+    "@justeattakeaway/pie-button": "1.11.1",
     "@justeattakeaway/pie-components-config": "0.21.0",
     "@justeattakeaway/pie-css": "0.26.1",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
-    "@justeattakeaway/pie-text-input": "0.29.11",
+    "@justeattakeaway/pie-text-input": "0.29.12",
     "@justeattakeaway/pie-wrapper-react": "0.14.3",
     "@types/body-scroll-lock": "3.1.2",
     "cem-plugin-module-file-extensions": "0.0.5"
@@ -61,10 +61,10 @@
     "extends": "../../../package.json"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "1.11.0",
-    "@justeattakeaway/pie-icon-button": "2.5.0",
-    "@justeattakeaway/pie-icons-webc": "1.18.2",
-    "@justeattakeaway/pie-spinner": "1.3.7",
+    "@justeattakeaway/pie-button": "1.11.1",
+    "@justeattakeaway/pie-icon-button": "2.6.0",
+    "@justeattakeaway/pie-icons-webc": "1.19.0",
+    "@justeattakeaway/pie-spinner": "1.4.0",
     "@justeattakeaway/pie-webc-core": "6.0.1",
     "body-scroll-lock": "3.1.5",
     "dialog-polyfill": "0.5.6"

package/src/modal.scss

@@ -17,6 +17,9 @@
     --modal-bg-color: var(--dt-color-container-default);
     --modal-elevation: var(--dt-elevation-below-20);
     --modal-image-slot-bg-color: none;
+    --modal-easing: var(--dt-motion-easing-persistent-functional);
+    --modal-transition-duration: var(--dt-motion-timing-150);
+    --backdrop-transition-duration: var(--dt-motion-timing-200);
 
     &:focus-visible {
         outline: none;
@@ -29,13 +32,34 @@
         }
     }
 
+    opacity: 0;
+    transform: translateY(-40px);
+    transition:
+        opacity var(--modal-transition-duration) var(--modal-easing),
+        transform var(--modal-transition-duration) var(--modal-easing),
+        display var(--modal-transition-duration) allow-discrete,
+        overlay var(--backdrop-transition-duration) allow-discrete;
+
 
     &[open] {
-        // We only apply this when the modal is open,
-        // otherwise it interferes with the native
-        // `display: none;` on the dialog element.
-        display: flex;
-        flex-direction: column;
+        --modal-transition-duration: var(--dt-motion-timing-250);
+        --backdrop-transition-duration: var(--dt-motion-timing-300);
+
+        opacity: 1;
+        transform: translateY(0);
+
+        @starting-style {
+            opacity: 0;
+            transform: translateY(-40px);
+        }
+
+        &::backdrop {
+            opacity: 1;
+    
+            @starting-style {
+                opacity: 0;
+            }
+        }
     }
 
     position: fixed;
@@ -46,8 +70,9 @@
     font-family: var(--modal-font);
     color: var(--modal-content-color);
     background-color: var(--modal-bg-color);
-
     padding: 0;
+    display: flex;
+    flex-direction: column;
 
     --modal-margin-none: var(--dt-spacing-none);
     --modal-margin-small: var(--dt-spacing-g);
@@ -123,6 +148,11 @@
 
     &::backdrop {
         background: var(--dt-color-overlay);
+        opacity: 0;
+        transition:
+            opacity var(--backdrop-transition-duration) var(--modal-easing),
+            display var(--backdrop-transition-duration) allow-discrete,
+            overlay var(--backdrop-transition-duration) allow-discrete;
     }
 
     // TODO: Can be removed along with pie-design-tokens dependency
@@ -453,4 +483,12 @@
     &.c-modal--bg-brand-08 { --modal-bg-color: var(--dt-color-support-brand-08); }
 
     &.c-modal--bg-brand-08-subtle { --modal-bg-color: var(--dt-color-support-brand-08-subtle); }
+
+    @media (prefers-reduced-motion: reduce) {
+        &,
+        &::backdrop {
+          transition: none;
+          transform: none;
+        }
+      }
 }

package/src/react.ts

@@ -29,5 +29,5 @@ type PieModalEvents = {
     onPieModalSupportingActionClick?: (event: CustomEvent) => void;
 };
 
-export const PieModal = PieModalReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<ModalProps>
+export const PieModal = PieModalReact as React.ForwardRefExoticComponent<React.PropsWithChildren<Omit<React.PropsWithoutRef<ModalProps>, 'children'>>
     & React.RefAttributes<PieModalLit> & PieModalEvents & ReactBaseType>;