@justeattakeaway/pie-modal 0.30.0 → 0.32.0

package/README.md

@@ -43,14 +43,28 @@ For full information on using PIE components as part of an application, check ou
 
 ### Importing the component
 
+#### JavaScript
 ```js
-// default
+// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
 import { PieModal } from '@justeattakeaway/pie-modal';
 
-// react
+// If you don't need to reference the imported object, you can simply
+// import the module which registers the component as a custom element.
+import '@justeattakeaway/pie-modal';
+```
+
+#### React
+```js
+// React
+// For React, you will need to import our React-specific component build
+// which wraps the web component using @lit-labs/react
 import { PieModal } from '@justeattakeaway/pie-modal/dist/react';
 ```
 
+> [!NOTE]
+> When using the React version of the component, please make sure to also
+> include React as a [peer dependency](#peer-dependencies) in your project.
+
 
 ## Peer Dependencies
 

package/dist/index.js

@@ -1,329 +1,115 @@
-import { isServer as K, css as I, LitElement as $, html as M, unsafeCSS as ee, nothing as c } from "lit";
-import { html as p, unsafeStatic as te } from "lit/static-html.js";
-import { property as l, query as O } from "lit/decorators.js";
-const ie = (n) => {
-  class e extends n {
-    /**
-     * A getter to determine whether the text direction is right-to-left (RTL).
-     * If the `dir` property is present on the component, it will be used to determine the text direction.
-     * If running on the client-side (not SSR) and the `dir` property is not present, the text direction will be inferred
-     * from the document's root element. This inference is not available during SSR.
-     * In all other cases, it will return `false`, indicating a left-to-right (LTR) text direction.
-     *
-     * @returns {boolean} - Returns `true` if the text direction is RTL, otherwise `false`.
-     */
-    get isRTL() {
-      return this.dir ? this.dir === "rtl" : !K && !this.dir ? document.documentElement.getAttribute("dir") === "rtl" : !1;
-    }
-  }
-  return e;
-}, E = (n, e, t) => function(o, a) {
-  const r = `#${a}`;
-  Object.defineProperty(o, a, {
-    get() {
-      return this[r];
-    },
-    set(h) {
-      const g = this[r];
-      e.includes(h) ? this[r] = h : (console.error(
-        `<${n}> Invalid value "${h}" provided for property "${a}".`,
-        `Must be one of: ${e.join(" | ")}.`,
-        `Falling back to default value: "${t}"`
-      ), this[r] = t), this.requestUpdate(a, g);
-    }
-  });
-}, oe = (n) => function(t, i) {
-  const o = `#${i}`;
-  Object.defineProperty(t, i, {
-    get() {
-      return this[o];
-    },
-    set(a) {
-      const r = this[o];
-      (a == null || typeof a == "string" && a.trim() === "") && console.error(`<${n}> Missing required attribute "${i}"`), this[o] = a, this.requestUpdate(i, r);
-    }
-  });
-};
-function ne(n, e) {
-  customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, e);
-}
-function P(n, e) {
-  customElements.get(n) ? console.warn(`PIE Web Component: "${n}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(n, e);
-}
-const _ = {
-  xs: 16,
-  s: 20,
-  m: 24,
-  l: 28,
-  xl: 32,
-  xxl: 40
-}, W = Object.keys(_), q = "xs", V = 8, z = 32;
-function ae(n, e, t) {
-  const i = parseInt(n, 10), o = i % t === 0;
-  return i >= e && o;
-}
-const Y = {
-  large: (n) => ae(n, z, V),
-  regular: (n) => W.includes(n)
-};
-function re(n) {
-  const e = Y.large(n);
-  return { isValid: e, size: e ? n : z };
-}
-function le(n) {
-  const e = Y.regular(n), t = e ? _[n] : _[q];
-  return { isValid: e, size: t };
-}
-const u = (n, e, t, i) => {
-  const o = n.endsWith("Large") || n.endsWith("-large");
-  let a, r;
-  if (t) {
-    if ({ isValid: a, size: r } = o ? re(t) : le(t), !a) {
-      const h = o ? `Invalid prop "size" value supplied to "${i}". The prop value should be a number equal or greater than ${z} and multiple of ${V}.` : `Invalid prop "size" value supplied to "${i}". The prop value should be one of the following values: ${W.join(", ")}.`;
-      console.error(h);
-    }
+import { LitElement as P, nothing as r, unsafeCSS as T } from "lit";
+import { html as c, unsafeStatic as F } from "lit/static-html.js";
+import { property as d, query as N } from "lit/decorators.js";
+import "@justeattakeaway/pie-button";
+import "@justeattakeaway/pie-icon-button";
+import { RtlMixin as I, requiredProperty as R, validPropertyValues as z, defineCustomElement as j } from "@justeattakeaway/pie-webc-core";
+import "@justeattakeaway/pie-icons-webc/IconClose";
+import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
+import "@justeattakeaway/pie-icons-webc/IconChevronRight";
+import "@justeattakeaway/pie-spinner";
+function W(a) {
+  if (Array.isArray(a)) {
+    for (var e = 0, o = Array(a.length); e < a.length; e++)
+      o[e] = a[e];
+    return o;
   } else
-    r = o ? z : _[q];
-  return {
-    class: [n, e].filter(Boolean).join(" "),
-    width: r,
-    height: r
-  };
-};
-var se = Object.defineProperty, de = Object.getOwnPropertyDescriptor, D = (n, e, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? de(e, t) : e, a = n.length - 1, r; a >= 0; a--)
-    (r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
-  return i && o && se(e, t, o), o;
-};
-const ce = "icon-close";
-class b extends $ {
-  constructor() {
-    super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--close";
-  }
-  connectedCallback() {
-    var e, t, i;
-    if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
-      const o = u("c-pieIcon c-pieIcon--close", "", null, "IconClose");
-      (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height);
-    }
-  }
-  updated(e) {
-    var t, i;
-    let o;
-    e.has("size") && (o = u("c-pieIcon c-pieIcon--close", "", this.size, "IconClose"), (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height));
-  }
-  render() {
-    return M`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--close"><path d="M11.868 3.205 8 7.072 4.133 3.205l-.928.927L7.073 8l-3.868 3.867.928.928L8 8.927l3.868 3.868.927-.928L8.928 8l3.867-3.868-.927-.927Z"></path></svg>`;
-  }
+    return Array.from(a);
 }
