@justeattakeaway/pie-modal 1.24.0 → 1.24.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/custom-elements.json +1 -1
  2. package/dist/index.js +204 -191
  3. package/dist/react.d.ts +1 -1
  4. package/package.json +5 -5
  5. package/src/index.ts +54 -9
  6. package/src/modal.scss +29 -6
  7. package/src/react.ts +1 -1
package/custom-elements.json CHANGED
@@ -577,7 +577,7 @@
577
577
  "privacy": "private",
578
578
  "return": {
579
579
  "type": {
580
- "text": "'ghost-secondary' | 'ghost-inverse' | 'secondary'"
580
+ "text": "'ghost-secondary' | 'ghost-secondary-dark' | 'ghost-inverse-light'"
581
581
  }
582
582
  }
583
583
  },
package/dist/index.js CHANGED
@@ -1,86 +1,86 @@
1
- import { LitElement as T, unsafeCSS as K, nothing as c } from "lit";
2
- import { html as s, unsafeStatic as H } from "lit/static-html.js";
1
+ import { LitElement as T, unsafeCSS as K, nothing as g } from "lit";
2
+ import { html as m, unsafeStatic as H } from "lit/static-html.js";
3
3
  import { property as d, query as R } from "lit/decorators.js";
4
- import { classMap as x } from "lit/directives/class-map.js";
5
- import { ifDefined as h } from "lit/directives/if-defined.js";
4
+ import { classMap as _ } from "lit/directives/class-map.js";
5
+ import { ifDefined as u } from "lit/directives/if-defined.js";
6
6
  import "@justeattakeaway/pie-button";
7
7
  import "@justeattakeaway/pie-icon-button";
8
- import { requiredProperty as N, validPropertyValues as y, safeCustomElement as W, dispatchCustomEvent as u } from "@justeattakeaway/pie-webc-core";
8
+ import { requiredProperty as W, validPropertyValues as k, safeCustomElement as N, dispatchCustomEvent as b } from "@justeattakeaway/pie-webc-core";
9
9
  import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
10
10
  import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
11
11
  import "@justeattakeaway/pie-spinner";
