@justeattakeaway/pie-modal 1.20.1 → 1.22.0

package/README.md

@@ -16,6 +16,7 @@
   - [Properties](#properties)
   - [Slots](#slots)
   - [CSS Variables](#css-variables)
+  - [CSS Parts](#css-parts)
   - [Events](#events)
 - [Legacy browser support](#legacy-browser-support)
 - [Usage Examples](#usage-examples)
@@ -54,18 +55,40 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 | `position`                       | `"center"`, `"top"`                               | The position of the modal; this controls where it will appear on the page.                                                                                                                                                          | `"center"`  |
 | `returnFocusAfterCloseSelector` | —                                                 | If provided, focus will be sent to the first element that matches this selector when the modal is closed. If not provided, the `dialog` element will return focus to the element that opened the modal.                            | —           |
 | `size`                           | `"small"`, `"medium"`, `"large"`                  | Determines the maximum width of the modal. Large modals will expand to fill the entire page at narrow viewports.                                                                                                                    | `"medium"`  |
-| `backgroundColor`                | `"default"`, `"subtle"`, `"brand-01"`, `"brand-02"`, `"brand-03"`, `"brand-03-subtle"`, `"brand-04"`, `"brand-04-subtle"`, `"brand-05"`, `"brand-05-subtle"`, `"brand-06"`, `"brand-06-subtle"`, `"brand-08"`, `"brand-08-subtle"` | Sets the background color for the modal.                                                                                                                                                                         | `"default"` |
+| `backgroundColor`                | `"default"`, `"subtle"`, `"brand-01"`, `"brand-02"`, `"brand-03"`, `"brand-03-subtle"`, `"brand-04"`, `"brand-04-subtle"`, `"brand-05"`, `"brand-05-subtle"`, `"brand-06"`, `"brand-06-subtle"`, `"brand-08"`, `"brand-08-subtle"` | Sets the background color for the modal.           | `"default"` |
+| `imageSlotMode`                | `"image"`, `"illustration"`                         | This property controls if and how the image slot will display its content. `"image"` will display the slot content in a rectangle, covering the entire width of the modal, while `"illustration"` will display the slot content inside a square container. If not specified it will not display the image slot content. | —           |
+| `imageSlotAspectRatio`         | `"small"`, `"medium"`, `"large"`                    | If the `imageSlotMode` is set to `image`, this property controls the aspect ratio of the image container. The aspect ratios are the following: `"small"` : `4:1`, `"medium"` : `3:1`, `"large"` : `21:9`.                           | `"medium"`     |
 
 ### Slots
 | Slot      | Description                                                        |
 |-----------|--------------------------------------------------------------------|
 | `default` | The default slot is used to pass content into the modal component. |
+| `image`   | Used to pass optional content to the modal component image area.  |
 | `headerContent` | Used to pass additional content to the modal header that scrolls with the heading and controls. |
 | `footer`  | Used to pass optional content to the modal component footer area.  |
 
+#### Slots display order
+
+The order of content rendering is as follows:
+1. `image` slot (if provided)
+2. Modal header (including `heading` prop and `headerContent` slot, if provided)
+3. `default` slot (main content of the modal)
+4. `footer` slot (if provided)
+
+#### Image Slot Guidelines
+> The `image` slot is designed to accommodate various types of visual content, such as images or illustrations.
+> When using the image slot, please ensure the content is appropriately styled to fit within one of the `imageSlotMode`.
+> The image slot can handle any type of content, such as IMG tags, SVGs, or other HTML elements.
+> Animations or videos can be used, however be cautious about performance implications.
+
 ### CSS Variables
 This component does not expose any CSS variables for style overrides.
 
+### CSS Parts
+| Part      | Description                                                  |
+|-----------|--------------------------------------------------------------|
+| `heading` | This part allows consumers to fully rewrite the styles of the heading element. |
+
 ### Events
 | Event                                 | Type          | Description                                               |
 |---------------------------------------|---------------|-----------------------------------------------------------|

package/custom-elements.json

@@ -36,6 +36,22 @@
           },
           "default": "['top', 'center']"
         },
+        {
+          "kind": "variable",
+          "name": "imageSlotModes",
+          "type": {
+            "text": "['image', 'illustration']"
+          },
+          "default": "['image', 'illustration']"
+        },
+        {
+          "kind": "variable",
+          "name": "imageSlotAspectRatios",
+          "type": {
+            "text": "['small', 'medium', 'large']"
+          },
+          "default": "['small', 'medium', 'large']"
+        },
         {
           "kind": "variable",
           "name": "backgroundColors",
@@ -95,7 +111,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    hasBackButton: false,\n    hasStackedActions: false,\n    headingLevel: 'h2',\n    isOpen: false,\n    isDismissible: false,\n    isHeadingEmphasised: false,\n    isFooterPinned: true,\n    isFullWidthBelowMid: false,\n    isLoading: false,\n    position: 'center',\n    size: 'medium',\n    backgroundColor: 'default',\n}"
+          "default": "{\n    hasBackButton: false,\n    hasStackedActions: false,\n    headingLevel: 'h2',\n    isOpen: false,\n    isDismissible: false,\n    isHeadingEmphasised: false,\n    isFooterPinned: true,\n    isFullWidthBelowMid: false,\n    isLoading: false,\n    position: 'center',\n    size: 'medium',\n    backgroundColor: 'default',\n    imageSlotAspectRatio: 'medium',\n}"
         }
       ],
       "exports": [
@@ -123,6 +139,22 @@
             "module": "src/defs.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "imageSlotModes",
+          "declaration": {
+            "name": "imageSlotModes",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "imageSlotAspectRatios",
+          "declaration": {
+            "name": "imageSlotAspectRatios",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "backgroundColors",
@@ -304,6 +336,19 @@
               "name": "backgroundColor",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "imageSlotMode",
+              "type": {
+                "text": "ModalProps['imageSlotMode']"
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "imageSlotAspectRatio",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "_dialog",
@@ -532,7 +577,7 @@
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "'ghost-secondary' | 'ghost-inverse'"
+                  "text": "'ghost-secondary' | 'ghost-inverse' | 'secondary'"
                 }
               }
             },
@@ -547,6 +592,16 @@
               },
               "description": "Template for the close button element. Called within the\nmain render function."
             },
+            {
+              "kind": "method",
+              "name": "renderModalImageSlot",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult | typeof nothing"
+                }
+              }
+            },
             {
               "kind": "method",
               "name": "renderBackButton",

package/dist/index.d.ts

@@ -28,12 +28,16 @@ declare type AriaProps = {
 
 export declare const backgroundColors: readonly ["default", "subtle", "brand-01", "brand-02", "brand-03", "brand-03-subtle", "brand-04", "brand-04-subtle", "brand-05", "brand-05-subtle", "brand-06", "brand-06-subtle", "brand-08", "brand-08-subtle"];
 
-export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
+export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector' | 'imageSlotMode'>>;
 
 export declare const defaultProps: DefaultProps;
 
 export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 
+export declare const imageSlotAspectRatios: readonly ["small", "medium", "large"];
+
+export declare const imageSlotModes: readonly ["image", "illustration"];
+
 export declare type ModalActionType = 'leading' | 'supporting';
 
 export declare interface ModalEventDetail {
@@ -114,6 +118,14 @@ export declare type ModalProps = {
      * The background color for the modal.
      */
     backgroundColor?: typeof backgroundColors[number];
+    /**
+     * The mode of the image slot; this controls whether the slot is treated as an image or an illustration.
+     */
+    imageSlotMode?: typeof imageSlotModes[number];
+    /**
+     * The aspect ratio of the image slot; applies only when `imageSlotMode` is set to `image`.
+     */
+    imageSlotAspectRatio?: typeof imageSlotAspectRatios[number];
 };
 
 /**
@@ -180,6 +192,8 @@ export declare class PieModal extends PieElement implements ModalProps {
     size: "medium" | "large" | "small";
     supportingAction: ModalProps['supportingAction'];
     backgroundColor: "default" | "subtle" | "brand-01" | "brand-02" | "brand-03" | "brand-03-subtle" | "brand-04" | "brand-04-subtle" | "brand-05" | "brand-05-subtle" | "brand-06" | "brand-06-subtle" | "brand-08" | "brand-08-subtle";
+    imageSlotMode: ModalProps['imageSlotMode'];
+    imageSlotAspectRatio: "medium" | "large" | "small";
     private _dialog;
     private _scrollableContainer;
     private _backButtonClicked;
@@ -239,6 +253,7 @@ export declare class PieModal extends PieElement implements ModalProps {
      * @private
      */
     private renderCloseButton;
+    private renderModalImageSlot;
     /**
      * Template for the back button element. Called within the
      * main render function.

package/dist/index.js

@@ -1,86 +1,86 @@
-import { LitElement as P, unsafeCSS as T, nothing as m } from "lit";
-import { html as s, unsafeStatic as K } from "lit/static-html.js";
-import { property as d, query as I } from "lit/decorators.js";
-import { classMap as C } from "lit/directives/class-map.js";
+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 S } 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";
-import { requiredProperty as H, validPropertyValues as _, safeCustomElement as N, dispatchCustomEvent as u } from "@justeattakeaway/pie-webc-core";
+import { requiredProperty as N, validPropertyValues as y, safeCustomElement as W, dispatchCustomEvent as u } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
 import "@justeattakeaway/pie-spinner";
-const w = class w extends P {
+const _ = class _ extends T {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", w.v);
+    this.getAttribute("v") || this.setAttribute("v", _.v);
   }
 };
-w.v = "1.20.1";
-let B = w;
-function W(e) {
-  if (Array.isArray(e)) {
-    for (var o = 0, t = Array(e.length); o < e.length; o++)
-      t[o] = e[o];
-    return t;
+_.v = "1.22.0";
+let x = _;
+function V(t) {
+  if (Array.isArray(t)) {
+    for (var o = 0, e = Array(t.length); o < t.length; o++)
+      e[o] = t[o];
+    return e;
   } else
-    return Array.from(e);
+    return Array.from(t);
 }
-var z = !1;
+var B = !1;
 if (typeof window < "u") {
-  var S = {
+  var z = {
     get passive() {
-      z = !0;
+      B = !0;
     }
   };
-  window.addEventListener("testPassive", null, S), window.removeEventListener("testPassive", null, S);
+  window.addEventListener("testPassive", null, z), window.removeEventListener("testPassive", null, z);
 }
-var M = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), g = [], y = !1, $ = -1, b = void 0, f = void 0, D = function(o) {
-  return g.some(function(t) {
-    return !!(t.options.allowTouchMove && t.options.allowTouchMove(o));
+var O = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), g = [], k = !1, $ = -1, f = void 0, v = void 0, D = function(o) {
+  return g.some(function(e) {
+    return !!(e.options.allowTouchMove && e.options.allowTouchMove(o));
   });
-}, k = function(o) {
-  var t = o || window.event;
-  return D(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
-}, V = function(o) {
-  if (f === void 0) {
-    var t = !1, a = window.innerWidth - document.documentElement.clientWidth;
-    t && a > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = a + "px");
-  }
-  b === void 0 && (b = document.body.style.overflow, document.body.style.overflow = "hidden");
-}, j = function() {
-  f !== void 0 && (document.body.style.paddingRight = f, f = void 0), b !== void 0 && (document.body.style.overflow = b, b = void 0);
-}, R = function(o) {
+}, w = function(o) {
+  var e = o || window.event;
+  return D(e.target) || e.touches.length > 1 ? !0 : (e.preventDefault && e.preventDefault(), !1);
+}, j = function(o) {
+  if (v === void 0) {
+    var e = !1, a = window.innerWidth - document.documentElement.clientWidth;
+    e && a > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = a + "px");
+  }
+  f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
+}, Y = function() {
+  v !== void 0 && (document.body.style.paddingRight = v, v = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
+}, q = function(o) {
   return o ? o.scrollHeight - o.scrollTop <= o.clientHeight : !1;
-}, Y = function(o, t) {
+}, U = function(o, e) {
   var a = o.targetTouches[0].clientY - $;
-  return D(o.target) ? !1 : t && t.scrollTop === 0 && a > 0 || R(t) && a < 0 ? k(o) : (o.stopPropagation(), !0);
-}, q = function(o, t) {
+  return D(o.target) ? !1 : e && e.scrollTop === 0 && a > 0 || q(e) && a < 0 ? w(o) : (o.stopPropagation(), !0);
+}, X = function(o, e) {
   if (!o) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
     return;
   }
-  if (!g.some(function(n) {
-    return n.targetElement === o;
+  if (!g.some(function(i) {
+    return i.targetElement === o;
   })) {
     var a = {
       targetElement: o,
       options: {}
     };
-    g = [].concat(W(g), [a]), M ? (o.ontouchstart = function(n) {
-      n.targetTouches.length === 1 && ($ = n.targetTouches[0].clientY);
-    }, o.ontouchmove = function(n) {
-      n.targetTouches.length === 1 && Y(n, o);
-    }, y || (document.addEventListener("touchmove", k, z ? { passive: !1 } : void 0), y = !0)) : V();
+    g = [].concat(V(g), [a]), O ? (o.ontouchstart = function(i) {
+      i.targetTouches.length === 1 && ($ = i.targetTouches[0].clientY);
+    }, o.ontouchmove = function(i) {
+      i.targetTouches.length === 1 && U(i, o);
+    }, k || (document.addEventListener("touchmove", w, B ? { passive: !1 } : void 0), k = !0)) : j();
   }
-}, U = function(o) {
+}, G = function(o) {
   if (!o) {
     console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
     return;
   }
-  g = g.filter(function(t) {
-    return t.targetElement !== o;
-  }), M ? (o.ontouchstart = null, o.ontouchmove = null, y && g.length === 0 && (document.removeEventListener("touchmove", k, z ? { passive: !1 } : void 0), y = !1)) : g.length || j();
+  g = g.filter(function(e) {
+    return e.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 X = '*,*: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);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-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-l-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-l-italic-weight);--modal-header-font-style: var(--dt-font-heading-l-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-l-italic-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-l-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-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-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);--modal-content-min-block-size: var(--dt-spacing-j);position:relative;min-block-size:calc(var(--modal-content-min-block-size) + var(--modal-content-padding-block) + var(--modal-content-padding-block-end));font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 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);min-block-size:var(--modal-content-min-block-size)}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--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{position:absolute;left:50%;top:calc(50% - (var(--modal-content-padding-block-end) - var(--modal-content-padding-block)) / 2);transform:translate(-50%,-50%)}.c-modal.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}.c-modal.c-modal--loading .c-modal-content:not(:last-child) pie-spinner{top:50%}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}.c-modal .c-modal-backBtn-icon:dir(rtl){transform:rotate(180deg)}.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)}', G = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], Z = [
+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: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-imageSlot--image ::slotted([slot=image]){width:100%}.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-l-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-l-italic-weight);--modal-header-font-style: var(--dt-font-heading-l-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-l-italic-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-l-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);--modal-content-min-block-size: var(--dt-spacing-j);position:relative;min-block-size:calc(var(--modal-content-min-block-size) + var(--modal-content-padding-block) + var(--modal-content-padding-block-end));font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 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);min-block-size:var(--modal-content-min-block-size)}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--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{position:absolute;left:50%;top:calc(50% - (var(--modal-content-padding-block-end) - var(--modal-content-padding-block)) / 2);transform:translate(-50%,-50%)}.c-modal.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}.c-modal.c-modal--loading .c-modal-content:not(:last-child) pie-spinner{top:50%}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}.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"], to = ["small", "medium", "large"], eo = [
   "default",
   "subtle",
   "brand-01",
@@ -95,7 +95,7 @@ const X = '*,*: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", O = "pie-modal-back", oo = "pie-modal-leading-action-click", eo = "pie-modal-supporting-action-click", r = {
+], L = "pie-modal-close", C = "pie-modal-open", M = "pie-modal-back", ao = "pie-modal-leading-action-click", io = "pie-modal-supporting-action-click", r = {
   hasBackButton: !1,
   hasStackedActions: !1,
   headingLevel: "h2",
@@ -107,63 +107,64 @@ const X = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
   isLoading: !1,
   position: "center",
   size: "medium",
-  backgroundColor: "default"
+  backgroundColor: "default",
+  imageSlotAspectRatio: "medium"
 };
-var to = Object.defineProperty, ao = Object.getOwnPropertyDescriptor, l = (e, o, t, a) => {
-  for (var n = a > 1 ? void 0 : a ? ao(o, t) : o, c = e.length - 1, p; c >= 0; c--)
-    (p = e[c]) && (n = (a ? p(o, t, n) : p(n)) || n);
-  return a && n && to(o, t, n), n;
+var no = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, l = (t, o, e, a) => {
+  for (var i = a > 1 ? void 0 : a ? lo(o, e) : o, m = t.length - 1, p; m >= 0; m--)
+    (p = t[m]) && (i = (a ? p(o, e, i) : p(i)) || i);
+  return a && i && no(o, e, i), i;
 };
-const v = "pie-modal";
-let i = class extends B {
+const b = "pie-modal";
+let n = class extends x {
   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._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 = (t) => {
+      t.key === "Escape" && t.preventDefault();
+    }, this._handleDialogLightDismiss = (t) => {
+      if (!this.isDismissible || t.target !== t.currentTarget)
         return;
       const o = this._dialog.getBoundingClientRect(), {
-        top: t = 0,
+        top: e = 0,
         bottom: a = 0,
-        left: n = 0,
-        right: c = 0
+        left: i = 0,
+        right: m = 0
       } = o || {};
-      if (t === 0 && a === 0 && n === 0 && c === 0)
+      if (e === 0 && a === 0 && i === 0 && m === 0)
         return;
-      (e.clientY < t || e.clientY > a || e.clientX < n || e.clientX > c) && (this.isOpen = !1);
+      (t.clientY < e || t.clientY > a || t.clientX < i || t.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 t;
+    return this._scrollableContainer || (this._scrollableContainer = (t = this._dialog) == null ? void 0 : t.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(O, (o) => this._handleModalClosed(o), { signal: e });
+    const { signal: t } = this._abortController;
+    this.addEventListener("click", (o) => this._handleDialogLightDismiss(o)), this._setupEscKeyListener(), document.addEventListener(C, (o) => this._handleModalOpened(o), { signal: t }), document.addEventListener(L, (o) => this._handleModalClosed(o), { signal: t }), document.addEventListener(M, (o) => this._handleModalClosed(o), { signal: t });
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._abortController.abort(), this._enableBodyScroll(), this._removeEscKeyEventListener();
   }
-  async firstUpdated(e) {
+  async firstUpdated(t) {
     (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((a) => a.default)).registerDialog(this._dialog);
-    const { signal: t } = this._abortController;
+    const { signal: e } = this._abortController;
     this._dialog.addEventListener("close", () => {
       this.isOpen = !1;
-    }, { signal: t }), this._handleModalOpenStateOnFirstRender(e);
+    }, { signal: e }), this._handleModalOpenStateOnFirstRender(t);
   }
-  updated(e) {
-    this._handleModalOpenStateChanged(e), this._handleIsDismissibleChanged(e);
+  updated(t) {
+    this._handleModalOpenStateChanged(t), this._handleIsDismissibleChanged(t);
   }
-  _handleIsDismissibleChanged(e) {
-    const o = e.get("isDismissible"), t = this.isDismissible;
-    !o && t && this._removeEscKeyEventListener(), o && !t && this._setupEscKeyListener();
+  _handleIsDismissibleChanged(t) {
+    const o = t.get("isDismissible"), e = this.isDismissible;
+    !o && e && this._removeEscKeyEventListener(), o && !e && this._setupEscKeyListener();
   }
   /**
    * Opens the dialog element and disables page scrolling
    */
-  _handleModalOpened(e) {
-    const { targetModal: o } = e.detail;
+  _handleModalOpened(t) {
+    const { targetModal: o } = t.detail;
     if (o === this) {
       if (this._dialog.hasAttribute("open") || !this._dialog.isConnected)
         return;
@@ -175,8 +176,8 @@ let i = class extends B {
   /**
    * Closes the dialog element and re-enables page scrolling
    */
-  _handleModalClosed(e) {
-    const { targetModal: o } = e.detail;
+  _handleModalClosed(t) {
+    const { targetModal: o } = t.detail;
     o === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
   }
   /**
@@ -185,52 +186,53 @@ let i = class extends B {
   _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: t } = this._escKeyAbortController;
+      document.addEventListener("keydown", (o) => this._preventModalKeyboardDismissal(o), { signal: t });
     }
   }
   /**
    * 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 t;
+    (t = this._escKeyAbortController) == null || t.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(t) {
+    t.get("isOpen") === void 0 && this.isOpen && u(this, C, { 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, O, { targetModal: this })) : u(this, L, { targetModal: this }) : u(this, x, { targetModal: this }));
+  _handleModalOpenStateChanged(t) {
+    const o = t.get("isOpen");
+    o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, M, { targetModal: this })) : u(this, L, { targetModal: this }) : u(this, C, { targetModal: this }));
   }
-  _handleActionClick(e) {
-    e === "leading" ? (this._dialog.close("leading"), u(this, oo, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), u(this, eo, { targetModal: this }));
+  _handleActionClick(t) {
+    t === "leading" ? (this._dialog.close("leading"), u(this, ao, { targetModal: this })) : t === "supporting" && (this._dialog.close("supporting"), u(this, io, { targetModal: this }));
   }
   /**
    * Return focus to the specified element, providing the selector is valid
    * and the chosen element can be found.
    */
   _returnFocus() {
-    var o, t;
-    const e = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
-    e && ((t = document.querySelector(e)) == null || t.focus());
+    var o, e;
+    const t = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
+    t && ((e = document.querySelector(t)) == null || e.focus());
   }
   /**
    * Enables body scroll by unlocking the scroll container.
    */
   _enableBodyScroll() {
-    this._scrollableContainer && U(this._scrollableContainer);
+    this._scrollableContainer && G(this._scrollableContainer);
   }
   /**
    * Disables body scroll by locking the scroll container.
    */
   _disableBodyScroll() {
-    this._modalScrollContainer && q(this._modalScrollContainer);
+    this._modalScrollContainer && X(this._modalScrollContainer);
   }
   _getHeaderButtonVariant() {
-    return this.backgroundColor === "brand-06" ? "ghost-inverse" : "ghost-secondary";
+    const { imageSlotMode: t, backgroundColor: o } = this, e = !!t, a = !!o && o !== "default", i = o === "brand-06";
+    return e ? t === "illustration" && !a ? "ghost-secondary" : i ? "ghost-inverse" : "secondary" : i ? "ghost-inverse" : "ghost-secondary";
   }
   /**
    * Template for the close button element. Called within the
@@ -239,22 +241,31 @@ let i = class extends B {
    * @private
    */
   renderCloseButton() {
-    var o, t;
+    var o, e;
     if (!this.isDismissible)
-      return m;
-    const e = this._getHeaderButtonVariant();
+      return c;
+    const t = this._getHeaderButtonVariant();
     return s`
             <pie-icon-button
                 @click="${() => {
       this.isOpen = !1;
     }}"
-                variant="${e}"
+                variant="${t}"
                 class="c-modal-closeBtn"
-                .aria=${h((o = this.aria) == null ? void 0 : o.close) ? { label: (t = this.aria) == null ? void 0 : t.close } : m}
+                .aria=${h((o = this.aria) == null ? void 0 : o.close) ? { label: (e = this.aria) == null ? void 0 : e.close } : c}
                 data-test-id="modal-close-button">
                 <icon-close></icon-close>
             </pie-icon-button>`;
   }
+  renderModalImageSlot() {
+    const { imageSlotMode: t, imageSlotAspectRatio: o } = this;
+    return t ? s`
+            <div class="c-modal-imageSlot c-modal-imageSlot--${t} c-modal-imageSlot--${o}" data-test-id="modal-image">
+                <slot name="image"></slot>
+                ${this.renderCloseButton()}
+            </div>
+        ` : c;
+  }
   /**
    * Template for the back button element. Called within the
    * main render function.
@@ -262,18 +273,18 @@ let i = class extends B {
    * @private
    */
   renderBackButton() {
-    var o, t;
+    var o, e;
     if (!this.hasBackButton)
-      return m;
-    const e = this._getHeaderButtonVariant();
+      return c;
+    const t = this._getHeaderButtonVariant();
     return s`
             <pie-icon-button
                 @click="${() => {
       this._backButtonClicked = !0, this.isOpen = !1;
     }}"
-                variant="${e}"
+                variant="${t}"
                 class="c-modal-backBtn"
-                .aria=${h((o = this.aria) == null ? void 0 : o.back) ? { label: (t = this.aria) == null ? void 0 : t.back } : m}
+                .aria=${h((o = this.aria) == null ? void 0 : o.back) ? { label: (e = this.aria) == null ? void 0 : e.back } : c}
                 data-test-id="modal-back-button">
                     <icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-left>
             </pie-icon-button>
@@ -289,18 +300,18 @@ let i = class extends B {
    * @private
    */
   renderLeadingAction() {
-    const { ariaLabel: e, text: o, variant: t = "primary" } = this.leadingAction || {};
+    const { ariaLabel: t, text: o, variant: e = "primary" } = this.leadingAction || {};
     return o ? s`
             <pie-button
-                variant="${t}"
-                aria-label="${h(e)}"
+                variant="${e}"
+                aria-label="${h(t)}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("leading")}"
                 data-test-id="modal-leading-action">
                 ${o}
             </pie-button>
-        ` : m;
+        ` : c;
   }
   /**
    * Renders the "supportingAction" button if the text is provided.
@@ -314,11 +325,11 @@ let i = class extends B {
    */
   renderSupportingAction() {
     var a;
-    const { ariaLabel: e, text: o, variant: t = "ghost" } = this.supportingAction || {};
-    return !o || !((a = this.leadingAction) != null && a.text) ? m : s`
+    const { ariaLabel: t, text: o, variant: e = "ghost" } = this.supportingAction || {};
+    return !o || !((a = this.leadingAction) != null && a.text) ? c : s`
             <pie-button
-                variant="${t}"
-                aria-label="${h(e)}"
+                variant="${e}"
+                aria-label="${h(t)}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("supporting")}"
@@ -334,20 +345,20 @@ let i = class extends B {
    * @private
    */
   renderModalFooter() {
-    var a, n;
-    const e = (a = this.leadingAction) == null ? void 0 : a.text;
-    e || (n = this.supportingAction) != null && n.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 a, i;
+    const t = (a = this.leadingAction) == null ? void 0 : a.text;
+    t || (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="${C(o)}" data-test-id="pie-modal-footer">
+    }, e = t ? s`
+            <footer class="${S(o)}" data-test-id="pie-modal-footer">
                 ${this.renderLeadingAction()}
                 ${this.renderSupportingAction()}
-            </footer>` : m;
+            </footer>` : c;
     return s`
             <slot name="footer">
-                ${t}
+                ${e}
             </slot>`;
   }
   /**
@@ -356,9 +367,9 @@ let i = class extends B {
    */
   renderLoadingSpinner() {
     if (!this.isLoading)
-      return m;
-    const e = this.backgroundColor === "brand-06" ? "inverse" : "secondary";
-    return s`<pie-spinner size="xlarge" variant="${e}"></pie-spinner>`;
+      return c;
+    const t = this.backgroundColor === "brand-06" ? "inverse" : "secondary";
+    return s`<pie-spinner size="xlarge" variant="${t}"></pie-spinner>`;
   }
   /**
    * Renders the modal inner content and footer of the modal.
@@ -379,132 +390,143 @@ let i = class extends B {
    * @private
    */
   renderHeading() {
-    const { heading: e, headingLevel: o, isHeadingEmphasised: t } = this, a = K(o);
+    const { heading: t, headingLevel: o, isHeadingEmphasised: e } = this, a = H(o);
     return s`
-            <${a} id="modal-heading" class="${C({
+            <${a} id="modal-heading" class="${S({
       "c-modal-heading": !0,
-      "c-modal-heading--emphasised": t
-    })}">
-                ${e}
+      "c-modal-heading--emphasised": e
+    })}" part="heading" data-test-id="modal-heading">
+                ${t}
             </${a}>
         `;
   }
   render() {
     const {
-      aria: e,
+      aria: t,
       isDismissible: o,
-      isFooterPinned: t,
+      isFooterPinned: e,
       isFullWidthBelowMid: a,
-      isLoading: n,
-      position: c,
+      isLoading: i,
+      position: m,
       size: p,
-      backgroundColor: E
-    } = this, F = {
+      backgroundColor: E,
+      imageSlotMode: F
+    } = this, P = !!!F, I = {
       "c-modal": !0,
       [`c-modal--${p}`]: !0,
-      "c-modal--top": c === "top",
+      "c-modal--top": m === "top",
       "c-modal--dismissible": o,
-      "c-modal--loading": n,
-      "c-modal--pinnedFooter": t,
+      "c-modal--loading": i,
+      "c-modal--pinnedFooter": e,
       "c-modal--fullWidthBelowMid": a,
       [`c-modal--bg-${E}`]: !0
-    }, A = n && (e == null ? void 0 : e.loading) || void 0;
+    }, A = i && (t == null ? void 0 : t.loading) || void 0;
     return s`
         <dialog
             id="dialog"
             aria-label="${h(A)}"
             aria-labelledby="${h(A ? void 0 : "modal-heading")}"
-            class="${C(F)}"
+            class="${S(I)}"
             aria-live="polite"
-            aria-busy="${n ? "true" : "false"}"
+            aria-busy="${i ? "true" : "false"}"
             data-test-id="pie-modal">
+            ${this.renderModalImageSlot()}
             <header class="c-modal-header" data-test-id="modal-header">
                 ${this.renderBackButton()}
                 ${this.renderHeading()}
-                ${this.renderCloseButton()}
+                ${P ? this.renderCloseButton() : c}
                 <slot name="headerContent"></slot>
             </header>
             ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
-    t ? this.renderModalContentAndFooter() : s`
+    e ? this.renderModalContentAndFooter() : s`
                     <div class="c-modal-scrollContainer">
                         ${this.renderModalContentAndFooter()}
                     </div>`}
         </dialog>`;
   }
 };
-i.styles = T(X);
+n.styles = K(J);
 l([
   d({ type: Object })
-], i.prototype, "aria", 2);
+], n.prototype, "aria", 2);
 l([
   d({ type: String }),
-  H(v)
-], i.prototype, "heading", 2);
+  N(b)
+], n.prototype, "heading", 2);
 l([
   d({ type: String }),
-  _(v, G, r.headingLevel)
-], i.prototype, "headingLevel", 2);
+  y(b, Q, r.headingLevel)
+], n.prototype, "headingLevel", 2);
 l([
   d({ type: Boolean })
-], i.prototype, "hasBackButton", 2);
+], n.prototype, "hasBackButton", 2);
 l([
   d({ type: Boolean })
-], i.prototype, "hasStackedActions", 2);
+], n.prototype, "hasStackedActions", 2);
 l([
   d({ type: Boolean, reflect: !0 })
-], i.prototype, "isDismissible", 2);
+], n.prototype, "isDismissible", 2);
 l([
   d({ type: Boolean })
-], i.prototype, "isHeadingEmphasised", 2);
+], n.prototype, "isHeadingEmphasised", 2);
 l([
   d({ type: Boolean })
-], i.prototype, "isFooterPinned", 2);
+], n.prototype, "isFooterPinned", 2);
 l([
   d({ type: Boolean })
-], i.prototype, "isFullWidthBelowMid", 2);
+], n.prototype, "isFullWidthBelowMid", 2);
 l([
   d({ type: Boolean, reflect: !0 })
-], i.prototype, "isLoading", 2);
+], n.prototype, "isLoading", 2);
 l([
   d({ type: Boolean })
-], i.prototype, "isOpen", 2);
+], n.prototype, "isOpen", 2);
 l([
   d({ type: Object })
-], i.prototype, "leadingAction", 2);
+], n.prototype, "leadingAction", 2);
 l([
   d({ type: String }),
-  _(v, Q, r.position)
-], i.prototype, "position", 2);
+  y(b, oo, r.position)
+], n.prototype, "position", 2);
 l([
   d({ type: String })
-], i.prototype, "returnFocusAfterCloseSelector", 2);
+], n.prototype, "returnFocusAfterCloseSelector", 2);
 l([
   d({ type: String }),
-  _(v, J, r.size)
-], i.prototype, "size", 2);
+  y(b, Z, r.size)
+], n.prototype, "size", 2);
 l([
   d({ type: Object })
-], i.prototype, "supportingAction", 2);
+], n.prototype, "supportingAction", 2);
+l([
+  d({ type: String }),
+  y(b, eo, r.backgroundColor)
+], n.prototype, "backgroundColor", 2);
+l([
+  d({ type: String })
+], n.prototype, "imageSlotMode", 2);
 l([
   d({ type: String }),
-  _(v, Z, r.backgroundColor)
-], i.prototype, "backgroundColor", 2);
+  y(b, to, r.imageSlotAspectRatio)
+], n.prototype, "imageSlotAspectRatio", 2);
 l([
-  I("dialog")
-], i.prototype, "_dialog", 2);
-i = l([
-  N("pie-modal")
-], i);
+  R("dialog")
+], n.prototype, "_dialog", 2);
+n = l([
+  W("pie-modal")
+], n);
 export {
-  O as ON_MODAL_BACK_EVENT,
+  M as ON_MODAL_BACK_EVENT,
   L as ON_MODAL_CLOSE_EVENT,
-  oo as ON_MODAL_LEADING_ACTION_CLICK,
-  x as ON_MODAL_OPEN_EVENT,
-  eo as ON_MODAL_SUPPORTING_ACTION_CLICK,
-  i as PieModal,
-  Z as backgroundColors,
+  ao as ON_MODAL_LEADING_ACTION_CLICK,
+  C as ON_MODAL_OPEN_EVENT,
+  io as ON_MODAL_SUPPORTING_ACTION_CLICK,
+  n as PieModal,
+  eo as backgroundColors,
   r as defaultProps,
-  G as headingLevels,
-  Q as positions,
-  J as sizes
+  Q as headingLevels,
+  to as imageSlotAspectRatios,
+  ko as imageSlotModes,
+  oo as positions,
+  Z as sizes
 };