-b.styles = I`
-        :host-context(pie-icon-button) svg,
-        :host-context(pie-button) svg {
-            display: block;
-            width: var(--btn-icon-size);
-            height: var(--btn-icon-size);
-        }
-    `;
-D([
-  l({ type: String, reflect: !0 })
-], b.prototype, "size", 2);
-D([
-  l({ type: String, reflect: !0 })
-], b.prototype, "class", 2);
-D([
-  O("svg")
-], b.prototype, "_svg", 2);
-P(ce, b);
-var he = Object.defineProperty, pe = Object.getOwnPropertyDescriptor, T = (n, e, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? pe(e, t) : e, a = n.length - 1, r; a >= 0; a--)
-    (r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
-  return i && o && he(e, t, o), o;
-};
-const me = "icon-chevron-left";
-class w extends $ {
-  constructor() {
-    super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronLeft";
-  }
-  connectedCallback() {
-    var e, t, i;
-    if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
-      const o = u("c-pieIcon c-pieIcon--chevronLeft", "", null, "IconChevronLeft");
-      (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height);
-    }
-  }
-  updated(e) {
-    var t, i;
-    let o;
-    e.has("size") && (o = u("c-pieIcon c-pieIcon--chevronLeft", "", this.size, "IconChevronLeft"), (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height));
-  }
-  render() {
-    return M`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--chevronLeft"><path d="M10.96 2.82 5.605 8l5.399 5.197-.875.963-5.565-5.364a1.164 1.164 0 0 1 0-1.671l5.495-5.25.901.945Z"></path></svg>`;
-  }
-}
-w.styles = I`
-        :host-context(pie-icon-button) svg,
-        :host-context(pie-button) svg {
-            display: block;
-            width: var(--btn-icon-size);
-            height: var(--btn-icon-size);
-        }
-    `;
-T([
-  l({ type: String, reflect: !0 })
-], w.prototype, "size", 2);
-T([
-  l({ type: String, reflect: !0 })
-], w.prototype, "class", 2);
-T([
-  O("svg")
-], w.prototype, "_svg", 2);
-P(me, w);
-var ge = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, j = (n, e, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? ue(e, t) : e, a = n.length - 1, r; a >= 0; a--)
-    (r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
-  return i && o && ge(e, t, o), o;
-};
-const ve = "icon-chevron-right";
-class y extends $ {
-  constructor() {
-    super(...arguments), this.size = "xs", this.class = "c-pieIcon c-pieIcon--chevronRight";
-  }
-  connectedCallback() {
-    var e, t, i;
-    if (super.connectedCallback(), ((e = this._svg) == null ? void 0 : e.getAttribute("width")) === null) {
-      const o = u("c-pieIcon c-pieIcon--chevronRight", "", null, "IconChevronRight");
-      (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height);
-    }
-  }
-  updated(e) {
-    var t, i;
-    let o;
-    e.has("size") && (o = u("c-pieIcon c-pieIcon--chevronRight", "", this.size, "IconChevronRight"), (t = this._svg) == null || t.setAttribute("width", o.width), (i = this._svg) == null || i.setAttribute("height", o.height));
-  }
-  render() {
-    return M`<svg xmlns="http://www.w3.org/2000/svg" role="presentation" focusable="false" fill="currentColor" viewBox="0 0 16 16" class="c-pieIcon c-pieIcon--chevronRight"><path d="M5.044 13.18 10.399 8 5 2.82l.875-.962 5.539 5.346a1.164 1.164 0 0 1 0 1.636l-5.469 5.285-.901-.945Z"></path></svg>`;
-  }
-}
-y.styles = I`
-        :host-context(pie-icon-button) svg,
-        :host-context(pie-button) svg {
-            display: block;
-            width: var(--btn-icon-size);
-            height: var(--btn-icon-size);
-        }
-    `;
-j([
-  l({ type: String, reflect: !0 })
-], y.prototype, "size", 2);
-j([
-  l({ type: String, reflect: !0 })
-], y.prototype, "class", 2);
-j([
-  O("svg")
-], y.prototype, "_svg", 2);
-P(ve, y);
-function fe(n) {
-  if (Array.isArray(n)) {
-    for (var e = 0, t = Array(n.length); e < n.length; e++)
-      t[e] = n[e];
-    return t;
-  } else
-    return Array.from(n);
-}
-var F = !1;
+var C = !1;
 if (typeof window < "u") {
-  var N = {
+  var A = {
     get passive() {
-      F = !0;
+      C = !0;
     }
   };
-  window.addEventListener("testPassive", null, N), window.removeEventListener("testPassive", null, N);
+  window.addEventListener("testPassive", null, A), window.removeEventListener("testPassive", null, A);
 }
-var U = 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 = [], C = !1, H = -1, v = void 0, f = void 0, Z = function(e) {
-  return m.some(function(t) {
-    return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
+var B = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), p = [], b = !1, S = -1, g = void 0, h = void 0, L = function(e) {
+  return p.some(function(o) {
+    return !!(o.options.allowTouchMove && o.options.allowTouchMove(e));
   });
-}, A = function(e) {
-  var t = e || window.event;
-  return Z(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
-}, be = function(e) {
-  if (f === void 0) {
-    var t = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
-    t && i > 0 && (f = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
-  }
-  v === void 0 && (v = document.body.style.overflow, document.body.style.overflow = "hidden");
-}, we = function() {
-  f !== void 0 && (document.body.style.paddingRight = f, f = void 0), v !== void 0 && (document.body.style.overflow = v, v = void 0);
-}, ye = function(e) {
+}, k = function(e) {
+  var o = e || window.event;
+  return L(o.target) || o.touches.length > 1 ? !0 : (o.preventDefault && o.preventDefault(), !1);
+}, Y = function(e) {
+  if (h === void 0) {
+    var o = !!e && e.reserveScrollBarGap === !0, i = window.innerWidth - document.documentElement.clientWidth;
+    o && i > 0 && (h = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
+  }
+  g === void 0 && (g = document.body.style.overflow, document.body.style.overflow = "hidden");
+}, V = function() {
+  h !== void 0 && (document.body.style.paddingRight = h, h = void 0), g !== void 0 && (document.body.style.overflow = g, g = void 0);
+}, q = function(e) {
   return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
-}, ke = function(e, t) {
-  var i = e.targetTouches[0].clientY - H;
-  return Z(e.target) ? !1 : t && t.scrollTop === 0 && i > 0 || ye(t) && i < 0 ? A(e) : (e.stopPropagation(), !0);
-}, xe = function(e, t) {
+}, H = function(e, o) {
+  var i = e.targetTouches[0].clientY - S;
+  return L(e.target) ? !1 : o && o.scrollTop === 0 && i > 0 || q(o) && i < 0 ? k(e) : (e.stopPropagation(), !0);
+}, U = function(e, o) {
   if (!e) {
     console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
     return;
   }
-  if (!m.some(function(o) {
-    return o.targetElement === e;
+  if (!p.some(function(t) {
+    return t.targetElement === e;
   })) {
     var i = {
       targetElement: e,
-      options: t || {}
+      options: o || {}
     };
-    m = [].concat(fe(m), [i]), U ? (e.ontouchstart = function(o) {
-      o.targetTouches.length === 1 && (H = o.targetTouches[0].clientY);
-    }, e.ontouchmove = function(o) {
-      o.targetTouches.length === 1 && ke(o, e);
-    }, C || (document.addEventListener("touchmove", A, F ? { passive: !1 } : void 0), C = !0)) : be(t);
+    p = [].concat(W(p), [i]), B ? (e.ontouchstart = function(t) {
+      t.targetTouches.length === 1 && (S = t.targetTouches[0].clientY);
+    }, e.ontouchmove = function(t) {
+      t.targetTouches.length === 1 && H(t, e);
+    }, b || (document.addEventListener("touchmove", k, C ? { passive: !1 } : void 0), b = !0)) : Y(o);
   }
-}, _e = function(e) {
+}, K = function(e) {
   if (!e) {
     console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
     return;
   }
-  m = m.filter(function(t) {
-    return t.targetElement !== e;
-  }), U ? (e.ontouchstart = null, e.ontouchmove = null, C && m.length === 0 && (document.removeEventListener("touchmove", A, F ? { passive: !1 } : void 0), C = !1)) : m.length || we();
+  p = p.filter(function(o) {
+    return o.targetElement !== e;
+  }), B ? (e.ontouchstart = null, e.ontouchmove = null, b && p.length === 0 && (document.removeEventListener("touchmove", k, C ? { passive: !1 } : void 0), b = !1)) : p.length || V();
 };
-const ze = `dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}@media (max-width: 767px){.c-modal[size=medium][isfullwidthbelowmid]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--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:var(--dt-spacing-d);margin-block:14px}@media (min-width: 768px){.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:var(--dt-spacing-e);margin-block:20px}}.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-b) var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-c) var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-none) var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-none) var(--dt-spacing-c)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-size-16) * 1px);--modal-content-font-weight: var(--dt-font-weight-regular);--modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--spinner-size: 48px;--spinner-border-width: 6px;--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;min-block-size:var(--dt-spacing-j);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline:var(--modal-content-padding-inline);padding-block:var(--modal-content-padding-block);flex-grow:1}@media (min-width: 768px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal .c-modal-content:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;opacity:0}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;height:100%;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[isfooterpinned] .c-modal-content{overflow-y:auto}.c-modal[isLoading] .c-modal-content:before{animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);opacity:1}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{opacity:0}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}
-`, Ce = ["h1", "h2", "h3", "h4", "h5", "h6"], Ae = ["small", "medium", "large"], $e = ["top", "center"], B = "pie-modal-close", x = "pie-modal-open", S = "pie-modal-back", Oe = "pie-modal-leading-action-click", Le = "pie-modal-supporting-action-click";
-var Be = Object.defineProperty, Se = Object.getOwnPropertyDescriptor, d = (n, e, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? Se(e, t) : e, a = n.length - 1, r; a >= 0; a--)
-    (r = n[a]) && (o = (i ? r(e, t, o) : r(o)) || o);
-  return i && o && Be(e, t, o), o;
+const G = `dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:white;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}*,*:before,*:after{box-sizing:border-box}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-m-family);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-04);border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{display:flex;flex-direction:column}@media (min-width: 768px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 768px){.c-modal[size=small]{--modal-margin-block: var(--modal-margin-large)}}@media (max-width: 767px){.c-modal[size=medium][isfullwidthbelowmid]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}}.c-modal[size=large]{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal[size=large]{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%}}.c-modal[position=top]{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal[position=top][size=large],.c-modal[position=top][isfullwidthbelowmid][size=medium]{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:rgba(0,0,0,.55)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 768px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal[hasstackedactions] .c-modal-footer{flex-direction:column}}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--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:var(--dt-spacing-d);margin-block:14px}@media (min-width: 768px){.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:var(--dt-spacing-e);margin-block:20px}}.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 768px){.c-modal[hasbackbutton] .c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 768px){.c-modal[isdismissible] .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-b) var(--dt-spacing-none)}@media (min-width: 768px){.c-modal .c-modal-backBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-c) var(--dt-spacing-none)}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block:var(--dt-spacing-b);margin-inline:var(--dt-spacing-none) var(--dt-spacing-b)}@media (min-width: 768px){.c-modal .c-modal-closeBtn{margin-block:var(--dt-spacing-c);margin-inline:var(--dt-spacing-none) var(--dt-spacing-c)}}.c-modal .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);position:relative;min-block-size:var(--dt-spacing-j);font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline:var(--modal-content-padding-inline);padding-block:var(--modal-content-padding-block);flex-grow:1}@media (min-width: 768px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;height:100%;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[isfooterpinned] .c-modal-content{overflow-y:auto}.c-modal[isLoading] .c-modal-content pie-spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.c-modal[isLoading] .c-modal-content .c-modal-contentInner{display:none}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}
+`, X = ["h1", "h2", "h3", "h4", "h5", "h6"], J = ["small", "medium", "large"], Q = ["top", "center"], x = "pie-modal-close", v = "pie-modal-open", _ = "pie-modal-back", Z = "pie-modal-leading-action-click", ee = "pie-modal-supporting-action-click";
+var oe = Object.defineProperty, ie = Object.getOwnPropertyDescriptor, l = (a, e, o, i) => {
+  for (var t = i > 1 ? void 0 : i ? ie(e, o) : e, s = a.length - 1, m; s >= 0; s--)
+    (m = a[s]) && (t = (i ? m(e, o, t) : m(t)) || t);
+  return i && t && oe(e, o, t), t;
 };
-const k = "pie-modal";
-class s extends ie($) {
+const u = "pie-modal";
+class n extends I(P) {
   constructor() {
     super(...arguments), this.headingLevel = "h2", this.hasBackButton = !1, this.hasStackedActions = !1, this.isDismissible = !1, this.isFooterPinned = !0, this.isFullWidthBelowMid = !1, this.isLoading = !1, this.isOpen = !1, this.position = "center", this.size = "medium", this._backButtonClicked = !1, this._handleDialogCancelEvent = (e) => {
       this.isDismissible || e.preventDefault();
     }, this._handleDialogLightDismiss = (e) => {
-      var g;
+      var f;
       if (!this.isDismissible)
         return;
-      const t = (g = this._dialog) == null ? void 0 : g.getBoundingClientRect(), {
+      const o = (f = this._dialog) == null ? void 0 : f.getBoundingClientRect(), {
         top: i = 0,
-        bottom: o = 0,
-        left: a = 0,
-        right: r = 0
-      } = t || {};
-      if (i === 0 && o === 0 && a === 0 && r === 0)
+        bottom: t = 0,
+        left: s = 0,
+        right: m = 0
+      } = o || {};
+      if (i === 0 && t === 0 && s === 0 && m === 0)
         return;
-      (e.clientY < i || e.clientY > o || e.clientX < a || e.clientX > r) && (this.isOpen = !1);
+      (e.clientY < i || e.clientY > t || e.clientX < s || e.clientX > m) && (this.isOpen = !1);
     }, this._dispatchModalCustomEvent = (e) => {
-      const t = new CustomEvent(e, {
+      const o = new CustomEvent(e, {
         bubbles: !0,
         composed: !0
       });
-      this.dispatchEvent(t);
+      this.dispatchEvent(o);
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(x, this._handleModalOpened.bind(this)), document.addEventListener(B, this._handleModalClosed.bind(this)), document.addEventListener(S, this._handleModalClosed.bind(this));
+    super.connectedCallback(), this.addEventListener("click", (e) => this._handleDialogLightDismiss(e)), document.addEventListener(v, this._handleModalOpened.bind(this)), document.addEventListener(x, this._handleModalClosed.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this));
   }
   disconnectedCallback() {
-    document.removeEventListener(x, this._handleModalOpened.bind(this)), document.removeEventListener(B, this._handleModalClosed.bind(this)), document.removeEventListener(S, this._handleModalClosed.bind(this)), super.disconnectedCallback();
+    document.removeEventListener(v, this._handleModalOpened.bind(this)), document.removeEventListener(x, this._handleModalClosed.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), super.disconnectedCallback();
   }
   async firstUpdated(e) {
     super.firstUpdated(e), this._dialog && ((await import("./dialog-polyfill.esm-29edb142.js").then((i) => i.default)).registerDialog(this._dialog), this._dialog.addEventListener("cancel", (i) => this._handleDialogCancelEvent(i)), this._dialog.addEventListener("close", () => {
@@ -337,38 +123,38 @@ class s extends ie($) {
    * Opens the dialog element and disables page scrolling
    */
   _handleModalOpened() {
-    var t, i, o, a;
-    const e = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
-    e && xe(e), !((i = this._dialog) != null && i.hasAttribute("open") || !((o = this._dialog) != null && o.isConnected)) && ((a = this._dialog) == null || a.showModal());
+    var o, i, t, s;
+    const e = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
+    e && U(e), !((i = this._dialog) != null && i.hasAttribute("open") || !((t = this._dialog) != null && t.isConnected)) && ((s = this._dialog) == null || s.showModal());
   }
   /**
    * Closes the dialog element and re-enables page scrolling
    */
   _handleModalClosed() {
-    var t, i;
-    const e = (t = this._dialog) == null ? void 0 : t.querySelector(".c-modal-scrollContainer");
-    e && _e(e), (i = this._dialog) == null || i.close(), this._returnFocus();
+    var o, i;
+    const e = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer");
+    e && K(e), (i = this._dialog) == null || i.close(), this._returnFocus();
   }
   // Handles the value of the isOpen property on first render of the component
   _handleModalOpenStateOnFirstRender(e) {
-    e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(x);
+    e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalCustomEvent(v);
   }
   // 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, this._dispatchModalCustomEvent(S)) : this._dispatchModalCustomEvent(B) : this._dispatchModalCustomEvent(x));
+    const o = e.get("isOpen");
+    o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, this._dispatchModalCustomEvent(_)) : this._dispatchModalCustomEvent(x) : this._dispatchModalCustomEvent(v));
   }
   _handleActionClick(e) {
-    var t, i;
-    e === "leading" ? ((t = this._dialog) == null || t.close("leading"), this._dispatchModalCustomEvent(Oe)) : e === "supporting" && ((i = this._dialog) == null || i.close("supporting"), this._dispatchModalCustomEvent(Le));
+    var o, i;
+    e === "leading" ? ((o = this._dialog) == null || o.close("leading"), this._dispatchModalCustomEvent(Z)) : e === "supporting" && ((i = this._dialog) == null || i.close("supporting"), this._dispatchModalCustomEvent(ee));
   }
   /**
    * Return focus to the specified element, providing the selector is valid
    * and the chosen element can be found.
    */
   _returnFocus() {
-    var t, i;
-    const e = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
+    var o, i;
+    const e = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
     e && ((i = document.querySelector(e)) == null || i.focus());
   }
   /**
@@ -379,14 +165,14 @@ class s extends ie($) {
    */
   renderCloseButton() {
     var e;
-    return p`
+    return c`
             <pie-icon-button
                 @click="${() => {
       this.isOpen = !1;
     }}"
                 variant="ghost-secondary"
                 class="c-modal-closeBtn"
-                aria-label="${((e = this.aria) == null ? void 0 : e.close) || c}"
+                aria-label="${((e = this.aria) == null ? void 0 : e.close) || r}"
                 data-test-id="modal-close-button">
                 <icon-close></icon-close>
             </pie-icon-button>`;
@@ -399,16 +185,16 @@ class s extends ie($) {
    */
   renderBackButton() {
     var e;
-    return p`
+    return c`
             <pie-icon-button
                 @click="${() => {
       this._backButtonClicked = !0, this.isOpen = !1;
     }}"
                 variant="ghost-secondary"
                 class="c-modal-backBtn"
-                aria-label="${((e = this.aria) == null ? void 0 : e.back) || c}"
+                aria-label="${((e = this.aria) == null ? void 0 : e.back) || r}"
                 data-test-id="modal-back-button">
-                ${this.isRTL ? p`<icon-chevron-right></icon-chevron-right>` : p`<icon-chevron-left></icon-chevron-left>`}
+                ${this.isRTL ? c`<icon-chevron-right></icon-chevron-right>` : c`<icon-chevron-left></icon-chevron-left>`}
             </pie-icon-button>
         `;
   }
@@ -422,18 +208,18 @@ class s extends ie($) {
    * @private
    */
   renderLeadingAction() {
-    const { text: e, variant: t = "primary", ariaLabel: i } = this.leadingAction;
-    return e ? p`
+    const { text: e, variant: o = "primary", ariaLabel: i } = this.leadingAction;
+    return e ? c`
             <pie-button
-                variant="${t}"
-                aria-label="${i || c}"
+                variant="${o}"
+                aria-label="${i || r}"
                 type="submit"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("leading")}"
                 data-test-id="modal-leading-action">
                 ${e}
             </pie-button>
-        ` : c;
+        ` : r;
   }
   /**
    * Render supportingAction button depending on prop availability.
@@ -447,76 +233,77 @@ class s extends ie($) {
    * @private
    */
   renderSupportingAction() {
-    const { text: e, variant: t = "ghost", ariaLabel: i } = this.supportingAction;
-    return e ? this.leadingAction ? p`
+    const { text: e, variant: o = "ghost", ariaLabel: i } = this.supportingAction;
+    return e ? this.leadingAction ? c`
             <pie-button
-                variant="${t}"
-                aria-label="${i || c}"
+                variant="${o}"
+                aria-label="${i || r}"
                 type="reset"
                 ?isFullWidth="${this.hasStackedActions}"
                 @click="${() => this._handleActionClick("supporting")}"
                 data-test-id="modal-supporting-action">
                 ${e}
             </pie-button>
-        ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), c) : c;
+        ` : (console.warn("Use `leadingAction` instead of `supportingAction`. `supportingAction` is being ignored."), r) : r;
   }
   /**
    * Renders the modal inner content and footer of the modal.
    * @private
    */
   renderModalContentAndFooter() {
-    return p`
+    return c`
         <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
             <div class="c-modal-contentInner">
                 <slot></slot>
             </div>
+            ${this.isLoading ? c`<pie-spinner size="xl" variant="secondary"></pie-spinner>` : r}
         </article>
         <footer class="c-modal-footer">
-            ${this.leadingAction ? this.renderLeadingAction() : c}
-            ${this.supportingAction ? this.renderSupportingAction() : c}
+            ${this.leadingAction ? this.renderLeadingAction() : r}
+            ${this.supportingAction ? this.renderSupportingAction() : r}
         </footer>`;
   }
   render() {
     const {
       aria: e,
-      hasBackButton: t,
+      hasBackButton: o,
       hasStackedActions: i,
-      heading: o,
-      headingLevel: a = "h2",
-      isDismissible: r,
-      isFooterPinned: h,
-      isFullWidthBelowMid: g,
-      isLoading: L,
-      leadingAction: G,
-      position: X,
-      size: J,
-      supportingAction: Q
-    } = this, R = te(a);
-    return p`
+      heading: t,
+      headingLevel: s = "h2",
+      isDismissible: m,
+      isFooterPinned: w,
+      isFullWidthBelowMid: f,
+      isLoading: y,
+      leadingAction: M,
+      position: $,
+      size: E,
+      supportingAction: D
+    } = this, O = F(s);
+    return c`
         <dialog
             id="dialog"
             class="c-modal"
-            size="${J}"
-            position="${X}"
-            ?hasActions=${G || Q}
-            ?hasBackButton=${t}
+            size="${E}"
+            position="${$}"
+            ?hasActions=${M || D}
+            ?hasBackButton=${o}
             ?hasStackedActions=${i}
-            ?isDismissible=${r}
-            ?isFooterPinned=${h}
-            ?isFullWidthBelowMid=${g}
-            ?isLoading=${L}
-            aria-busy="${L ? "true" : "false"}"
-            aria-label="${L && (e == null ? void 0 : e.loading) || c}"
+            ?isDismissible=${m}
+            ?isFooterPinned=${w}
+            ?isFullWidthBelowMid=${f}
+            ?isLoading=${y}
+            aria-busy="${y ? "true" : "false"}"
+            aria-label="${y && (e == null ? void 0 : e.loading) || r}"
             data-test-id="pie-modal">
             <header class="c-modal-header">
-                ${t ? this.renderBackButton() : c}
-                <${R} class="c-modal-heading">
-                    ${o}
-                </${R}>
-                ${r ? this.renderCloseButton() : c}
+                ${o ? this.renderBackButton() : r}
+                <${O} class="c-modal-heading">
+                    ${t}
+                </${O}>
+                ${m ? this.renderCloseButton() : r}
             </header>
             ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
-    h ? this.renderModalContentAndFooter() : p`
+    w ? this.renderModalContentAndFooter() : c`
                         <div class="c-modal-scrollContainer">
                             ${this.renderModalContentAndFooter()}
                         </div>
@@ -524,68 +311,68 @@ class s extends ie($) {
         </dialog>`;
   }
 }
-s.styles = ee(ze);
-d([
-  l({ type: Object })
-], s.prototype, "aria", 2);
-d([
-  l({ type: String }),
-  oe(k)
-], s.prototype, "heading", 2);
-d([
-  l(),
-  E(k, Ce, "h2")
-], s.prototype, "headingLevel", 2);
-d([
-  l({ type: Boolean })
-], s.prototype, "hasBackButton", 2);
-d([
-  l({ type: Boolean })
-], s.prototype, "hasStackedActions", 2);
-d([
-  l({ type: Boolean, reflect: !0 })
-], s.prototype, "isDismissible", 2);
-d([
-  l({ type: Boolean })
-], s.prototype, "isFooterPinned", 2);
-d([
-  l({ type: Boolean })
-], s.prototype, "isFullWidthBelowMid", 2);
-d([
-  l({ type: Boolean, reflect: !0 })
-], s.prototype, "isLoading", 2);
-d([
-  l({ type: Boolean })
-], s.prototype, "isOpen", 2);
-d([
-  l({ type: Object })
-], s.prototype, "leadingAction", 2);
-d([
-  l(),
-  E(k, $e, "center")
-], s.prototype, "position", 2);
-d([
-  l()
-], s.prototype, "returnFocusAfterCloseSelector", 2);
-d([
-  l(),
-  E(k, Ae, "medium")
-], s.prototype, "size", 2);
-d([
-  l({ type: Object })
-], s.prototype, "supportingAction", 2);
-d([
-  O("dialog")
-], s.prototype, "_dialog", 2);
-ne(k, s);
+n.styles = T(G);
+l([
+  d({ type: Object })
+], n.prototype, "aria", 2);
+l([
+  d({ type: String }),
+  R(u)
+], n.prototype, "heading", 2);
+l([
+  d(),
+  z(u, X, "h2")
+], n.prototype, "headingLevel", 2);
+l([
+  d({ type: Boolean })
+], n.prototype, "hasBackButton", 2);
+l([
+  d({ type: Boolean })
+], n.prototype, "hasStackedActions", 2);
+l([
+  d({ type: Boolean, reflect: !0 })
+], n.prototype, "isDismissible", 2);
+l([
+  d({ type: Boolean })
+], n.prototype, "isFooterPinned", 2);
+l([
+  d({ type: Boolean })
+], n.prototype, "isFullWidthBelowMid", 2);
+l([
+  d({ type: Boolean, reflect: !0 })
+], n.prototype, "isLoading", 2);
+l([
+  d({ type: Boolean })
+], n.prototype, "isOpen", 2);
+l([
+  d({ type: Object })
+], n.prototype, "leadingAction", 2);
+l([
+  d(),
+  z(u, Q, "center")
+], n.prototype, "position", 2);
+l([
+  d()
+], n.prototype, "returnFocusAfterCloseSelector", 2);
+l([
+  d(),
+  z(u, J, "medium")
+], n.prototype, "size", 2);
+l([
+  d({ type: Object })
+], n.prototype, "supportingAction", 2);
+l([
+  N("dialog")
+], n.prototype, "_dialog", 2);
+j(u, n);
 export {
-  S as ON_MODAL_BACK_EVENT,
-  B as ON_MODAL_CLOSE_EVENT,
-  Oe as ON_MODAL_LEADING_ACTION_CLICK,
-  x as ON_MODAL_OPEN_EVENT,
-  Le as ON_MODAL_SUPPORTING_ACTION_CLICK,
-  s as PieModal,
-  Ce as headingLevels,
-  $e as positions,
-  Ae as sizes
+  _ as ON_MODAL_BACK_EVENT,
+  x as ON_MODAL_CLOSE_EVENT,
+  Z as ON_MODAL_LEADING_ACTION_CLICK,
+  v as ON_MODAL_OPEN_EVENT,
+  ee as ON_MODAL_SUPPORTING_ACTION_CLICK,
+  n as PieModal,
+  X as headingLevels,
+  Q as positions,
+  J as sizes
 };

package/dist/react.js

@@ -1,67 +1,75 @@
-import * as E from "react";
-import { PieModal as C } from "./index.js";
-import { ON_MODAL_BACK_EVENT as S, ON_MODAL_CLOSE_EVENT as b, ON_MODAL_LEADING_ACTION_CLICK as G, ON_MODAL_OPEN_EVENT as R, ON_MODAL_SUPPORTING_ACTION_CLICK as x, headingLevels as K, positions as V, sizes as $ } from "./index.js";
+import * as f from "react";
+import { PieModal as E } from "./index.js";
+import { ON_MODAL_BACK_EVENT as $, ON_MODAL_CLOSE_EVENT as j, ON_MODAL_LEADING_ACTION_CLICK as B, ON_MODAL_OPEN_EVENT as H, ON_MODAL_SUPPORTING_ACTION_CLICK as U, headingLevels as W, positions as z, sizes as q } from "./index.js";
 import "lit";
 import "lit/static-html.js";
 import "lit/decorators.js";
+import "@justeattakeaway/pie-button";
+import "@justeattakeaway/pie-icon-button";
+import "@justeattakeaway/pie-webc-core";
+import "@justeattakeaway/pie-icons-webc/IconClose";
+import "@justeattakeaway/pie-icons-webc/IconChevronLeft";
+import "@justeattakeaway/pie-icons-webc/IconChevronRight";
+import "@justeattakeaway/pie-spinner";
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const L = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), f = /* @__PURE__ */ new WeakMap(), A = (c, s, p, m, h) => {
-  const i = h == null ? void 0 : h[s];
-  i === void 0 || p === m ? p == null && s in HTMLElement.prototype ? c.removeAttribute(s) : c[s] = p : ((n, t, u) => {
-    let l = f.get(n);
-    l === void 0 && f.set(n, l = /* @__PURE__ */ new Map());
-    let a = l.get(t);
-    u !== void 0 ? a === void 0 ? (l.set(t, a = { handleEvent: u }), n.addEventListener(t, a)) : a.handleEvent = u : a !== void 0 && (l.delete(t), n.removeEventListener(t, a));
-  })(c, i, p);
+const C = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), O = /* @__PURE__ */ new WeakMap(), L = (o, t, d, c, m) => {
+  const s = m == null ? void 0 : m[t];
+  s === void 0 || d === c ? d == null && t in HTMLElement.prototype ? o.removeAttribute(t) : o[t] = d : ((a, i, h) => {
+    let l = O.get(a);
+    l === void 0 && O.set(a, l = /* @__PURE__ */ new Map());
+    let r = l.get(i);
+    h !== void 0 ? r === void 0 ? (l.set(i, r = { handleEvent: h }), a.addEventListener(i, r)) : r.handleEvent = h : r !== void 0 && (l.delete(i), a.removeEventListener(i, r));
+  })(o, s, d);
+}, A = (o, t) => {
+  typeof o == "function" ? o(t) : o.current = t;
 };
-function P(c = window.React, s, p, m, h) {
-  let i, n, t;
-  if (s === void 0) {
-    const d = c;
-    ({ tagName: n, elementClass: t, events: m, displayName: h } = d), i = d.react;
+function y(o = window.React, t, d, c, m) {
+  let s, a, i;
+  if (t === void 0) {
+    const p = o;
+    ({ tagName: a, elementClass: i, events: c, displayName: m } = p), s = p.react;
   } else
-    i = c, t = p, n = s;
-  const u = i.Component, l = i.createElement, a = new Set(Object.keys(m ?? {}));
-  class v extends u {
+    s = o, i = d, a = t;
+  const h = s.Component, l = s.createElement, r = new Set(Object.keys(c ?? {}));
+  class v extends h {
     constructor() {
       super(...arguments), this.o = null;
     }
     t(e) {
       if (this.o !== null)
-        for (const N in this.i)
-          A(this.o, N, this.props[N], e ? e[N] : void 0, m);
+        for (const u in this.i)
+          L(this.o, u, this.props[u], e ? e[u] : void 0, c);
     }
     componentDidMount() {
-      this.t();
+      var e;
+      this.t(), (e = this.o) === null || e === void 0 || e.removeAttribute("defer-hydration");
     }
     componentDidUpdate(e) {
       this.t(e);
     }
     render() {
-      const { _$Gl: e, ...N } = this.props;
-      this.h !== e && (this.u = (o) => {
-        e !== null && ((r, O) => {
-          typeof r == "function" ? r(O) : r.current = O;
-        })(e, o), this.o = o, this.h = e;
+      const { _$Gl: e, ...u } = this.props;
+      this.h !== e && (this.u = (n) => {
+        e !== null && A(e, n), this.o = n, this.h = e;
       }), this.i = {};
-      const _ = { ref: this.u };
-      for (const [o, r] of Object.entries(N))
-        L.has(o) ? _[o === "className" ? "class" : o] = r : a.has(o) || o in t.prototype ? this.i[o] = r : _[o] = r;
-      return l(n, _);
+      const N = { ref: this.u };
+      for (const [n, _] of Object.entries(u))
+        C.has(n) ? N[n === "className" ? "class" : n] = _ : r.has(n) || n in i.prototype ? this.i[n] = _ : N[n] = _;
+      return N.suppressHydrationWarning = !0, l(a, N);
     }
   }
-  v.displayName = h ?? t.name;
-  const M = i.forwardRef((d, e) => l(v, { ...d, _$Gl: e }, d == null ? void 0 : d.children));
+  v.displayName = m ?? i.name;
+  const M = s.forwardRef((p, e) => l(v, { ...p, _$Gl: e }, p == null ? void 0 : p.children));
   return M.displayName = v.displayName, M;
 }
-const w = P({
+const x = y({
   displayName: "PieModal",
-  elementClass: C,
-  react: E,
+  elementClass: E,
+  react: f,
   tagName: "pie-modal",
   events: {
     onPieModalOpen: "pie-modal-open",
@@ -77,13 +85,13 @@ const w = P({
   }
 });
 export {
-  S as ON_MODAL_BACK_EVENT,
-  b as ON_MODAL_CLOSE_EVENT,
-  G as ON_MODAL_LEADING_ACTION_CLICK,
-  R as ON_MODAL_OPEN_EVENT,
-  x as ON_MODAL_SUPPORTING_ACTION_CLICK,
-  w as PieModal,
-  K as headingLevels,
-  V as positions,
-  $ as sizes
+  $ as ON_MODAL_BACK_EVENT,
+  j as ON_MODAL_CLOSE_EVENT,
+  B as ON_MODAL_LEADING_ACTION_CLICK,
+  H as ON_MODAL_OPEN_EVENT,
+  U as ON_MODAL_SUPPORTING_ACTION_CLICK,
+  x as PieModal,
+  W as headingLevels,
+  z as positions,
+  q as sizes
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.30.0",
+  "version": "0.32.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -28,12 +28,8 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeat/pie-design-tokens": "5.8.2",
-    "@justeattakeaway/pie-button": "0.35.0",
+    "@justeat/pie-design-tokens": "5.9.0",
     "@justeattakeaway/pie-components-config": "0.4.0",
-    "@justeattakeaway/pie-icon-button": "0.19.0",
-    "@justeattakeaway/pie-icons-webc": "0.11.1",
-    "@justeattakeaway/pie-webc-core": "0.11.0",
     "@types/body-scroll-lock": "3.1.1"
   },
   "peerDependencies": {
@@ -43,6 +39,11 @@
     "extends": "../../../package.json"
   },
   "dependencies": {
+    "@justeattakeaway/pie-button": "0.37.0",
+    "@justeattakeaway/pie-icon-button": "0.21.1",
+    "@justeattakeaway/pie-icons-webc": "0.11.1",
+    "@justeattakeaway/pie-spinner": "0.2.1",
+    "@justeattakeaway/pie-webc-core": "0.11.0",
     "dialog-polyfill": "0.5.6"
   },
   "sideEffects": [

package/src/index.ts

@@ -3,13 +3,17 @@ import {
 } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { property, query } from 'lit/decorators.js';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+
+import '@justeattakeaway/pie-button';
+import '@justeattakeaway/pie-icon-button';
 import {
     requiredProperty, RtlMixin, validPropertyValues, defineCustomElement,
 } from '@justeattakeaway/pie-webc-core';
 import '@justeattakeaway/pie-icons-webc/IconClose';
 import '@justeattakeaway/pie-icons-webc/IconChevronLeft';
 import '@justeattakeaway/pie-icons-webc/IconChevronRight';
-import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+import '@justeattakeaway/pie-spinner';
 
 import styles from './modal.scss?inline';
 import {
@@ -339,6 +343,7 @@ export class PieModal extends RtlMixin(LitElement) implements ModalProps {
             <div class="c-modal-contentInner">
                 <slot></slot>
             </div>
+            ${this.isLoading ? html`<pie-spinner size="xl" variant="secondary"></pie-spinner>` : nothing}
         </article>
         <footer class="c-modal-footer">
             ${this.leadingAction ? this.renderLeadingAction() : nothing}

package/src/modal.scss

@@ -8,17 +8,6 @@
     box-sizing: border-box;
 }
 
-// Spin animation for loading state
-@keyframes rotate360 {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-
 .c-modal {
     // Custom Property Declarations
     // These are defined here instead of :host to encapsulate them inside Shadow DOM
@@ -245,23 +234,6 @@
             --modal-content-padding-inline: var(--dt-spacing-e);
         }
 
-        // Spinner sizes defaults
-        --spinner-size: 48px;
-        --spinner-border-width: 6px;
-
-        // Spinner colors - currently set for the primary button styles
-        --spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);
-        --spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);
-        --spinner-base-color-l: var(--dt-color-content-interactive-secondary-l);
-        --spinner-left-color-opacity: 0.35;
-        --spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));
-        --spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);
-
-        // Spinner animations
-        --spinner-animation-duration: 1.15s;
-        --spinner-animation-timing-function: linear;
-        --spinner-animation-iteration-count: infinite;
-
         position: relative;
         min-block-size: var(--dt-spacing-j);
 
@@ -289,27 +261,6 @@
             // The shadow itself does not move as you scroll.
             background-attachment: local, scroll;
         }
-
-        &:before {
-            content: '';
-
-            // Centre the spinner over the top of the button text
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            translate: -50% -50%;
-
-            height: var(--spinner-size);
-            width: var(--spinner-size);
-            display: block;
-            background-color: transparent;
-            border-radius: 50%;
-            border-color: var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);
-            border-width: var(--spinner-border-width);
-            border-style: solid;
-            will-change: transform;
-            opacity: 0;
-        }
     }
 
     & > .c-modal-scrollContainer {
@@ -342,13 +293,15 @@
     }
 
     &[isLoading] .c-modal-content {
-        &:before {
-            animation: rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count);
-            opacity: 1;
+        pie-spinner {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
         }
 
         & .c-modal-contentInner {
-            opacity: 0;
+            display: none;
         }
     }