@justeattakeaway/pie-modal 1.13.0 → 1.14.1

package/dist/index.js

@@ -1,8 +1,8 @@
-import { LitElement as F, unsafeCSS as P, nothing as g } from "lit";
+import { LitElement as F, unsafeCSS as P, nothing as m } from "lit";
 import { html as s, unsafeStatic as T } from "lit/static-html.js";
 import { property as d, query as K } from "lit/decorators.js";
 import { classMap as z } from "lit/directives/class-map.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
+import { ifDefined as u } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
 import { requiredProperty as I, validPropertyValues as C, safeCustomElement as N, dispatchCustomEvent as h } from "@justeattakeaway/pie-webc-core";
@@ -14,15 +14,15 @@ const k = class k extends F {
     this.getAttribute("v") || this.setAttribute("v", k.v);
   }
 };
-k.v = "1.13.0";
+k.v = "1.14.1";
 let x = k;
-function W(e) {
-  if (Array.isArray(e)) {
-    for (var t = 0, o = Array(e.length); t < e.length; t++)
-      o[t] = e[t];
+function W(t) {
+  if (Array.isArray(t)) {
+    for (var e = 0, o = Array(t.length); e < t.length; e++)
+      o[e] = t[e];
     return o;
   } else
-    return Array.from(e);
+    return Array.from(t);
 }
 var B = !1;
 if (typeof window < "u") {
@@ -33,52 +33,52 @@ if (typeof window < "u") {
   };
   window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
 }
-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 = [], v = !1, M = -1, u = void 0, f = void 0, D = function(t) {
-  return m.some(function(o) {
-    return !!(o.options.allowTouchMove && o.options.allowTouchMove(t));
+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 = [], v = !1, M = -1, f = void 0, b = void 0, D = function(e) {
+  return g.some(function(o) {
+    return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
   });
-}, y = function(t) {
-  var o = t || window.event;
+}, y = function(e) {
+  var o = e || window.event;
   return D(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
-}, j = function(t) {
-  if (f === void 0) {
+}, j = function(e) {
+  if (b === void 0) {
     var o = !1, i = window.innerWidth - document.documentElement.clientWidth;
-    o && i > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
+    o && i > 0 && (b = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
   }
-  u === void 0 && (u = document.body.style.overflow, document.body.style.overflow = "hidden");
+  f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
 }, R = function() {
-  f !== void 0 && (document.body.style.paddingRight = f, f = void 0), u !== void 0 && (document.body.style.overflow = u, u = void 0);
-}, V = function(t) {
-  return t ? t.scrollHeight - t.scrollTop <= t.clientHeight : !1;
-}, Y = function(t, o) {
-  var i = t.targetTouches[0].clientY - M;
-  return D(t.target) ? !1 : o && o.scrollTop === 0 && i > 0 || V(o) && i < 0 ? y(t) : (t.stopPropagation(), !0);
-}, H = function(t, o) {
-  if (!t) {
+  b !== void 0 && (document.body.style.paddingRight = b, b = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
+}, V = function(e) {
+  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
+}, Y = function(e, o) {
+  var i = e.targetTouches[0].clientY - M;
+  return D(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || V(o) && i < 0 ? y(e) : (e.stopPropagation(), !0);
+}, H = function(e, o) {
+  if (!e) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
     return;
   }
-  if (!m.some(function(a) {
-    return a.targetElement === t;
+  if (!g.some(function(a) {
+    return a.targetElement === e;
   })) {
     var i = {
-      targetElement: t,
+      targetElement: e,
       options: {}
     };
-    m = [].concat(W(m), [i]), O ? (t.ontouchstart = function(a) {
+    g = [].concat(W(g), [i]), O ? (e.ontouchstart = function(a) {
       a.targetTouches.length === 1 && (M = a.targetTouches[0].clientY);
-    }, t.ontouchmove = function(a) {
-      a.targetTouches.length === 1 && Y(a, t);
+    }, e.ontouchmove = function(a) {
+      a.targetTouches.length === 1 && Y(a, e);
     }, v || (document.addEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !0)) : j();
   }
-}, q = function(t) {
-  if (!t) {
+}, q = function(e) {
+  if (!e) {
     console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
     return;
   }
-  m = m.filter(function(o) {
-    return o.targetElement !== t;
-  }), O ? (t.ontouchstart = null, t.ontouchmove = null, v && m.length === 0 && (document.removeEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !1)) : m.length || R();
+  g = g.filter(function(o) {
+    return o.targetElement !== e;
+  }), O ? (e.ontouchstart = null, e.ontouchmove = null, v && g.length === 0 && (document.removeEventListener("touchmove", y, B ? { passive: !1 } : void 0), v = !1)) : g.length || R();
 };
 const U = '*,*: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-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(--dt-color-content-default);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);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: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(--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}}.c-modal .c-modal-backBtn-icon:dir(rtl){transform:rotate(180deg)}', X = ["h1", "h2", "h3", "h4", "h5", "h6"], G = ["small", "medium", "large"], J = ["top", "center"], S = "pie-modal-close", _ = "pie-modal-open", L = "pie-modal-back", Q = "pie-modal-leading-action-click", Z = "pie-modal-supporting-action-click", r = {
   hasBackButton: !1,
@@ -92,62 +92,62 @@ const U = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
   position: "center",
   size: "medium"
 };
-var ee = Object.defineProperty, te = Object.getOwnPropertyDescriptor, l = (e, t, o, i) => {
-  for (var a = i > 1 ? void 0 : i ? te(t, o) : t, c = e.length - 1, p; c >= 0; c--)
-    (p = e[c]) && (a = (i ? p(t, o, a) : p(a)) || a);
-  return i && a && ee(t, o, a), a;
+var ee = Object.defineProperty, te = Object.getOwnPropertyDescriptor, l = (t, e, o, i) => {
+  for (var a = i > 1 ? void 0 : i ? te(e, o) : e, c = t.length - 1, p; c >= 0; c--)
+    (p = t[c]) && (a = (i ? p(e, o, a) : p(a)) || a);
+  return i && a && ee(e, o, a), a;
 };
 const w = "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.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, 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.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, 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 t = this._dialog.getBoundingClientRect(), {
+      const e = this._dialog.getBoundingClientRect(), {
         top: o = 0,
         bottom: i = 0,
         left: a = 0,
         right: c = 0
-      } = t || {};
+      } = e || {};
       if (o === 0 && i === 0 && a === 0 && c === 0)
         return;
-      (e.clientY < o || e.clientY > i || e.clientX < a || e.clientX > c) && (this.isOpen = !1);
+      (t.clientY < o || t.clientY > i || t.clientX < a || t.clientX > c) && (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", (t) => this._handleDialogLightDismiss(t)), this._setupEscKeyListener(), document.addEventListener(_, (t) => this._handleModalOpened(t), { signal: e }), document.addEventListener(S, (t) => this._handleModalClosed(t), { signal: e }), document.addEventListener(L, (t) => this._handleModalClosed(t), { signal: e });
+    const { signal: t } = this._abortController;
+    this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), this._setupEscKeyListener(), document.addEventListener(_, (e) => this._handleModalOpened(e), { signal: t }), document.addEventListener(S, (e) => this._handleModalClosed(e), { signal: t }), document.addEventListener(L, (e) => this._handleModalClosed(e), { 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((i) => i.default)).registerDialog(this._dialog);
     const { signal: o } = this._abortController;
     this._dialog.addEventListener("close", () => {
       this.isOpen = !1;
-    }, { signal: o }), this._handleModalOpenStateOnFirstRender(e);
+    }, { signal: o }), this._handleModalOpenStateOnFirstRender(t);
   }
-  updated(e) {
-    this._handleModalOpenStateChanged(e), this._handleIsDismissibleChanged(e);
+  updated(t) {
+    this._handleModalOpenStateChanged(t), this._handleIsDismissibleChanged(t);
   }
-  _handleIsDismissibleChanged(e) {
-    const t = e.get("isDismissible"), o = this.isDismissible;
-    !t && o && this._removeEscKeyEventListener(), t && !o && this._setupEscKeyListener();
+  _handleIsDismissibleChanged(t) {
+    const e = t.get("isDismissible"), o = this.isDismissible;
+    !e && o && this._removeEscKeyEventListener(), e && !o && this._setupEscKeyListener();
   }
   /**
    * Opens the dialog element and disables page scrolling
    */
-  _handleModalOpened(e) {
-    const { targetModal: t } = e.detail;
-    if (t === this) {
+  _handleModalOpened(t) {
+    const { targetModal: e } = t.detail;
+    if (e === this) {
       if (this._dialog.hasAttribute("open") || !this._dialog.isConnected)
         return;
       this._dialog.showModal(), requestAnimationFrame(() => {
@@ -158,9 +158,9 @@ let n = class extends x {
   /**
    * Closes the dialog element and re-enables page scrolling
    */
-  _handleModalClosed(e) {
-    const { targetModal: t } = e.detail;
-    t === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
+  _handleModalClosed(t) {
+    const { targetModal: e } = t.detail;
+    e === 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
@@ -168,37 +168,37 @@ let n = class extends x {
   _setupEscKeyListener() {
     if (!this._escKeyAbortController && !this.isDismissible) {
       this._escKeyAbortController = new AbortController();
-      const { signal: e } = this._escKeyAbortController;
-      document.addEventListener("keydown", (t) => this._preventModalKeyboardDismissal(t), { signal: e });
+      const { signal: t } = this._escKeyAbortController;
+      document.addEventListener("keydown", (e) => this._preventModalKeyboardDismissal(e), { 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 && h(this, _, { targetModal: this });
+  _handleModalOpenStateOnFirstRender(t) {
+    t.get("isOpen") === void 0 && this.isOpen && h(this, _, { targetModal: this });
   }
   // Handles changes to the modal isOpen property by dispatching any appropriate events
-  _handleModalOpenStateChanged(e) {
-    const t = e.get("isOpen");
-    t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, S, { targetModal: this }) : h(this, _, { targetModal: this }));
+  _handleModalOpenStateChanged(t) {
+    const e = t.get("isOpen");
+    e !== void 0 && (e ? this._backButtonClicked ? (this._backButtonClicked = !1, h(this, L, { targetModal: this })) : h(this, S, { targetModal: this }) : h(this, _, { targetModal: this }));
   }
-  _handleActionClick(e) {
-    e === "leading" ? (this._dialog.close("leading"), h(this, Q, { targetModal: this })) : e === "supporting" && (this._dialog.close("supporting"), h(this, Z, { targetModal: this }));
+  _handleActionClick(t) {
+    t === "leading" ? (this._dialog.close("leading"), h(this, Q, { targetModal: this })) : t === "supporting" && (this._dialog.close("supporting"), h(this, Z, { targetModal: this }));
   }
   /**
    * Return focus to the specified element, providing the selector is valid
    * and the chosen element can be found.
    */
   _returnFocus() {
-    var t, o;
-    const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
-    e && ((o = document.querySelector(e)) == null || o.focus());
+    var e, o;
+    const t = (e = this.returnFocusAfterCloseSelector) == null ? void 0 : e.trim();
+    t && ((o = document.querySelector(t)) == null || o.focus());
   }
   /**
    * Enables body scroll by unlocking the scroll container.
@@ -219,7 +219,7 @@ let n = class extends x {
    * @private
    */
   renderCloseButton() {
-    var e;
+    var t, e;
     return this.isDismissible ? s`
             <pie-icon-button
                 @click="${() => {
@@ -227,10 +227,10 @@ let n = class extends x {
     }}"
                 variant="ghost-secondary"
                 class="c-modal-closeBtn"
-                aria-label="${((e = this.aria) == null ? void 0 : e.close) || g}"
+                .aria=${u((t = this.aria) == null ? void 0 : t.close) ? { label: (e = this.aria) == null ? void 0 : e.close } : m}
                 data-test-id="modal-close-button">
                 <icon-close></icon-close>
-            </pie-icon-button>` : g;
+            </pie-icon-button>` : m;
   }
   /**
    * Template for the back button element. Called within the
@@ -239,7 +239,7 @@ let n = class extends x {
    * @private
    */
   renderBackButton() {
-    var e;
+    var t, e;
     return this.hasBackButton ? s`
             <pie-icon-button
                 @click="${() => {
@@ -247,11 +247,11 @@ let n = class extends x {
     }}"
                 variant="ghost-secondary"
                 class="c-modal-backBtn"
-                aria-label="${b((e = this.aria) == null ? void 0 : e.back)}"
+                .aria=${u((t = this.aria) == null ? void 0 : t.back) ? { label: (e = this.aria) == null ? void 0 : e.back } : m}
                 data-test-id="modal-back-button">
-                    <icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-right>
+                    <icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-left>
             </pie-icon-button>
-        ` : g;
+        ` : m;
   }
   /**
    * Renders the "leadingAction" button if the text is provided.
@@ -263,18 +263,18 @@ let n = class extends x {
    * @private
    */
   renderLeadingAction() {
-    const { ariaLabel: e, text: t, variant: o = "primary" } = this.leadingAction || {};
-    return t ? s`
+    const { ariaLabel: t, text: e, variant: o = "primary" } = this.leadingAction || {};
+    return e ? s`
             <pie-button
                 variant="${o}"
-                aria-label="${b(e)}"
+                aria-label="${u(t)}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("leading")}"
                 data-test-id="modal-leading-action">
-                ${t}
+                ${e}
             </pie-button>
-        ` : g;
+        ` : m;
   }
   /**
    * Renders the "supportingAction" button if the text is provided.
@@ -288,16 +288,16 @@ let n = class extends x {
    */
   renderSupportingAction() {
     var i;
-    const { ariaLabel: e, text: t, variant: o = "ghost" } = this.supportingAction || {};
-    return !t || !((i = this.leadingAction) != null && i.text) ? g : s`
+    const { ariaLabel: t, text: e, variant: o = "ghost" } = this.supportingAction || {};
+    return !e || !((i = this.leadingAction) != null && i.text) ? m : s`
             <pie-button
                 variant="${o}"
-                aria-label="${b(e)}"
+                aria-label="${u(t)}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("supporting")}"
                 data-test-id="modal-supporting-action">
-                ${t}
+                ${e}
             </pie-button>
         `;
   }
@@ -309,16 +309,16 @@ let n = class extends x {
    */
   renderModalFooter() {
     var i, a;
-    const e = (i = this.leadingAction) == null ? void 0 : i.text;
-    e || (a = this.supportingAction) != null && a.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 t = {
+    const t = (i = this.leadingAction) == null ? void 0 : i.text;
+    t || (a = this.supportingAction) != null && a.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 e = {
       "c-modal-footer": !0,
       "c-modal-footer--stackedActions": this.hasStackedActions
-    }, o = e ? s`
-            <footer class="${z(t)}" data-test-id="pie-modal-footer">
+    }, o = t ? s`
+            <footer class="${z(e)}" data-test-id="pie-modal-footer">
                 ${this.renderLeadingAction()}
                 ${this.renderSupportingAction()}
-            </footer>` : g;
+            </footer>` : m;
     return s`
             <slot name="footer">
                 ${o}
@@ -329,7 +329,7 @@ let n = class extends x {
    * @private
    */
   renderLoadingSpinner() {
-    return this.isLoading ? s`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : g;
+    return this.isLoading ? s`<pie-spinner size="xlarge" variant="secondary"></pie-spinner>` : m;
   }
   /**
    * Renders the modal inner content and footer of the modal.
@@ -350,27 +350,27 @@ let n = class extends x {
    * @private
    */
   renderHeading() {
-    const { heading: e, headingLevel: t } = this, o = T(t);
+    const { heading: t, headingLevel: e } = this, o = T(e);
     return s`
             <${o} class="c-modal-heading">
-                ${e}
+                ${t}
             </${o}>
         `;
   }
   render() {
     const {
-      aria: e,
-      isDismissible: t,
+      aria: t,
+      isDismissible: e,
       isFooterPinned: o,
       isFullWidthBelowMid: i,
       isLoading: a,
       position: c,
       size: p
-    } = this, $ = a && (e == null ? void 0 : e.loading) || void 0, E = {
+    } = this, $ = a && (t == null ? void 0 : t.loading) || void 0, E = {
       "c-modal": !0,
       [`c-modal--${p}`]: !0,
       "c-modal--top": c === "top",
-      "c-modal--dismissible": t,
+      "c-modal--dismissible": e,
       "c-modal--loading": a,
       "c-modal--pinnedFooter": o,
       "c-modal--fullWidthBelowMid": i
@@ -380,7 +380,7 @@ let n = class extends x {
             id="dialog"
             class="${z(E)}"
             aria-busy="${a ? "true" : "false"}"
-            aria-label="${b($)}"
+            aria-label="${u($)}"
             data-test-id="pie-modal">
             <header class="c-modal-header" data-test-id="modal-header">
                 ${this.renderBackButton()}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "1.13.0",
+  "version": "1.14.1",
   "description": "PIE design system modal built using web components",
   "repository": {
     "type": "git",
@@ -39,10 +39,10 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeat/pie-design-tokens": "7.3.0",
-    "@justeattakeaway/pie-button": "1.6.7",
+    "@justeat/pie-design-tokens": "7.4.0",
+    "@justeattakeaway/pie-button": "1.7.0",
     "@justeattakeaway/pie-components-config": "0.21.0",
-    "@justeattakeaway/pie-css": "0.20.0",
+    "@justeattakeaway/pie-css": "0.21.0",
     "@justeattakeaway/pie-monorepo-utils": "0.7.0",
     "@justeattakeaway/pie-text-input": "0.28.12",
     "@justeattakeaway/pie-wrapper-react": "0.14.3",
@@ -53,8 +53,8 @@
     "extends": "../../../package.json"
   },
   "dependencies": {
-    "@justeattakeaway/pie-button": "1.6.7",
-    "@justeattakeaway/pie-icon-button": "2.0.6",
+    "@justeattakeaway/pie-button": "1.7.0",
+    "@justeattakeaway/pie-icon-button": "2.1.0",
     "@justeattakeaway/pie-icons-webc": "1.14.2",
     "@justeattakeaway/pie-spinner": "1.2.5",
     "@justeattakeaway/pie-webc-core": "1.1.0",

package/src/index.ts

@@ -355,7 +355,7 @@ export class PieModal extends PieElement implements ModalProps {
                 @click="${() => { this.isOpen = false; }}"
                 variant="ghost-secondary"
                 class="c-modal-closeBtn"
-                aria-label="${this.aria?.close || nothing}"
+                .aria=${ifDefined(this.aria?.close) ? { label: this.aria?.close } : nothing}
                 data-test-id="modal-close-button">
                 <icon-close></icon-close>
             </pie-icon-button>`;
@@ -377,9 +377,9 @@ export class PieModal extends PieElement implements ModalProps {
                 @click="${() => { this._backButtonClicked = true; this.isOpen = false; }}"
                 variant="ghost-secondary"
                 class="c-modal-backBtn"
-                aria-label="${ifDefined(this.aria?.back)}"
+                .aria=${ifDefined(this.aria?.back) ? { label: this.aria?.back } : nothing}
                 data-test-id="modal-back-button">
-                    <icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-right>
+                    <icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-left>
             </pie-icon-button>
         `;
     }