package/dist/react.d.ts

@@ -29,12 +29,16 @@ declare type AriaProps = {
 
 export declare const backgroundColors: readonly ["default", "subtle", "brand-01", "brand-02", "brand-03", "brand-03-subtle", "brand-04", "brand-04-subtle", "brand-05", "brand-05-subtle", "brand-06", "brand-06-subtle", "brand-08", "brand-08-subtle"];
 
-export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
+export declare type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector' | 'imageSlotMode'>>;
 
 export declare const defaultProps: DefaultProps;
 
 export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 
+export declare const imageSlotAspectRatios: readonly ["small", "medium", "large"];
+
+export declare const imageSlotModes: readonly ["image", "illustration"];
+
 export declare type ModalActionType = 'leading' | 'supporting';
 
 export declare type ModalProps = {
@@ -111,6 +115,14 @@ export declare type ModalProps = {
      * The background color for the modal.
      */
     backgroundColor?: typeof backgroundColors[number];
+    /**
+     * The mode of the image slot; this controls whether the slot is treated as an image or an illustration.
+     */
+    imageSlotMode?: typeof imageSlotModes[number];
+    /**
+     * The aspect ratio of the image slot; applies only when `imageSlotMode` is set to `image`.
+     */
+    imageSlotAspectRatio?: typeof imageSlotAspectRatios[number];
 };
 
 /**
@@ -179,6 +191,8 @@ declare class PieModal_2 extends PieElement implements ModalProps {
     size: "medium" | "large" | "small";
     supportingAction: ModalProps['supportingAction'];
     backgroundColor: "default" | "subtle" | "brand-01" | "brand-02" | "brand-03" | "brand-03-subtle" | "brand-04" | "brand-04-subtle" | "brand-05" | "brand-05-subtle" | "brand-06" | "brand-06-subtle" | "brand-08" | "brand-08-subtle";
+    imageSlotMode: ModalProps['imageSlotMode'];
+    imageSlotAspectRatio: "medium" | "large" | "small";
     private _dialog;
     private _scrollableContainer;
     private _backButtonClicked;
@@ -238,6 +252,7 @@ declare class PieModal_2 extends PieElement implements ModalProps {
      * @private
      */
     private renderCloseButton;
+    private renderModalImageSlot;
     /**
      * Template for the back button element. Called within the
      * main render function.

package/dist/react.js

@@ -1,7 +1,7 @@
 import * as o from "react";
 import { createComponent as e } from "@lit/react";
 import { PieModal as a } from "./index.js";
-import { ON_MODAL_BACK_EVENT as c, ON_MODAL_CLOSE_EVENT as s, ON_MODAL_LEADING_ACTION_CLICK as m, ON_MODAL_OPEN_EVENT as _, ON_MODAL_SUPPORTING_ACTION_CLICK as r, backgroundColors as O, defaultProps as M, headingLevels as N, positions as C, sizes as P } from "./index.js";
+import { ON_MODAL_BACK_EVENT as c, ON_MODAL_CLOSE_EVENT as s, ON_MODAL_LEADING_ACTION_CLICK as m, ON_MODAL_OPEN_EVENT as _, ON_MODAL_SUPPORTING_ACTION_CLICK as r, backgroundColors as M, defaultProps as O, headingLevels as N, imageSlotAspectRatios as C, imageSlotModes as P, positions as A, sizes as L } from "./index.js";
 const i = e({
   displayName: "PieModal",
   elementClass: a,
@@ -19,17 +19,19 @@ const i = e({
     onPieModalSupportingActionClick: "pie-modal-supporting-action-click"
     // when the modal supporting action is clicked.
   }
-}), t = i;
+}), n = i;
 export {
   c as ON_MODAL_BACK_EVENT,
   s as ON_MODAL_CLOSE_EVENT,
   m as ON_MODAL_LEADING_ACTION_CLICK,
   _ as ON_MODAL_OPEN_EVENT,
   r as ON_MODAL_SUPPORTING_ACTION_CLICK,
-  t as PieModal,
-  O as backgroundColors,
-  M as defaultProps,
+  n as PieModal,
+  M as backgroundColors,
+  O as defaultProps,
   N as headingLevels,
-  C as positions,
-  P as sizes
+  C as imageSlotAspectRatios,
+  P as imageSlotModes,
+  A as positions,
+  L as sizes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "1.20.1",
+  "version": "1.22.0",
   "description": "PIE design system modal built using web components",
   "repository": {
     "type": "git",

package/src/defs.ts

@@ -5,6 +5,8 @@ import { type Variant as ButtonVariant } from '@justeattakeaway/pie-button/src/d
 export const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
 export const sizes = ['small', 'medium', 'large'] as const;
 export const positions = ['top', 'center'] as const;
+export const imageSlotModes = ['image', 'illustration'] as const;
+export const imageSlotAspectRatios = ['small', 'medium', 'large'] as const;
 
 type AriaProps = {
     close?: string;
@@ -139,6 +141,16 @@ export type ModalProps = {
      * The background color for the modal.
      */
     backgroundColor?: typeof backgroundColors[number];
+
+    /**
+     * The mode of the image slot; this controls whether the slot is treated as an image or an illustration.
+     */
+    imageSlotMode?: typeof imageSlotModes[number];
+
+    /**
+     * The aspect ratio of the image slot; applies only when `imageSlotMode` is set to `image`.
+     */
+    imageSlotAspectRatio?: typeof imageSlotAspectRatios[number];
 };
 
 /**
@@ -178,7 +190,7 @@ export const ON_MODAL_SUPPORTING_ACTION_CLICK = 'pie-modal-supporting-action-cli
 
 export type ModalActionType = 'leading' | 'supporting';
 
-export type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector'>>;
+export type DefaultProps = ComponentDefaultProps<ModalProps, keyof Omit<ModalProps, 'aria' | 'heading' | 'leadingAction' | 'supportingAction' | 'returnFocusAfterCloseSelector' | 'imageSlotMode'>>;
 
 export const defaultProps: DefaultProps = {
     hasBackButton: false,
@@ -193,4 +205,5 @@ export const defaultProps: DefaultProps = {
     position: 'center',
     size: 'medium',
     backgroundColor: 'default',
+    imageSlotAspectRatio: 'medium',
 };

package/src/index.ts

@@ -29,6 +29,7 @@ import {
     sizes,
     backgroundColors,
     defaultProps,
+    imageSlotAspectRatios,
     ON_MODAL_BACK_EVENT,
     ON_MODAL_CLOSE_EVENT,
     ON_MODAL_OPEN_EVENT,
@@ -114,6 +115,13 @@ export class PieModal extends PieElement implements ModalProps {
     @validPropertyValues(componentSelector, backgroundColors, defaultProps.backgroundColor)
     public backgroundColor = defaultProps.backgroundColor;
 
+    @property({ type: String })
+    public imageSlotMode: ModalProps['imageSlotMode'];
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, imageSlotAspectRatios, defaultProps.imageSlotAspectRatio)
+    public imageSlotAspectRatio = defaultProps.imageSlotAspectRatio;
+
     @query('dialog')
     private _dialog!: HTMLDialogElement;
 
@@ -347,11 +355,24 @@ export class PieModal extends PieElement implements ModalProps {
         }
     }
 
-    private _getHeaderButtonVariant (): 'ghost-secondary' | 'ghost-inverse' {
-        const isInverted = this.backgroundColor === 'brand-06';
-        const variant = isInverted ? 'ghost-inverse' : 'ghost-secondary';
+    private _getHeaderButtonVariant (): 'ghost-secondary' | 'ghost-inverse' | 'secondary' {
+        const { imageSlotMode, backgroundColor } = this;
 
-        return variant;
+        // Handle the combinations of image slot and background color
+        const hasImageSlot = Boolean(imageSlotMode);
+        const hasBackgroundColor = Boolean(backgroundColor) && backgroundColor !== 'default';
+        const isInverted = backgroundColor === 'brand-06';
+
+        // default case: image slot is not present
+        if (!hasImageSlot) {
+            return isInverted ? 'ghost-inverse' : 'ghost-secondary';
+        }
+
+        // image slot is present
+        if (imageSlotMode === 'illustration' && !hasBackgroundColor) {
+            return 'ghost-secondary';
+        }
+        return isInverted ? 'ghost-inverse' : 'secondary';
     }
 
     /**
@@ -378,6 +399,18 @@ export class PieModal extends PieElement implements ModalProps {
             </pie-icon-button>`;
     }
 
+    private renderModalImageSlot (): TemplateResult | typeof nothing {
+        const { imageSlotMode, imageSlotAspectRatio } = this;
+        if (!imageSlotMode) return nothing;
+
+        return html`
+            <div class="c-modal-imageSlot c-modal-imageSlot--${imageSlotMode} c-modal-imageSlot--${imageSlotAspectRatio}" data-test-id="modal-image">
+                <slot name="image"></slot>
+                ${this.renderCloseButton()}
+            </div>
+        `;
+    }
+
     /**
      * Template for the back button element. Called within the
      * main render function.
@@ -534,7 +567,7 @@ export class PieModal extends PieElement implements ModalProps {
         };
 
         return html`
-            <${headingTag} id="modal-heading" class="${classMap(headingClasses)}">
+            <${headingTag} id="modal-heading" class="${classMap(headingClasses)}" part="heading" data-test-id="modal-heading">
                 ${heading}
             </${headingTag}>
         `;
@@ -550,8 +583,12 @@ export class PieModal extends PieElement implements ModalProps {
             position,
             size,
             backgroundColor,
+            imageSlotMode,
         } = this;
 
+        const hasImageSlot = Boolean(imageSlotMode);
+        const hasCloseButtonInHeader = !hasImageSlot;
+
         const modalClasses = {
             'c-modal': true,
             [`c-modal--${size}`]: true,
@@ -574,10 +611,11 @@ export class PieModal extends PieElement implements ModalProps {
             aria-live="polite"
             aria-busy="${isLoading ? 'true' : 'false'}"
             data-test-id="pie-modal">
+            ${this.renderModalImageSlot()}
             <header class="c-modal-header" data-test-id="modal-header">
                 ${this.renderBackButton()}
                 ${this.renderHeading()}
-                ${this.renderCloseButton()}
+                ${hasCloseButtonInHeader ? this.renderCloseButton() : nothing}
                 <slot name="headerContent"></slot>
             </header>
             ${

package/src/modal.scss

@@ -16,6 +16,7 @@
     --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;
 
     &:focus-visible {
         outline: none;
@@ -134,6 +135,65 @@
         }
     }
 
+    & .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);
+
+        @include media('>md') {
+            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-imageSlot {
+        &.c-modal-imageSlot--illustration {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 200px;
+            background-color:var(--modal-image-slot-bg-color);
+
+            ::slotted([slot="image"]) {
+                width: 168px;
+                height: 168px;
+                overflow: hidden;
+            }
+        }
+
+        &.c-modal-imageSlot--image {
+            overflow: hidden;
+
+            // imageSlot--medium = default
+            aspect-ratio: 3/1;
+
+            &.c-modal-imageSlot--small {
+                aspect-ratio: 4/1;
+            }
+
+            &.c-modal-imageSlot--large {
+                aspect-ratio: 21/9;
+            }
+
+            ::slotted([slot="image"]) {
+                width: 100%;
+            }
+        }
+
+        & .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-footer {
         --modal-button-spacing: var(--dt-spacing-d);
         --modal-footer-padding: var(--dt-spacing-d);
@@ -248,21 +308,6 @@
         }
     }
 
-    & .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);
-
-        @include media('>md') {
-            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-content {
         // Modal content Custom Props
         --modal-content-font-size: calc(var(--dt-font-body-l-size) * 1px);
@@ -378,8 +423,7 @@
     }
 
     // Additional background colors
-    // TODO: This will be implemented by DSW-3541 since this color only applies to image slot background, not the whole modal
-    // &.c-modal--bg-subtle { --modal-bg-color: var(--dt-color-container-subtle); }
+    &.c-modal--bg-subtle { --modal-image-slot-bg-color: var(--dt-color-container-subtle); }
 
     &.c-modal--bg-brand-01 { --modal-bg-color: var(--dt-color-support-brand-01); }