12
- const S = class S extends T {
12
+ const x = class x extends T {
13
13
  willUpdate() {
14
- this.getAttribute("v") || this.setAttribute("v", S.v);
14
+ this.getAttribute("v") || this.setAttribute("v", x.v);
15
15
  }
16
16
  };
17
- S.v = "1.24.0";
18
- let C = S;
19
- function j(a) {
20
- if (Array.isArray(a)) {
21
- for (var o = 0, t = Array(a.length); o < a.length; o++)
22
- t[o] = a[o];
23
- return t;
17
+ x.v = "1.24.2";
18
+ let B = x;
19
+ function V(o) {
20
+ if (Array.isArray(o)) {
21
+ for (var t = 0, a = Array(o.length); t < o.length; t++)
22
+ a[t] = o[t];
23
+ return a;
24
24
  } else
25
- return Array.from(a);
25
+ return Array.from(o);
26
26
  }
27
- var B = !1;
27
+ var A = !1;
28
28
  if (typeof window < "u") {
29
- var z = {
29
+ var M = {
30
30
  get passive() {
31
- B = !0;
31
+ A = !0;
32
32
  }
33
33
  };
34
- window.addEventListener("testPassive", null, z), window.removeEventListener("testPassive", null, z);
34
+ window.addEventListener("testPassive", null, M), window.removeEventListener("testPassive", null, M);
35
35
  }
36
- var O = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), g = [], k = !1, $ = -1, f = void 0, v = void 0, D = function(o) {
37
- return g.some(function(t) {
38
- return !!(t.options.allowTouchMove && t.options.allowTouchMove(o));
36
+ var $ = 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 = [], w = !1, D = -1, v = void 0, y = void 0, E = function(t) {
37
+ return p.some(function(a) {
38
+ return !!(a.options.allowTouchMove && a.options.allowTouchMove(t));
39
39
  });
40
- }, w = function(o) {
41
- var t = o || window.event;
42
- return D(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
43
- }, V = function(o) {
44
- if (v === void 0) {
45
- var t = !1, e = window.innerWidth - document.documentElement.clientWidth;
46
- t && e > 0 && (v = document.body.style.paddingRight, document.body.style.paddingRight = e + "px");
47
- }
48
- f === void 0 && (f = document.body.style.overflow, document.body.style.overflow = "hidden");
40
+ }, S = function(t) {
41
+ var a = t || window.event;
42
+ return E(a.target) || a.touches.length > 1 ? !0 : (a.preventDefault && a.preventDefault(), !1);
43
+ }, j = function(t) {
44
+ if (y === void 0) {
45
+ var a = !1, i = window.innerWidth - document.documentElement.clientWidth;
46
+ a && i > 0 && (y = document.body.style.paddingRight, document.body.style.paddingRight = i + "px");
47
+ }
48
+ v === void 0 && (v = document.body.style.overflow, document.body.style.overflow = "hidden");
49
49
  }, Y = function() {
50
- v !== void 0 && (document.body.style.paddingRight = v, v = void 0), f !== void 0 && (document.body.style.overflow = f, f = void 0);
51
- }, q = function(o) {
52
- return o ? o.scrollHeight - o.scrollTop <= o.clientHeight : !1;
53
- }, U = function(o, t) {
54
- var e = o.targetTouches[0].clientY - $;
55
- return D(o.target) ? !1 : t && t.scrollTop === 0 && e > 0 || q(t) && e < 0 ? w(o) : (o.stopPropagation(), !0);
56
- }, X = function(o, t) {
57
- if (!o) {
50
+ y !== void 0 && (document.body.style.paddingRight = y, y = void 0), v !== void 0 && (document.body.style.overflow = v, v = void 0);
51
+ }, q = function(t) {
52
+ return t ? t.scrollHeight - t.scrollTop <= t.clientHeight : !1;
53
+ }, U = function(t, a) {
54
+ var i = t.targetTouches[0].clientY - D;
55
+ return E(t.target) ? !1 : a && a.scrollTop === 0 && i > 0 || q(a) && i < 0 ? S(t) : (t.stopPropagation(), !0);
56
+ }, X = function(t, a) {
57
+ if (!t) {
58
58
  console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
59
59
  return;
60
60
  }
61
- if (!g.some(function(i) {
62
- return i.targetElement === o;
61
+ if (!p.some(function(e) {
62
+ return e.targetElement === t;
63
63
  })) {
64
- var e = {
65
- targetElement: o,
64
+ var i = {
65
+ targetElement: t,
66
66
  options: {}
67
67
  };
68
- g = [].concat(j(g), [e]), O ? (o.ontouchstart = function(i) {
69
- i.targetTouches.length === 1 && ($ = i.targetTouches[0].clientY);
70
- }, o.ontouchmove = function(i) {
71
- i.targetTouches.length === 1 && U(i, o);
72
- }, k || (document.addEventListener("touchmove", w, B ? { passive: !1 } : void 0), k = !0)) : V();
73
- }
74
- }, G = function(o) {
75
- if (!o) {
68
+ p = [].concat(V(p), [i]), $ ? (t.ontouchstart = function(e) {
69
+ e.targetTouches.length === 1 && (D = e.targetTouches[0].clientY);
70
+ }, t.ontouchmove = function(e) {
71
+ e.targetTouches.length === 1 && U(e, t);
72
+ }, w || (document.addEventListener("touchmove", S, A ? { passive: !1 } : void 0), w = !0)) : j();
73
+ }
74
+ }, G = function(t) {
75
+ if (!t) {
76
76
  console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
77
77
  return;
78
78
  }
79
- g = g.filter(function(t) {
80
- return t.targetElement !== o;
81
- }), O ? (o.ontouchstart = null, o.ontouchmove = null, k && g.length === 0 && (document.removeEventListener("touchmove", w, B ? { passive: !1 } : void 0), k = !1)) : g.length || Y();
79
+ p = p.filter(function(a) {
80
+ return a.targetElement !== t;
81
+ }), $ ? (t.ontouchstart = null, t.ontouchmove = null, w && p.length === 0 && (document.removeEventListener("touchmove", S, A ? { passive: !1 } : void 0), w = !1)) : p.length || Y();
82
82
  };
83
- const J = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-l-family);--modal-content-color: var(--dt-color-content-default);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-below-20);--modal-image-slot-bg-color: none;--modal-easing: var(--dt-motion-easing-persistent-functional);--modal-transition-duration: var(--dt-motion-timing-150);--backdrop-transition-duration: var(--dt-motion-timing-200);opacity:0;transform:translateY(-40px);transition:opacity var(--modal-transition-duration) var(--modal-easing),transform var(--modal-transition-duration) var(--modal-easing),display var(--modal-transition-duration) allow-discrete,overlay var(--backdrop-transition-duration) allow-discrete;position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--modal-content-color);background-color:var(--modal-bg-color);padding:0;display:flex;flex-direction:column;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{--modal-transition-duration: var(--dt-motion-timing-250);--backdrop-transition-duration: var(--dt-motion-timing-300);opacity:1;transform:translateY(0)}@starting-style{.c-modal[open]{opacity:0;transform:translateY(-40px)}}.c-modal[open]::backdrop{opacity:1}@starting-style{.c-modal[open]::backdrop{opacity:0}}@media (min-width: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--large{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay);opacity:0;transition:opacity var(--backdrop-transition-duration) var(--modal-easing),display var(--backdrop-transition-duration) allow-discrete,overlay var(--backdrop-transition-duration) allow-discrete}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-c)}}.c-modal .c-modal-imageSlot.c-modal-imageSlot--illustration{display:flex;justify-content:center;align-items:center;height:200px;background-color:var(--modal-image-slot-bg-color)}.c-modal .c-modal-imageSlot.c-modal-imageSlot--illustration ::slotted([slot=image]){width:168px;height:168px;overflow:hidden}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image{overflow:hidden;aspect-ratio:16/9}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--small{aspect-ratio:3/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--large{aspect-ratio:4/3}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image ::slotted([slot=image]){width:100%}@media (min-width: 769px){.c-modal .c-modal-imageSlot.c-modal-imageSlot--image{aspect-ratio:3/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--small{aspect-ratio:4/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--large{aspect-ratio:21/9}}.c-modal .c-modal-imageSlot .c-modal-closeBtn{position:absolute;inset-block-start:0;inset-inline-end:0;margin-block-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{flex-direction:column}}.c-modal ::slotted([slot=footer]){display:flex;width:100%}.c-modal ::slotted([slot=headerContent]){grid-area:content;padding-inline-start:var(--dt-spacing-e);padding-inline-end:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-d)}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close" "content content content";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);--modal-header-font-style: normal;font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);font-style:var(--modal-header-font-style);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:16px}@media (min-width: 769px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:22px}}.c-modal .c-modal-heading.c-modal-heading--emphasised{--modal-header-font-size: calc(var(--dt-font-heading-xl-italic-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-italic-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-xl-italic-weight);--modal-header-font-style: var(--dt-font-heading-xl-italic-font-style);font-variation-settings:"slnt" -20}@media (min-width: 769px){.c-modal .c-modal-heading.c-modal-heading--emphasised{--modal-header-font-size: calc(var(--dt-font-heading-xl-italic-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-italic-line-height--wide) * 1px)}}.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 769px){.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 769px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-body-l-size) * 1px);--modal-content-font-weight: var(--dt-font-body-l-weight);--modal-content-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--modal-content-padding-block-end: var(--dt-spacing-e);position:relative;font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 769px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content:has(+slot>footer){padding-block-end:var(--modal-content-padding-block)}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--modal-bg-color) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal.c-modal--pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.c-modal--loading .c-modal-content pie-spinner{display:flex;justify-content:center;align-items:center;padding:var(--dt-spacing-j) calc(var(--dt-spacing-j) + var(--dt-spacing-d))}.c-modal.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}.c-modal .c-modal-backBtn-icon:dir(rtl){transform:rotate(180deg)}.c-modal.c-modal--bg-subtle{--modal-image-slot-bg-color: var(--dt-color-container-subtle)}.c-modal.c-modal--bg-brand-01{--modal-bg-color: var(--dt-color-support-brand-01)}.c-modal.c-modal--bg-brand-02{--modal-bg-color: var(--dt-color-support-brand-02)}.c-modal.c-modal--bg-brand-03{--modal-bg-color: var(--dt-color-support-brand-03)}.c-modal.c-modal--bg-brand-03-subtle{--modal-bg-color: var(--dt-color-support-brand-03-subtle)}.c-modal.c-modal--bg-brand-04{--modal-bg-color: var(--dt-color-support-brand-04)}.c-modal.c-modal--bg-brand-04-subtle{--modal-bg-color: var(--dt-color-support-brand-04-subtle)}.c-modal.c-modal--bg-brand-05{--modal-bg-color: var(--dt-color-support-brand-05)}.c-modal.c-modal--bg-brand-05-subtle{--modal-bg-color: var(--dt-color-support-brand-05-subtle)}.c-modal.c-modal--bg-brand-06{--modal-content-color: var(--dt-color-content-inverse);--modal-bg-color: var(--dt-color-support-brand-06)}.c-modal.c-modal--bg-brand-06-subtle{--modal-bg-color: var(--dt-color-support-brand-06-subtle)}.c-modal.c-modal--bg-brand-08{--modal-bg-color: var(--dt-color-support-brand-08)}.c-modal.c-modal--bg-brand-08-subtle{--modal-bg-color: var(--dt-color-support-brand-08-subtle)}@media (prefers-reduced-motion: reduce){.c-modal,.c-modal::backdrop{transition:none;transform:none}}', Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], oo = ["top", "center"], ko = ["image", "illustration"], ao = ["small", "medium", "large"], to = [
83
+ const J = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000001a}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--modal-border-radius: var(--dt-radius-rounded-d);--modal-font: var(--dt-font-interactive-l-family);--modal-content-color: var(--dt-color-content-default);--modal-bg-color: var(--dt-color-container-default);--modal-elevation: var(--dt-elevation-below-20);--modal-image-slot-bg-color: none;--modal-easing: var(--dt-motion-easing-persistent-functional);--modal-transition-duration: var(--dt-motion-timing-150);--backdrop-transition-duration: var(--dt-motion-timing-200);opacity:0;transform:translateY(-40px);transition:opacity var(--modal-transition-duration) var(--modal-easing),transform var(--modal-transition-duration) var(--modal-easing),display var(--modal-transition-duration) allow-discrete,overlay var(--backdrop-transition-duration) allow-discrete;position:fixed;top:0;border-radius:var(--modal-border-radius);border:none;box-shadow:var(--modal-elevation);font-family:var(--modal-font);color:var(--modal-content-color);background-color:var(--modal-bg-color);padding:0;display:flex;flex-direction:column;--modal-margin-none: var(--dt-spacing-none);--modal-margin-small: var(--dt-spacing-g);--modal-margin-large: var(--dt-spacing-j);--modal-margin-block: var(--modal-margin-small);--modal-block-size: fit-content;--modal-inline-size: 75%;--modal-max-block-size: calc(100vh - calc(var(--modal-margin-block) * 2));--modal-max-inline-size: var(--modal-size-m);block-size:var(--modal-block-size);inline-size:var(--modal-inline-size);max-block-size:var(--modal-max-block-size);max-inline-size:var(--modal-max-inline-size)}.c-modal:focus-visible{outline:none}@media (max-width: 767px){.c-modal pie-icon-button{--btn-dimension: 40px}}.c-modal[open]{--modal-transition-duration: var(--dt-motion-timing-250);--backdrop-transition-duration: var(--dt-motion-timing-300);opacity:1;transform:translateY(0)}@starting-style{.c-modal[open]{opacity:0;transform:translateY(-40px)}}.c-modal[open]::backdrop{opacity:1}@starting-style{.c-modal[open]::backdrop{opacity:0}}@media (min-width: 769px){.c-modal{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--small{--modal-max-inline-size: var(--modal-size-s)}@media (min-width: 769px){.c-modal.c-modal--small{--modal-margin-block: var(--modal-margin-large)}}.c-modal.c-modal--large{--modal-inline-size: 75%;--modal-max-inline-size: var(--modal-size-l);--modal-margin-block: var(--modal-margin-large)}@media (max-width: 767px){.c-modal.c-modal--large,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid{--modal-margin-block: var(--modal-margin-none);--modal-border-radius: var(--dt-radius-rounded-none);--modal-block-size: 100%;--modal-inline-size: 100%;--modal-max-inline-size: 100%}.c-modal.c-modal--large>.c-modal-scrollContainer,.c-modal.c-modal--medium.c-modal--fullWidthBelowMid>.c-modal-scrollContainer{block-size:100%}}.c-modal.c-modal--top{margin-block-start:var(--dt-spacing-j);max-block-size:calc(100% - var(--dt-spacing-j) * 2)}@media (max-width: 767px){.c-modal.c-modal--top.c-modal--large,.c-modal.c-modal--top.c-modal--fullWidthBelowMid.c-modal--medium{margin-block-start:var(--dt-spacing-none);max-block-size:100%}}.c-modal::backdrop{background:var(--dt-color-overlay);opacity:0;transition:opacity var(--backdrop-transition-duration) var(--modal-easing),display var(--backdrop-transition-duration) allow-discrete,overlay var(--backdrop-transition-duration) allow-discrete}@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){.c-modal::backdrop{background:#0000008c}}.c-modal .c-modal-closeBtn{grid-area:close;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-closeBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-none);margin-inline-end:var(--dt-spacing-c)}}.c-modal .c-modal-imageSlot.c-modal-imageSlot--illustration{display:flex;justify-content:center;align-items:center;height:200px;background-color:var(--modal-image-slot-bg-color)}.c-modal .c-modal-imageSlot.c-modal-imageSlot--illustration ::slotted([slot=image]){width:168px;height:168px;overflow:hidden}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image{overflow:hidden;aspect-ratio:16/9}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--small{aspect-ratio:3/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--large{aspect-ratio:4/3}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image ::slotted([slot=image]){width:100%}@media (min-width: 769px){.c-modal .c-modal-imageSlot.c-modal-imageSlot--image{aspect-ratio:3/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--small{aspect-ratio:4/1}.c-modal .c-modal-imageSlot.c-modal-imageSlot--image.c-modal-imageSlot--large{aspect-ratio:21/9}}.c-modal .c-modal-imageSlot .c-modal-closeBtn{position:absolute;inset-block-start:0;inset-inline-end:0;margin-block-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d)}.c-modal .c-modal-footer{--modal-button-spacing: var(--dt-spacing-d);--modal-footer-padding: var(--dt-spacing-d);display:flex;flex-flow:row-reverse;flex-wrap:wrap;gap:var(--modal-button-spacing);padding:var(--modal-footer-padding)}@media (min-width: 769px){.c-modal .c-modal-footer{--modal-footer-padding: var(--dt-spacing-e)}}@media (max-width: 767px){.c-modal .c-modal-footer.c-modal-footer--stackedActions{flex-direction:column}}.c-modal ::slotted([slot=footer]){display:flex;width:100%}.c-modal ::slotted([slot=headerContent]){grid-area:content;padding-inline-start:var(--dt-spacing-e);padding-inline-end:var(--dt-spacing-e);margin-block-end:var(--dt-spacing-d)}.c-modal .c-modal-header{display:grid;grid-template-areas:"back heading close" "content content content";grid-template-columns:minmax(0,max-content) minmax(0,1fr) minmax(0,max-content);align-items:start}.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-m-weight);--modal-header-font-style: normal;font-size:var(--modal-header-font-size);line-height:var(--modal-header-font-line-height);font-weight:var(--modal-header-font-weight);font-style:var(--modal-header-font-style);margin:0;grid-area:heading;margin-inline-start:var(--dt-spacing-d);margin-inline-end:var(--dt-spacing-d);margin-block:16px}@media (min-width: 769px){.c-modal .c-modal-heading{--modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);margin-inline-start:var(--dt-spacing-e);margin-inline-end:var(--dt-spacing-e);margin-block:22px}}.c-modal .c-modal-heading.c-modal-heading--emphasised{--modal-header-font-size: calc(var(--dt-font-heading-xl-italic-size--narrow) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-italic-line-height--narrow) * 1px);--modal-header-font-weight: var(--dt-font-heading-xl-italic-weight);--modal-header-font-style: var(--dt-font-heading-xl-italic-font-style);font-variation-settings:"slnt" -20}@media (min-width: 769px){.c-modal .c-modal-heading.c-modal-heading--emphasised{--modal-header-font-size: calc(var(--dt-font-heading-xl-italic-size--wide) * 1px);--modal-header-font-line-height: calc(var(--dt-font-heading-m-italic-line-height--wide) * 1px)}}.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-b)}@media (min-width: 769px){.c-modal .c-modal-backBtn+.c-modal-heading{margin-inline-start:var(--dt-spacing-c)}}.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-d)}@media (min-width: 769px){.c-modal.c-modal--dismissible .c-modal-heading{margin-inline-end:var(--dt-spacing-e)}}.c-modal .c-modal-backBtn{grid-area:back;margin-block-start:var(--dt-spacing-b);margin-block-end:var(--dt-spacing-b);margin-inline-start:var(--dt-spacing-b);margin-inline-end:var(--dt-spacing-none)}@media (min-width: 769px){.c-modal .c-modal-backBtn{margin-block-start:var(--dt-spacing-c);margin-block-end:var(--dt-spacing-c);margin-inline-start:var(--dt-spacing-c);margin-inline-end:var(--dt-spacing-none)}}.c-modal .c-modal-content{--modal-content-font-size: calc(var(--dt-font-body-l-size) * 1px);--modal-content-font-weight: var(--dt-font-body-l-weight);--modal-content-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--modal-content-padding-block: var(--dt-spacing-a);--modal-content-padding-inline: var(--dt-spacing-d);--modal-content-padding-block-end: var(--dt-spacing-e);position:relative;font-size:var(--modal-content-font-size);line-height:var(--modal-content-line-height);font-weight:var(--modal-content-font-weight);padding-inline-start:var(--modal-content-padding-inline);padding-inline-end:var(--modal-content-padding-inline);padding-block-start:var(--modal-content-padding-block);padding-block-end:var(--modal-content-padding-block-end);flex-grow:1}@media (min-width: 769px){.c-modal .c-modal-content{--modal-content-padding-inline: var(--dt-spacing-e)}}.c-modal .c-modal-content:has(+slot>footer){padding-block-end:var(--modal-content-padding-block)}.c-modal .c-modal-content--scrollable{background:linear-gradient(to bottom,transparent,var(--dt-color-container-default) 75%) center bottom,linear-gradient(transparent,var(--dt-color-border-strong)) center bottom;background-repeat:no-repeat;background-size:100% 48px,100% 12px;background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer{display:flex;flex-direction:column;overflow-y:auto;--bg-scroll-end: linear-gradient(rgba(255, 255, 255, 0), var(--modal-bg-color) 70%) 0 100%;--bg-scroll-bottom: radial-gradient(farthest-corner at 50% 100%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)) 0 100%;--bg-size-scroll-end: 100% 40px;--bg-size-scroll-bottom: 100% 8px;background:var(--bg-scroll-end),var(--bg-scroll-bottom);background-repeat:no-repeat;background-size:var(--bg-size-scroll-end),var(--bg-size-scroll-bottom);background-attachment:local,scroll}.c-modal>.c-modal-scrollContainer .c-modal-content{flex-shrink:0}.c-modal.c-modal--pinnedFooter .c-modal-content{overflow-y:auto}.c-modal.c-modal--loading .c-modal-content pie-spinner{display:flex;justify-content:center;align-items:center;padding:var(--dt-spacing-j) calc(var(--dt-spacing-j) + var(--dt-spacing-d))}.c-modal.c-modal--loading .c-modal-content .c-modal-contentInner{display:none}@supports not (aspect-ratio: 1/1){.c-modal .c-modal-scrollContainer{background:none}}.c-modal .c-modal-backBtn-icon:dir(rtl){transform:rotate(180deg)}.c-modal.c-modal--bg-subtle{--modal-image-slot-bg-color: var(--dt-color-container-subtle)}.c-modal.c-modal--bg-brand-01{--modal-content-color: var(--dt-color-content-dark);--modal-bg-color: var(--dt-color-support-brand-01)}.c-modal.c-modal--bg-brand-02{--modal-bg-color: var(--dt-color-support-brand-02)}.c-modal.c-modal--bg-brand-03{--modal-content-color: var(--dt-color-content-dark);--modal-bg-color: var(--dt-color-support-brand-03)}.c-modal.c-modal--bg-brand-03-subtle{--modal-bg-color: var(--dt-color-support-brand-03-subtle)}.c-modal.c-modal--bg-brand-04{--modal-content-color: var(--dt-color-content-dark);--modal-bg-color: var(--dt-color-support-brand-04)}.c-modal.c-modal--bg-brand-04-subtle{--modal-bg-color: var(--dt-color-support-brand-04-subtle)}.c-modal.c-modal--bg-brand-05{--modal-content-color: var(--dt-color-content-dark);--modal-bg-color: var(--dt-color-support-brand-05)}.c-modal.c-modal--bg-brand-05-subtle{--modal-bg-color: var(--dt-color-support-brand-05-subtle)}.c-modal.c-modal--bg-brand-06{--modal-content-color: var(--dt-color-content-light);--modal-bg-color: var(--dt-color-support-brand-06)}.c-modal.c-modal--bg-brand-06-subtle{--modal-bg-color: var(--dt-color-support-brand-06-subtle)}.c-modal.c-modal--bg-brand-08{--modal-content-color: var(--dt-color-content-dark);--modal-bg-color: var(--dt-color-support-brand-08)}.c-modal.c-modal--bg-brand-08-subtle{--modal-bg-color: var(--dt-color-support-brand-08-subtle)}@media (prefers-reduced-motion: reduce){.c-modal,.c-modal::backdrop{transition:none;transform:none}}', Q = ["h1", "h2", "h3", "h4", "h5", "h6"], Z = ["small", "medium", "large"], oo = ["top", "center"], ko = ["image", "illustration"], to = ["small", "medium", "large"], ao = [
84
84
  "default",
85
85
  "subtle",
86
86
  "brand-01",
@@ -95,7 +95,7 @@ const J = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
95
95
  "brand-06-subtle",
96
96
  "brand-08",
97
97
  "brand-08-subtle"
98
- ], L = "pie-modal-close", _ = "pie-modal-open", M = "pie-modal-back", eo = "pie-modal-leading-action-click", io = "pie-modal-supporting-action-click", r = {
98
+ ], O = "pie-modal-close", C = "pie-modal-open", L = "pie-modal-back", eo = "pie-modal-leading-action-click", io = "pie-modal-supporting-action-click", r = {
99
99
  hasBackButton: !1,
100
100
  hasStackedActions: !1,
101
101
  headingLevel: "h2",
@@ -110,62 +110,62 @@ const J = '*,*:after,*:before{box-sizing:inherit}dialog{position:absolute;left:0
110
110
  backgroundColor: "default",
111
111
  imageSlotAspectRatio: "medium"
112
112
  };
113
- var no = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, l = (a, o, t, e) => {
114
- for (var i = e > 1 ? void 0 : e ? lo(o, t) : o, m = a.length - 1, p; m >= 0; m--)
115
- (p = a[m]) && (i = (e ? p(o, t, i) : p(i)) || i);
116
- return e && i && no(o, t, i), i;
113
+ var no = Object.defineProperty, lo = Object.getOwnPropertyDescriptor, l = (o, t, a, i) => {
114
+ for (var e = i > 1 ? void 0 : i ? lo(t, a) : t, s = o.length - 1, c; s >= 0; s--)
115
+ (c = o[s]) && (e = (i ? c(t, a, e) : c(e)) || e);
116
+ return i && e && no(t, a, e), e;
117
117
  };
118
- const b = "pie-modal";
119
- let n = class extends C {
118
+ const f = "pie-modal";
119
+ let n = class extends B {
120
120
  constructor() {
121
- super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isHeadingEmphasised = r.isHeadingEmphasised, this.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, this.backgroundColor = r.backgroundColor, this.imageSlotAspectRatio = r.imageSlotAspectRatio, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (a) => {
122
- a.key === "Escape" && a.preventDefault();
123
- }, this._handleDialogLightDismiss = (a) => {
124
- if (!this.isDismissible || a.target !== a.currentTarget)
121
+ super(...arguments), this.headingLevel = r.headingLevel, this.hasBackButton = r.hasBackButton, this.hasStackedActions = r.hasStackedActions, this.isDismissible = r.isDismissible, this.isHeadingEmphasised = r.isHeadingEmphasised, this.isFooterPinned = r.isFooterPinned, this.isFullWidthBelowMid = r.isFullWidthBelowMid, this.isLoading = r.isLoading, this.isOpen = r.isOpen, this.position = r.position, this.size = r.size, this.backgroundColor = r.backgroundColor, this.imageSlotAspectRatio = r.imageSlotAspectRatio, this._scrollableContainer = null, this._backButtonClicked = !1, this._escKeyAbortController = null, this._preventModalKeyboardDismissal = (o) => {
122
+ o.key === "Escape" && o.preventDefault();
123
+ }, this._handleDialogLightDismiss = (o) => {
124
+ if (!this.isDismissible || o.target !== o.currentTarget)
125
125
  return;
126
- const o = this._dialog.getBoundingClientRect(), {
127
- top: t = 0,
128
- bottom: e = 0,
129
- left: i = 0,
130
- right: m = 0
131
- } = o || {};
132
- if (t === 0 && e === 0 && i === 0 && m === 0)
126
+ const t = this._dialog.getBoundingClientRect(), {
127
+ top: a = 0,
128
+ bottom: i = 0,
129
+ left: e = 0,
130
+ right: s = 0
131
+ } = t || {};
132
+ if (a === 0 && i === 0 && e === 0 && s === 0)
133
133
  return;
134
- (a.clientY < t || a.clientY > e || a.clientX < i || a.clientX > m) && (this.isOpen = !1);
134
+ (o.clientY < a || o.clientY > i || o.clientX < e || o.clientX > s) && (this.isOpen = !1);
135
135
  };
136
136
  }
137
137
  get _modalScrollContainer() {
138
- var a;
139
- return this._scrollableContainer || (this._scrollableContainer = (a = this._dialog) == null ? void 0 : a.querySelector(".c-modal-scrollContainer")), this._scrollableContainer;
138
+ var o;
139
+ return this._scrollableContainer || (this._scrollableContainer = (o = this._dialog) == null ? void 0 : o.querySelector(".c-modal-scrollContainer")), this._scrollableContainer;
140
140
  }
141
141
  connectedCallback() {
142
142
  super.connectedCallback(), this._abortController = new AbortController();
143
- const { signal: a } = this._abortController;
144
- this.addEventListener("click", (o) => this._handleDialogLightDismiss(o)), this._setupEscKeyListener(), document.addEventListener(_, (o) => this._handleModalOpened(o), { signal: a }), document.addEventListener(L, (o) => this._handleModalClosed(o), { signal: a }), document.addEventListener(M, (o) => this._handleModalClosed(o), { signal: a });
143
+ const { signal: o } = this._abortController;
144
+ this.addEventListener("click", (t) => this._handleDialogLightDismiss(t)), this._setupEscKeyListener(), document.addEventListener(C, (t) => this._handleModalOpened(t), { signal: o }), document.addEventListener(O, (t) => this._handleModalClosed(t), { signal: o }), document.addEventListener(L, (t) => this._handleModalClosed(t), { signal: o });
145
145
  }
146
146
  disconnectedCallback() {
147
147
  super.disconnectedCallback(), this._abortController.abort(), this._enableBodyScroll(), this._removeEscKeyEventListener();
148
148
  }
149
- async firstUpdated(a) {
150
- (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((e) => e.default)).registerDialog(this._dialog);
151
- const { signal: t } = this._abortController;
149
+ async firstUpdated(o) {
150
+ (await import("./dialog-polyfill.esm-CbjBMXAG.js").then((i) => i.default)).registerDialog(this._dialog);
151
+ const { signal: a } = this._abortController;
152
152
  this._dialog.addEventListener("close", () => {
153
153
  this.isOpen = !1;
154
- }, { signal: t }), this._handleModalOpenStateOnFirstRender(a);
154
+ }, { signal: a }), this._handleModalOpenStateOnFirstRender(o);
155
155
  }
156
- updated(a) {
157
- this._handleModalOpenStateChanged(a), this._handleIsDismissibleChanged(a);
156
+ updated(o) {
157
+ this._handleModalOpenStateChanged(o), this._handleIsDismissibleChanged(o);
158
158
  }
159
- _handleIsDismissibleChanged(a) {
160
- const o = a.get("isDismissible"), t = this.isDismissible;
161
- !o && t && this._removeEscKeyEventListener(), o && !t && this._setupEscKeyListener();
159
+ _handleIsDismissibleChanged(o) {
160
+ const t = o.get("isDismissible"), a = this.isDismissible;
161
+ !t && a && this._removeEscKeyEventListener(), t && !a && this._setupEscKeyListener();
162
162
  }
163
163
  /**
164
164
  * Opens the dialog element and disables page scrolling
165
165
  */
166
- _handleModalOpened(a) {
167
- const { targetModal: o } = a.detail;
168
- if (o === this) {
166
+ _handleModalOpened(o) {
167
+ const { targetModal: t } = o.detail;
168
+ if (t === this) {
169
169
  if (this._dialog.hasAttribute("open") || !this._dialog.isConnected)
170
170
  return;
171
171
  this._dialog.showModal(), requestAnimationFrame(() => {
@@ -176,9 +176,9 @@ let n = class extends C {
176
176
  /**
177
177
  * Closes the dialog element and re-enables page scrolling
178
178
  */
179
- _handleModalClosed(a) {
180
- const { targetModal: o } = a.detail;
181
- o === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
179
+ _handleModalClosed(o) {
180
+ const { targetModal: t } = o.detail;
181
+ t === this && (this._enableBodyScroll(), this._dialog.close(), this._returnFocus(), this._removeEscKeyEventListener());
182
182
  }
183
183
  /**
184
184
  * Sets up an event listener on the Escape key to prevent dismissing the modal if isDismissible is false
@@ -186,37 +186,37 @@ let n = class extends C {
186
186
  _setupEscKeyListener() {
187
187
  if (!this._escKeyAbortController && !this.isDismissible) {
188
188
  this._escKeyAbortController = new AbortController();
189
- const { signal: a } = this._escKeyAbortController;
190
- document.addEventListener("keydown", (o) => this._preventModalKeyboardDismissal(o), { signal: a });
189
+ const { signal: o } = this._escKeyAbortController;
190
+ document.addEventListener("keydown", (t) => this._preventModalKeyboardDismissal(t), { signal: o });
191
191
  }
192
192
  }
193
193
  /**
194
194
  * Removes any event listeners set up that are listening to keyboard events and nulls the existing AbortController.
195
195
  */
196
196
  _removeEscKeyEventListener() {
197
- var a;
198
- (a = this._escKeyAbortController) == null || a.abort(), this._escKeyAbortController = null;
197
+ var o;
198
+ (o = this._escKeyAbortController) == null || o.abort(), this._escKeyAbortController = null;
199
199
  }
200
200
  // Handles the value of the isOpen property on first render of the component
201
- _handleModalOpenStateOnFirstRender(a) {
202
- a.get("isOpen") === void 0 && this.isOpen && u(this, _, { targetModal: this });
201
+ _handleModalOpenStateOnFirstRender(o) {
202
+ o.get("isOpen") === void 0 && this.isOpen && b(this, C, { targetModal: this });
203
203
  }
204
204
  // Handles changes to the modal isOpen property by dispatching any appropriate events
205
- _handleModalOpenStateChanged(a) {
206
- const o = a.get("isOpen");
207
- o !== void 0 && (o ? this._backButtonClicked ? (this._backButtonClicked = !1, u(this, M, { targetModal: this })) : u(this, L, { targetModal: this }) : u(this, _, { targetModal: this }));
205
+ _handleModalOpenStateChanged(o) {
206
+ const t = o.get("isOpen");
207
+ t !== void 0 && (t ? this._backButtonClicked ? (this._backButtonClicked = !1, b(this, L, { targetModal: this })) : b(this, O, { targetModal: this }) : b(this, C, { targetModal: this }));
208
208
  }
209
- _handleActionClick(a) {
210
- a === "leading" ? (this._dialog.close("leading"), u(this, eo, { targetModal: this })) : a === "supporting" && (this._dialog.close("supporting"), u(this, io, { targetModal: this }));
209
+ _handleActionClick(o) {
210
+ o === "leading" ? (this._dialog.close("leading"), b(this, eo, { targetModal: this })) : o === "supporting" && (this._dialog.close("supporting"), b(this, io, { targetModal: this }));
211
211
  }
212
212
  /**
213
213
  * Return focus to the specified element, providing the selector is valid
214
214
  * and the chosen element can be found.
215
215
  */
216
216
  _returnFocus() {
217
- var o, t;
218
- const a = (o = this.returnFocusAfterCloseSelector) == null ? void 0 : o.trim();
219
- a && ((t = document.querySelector(a)) == null || t.focus());
217
+ var t, a;
218
+ const o = (t = this.returnFocusAfterCloseSelector) == null ? void 0 : t.trim();
219
+ o && ((a = document.querySelector(o)) == null || a.focus());
220
220
  }
221
221
  /**
222
222
  * Enables body scroll by unlocking the scroll container.
@@ -231,8 +231,8 @@ let n = class extends C {
231
231
  this._modalScrollContainer && X(this._modalScrollContainer);
232
232
  }
233
233
  _getHeaderButtonVariant() {
234
- const { imageSlotMode: a, backgroundColor: o } = this, t = !!a, e = !!o && o !== "default", i = o === "brand-06";
235
- return t ? a === "illustration" && !e ? "ghost-secondary" : i ? "ghost-inverse" : "secondary" : i ? "ghost-inverse" : "ghost-secondary";
234
+ const { imageSlotMode: o, backgroundColor: t } = this, a = !!o, i = !!t && t !== "default", e = t.indexOf("subtle") !== -1 || t === "brand-02", s = t === "default", c = t === "brand-06", h = e || s ? "ghost-secondary" : "ghost-secondary-dark";
235
+ return a && o === "illustration" && !i ? h : c ? "ghost-inverse-light" : h;
236
236
  }
237
237
  /**
238
238
  * Template for the close button element. Called within the
@@ -241,30 +241,30 @@ let n = class extends C {
241
241
  * @private
242
242
  */
243
243
  renderCloseButton() {
244
- var o, t;
244
+ var t, a;
245
245
  if (!this.isDismissible)
246
- return c;
247
- const a = this._getHeaderButtonVariant();
248
- return s`
246
+ return g;
247
+ const o = this.imageSlotMode ? "secondary" : this._getHeaderButtonVariant();
248
+ return m`
249
249
  <pie-icon-button
250
250
  @click="${() => {
251
251
  this.isOpen = !1;
252
252
  }}"
253
- variant="${a}"
253
+ variant="${o}"
254
254
  class="c-modal-closeBtn"
255
- .aria=${h((o = this.aria) == null ? void 0 : o.close) ? { label: (t = this.aria) == null ? void 0 : t.close } : c}
255
+ .aria=${u((t = this.aria) == null ? void 0 : t.close) ? { label: (a = this.aria) == null ? void 0 : a.close } : g}
256
256
  data-test-id="modal-close-button">
257
257
  <icon-close></icon-close>
258
258
  </pie-icon-button>`;
259
259
  }
260
260
  renderModalImageSlot() {
261
- const { imageSlotMode: a, imageSlotAspectRatio: o } = this;
262
- return a ? s`
263
- <div class="c-modal-imageSlot c-modal-imageSlot--${a} c-modal-imageSlot--${o}" data-test-id="modal-image">
261
+ const { imageSlotMode: o, imageSlotAspectRatio: t } = this;
262
+ return o ? m`
263
+ <div class="c-modal-imageSlot c-modal-imageSlot--${o} c-modal-imageSlot--${t}" data-test-id="modal-image">
264
264
  <slot name="image"></slot>
265
265
  ${this.renderCloseButton()}
266
266
  </div>
267
- ` : c;
267
+ ` : g;
268
268
  }
269
269
  /**
270
270
  * Template for the back button element. Called within the
@@ -273,18 +273,18 @@ let n = class extends C {
273
273
  * @private
274
274
  */
275
275
  renderBackButton() {
276
- var o, t;
276
+ var t, a;
277
277
  if (!this.hasBackButton)
278
- return c;
279
- const a = this._getHeaderButtonVariant();
280
- return s`
278
+ return g;
279
+ const o = this._getHeaderButtonVariant();
280
+ return m`
281
281
  <pie-icon-button
282
282
  @click="${() => {
283
283
  this._backButtonClicked = !0, this.isOpen = !1;
284
284
  }}"
285
- variant="${a}"
285
+ variant="${o}"
286
286
  class="c-modal-backBtn"
287
- .aria=${h((o = this.aria) == null ? void 0 : o.back) ? { label: (t = this.aria) == null ? void 0 : t.back } : c}
287
+ .aria=${u((t = this.aria) == null ? void 0 : t.back) ? { label: (a = this.aria) == null ? void 0 : a.back } : g}
288
288
  data-test-id="modal-back-button">
289
289
  <icon-chevron-left class="c-modal-backBtn-icon"></icon-chevron-left>
290
290
  </pie-icon-button>
@@ -300,18 +300,24 @@ let n = class extends C {
300
300
  * @private
301
301
  */
302
302
  renderLeadingAction() {
303
- const { ariaLabel: a, text: o, variant: t = "primary" } = this.leadingAction || {};
304
- return o ? s`
303
+ const { backgroundColor: o } = this, { ariaLabel: t, text: a, variant: i = "primary" } = this.leadingAction || {};
304
+ if (!a) return g;
305
+ let e = i;
306
+ if (i === "primary") {
307
+ const s = o && o.startsWith("brand-"), c = o && (o.endsWith("subtle") || o === "brand-02");
308
+ s ? o === "brand-06" ? e = "inverse" : c ? e = "primary-alternative" : e = "primary-alternative-dark" : e = "primary";
309
+ }
310
+ return m`
305
311
  <pie-button
306
- variant="${t}"
307
- aria-label="${h(a)}"
312
+ variant="${e}"
313
+ aria-label="${u(t)}"
308
314
  type="submit"
309
315
  ?isFullWidth="${this.hasStackedActions}"
310
316
  @click="${() => this._handleActionClick("leading")}"
311
317
  data-test-id="modal-leading-action">
312
- ${o}
318
+ ${a}
313
319
  </pie-button>
314
- ` : c;
320
+ `;
315
321
  }
316
322
  /**
317
323
  * Renders the "supportingAction" button if the text is provided.
@@ -324,17 +330,24 @@ let n = class extends C {
324
330
  * @private
325
331
  */
326
332
  renderSupportingAction() {
327
- var e;
328
- const { ariaLabel: a, text: o, variant: t = "ghost" } = this.supportingAction || {};
329
- return !o || !((e = this.leadingAction) != null && e.text) ? c : s`
333
+ var s;
334
+ const { backgroundColor: o } = this, { ariaLabel: t, text: a, variant: i = "ghost" } = this.supportingAction || {};
335
+ if (!a || !((s = this.leadingAction) != null && s.text))
336
+ return g;
337
+ let e = i;
338
+ if (i === "ghost") {
339
+ const c = o && o !== "default" && o.indexOf("subtle") === -1 && o !== "brand-02";
340
+ c ? e = c && o === "brand-06" ? "ghost-inverse-light" : "ghost-dark" : e = "ghost";
341
+ }
342
+ return m`
330
343
  <pie-button
331
- variant="${t}"
332
- aria-label="${h(a)}"
344
+ variant="${e}"
345
+ aria-label="${u(t)}"
333
346
  type="reset"
334
347
  ?isFullWidth="${this.hasStackedActions}"
335
348
  @click="${() => this._handleActionClick("supporting")}"
336
349
  data-test-id="modal-supporting-action">
337
- ${o}
350
+ ${a}
338
351
  </pie-button>
339
352
  `;
340
353
  }
@@ -345,20 +358,20 @@ let n = class extends C {
345
358
  * @private
346
359
  */
347
360
  renderModalFooter() {
348
- var e, i;
349
- const a = (e = this.leadingAction) == null ? void 0 : e.text;
350
- a || (i = this.supportingAction) != null && i.text && console.warn("You cannot have a supporting action without a leading action. If you only need one button then use a leading action instead.");
351
- const o = {
361
+ var i, e;
362
+ const o = (i = this.leadingAction) == null ? void 0 : i.text;
363
+ o || (e = this.supportingAction) != null && e.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.");
364
+ const t = {
352
365
  "c-modal-footer": !0,
353
366
  "c-modal-footer--stackedActions": this.hasStackedActions
354
- }, t = a ? s`
355
- <footer class="${x(o)}" data-test-id="pie-modal-footer">
367
+ }, a = o ? m`
368
+ <footer class="${_(t)}" data-test-id="pie-modal-footer">
356
369
  ${this.renderLeadingAction()}
357
370
  ${this.renderSupportingAction()}
358
- </footer>` : c;
359
- return s`
371
+ </footer>` : g;
372
+ return m`
360
373
  <slot name="footer">
361
- ${t}
374
+ ${a}
362
375
  </slot>`;
363
376
  }
364
377
  /**
@@ -367,16 +380,16 @@ let n = class extends C {
367
380
  */
368
381
  renderLoadingSpinner() {
369
382
  if (!this.isLoading)
370
- return c;
371
- const a = this.backgroundColor === "brand-06" ? "inverse" : "secondary";
372
- return s`<pie-spinner size="xlarge" variant="${a}"></pie-spinner>`;
383
+ return g;
384
+ const o = this.backgroundColor === "brand-06" ? "inverse" : "secondary";
385
+ return m`<pie-spinner size="xlarge" variant="${o}"></pie-spinner>`;
373
386
  }
374
387
  /**
375
388
  * Renders the modal inner content and footer of the modal.
376
389
  * @private
377
390
  */
378
391
  renderModalContentAndFooter() {
379
- return s`
392
+ return m`
380
393
  <article class="c-modal-scrollContainer c-modal-content c-modal-content--scrollable">
381
394
  <div class="c-modal-contentInner" data-test-id="modal-content-inner">
382
395
  <slot></slot>
@@ -390,55 +403,55 @@ let n = class extends C {
390
403
  * @private
391
404
  */
392
405
  renderHeading() {
393
- const { heading: a, headingLevel: o, isHeadingEmphasised: t } = this, e = H(o);
394
- return s`
395
- <${e} id="modal-heading" class="${x({
406
+ const { heading: o, headingLevel: t, isHeadingEmphasised: a } = this, i = H(t);
407
+ return m`
408
+ <${i} id="modal-heading" class="${_({
396
409
  "c-modal-heading": !0,
397
- "c-modal-heading--emphasised": t
410
+ "c-modal-heading--emphasised": a
398
411
  })}" part="heading" data-test-id="modal-heading">
399
- ${a}
400
- </${e}>
412
+ ${o}
413
+ </${i}>
401
414
  `;
402
415
  }
403
416
  render() {
404
417
  const {
405
- aria: a,
406
- isDismissible: o,
407
- isFooterPinned: t,
408
- isFullWidthBelowMid: e,
409
- isLoading: i,
410
- position: m,
411
- size: p,
412
- backgroundColor: E,
418
+ aria: o,
419
+ isDismissible: t,
420
+ isFooterPinned: a,
421
+ isFullWidthBelowMid: i,
422
+ isLoading: e,
423
+ position: s,
424
+ size: c,
425
+ backgroundColor: h,
413
426
  imageSlotMode: F
414
427
  } = this, P = !!!F, I = {
415
428
  "c-modal": !0,
416
- [`c-modal--${p}`]: !0,
417
- "c-modal--top": m === "top",
418
- "c-modal--dismissible": o,
419
- "c-modal--loading": i,
420
- "c-modal--pinnedFooter": t,
421
- "c-modal--fullWidthBelowMid": e,
422
- [`c-modal--bg-${E}`]: !0
423
- }, A = i && (a == null ? void 0 : a.loading) || void 0;
424
- return s`
429
+ [`c-modal--${c}`]: !0,
430
+ "c-modal--top": s === "top",
431
+ "c-modal--dismissible": t,
432
+ "c-modal--loading": e,
433
+ "c-modal--pinnedFooter": a,
434
+ "c-modal--fullWidthBelowMid": i,
435
+ [`c-modal--bg-${h}`]: !0
436
+ }, z = e && (o == null ? void 0 : o.loading) || void 0;
437
+ return m`
425
438
  <dialog
426
439
  id="dialog"
427
- aria-label="${h(A)}"
428
- aria-labelledby="${h(A ? void 0 : "modal-heading")}"
429
- class="${x(I)}"
440
+ aria-label="${u(z)}"
441
+ aria-labelledby="${u(z ? void 0 : "modal-heading")}"
442
+ class="${_(I)}"
430
443
  aria-live="polite"
431
- aria-busy="${i ? "true" : "false"}"
444
+ aria-busy="${e ? "true" : "false"}"
432
445
  data-test-id="pie-modal">
433
446
  ${this.renderModalImageSlot()}
434
447
  <header class="c-modal-header" data-test-id="modal-header">
435
448
  ${this.renderBackButton()}
436
449
  ${this.renderHeading()}
437
- ${P ? this.renderCloseButton() : c}
450
+ ${P ? this.renderCloseButton() : g}
438
451
  <slot name="headerContent"></slot>
439
452
  </header>
440
453
  ${// We need to wrap the remaining content in a shared scrollable container if the footer is not pinned
441
- t ? this.renderModalContentAndFooter() : s`
454
+ a ? this.renderModalContentAndFooter() : m`
442
455
  <div class="c-modal-scrollContainer">
443
456
  ${this.renderModalContentAndFooter()}
444
457
  </div>`}
@@ -451,11 +464,11 @@ l([
451
464
  ], n.prototype, "aria", 2);
452
465
  l([
453
466
  d({ type: String }),
454
- N(b)
467
+ W(f)
455
468
  ], n.prototype, "heading", 2);
456
469
  l([
457
470
  d({ type: String }),
458
- y(b, Q, r.headingLevel)
471
+ k(f, Q, r.headingLevel)
459
472
  ], n.prototype, "headingLevel", 2);
460
473
  l([
461
474
  d({ type: Boolean })
@@ -486,46 +499,46 @@ l([
486
499
  ], n.prototype, "leadingAction", 2);
487
500
  l([
488
501
  d({ type: String }),
489
- y(b, oo, r.position)
502
+ k(f, oo, r.position)
490
503
  ], n.prototype, "position", 2);
491
504
  l([
492
505
  d({ type: String })
493
506
  ], n.prototype, "returnFocusAfterCloseSelector", 2);
494
507
  l([
495
508
  d({ type: String }),
496
- y(b, Z, r.size)
509
+ k(f, Z, r.size)
497
510
  ], n.prototype, "size", 2);
498
511
  l([
499
512
  d({ type: Object })
500
513
  ], n.prototype, "supportingAction", 2);
501
514
  l([
502
515
  d({ type: String }),
503
- y(b, to, r.backgroundColor)
516
+ k(f, ao, r.backgroundColor)
504
517
  ], n.prototype, "backgroundColor", 2);
505
518
  l([
506
519
  d({ type: String })
507
520
  ], n.prototype, "imageSlotMode", 2);
508
521
  l([
509
522
  d({ type: String }),
510
- y(b, ao, r.imageSlotAspectRatio)
523
+ k(f, to, r.imageSlotAspectRatio)
511
524
  ], n.prototype, "imageSlotAspectRatio", 2);
512
525
  l([
513
526
  R("dialog")
514
527
  ], n.prototype, "_dialog", 2);
515
528
  n = l([
516
- W("pie-modal")
529
+ N("pie-modal")
517
530
  ], n);
518
531
  export {
519
- M as ON_MODAL_BACK_EVENT,
520
- L as ON_MODAL_CLOSE_EVENT,
532
+ L as ON_MODAL_BACK_EVENT,
533
+ O as ON_MODAL_CLOSE_EVENT,
521
534
  eo as ON_MODAL_LEADING_ACTION_CLICK,
522
- _ as ON_MODAL_OPEN_EVENT,
535
+ C as ON_MODAL_OPEN_EVENT,
523
536
  io as ON_MODAL_SUPPORTING_ACTION_CLICK,
524
537
  n as PieModal,
525
- to as backgroundColors,
538
+ ao as backgroundColors,
526
539
  r as defaultProps,
527
540
  Q as headingLevels,
528
- ao as imageSlotAspectRatios,
541
+ to as imageSlotAspectRatios,
529
542
  ko as imageSlotModes,
530
543
  oo as positions,
531
544
  Z as sizes
package/dist/react.d.ts CHANGED
@@ -160,7 +160,7 @@ export declare const ON_MODAL_OPEN_EVENT = "pie-modal-open";
160
160
  */
161
161
  export declare const ON_MODAL_SUPPORTING_ACTION_CLICK = "pie-modal-supporting-action-click";
162
162
 
163
- export declare const PieModal: React_2.ForwardRefExoticComponent<React_2.PropsWithoutRef<ModalProps> & React_2.RefAttributes<PieModal_2> & PieModalEvents & ReactBaseType>;
163
+ export declare const PieModal: React_2.ForwardRefExoticComponent<React_2.PropsWithChildren<Omit<React_2.PropsWithoutRef<ModalProps>, "children">> & React_2.RefAttributes<PieModal_2> & PieModalEvents & ReactBaseType>;
164
164
 
165
165
  /**
166
166
  * @tagname pie-modal
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-modal",
3
- "version": "1.24.0",
3
+ "version": "1.24.2",
4
4
  "description": "PIE design system modal built using web components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -48,7 +48,7 @@
48
48
  "devDependencies": {
49
49
  "@custom-elements-manifest/analyzer": "0.9.0",
50
50
  "@justeat/pie-design-tokens": "7.10.2",
51
- "@justeattakeaway/pie-button": "1.11.0",
51
+ "@justeattakeaway/pie-button": "1.12.0",
52
52
  "@justeattakeaway/pie-components-config": "0.21.0",
53
53
  "@justeattakeaway/pie-css": "0.26.1",
54
54
  "@justeattakeaway/pie-monorepo-utils": "0.7.0",
@@ -61,10 +61,10 @@
61
61
  "extends": "../../../package.json"
62
62
  },
63
63
  "dependencies": {
64
- "@justeattakeaway/pie-button": "1.11.0",
65
- "@justeattakeaway/pie-icon-button": "2.5.1",
64
+ "@justeattakeaway/pie-button": "1.12.0",
65
+ "@justeattakeaway/pie-icon-button": "2.6.0",
66
66
  "@justeattakeaway/pie-icons-webc": "1.19.0",
67
- "@justeattakeaway/pie-spinner": "1.3.7",
67
+ "@justeattakeaway/pie-spinner": "1.4.0",
68
68
  "@justeattakeaway/pie-webc-core": "6.0.1",
69
69
  "body-scroll-lock": "3.1.5",
70
70
  "dialog-polyfill": "0.5.6"
package/src/index.ts CHANGED
@@ -355,24 +355,30 @@ export class PieModal extends PieElement implements ModalProps {
355
355
  }
356
356
  }
357
357
 
358
- private _getHeaderButtonVariant (): 'ghost-secondary' | 'ghost-inverse' | 'secondary' {
358
+ private _getHeaderButtonVariant (): 'ghost-secondary' | 'ghost-secondary-dark' | 'ghost-inverse-light' {
359
359
  const { imageSlotMode, backgroundColor } = this;
360
360
 
361
361
  // Handle the combinations of image slot and background color
362
362
  const hasImageSlot = Boolean(imageSlotMode);
363
363
  const hasBackgroundColor = Boolean(backgroundColor) && backgroundColor !== 'default';
364
+ const isBackgroundSubtle = backgroundColor.indexOf('subtle') !== -1 || backgroundColor === 'brand-02';
365
+ const isBackgroundDefault = backgroundColor === 'default';
364
366
  const isInverted = backgroundColor === 'brand-06';
365
367
 
366
- // default case: image slot is not present
368
+ const ghostSecondary = isBackgroundSubtle || isBackgroundDefault ? 'ghost-secondary' : 'ghost-secondary-dark';
369
+
370
+ // Default case: image slot is not present
367
371
  if (!hasImageSlot) {
368
- return isInverted ? 'ghost-inverse' : 'ghost-secondary';
372
+ return isInverted ? 'ghost-inverse-light' : ghostSecondary;
369
373
  }
370
374
 
371
- // image slot is present
375
+ // Case: image slot is present, default background color
372
376
  if (imageSlotMode === 'illustration' && !hasBackgroundColor) {
373
- return 'ghost-secondary';
377
+ return ghostSecondary;
374
378
  }
375
- return isInverted ? 'ghost-inverse' : 'secondary';
379
+
380
+ // Case: background color is other than default
381
+ return isInverted ? 'ghost-inverse-light' : ghostSecondary;
376
382
  }
377
383
 
378
384
  /**
@@ -386,7 +392,8 @@ export class PieModal extends PieElement implements ModalProps {
386
392
  return nothing;
387
393
  }
388
394
 
389
- const variant = this._getHeaderButtonVariant();
395
+ // Override default variant if the image slot is being used
396
+ const variant = !this.imageSlotMode ? this._getHeaderButtonVariant() : 'secondary';
390
397
 
391
398
  return html`
392
399
  <pie-icon-button
@@ -446,13 +453,36 @@ export class PieModal extends PieElement implements ModalProps {
446
453
  * @private
447
454
  */
448
455
  private renderLeadingAction (): TemplateResult | typeof nothing {
456
+ const { backgroundColor } = this;
449
457
  const { ariaLabel, text, variant = 'primary' } = this.leadingAction || {};
450
458
 
451
459
  if (!text) return nothing;
452
460
 
461
+ let buttonVariant: string = variant;
462
+
463
+ if (variant === 'primary') {
464
+ const isBackgroundBrand = backgroundColor && backgroundColor.startsWith('brand-');
465
+ // Despite the name, brand-02 is also a suble background color, so we need to check for that as well
466
+ const isBackgroundSubtle = backgroundColor && (backgroundColor.endsWith('subtle') || backgroundColor === 'brand-02');
467
+
468
+ if (isBackgroundBrand) {
469
+ // brand-06 is the only dark brand color, so we can apply a specific variant for that case
470
+ if (backgroundColor === 'brand-06') {
471
+ buttonVariant = 'inverse';
472
+ } else if (isBackgroundSubtle) {
473
+ buttonVariant = 'primary-alternative';
474
+ } else {
475
+ // Case for strong brand colors that are not 'brand-06'
476
+ buttonVariant = 'primary-alternative-dark';
477
+ }
478
+ } else {
479
+ buttonVariant = 'primary';
480
+ }
481
+ }
482
+
453
483
  return html`
454
484
  <pie-button
455
- variant="${variant}"
485
+ variant="${buttonVariant}"
456
486
  aria-label="${ifDefined(ariaLabel)}"
457
487
  type="submit"
458
488
  ?isFullWidth="${this.hasStackedActions}"
@@ -474,15 +504,30 @@ export class PieModal extends PieElement implements ModalProps {
474
504
  * @private
475
505
  */
476
506
  private renderSupportingAction (): TemplateResult | typeof nothing {
507
+ const { backgroundColor } = this;
477
508
  const { ariaLabel, text, variant = 'ghost' } = this.supportingAction || {};
478
509
 
479
510
  if (!text || !this.leadingAction?.text) {
480
511
  return nothing;
481
512
  }
482
513
 
514
+ let buttonVariant: string = variant;
515
+
516
+ // If the variant is a default value, we want to adjust it based on the background color
517
+ if (variant === 'ghost') {
518
+ const isBackgroundStrong = backgroundColor && backgroundColor !== 'default' && backgroundColor.indexOf('subtle') === -1 && backgroundColor !== 'brand-02';
519
+ const isBackgroundDarkBrand = isBackgroundStrong && backgroundColor === 'brand-06';
520
+
521
+ if (isBackgroundStrong) {
522
+ buttonVariant = isBackgroundDarkBrand ? 'ghost-inverse-light' : 'ghost-dark';
523
+ } else {
524
+ buttonVariant = 'ghost';
525
+ }
526
+ }
527
+
483
528
  return html`
484
529
  <pie-button
485
- variant="${variant}"
530
+ variant="${buttonVariant}"
486
531
  aria-label="${ifDefined(ariaLabel)}"
487
532
  type="reset"
488
533
  ?isFullWidth="${this.hasStackedActions}"
package/src/modal.scss CHANGED
@@ -455,32 +455,55 @@
455
455
  }
456
456
 
457
457
  // Additional background colors
458
+
459
+ // Map for background to content color
460
+ // Note: --dt-color-content-default already switches automatically between dark and light colors to light and dark theme respectively
461
+ // | BACKGROUND | LIGHT THEME | DARK THEME |
462
+ // | ---------- | ------------------------------------------ | ------------------------------------------ |
463
+ // | SUBTLE | --dt-color-content-dark | --dt-color-content-light |
464
+ // | STRONG | --dt-color-content-dark (except aubergine) | --dt-color-content-dark (except aubergine) |
465
+
458
466
  &.c-modal--bg-subtle { --modal-image-slot-bg-color: var(--dt-color-container-subtle); }
459
467
 
460
- &.c-modal--bg-brand-01 { --modal-bg-color: var(--dt-color-support-brand-01); }
468
+ &.c-modal--bg-brand-01 {
469
+ --modal-content-color: var(--dt-color-content-dark);
470
+ --modal-bg-color: var(--dt-color-support-brand-01);
471
+ }
461
472
 
462
473
  &.c-modal--bg-brand-02 { --modal-bg-color: var(--dt-color-support-brand-02); }
463
474
 
464
- &.c-modal--bg-brand-03 { --modal-bg-color: var(--dt-color-support-brand-03); }
475
+ &.c-modal--bg-brand-03 {
476
+ --modal-content-color: var(--dt-color-content-dark);
477
+ --modal-bg-color: var(--dt-color-support-brand-03);
478
+ }
465
479
 
466
480
  &.c-modal--bg-brand-03-subtle { --modal-bg-color: var(--dt-color-support-brand-03-subtle); }
467
481
 
468
- &.c-modal--bg-brand-04 { --modal-bg-color: var(--dt-color-support-brand-04); }
482
+ &.c-modal--bg-brand-04 {
483
+ --modal-content-color: var(--dt-color-content-dark);
484
+ --modal-bg-color: var(--dt-color-support-brand-04);
485
+ }
469
486
 
470
487
  &.c-modal--bg-brand-04-subtle { --modal-bg-color: var(--dt-color-support-brand-04-subtle); }
471
488
 
472
- &.c-modal--bg-brand-05 { --modal-bg-color: var(--dt-color-support-brand-05); }
489
+ &.c-modal--bg-brand-05 {
490
+ --modal-content-color: var(--dt-color-content-dark);
491
+ --modal-bg-color: var(--dt-color-support-brand-05);
492
+ }
473
493
 
474
494
  &.c-modal--bg-brand-05-subtle { --modal-bg-color: var(--dt-color-support-brand-05-subtle); }
475
495
 
476
496
  &.c-modal--bg-brand-06 {
477
- --modal-content-color: var(--dt-color-content-inverse);
497
+ --modal-content-color: var(--dt-color-content-light);
478
498
  --modal-bg-color: var(--dt-color-support-brand-06);
479
499
  }
480
500
 
481
501
  &.c-modal--bg-brand-06-subtle { --modal-bg-color: var(--dt-color-support-brand-06-subtle); }
482
502
 
483
- &.c-modal--bg-brand-08 { --modal-bg-color: var(--dt-color-support-brand-08); }
503
+ &.c-modal--bg-brand-08 {
504
+ --modal-content-color: var(--dt-color-content-dark);
505
+ --modal-bg-color: var(--dt-color-support-brand-08);
506
+ }
484
507
 
485
508
  &.c-modal--bg-brand-08-subtle { --modal-bg-color: var(--dt-color-support-brand-08-subtle); }
486
509
 
package/src/react.ts CHANGED
@@ -29,5 +29,5 @@ type PieModalEvents = {
29
29
  onPieModalSupportingActionClick?: (event: CustomEvent) => void;
30
30
  };
31
31
 
32
- export const PieModal = PieModalReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<ModalProps>
32
+ export const PieModal = PieModalReact as React.ForwardRefExoticComponent<React.PropsWithChildren<Omit<React.PropsWithoutRef<ModalProps>, 'children'>>
33
33
  & React.RefAttributes<PieModalLit> & PieModalEvents & ReactBaseType>;