@justeattakeaway/pie-modal 0.48.1 → 0.49.0

package/custom-elements.json

@@ -306,6 +306,15 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_escKeyAbortController",
+              "type": {
+                "text": "AbortController | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
             {
               "kind": "field",
               "name": "_modalScrollContainer",
@@ -315,6 +324,19 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "_handleIsDismissibleChanged",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "changedProperties",
+                  "type": {
+                    "text": "PropertyValues<this>"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "_handleModalOpened",
@@ -353,9 +375,26 @@
               ],
               "description": "Closes the dialog element and re-enables page scrolling"
             },
+            {
+              "kind": "method",
+              "name": "_setupEscKeyListener",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Sets up an event listener on the Escape key to prevent dismissing the modal if isDismissible is false"
+            },
+            {
+              "kind": "method",
+              "name": "_removeEscKeyEventListener",
+              "privacy": "private",
+              "description": "Removes any event listeners set up that are listening to keyboard events and nulls the existing AbortController."
+            },
             {
               "kind": "field",
-              "name": "_handleDialogCancelEvent",
+              "name": "_preventModalKeyboardDismissal",
               "privacy": "private",
               "description": "Prevents the user from dismissing the dialog via the `cancel`\nevent (ESC key) when `isDismissible` is set to false.",
               "parameters": [
@@ -532,6 +571,17 @@
               },
               "description": "Renders the modal inner content and footer of the modal."
             },
+            {
+              "kind": "method",
+              "name": "renderHeading",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              },
+              "description": "Renders the modal heading content in the correct heading tag"
+            },
             {
               "kind": "field",
               "name": "_handleDialogLightDismiss",

package/dist/index.d.ts

@@ -170,12 +170,14 @@ export declare class PieModal extends PieModal_base implements ModalProps {
     private _dialog;
     private _backButtonClicked;
     private _abortController;
+    private _escKeyAbortController;
     private get _modalScrollContainer();
     static styles: CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
     updated(changedProperties: PropertyValues<this>): void;
+    private _handleIsDismissibleChanged;
     /**
      * Opens the dialog element and disables page scrolling
      */
@@ -184,13 +186,21 @@ export declare class PieModal extends PieModal_base implements ModalProps {
      * Closes the dialog element and re-enables page scrolling
      */
     private _handleModalClosed;
+    /**
+     * Sets up an event listener on the Escape key to prevent dismissing the modal if isDismissible is false
+     */
+    private _setupEscKeyListener;
+    /**
+     * Removes any event listeners set up that are listening to keyboard events and nulls the existing AbortController.
+     */
+    private _removeEscKeyEventListener;
     /**
      * Prevents the user from dismissing the dialog via the `cancel`
      * event (ESC key) when `isDismissible` is set to false.
      *
      * @param {Event} event - The event object.
      */
-    private _handleDialogCancelEvent;
+    private _preventModalKeyboardDismissal;
     private _handleModalOpenStateOnFirstRender;
     private _handleModalOpenStateChanged;
     private _handleActionClick;
@@ -259,6 +269,11 @@ export declare class PieModal extends PieModal_base implements ModalProps {
      * @private
      */
     private renderModalContentAndFooter;
+    /**
+     * Renders the modal heading content in the correct heading tag
+     * @private
+     */
+    private renderHeading;
     render(): TemplateResult;
     /**
      * Dismisses the modal on backdrop click if `isDismissible` is `true`.

package/dist/index.js

@@ -1,80 +1,80 @@
-import { LitElement as I, unsafeCSS as N, nothing as p } from "lit";
-import { html as s, unsafeStatic as W } 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 k } from "lit/directives/if-defined.js";
+import { LitElement as F, unsafeCSS as T, nothing as p } from "lit";
+import { html as s, unsafeStatic as P } from "lit/static-html.js";
+import { property as d, query as K } from "lit/decorators.js";
+import { classMap as B } from "lit/directives/class-map.js";
+import { ifDefined as b } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
-import { RtlMixin as j, dispatchCustomEvent as h, requiredProperty as Y, validPropertyValues as _, defineCustomElement as V } from "@justeattakeaway/pie-webc-core";
+import { RtlMixin as I, dispatchCustomEvent as h, requiredProperty as N, validPropertyValues as _, defineCustomElement as W } from "@justeattakeaway/pie-webc-core";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
 import "@justeattakeaway/pie-spinner";
-function q(n) {
+function R(n) {
   if (Array.isArray(n)) {
-    for (var o = 0, e = Array(n.length); o < n.length; o++)
-      e[o] = n[o];
-    return e;
+    for (var e = 0, o = Array(n.length); e < n.length; e++)
+      o[e] = n[e];
+    return o;
   } else
     return Array.from(n);
 }
-var C = !1;
+var x = !1;
 if (typeof window < "u") {
-  var O = {
+  var S = {
     get passive() {
-      C = !0;
+      x = !0;
     }
   };
-  window.addEventListener("testPassive", null, O), window.removeEventListener("testPassive", null, O);
+  window.addEventListener("testPassive", null, S), window.removeEventListener("testPassive", null, S);
 }
-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), m = [], y = !1, $ = -1, u = void 0, f = void 0, D = function(o) {
-  return m.some(function(e) {
-    return !!(e.options.allowTouchMove && e.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), m = [], k = !1, M = -1, u = void 0, f = void 0, D = function(e) {
+  return m.some(function(o) {
+    return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
   });
-}, w = function(o) {
-  var e = o || window.event;
-  return D(e.target) || e.touches.length > 1 ? !0 : (e.preventDefault && e.preventDefault(), !1);
-}, H = function(o) {
+}, y = function(e) {
+  var o = e || window.event;
+  return D(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
+}, j = function(e) {
   if (f === void 0) {
-    var e = !!o, t = window.innerWidth - document.documentElement.clientWidth;
-    e && t > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = t + "px");
+    var o = !!e, t = window.innerWidth - document.documentElement.clientWidth;
+    o && t > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = t + "px");
   }
   u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
-}, K = function() {
+}, V = function() {
   f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
-}, U = function(o) {
-  return o ? o.scrollHeight - o.scrollTop <= o.clientHeight : !1;
-}, X = function(o, e) {
-  var t = o.targetTouches[0].clientY - $;
-  return D(o.target) ? !1 : e && e.scrollTop === 0 && t > 0 || U(e) && t < 0 ? w(o) : (o.stopPropagation(), !0);
-}, G = function(o, e) {
-  if (!o) {
+}, Y = function(e) {
+  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
+}, H = function(e, o) {
+  var t = e.targetTouches[0].clientY - M;
+  return D(e.target) ? !1 : o && o.scrollTop === 0 && t > 0 || Y(o) && t < 0 ? y(e) : (e.stopPropagation(), !0);
+}, q = function(e, o) {
+  if (!e) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
     return;
   }
   if (!m.some(function(i) {
-    return i.targetElement === o;
+    return i.targetElement === e;
   })) {
     var t = {
-      targetElement: o,
+      targetElement: e,
       options: {}
     };
-    m = [].concat(q(m), [t]), M ? (o.ontouchstart = function(i) {
-      i.targetTouches.length === 1 && ($ = i.targetTouches[0].clientY);
-    }, o.ontouchmove = function(i) {
-      i.targetTouches.length === 1 && X(i, o);
-    }, y || (document.addEventListener("touchmove", w, C ? { passive: !1 } : void 0), y = !0)) : H(e);
+    m = [].concat(R(m), [t]), O ? (e.ontouchstart = function(i) {
+      i.targetTouches.length === 1 && (M = i.targetTouches[0].clientY);
+    }, e.ontouchmove = function(i) {
+      i.targetTouches.length === 1 && H(i, e);
+    }, k || (document.addEventListener("touchmove", y, x ? { passive: !1 } : void 0), k = !0)) : j(o);
   }
-}, J = function(o) {
-  if (!o) {
+}, U = function(e) {
+  if (!e) {
     console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
     return;
   }
-  m = m.filter(function(e) {
-    return e.targetElement !== o;
-  }), M ? (o.ontouchstart = null, o.ontouchmove = null, y && m.length === 0 && (document.removeEventListener("touchmove", w, C ? { passive: !1 } : void 0), y = !1)) : m.length || K();
+  m = m.filter(function(o) {
+    return o.targetElement !== e;
+  }), O ? (e.ontouchstart = null, e.ontouchmove = null, k && m.length === 0 && (document.removeEventListener("touchmove", y, x ? { passive: !1 } : void 0), k = !1)) : m.length || V();
 };
-const Q = '*,*: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-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 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 .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:14px}@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:20px}}.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-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--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:not(:last-child){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(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal.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}}', Z = ["h1", "h2", "h3", "h4", "h5", "h6"], oo = ["small", "medium", "large"], eo = ["top", "center"], A = "pie-modal-close", x = "pie-modal-open", L = "pie-modal-back", to = "pie-modal-leading-action-click", io = "pie-modal-supporting-action-click", r = {
+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-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 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 .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:14px}@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:20px}}.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-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--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:not(:last-child){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(--dt-color-container-default) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal.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}}', G = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], A = "pie-modal-close", w = "pie-modal-open", L = "pie-modal-back", Z = "pie-modal-leading-action-click", ee = "pie-modal-supporting-action-click", r = {
   hasBackButton: !1,
   hasStackedActions: !1,
   headingLevel: "h2",
@@ -86,27 +86,27 @@ const Q = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
   position: "center",
   size: "medium"
 };
-var ao = Object.defineProperty, l = (n, o, e, t) => {
+var oe = Object.defineProperty, l = (n, e, o, t) => {
   for (var i = void 0, c = n.length - 1, g; c >= 0; c--)
-    (g = n[c]) && (i = g(o, e, i) || i);
-  return i && ao(o, e, i), i;
+    (g = n[c]) && (i = g(e, o, i) || i);
+  return i && oe(e, o, i), i;
 };
-const v = "pie-modal", z = class z extends j(I) {
+const v = "pie-modal", C = class C extends I(F) {
   constructor() {
-    super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, 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._backButtonClicked = !1, this._handleDialogCancelEvent = (o) => {
-      this.isDismissible || o.preventDefault();
-    }, this._handleDialogLightDismiss = (o) => {
+    super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, 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._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (e) => {
+      e.key === "Escape" && e.preventDefault();
+    }, this._handleDialogLightDismiss = (e) => {
       if (!this.isDismissible)
         return;
-      const e = this._dialog.getBoundingClientRect(), {
+      const o = this._dialog.getBoundingClientRect(), {
         top: t = 0,
         bottom: i = 0,
         left: c = 0,
         right: g = 0
-      } = e || {};
+      } = o || {};
       if (t === 0 && i === 0 && c === 0 && g === 0)
         return;
-      (o.clientY < t || o.clientY > i || o.clientX < c || o.clientX > g) && (this.isOpen = !1);
+      (e.clientY < t || e.clientY > i || e.clientX < c || e.clientX > g) && (this.isOpen = !1);
     };
   }
   get _modalScrollContainer() {
@@ -114,75 +114,93 @@ const v = "pie-modal", z = class z extends j(I) {
   }
   connectedCallback() {
     super.connectedCallback(), this._abortController = new AbortController();
-    const { signal: o } = this._abortController;
-    this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(x, (e) => this._handleModalOpened(e), { signal: o }), document.addEventListener(A, (e) => this._handleModalClosed(e), { signal: o }), document.addEventListener(L, (e) => this._handleModalClosed(e), { signal: o });
+    const { signal: e } = this._abortController;
+    this.addEventListener("click", (o) => this._handleDialogLightDismiss(o)), this._setupEscKeyListener(), document.addEventListener(w, (o) => this._handleModalOpened(o), { signal: e }), document.addEventListener(A, (o) => this._handleModalClosed(o), { signal: e }), document.addEventListener(L, (o) => this._handleModalClosed(o), { signal: e });
   }
   disconnectedCallback() {
-    this._abortController.abort(), this._enableBodyScroll(), super.disconnectedCallback();
+    super.disconnectedCallback(), this._abortController.abort(), this._enableBodyScroll(), this._removeEscKeyEventListener();
   }
-  async firstUpdated(o) {
-    if (super.firstUpdated(o), this._dialog) {
-      (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((i) => i.default)).registerDialog(this._dialog);
-      const { signal: t } = this._abortController;
-      this._dialog.addEventListener("cancel", (i) => this._handleDialogCancelEvent(i), { signal: t }), this._dialog.addEventListener("close", () => {
-        this.isOpen = !1;
-      }, { signal: t });
-    }
-    this._handleModalOpenStateOnFirstRender(o);
+  async firstUpdated(e) {
+    (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((i) => i.default)).registerDialog(this._dialog);
+    const { signal: t } = this._abortController;
+    this._dialog.addEventListener("close", () => {
+      this.isOpen = !1;
+    }, { signal: t }), this._handleModalOpenStateOnFirstRender(e);
+  }
+  updated(e) {
+    this._handleModalOpenStateChanged(e), this._handleIsDismissibleChanged(e);
   }
-  updated(o) {
-    super.updated(o), this._handleModalOpenStateChanged(o);
+  _handleIsDismissibleChanged(e) {
+    const o = e.get("isDismissible"), t = this.isDismissible;
+    !o && t && this._removeEscKeyEventListener(), o && !t && this._setupEscKeyListener();
   }
   /**
    * Opens the dialog element and disables page scrolling
    */
-  _handleModalOpened(o) {
-    const { targetModal: e } = o.detail;
-    if (e === this) {
+  _handleModalOpened(e) {
+    const { targetModal: o } = e.detail;
+    if (o === this) {
       if (this._disableBodyScroll(), this._dialog.hasAttribute("open") || !this._dialog.isConnected)
         return;
-      this._dialog.showModal();
+      this._setupEscKeyListener(), this._dialog.showModal();
     }
   }
   /**
    * Closes the dialog element and re-enables page scrolling
    */
-  _handleModalClosed(o) {
-    const { targetModal: e } = o.detail;
-    e === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus());
+  _handleModalClosed(e) {
+    const { targetModal: o } = e.detail;
+    o === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
+  }
+  /**
+   * Sets up an event listener on the Escape key to prevent dismissing the modal if isDismissible is false
+   */
+  _setupEscKeyListener() {
+    if (!this._escKeyAbortController && !this.isDismissible) {
+      this._escKeyAbortController = new AbortController();
+      const { signal: e } = this._escKeyAbortController;
+      document.addEventListener("keydown", (o) => this._preventModalKeyboardDismissal(o), { signal: e });
+    }
+  }
+  /**
+   * 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;
   }
   // Handles the value of the isOpen property on first render of the component
-  _handleModalOpenStateOnFirstRender(o) {
-    o.get("isOpen") === void 0 && this.isOpen && h(this, x, { targetModal: this });
+  _handleModalOpenStateOnFirstRender(e) {
+    e.get("isOpen") === void 0 && this.isOpen && h(this, w, { targetModal: this });
   }
   // Handles changes to the modal isOpen property by dispatching any appropriate events
-  _handleModalOpenStateChanged(o) {
-    const e = o.get("isOpen");
-    e !== void 0 && (e ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, A, { targetModal: this }) : h(this, x, { targetModal: this }));
+  _handleModalOpenStateChanged(e) {
+    const o = e.get("isOpen");
+    o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, A, { targetModal: this }) : h(this, w, { targetModal: this }));
   }
-  _handleActionClick(o) {
-    o === "leading" ? (this._dialog.close("leading"), h(this, to, { targetModal: this })) : o === "supporting" && (this._dialog.close("supporting"), h(this, io, { targetModal: this }));
+  _handleActionClick(e) {
+    e === "leading" ? (this._dialog.close("leading"), h(this, Z, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), h(this, ee, { targetModal: this }));
   }
   /**
    * Return focus to the specified element, providing the selector is valid
    * and the chosen element can be found.
    */
   _returnFocus() {
-    var e, t;
-    const o = (e = this.returnFocusAfterCloseSelector) == null ? void 0 : e.trim();
-    o && ((t = document.querySelector(o)) == null || t.focus());
+    var o, t;
+    const e = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
+    e && ((t = document.querySelector(e)) == null || t.focus());
   }
   /**
    * Enables body scroll by unlocking the scroll container.
    */
   _enableBodyScroll() {
-    this._modalScrollContainer && J(this._modalScrollContainer);
+    this._modalScrollContainer && U(this._modalScrollContainer);
   }
   /**
    * Disables body scroll by locking the scroll container.
    */
   _disableBodyScroll() {
-    this._modalScrollContainer && ("scrollTo" in window && window.scrollTo(0, 0), G(this._modalScrollContainer));
+    this._modalScrollContainer && ("scrollTo" in window && window.scrollTo(0, 0), q(this._modalScrollContainer));
   }
   /**
    * Template for the close button element. Called within the
@@ -191,7 +209,7 @@ const v = "pie-modal", z = class z extends j(I) {
    * @private
    */
   renderCloseButton() {
-    var o;
+    var e;
     return this.isDismissible ? s`
             <pie-icon-button
                 @click="${() => {
@@ -199,7 +217,7 @@ const v = "pie-modal", z = class z extends j(I) {
     }}"
                 variant="ghost-secondary"
                 class="c-modal-closeBtn"
-                aria-label="${((o = this.aria) == null ? void 0 : o.close) || p}"
+                aria-label="${((e = this.aria) == null ? void 0 : e.close) || p}"
                 data-test-id="modal-close-button">
                 <icon-close></icon-close>
             </pie-icon-button>` : p;
@@ -211,7 +229,7 @@ const v = "pie-modal", z = class z extends j(I) {
    * @private
    */
   renderBackButton() {
-    var o;
+    var e;
     return this.hasBackButton ? s`
             <pie-icon-button
                 @click="${() => {
@@ -219,7 +237,7 @@ const v = "pie-modal", z = class z extends j(I) {
     }}"
                 variant="ghost-secondary"
                 class="c-modal-backBtn"
-                aria-label="${k((o = this.aria) == null ? void 0 : o.back)}"
+                aria-label="${b((e = this.aria) == null ? void 0 : e.back)}"
                 data-test-id="modal-back-button">
                 ${this.isRTL ? s`<icon-chevron-right></icon-chevron-right>` : s`<icon-chevron-left></icon-chevron-left>`}
             </pie-icon-button>
@@ -235,16 +253,16 @@ const v = "pie-modal", z = class z extends j(I) {
    * @private
    */
   renderLeadingAction() {
-    const { ariaLabel: o, text: e, variant: t = "primary" } = this.leadingAction || {};
-    return e ? s`
+    const { ariaLabel: e, text: o, variant: t = "primary" } = this.leadingAction || {};
+    return o ? s`
             <pie-button
                 variant="${t}"
-                aria-label="${k(o)}"
+                aria-label="${b(e)}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("leading")}"
                 data-test-id="modal-leading-action">
-                ${e}
+                ${o}
             </pie-button>
         ` : p;
   }
@@ -260,16 +278,16 @@ const v = "pie-modal", z = class z extends j(I) {
    */
   renderSupportingAction() {
     var i;
-    const { ariaLabel: o, text: e, variant: t = "ghost" } = this.supportingAction || {};
-    return !e || !((i = this.leadingAction) != null && i.text) ? p : s`
+    const { ariaLabel: e, text: o, variant: t = "ghost" } = this.supportingAction || {};
+    return !o || !((i = this.leadingAction) != null && i.text) ? p : s`
             <pie-button
                 variant="${t}"
-                aria-label="${k(o)}"
+                aria-label="${b(e)}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("supporting")}"
                 data-test-id="modal-supporting-action">
-                ${e}
+                ${o}
             </pie-button>
         `;
   }
@@ -280,15 +298,15 @@ const v = "pie-modal", z = class z extends j(I) {
    * @private
    */
   renderModalFooter() {
-    var e, t;
-    if (!((e = this.leadingAction) != null && e.text))
+    var o, t;
+    if (!((o = this.leadingAction) != null && o.text))
       return (t = this.supportingAction) != null && t.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."), p;
-    const o = {
+    const e = {
       "c-modal-footer": !0,
       "c-modal-footer--stackedActions": this.hasStackedActions
     };
     return s`
-            <footer class="${S(o)}" data-test-id="pie-modal-footer">
+            <footer class="${B(e)}" data-test-id="pie-modal-footer">
                 ${this.renderLeadingAction()}
                 ${this.renderSupportingAction()}
             </footer>`;
@@ -314,61 +332,68 @@ const v = "pie-modal", z = class z extends j(I) {
             </article>
             ${this.renderModalFooter()}`;
   }
+  /**
+   * Renders the modal heading content in the correct heading tag
+   * @private
+   */
+  renderHeading() {
+    const { heading: e, headingLevel: o } = this, t = P(o);
+    return s`
+            <${t} class="c-modal-heading">
+                ${e}
+            </${t}>
+        `;
+  }
   render() {
     const {
-      aria: o,
-      heading: e,
-      headingLevel: t,
-      isDismissible: i,
-      isFooterPinned: c,
-      isFullWidthBelowMid: g,
-      isLoading: b,
-      position: F,
-      size: T
-    } = this, B = W(t), E = b && (o == null ? void 0 : o.loading) || void 0, P = {
+      aria: e,
+      isDismissible: o,
+      isFooterPinned: t,
+      isFullWidthBelowMid: i,
+      isLoading: c,
+      position: g,
+      size: z
+    } = this, $ = c && (e == null ? void 0 : e.loading) || void 0, E = {
       "c-modal": !0,
-      [`c-modal--${T}`]: !0,
-      "c-modal--top": F === "top",
-      "c-modal--dismissible": i,
-      "c-modal--loading": b,
-      "c-modal--pinnedFooter": c,
-      "c-modal--fullWidthBelowMid": g
+      [`c-modal--${z}`]: !0,
+      "c-modal--top": g === "top",
+      "c-modal--dismissible": o,
+      "c-modal--loading": c,
+      "c-modal--pinnedFooter": t,
+      "c-modal--fullWidthBelowMid": i
     };
     return s`
         <dialog
             id="dialog"
-            class="${S(P)}"
-            aria-busy="${b ? "true" : "false"}"
-            aria-label="${k(E)}"
+            class="${B(E)}"
+            aria-busy="${c ? "true" : "false"}"
+            aria-label="${b($)}"
             data-test-id="pie-modal">
-            <header class="c-modal-header"
-            data-test-id="modal-header">
+            <header class="c-modal-header" data-test-id="modal-header">
                 ${this.renderBackButton()}
-                <${B} class="c-modal-heading">
-                    ${e}
-                </${B}>
+                ${this.renderHeading()}
                 ${this.renderCloseButton()}
             </header>
             ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
-    c ? this.renderModalContentAndFooter() : s`
+    t ? this.renderModalContentAndFooter() : s`
                     <div class="c-modal-scrollContainer">
                         ${this.renderModalContentAndFooter()}
                     </div>`}
         </dialog>`;
   }
 };
-z.styles = N(Q);
-let a = z;
+C.styles = T(X);
+let a = C;
 l([
   d({ type: Object })
 ], a.prototype, "aria");
 l([
   d({ type: String }),
-  Y(v)
+  N(v)
 ], a.prototype, "heading");
 l([
   d(),
-  _(v, Z, r.headingLevel)
+  _(v, G, r.headingLevel)
 ], a.prototype, "headingLevel");
 l([
   d({ type: Boolean })
@@ -396,31 +421,31 @@ l([
 ], a.prototype, "leadingAction");
 l([
   d(),
-  _(v, eo, r.position)
+  _(v, Q, r.position)
 ], a.prototype, "position");
 l([
   d()
 ], a.prototype, "returnFocusAfterCloseSelector");
 l([
   d(),
-  _(v, oo, r.size)
+  _(v, J, r.size)
 ], a.prototype, "size");
 l([
   d({ type: Object })
 ], a.prototype, "supportingAction");
 l([
-  R("dialog")
+  K("dialog")
 ], a.prototype, "_dialog");
-V(v, a);
+W(v, a);
 export {
   L as ON_MODAL_BACK_EVENT,
   A as ON_MODAL_CLOSE_EVENT,
-  to as ON_MODAL_LEADING_ACTION_CLICK,
-  x as ON_MODAL_OPEN_EVENT,
-  io as ON_MODAL_SUPPORTING_ACTION_CLICK,
+  Z as ON_MODAL_LEADING_ACTION_CLICK,
+  w as ON_MODAL_OPEN_EVENT,
+  ee as ON_MODAL_SUPPORTING_ACTION_CLICK,
   a as PieModal,
   r as defaultProps,
-  Z as headingLevels,
-  eo as positions,
-  oo as sizes
+  G as headingLevels,
+  Q as positions,
+  J as sizes
 };

package/dist/react.d.ts

@@ -169,12 +169,14 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
     private _dialog;
     private _backButtonClicked;
     private _abortController;
+    private _escKeyAbortController;
     private get _modalScrollContainer();
     static styles: CSSResult;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
     updated(changedProperties: PropertyValues<this>): void;
+    private _handleIsDismissibleChanged;
     /**
      * Opens the dialog element and disables page scrolling
      */
@@ -183,13 +185,21 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
      * Closes the dialog element and re-enables page scrolling
      */
     private _handleModalClosed;
+    /**
+     * Sets up an event listener on the Escape key to prevent dismissing the modal if isDismissible is false
+     */
+    private _setupEscKeyListener;
+    /**
+     * Removes any event listeners set up that are listening to keyboard events and nulls the existing AbortController.
+     */
+    private _removeEscKeyEventListener;
     /**
      * Prevents the user from dismissing the dialog via the `cancel`
      * event (ESC key) when `isDismissible` is set to false.
      *
      * @param {Event} event - The event object.
      */
-    private _handleDialogCancelEvent;
+    private _preventModalKeyboardDismissal;
     private _handleModalOpenStateOnFirstRender;
     private _handleModalOpenStateChanged;
     private _handleActionClick;
@@ -258,6 +268,11 @@ declare class PieModal_2 extends PieModal_base implements ModalProps {
      * @private
      */
     private renderModalContentAndFooter;
+    /**
+     * Renders the modal heading content in the correct heading tag
+     * @private
+     */
+    private renderHeading;
     render(): TemplateResult;
     /**
      * Dismisses the modal on backdrop click if `isDismissible` is `true`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.48.1",
+  "version": "0.49.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",

package/src/index.ts

@@ -110,6 +110,10 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
 
     private _abortController!: AbortController;
 
+    // We are using a separate controller for this event because it needs
+    // to be aborted / reinstantiated on modal open/close
+    private _escKeyAbortController: AbortController | null = null;
+
     private get _modalScrollContainer (): Element | null {
         return this._dialog.querySelector('.c-modal-scrollContainer');
     }
@@ -123,39 +127,52 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
         const { signal } = this._abortController;
 
         this.addEventListener('click', (event) => this._handleDialogLightDismiss(event));
+
+        this._setupEscKeyListener();
+
         document.addEventListener(ON_MODAL_OPEN_EVENT, (event) => this._handleModalOpened(<CustomEvent>event), { signal });
         document.addEventListener(ON_MODAL_CLOSE_EVENT, (event) => this._handleModalClosed(<CustomEvent>event), { signal });
         document.addEventListener(ON_MODAL_BACK_EVENT, (event) => this._handleModalClosed(<CustomEvent>event), { signal });
     }
 
     disconnectedCallback (): void {
-        // Aborts all event listeners
-        this._abortController.abort();
+        super.disconnectedCallback();
 
+        this._abortController.abort();
         this._enableBodyScroll();
-        super.disconnectedCallback();
+        this._removeEscKeyEventListener();
     }
 
     async firstUpdated (changedProperties: PropertyValues<this>): Promise<void> {
-        super.firstUpdated(changedProperties);
-
-        if (this._dialog) {
-            const dialogPolyfill = await import('dialog-polyfill').then((module) => module.default);
-            dialogPolyfill.registerDialog(this._dialog);
-            const { signal } = this._abortController;
+        const dialogPolyfill = await import('dialog-polyfill').then((module) => module.default);
+        dialogPolyfill.registerDialog(this._dialog);
+        const { signal } = this._abortController;
 
-            this._dialog.addEventListener('cancel', (event) => this._handleDialogCancelEvent(event), { signal });
-            this._dialog.addEventListener('close', () => {
-                this.isOpen = false;
-            }, { signal });
-        }
+        this._dialog.addEventListener('close', () => {
+            this.isOpen = false;
+        }, { signal });
 
         this._handleModalOpenStateOnFirstRender(changedProperties);
     }
 
     updated (changedProperties: PropertyValues<this>): void {
-        super.updated(changedProperties);
         this._handleModalOpenStateChanged(changedProperties);
+        this._handleIsDismissibleChanged(changedProperties);
+    }
+
+    private _handleIsDismissibleChanged (changedProperties: PropertyValues<this>) {
+        const oldValue = changedProperties.get('isDismissible');
+        const newValue = this.isDismissible;
+
+        // if the modal is being set to dismissible, remove any esc key listener
+        if (!oldValue && newValue) {
+            this._removeEscKeyEventListener();
+        }
+
+        // if the modal is being set to NOT dismissible, add the esc key listener
+        if (oldValue && !newValue) {
+            this._setupEscKeyListener();
+        }
     }
 
     /**
@@ -171,6 +188,8 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
                 return;
             }
 
+            this._setupEscKeyListener();
+
             // The ::backdrop pseudoelement is only shown if the modal is opened via JS
             this._dialog.showModal();
         }
@@ -186,17 +205,42 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
             this._enableBodyScroll();
             this._dialog.close();
             this._returnFocus();
+            this._removeEscKeyEventListener();
+        }
+    }
+
+    /**
+     * Sets up an event listener on the Escape key to prevent dismissing the modal if isDismissible is false
+     */
+    private _setupEscKeyListener () : void {
+        // AbortControllers are single-use. Meaning if we have already aborted this controller,
+        // we need to create a new one for setting up subsequent event listeners.
+        // We only perform this if the controller does not exist to prevent multiple listeners being set up
+        if (!this._escKeyAbortController && !this.isDismissible) {
+            this._escKeyAbortController = new AbortController();
+            const { signal } = this._escKeyAbortController;
+
+            document.addEventListener('keydown', (event: KeyboardEvent) => this._preventModalKeyboardDismissal(event), { signal });
         }
     }
 
+    /**
+     * Removes any event listeners set up that are listening to keyboard events and nulls the existing AbortController.
+     */
+    private _removeEscKeyEventListener () {
+        this._escKeyAbortController?.abort();
+        // This is so we can create a new AbortController for any subsequent event listener setup in the future
+        this._escKeyAbortController = null;
+    }
+
     /**
      * Prevents the user from dismissing the dialog via the `cancel`
      * event (ESC key) when `isDismissible` is set to false.
      *
      * @param {Event} event - The event object.
      */
-    private _handleDialogCancelEvent = (event: Event): void => {
-        if (!this.isDismissible) {
+    private _preventModalKeyboardDismissal = (event: KeyboardEvent): void => {
+        if (event.key === 'Escape') {
             event.preventDefault();
         }
     };
@@ -429,11 +473,24 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
             ${this.renderModalFooter()}`;
     }
 
+    /**
+     * Renders the modal heading content in the correct heading tag
+     * @private
+     */
+    private renderHeading (): TemplateResult {
+        const { heading, headingLevel } = this;
+        const headingTag = unsafeStatic(headingLevel);
+
+        return html`
+            <${headingTag} class="c-modal-heading">
+                ${heading}
+            </${headingTag}>
+        `;
+    }
+
     render () {
         const {
             aria,
-            heading,
-            headingLevel,
             isDismissible,
             isFooterPinned,
             isFullWidthBelowMid,
@@ -442,7 +499,6 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
             size,
         } = this;
 
-        const headingTag = unsafeStatic(headingLevel);
         const ariaLabel = (isLoading && aria?.loading) || undefined;
 
         const modalClasses = {
@@ -462,12 +518,9 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
             aria-busy="${isLoading ? 'true' : 'false'}"
             aria-label="${ifDefined(ariaLabel)}"
             data-test-id="pie-modal">
-            <header class="c-modal-header"
-            data-test-id="modal-header">
+            <header class="c-modal-header" data-test-id="modal-header">
                 ${this.renderBackButton()}
-                <${headingTag} class="c-modal-heading">
-                    ${heading}
-                </${headingTag}>
+                ${this.renderHeading()}
                 ${this.renderCloseButton()}
             </header>
             ${