@appcues/web-sdk 7.5.0 → 7.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @appcues/web-sdk
 
+## 7.7.0
+
+### Minor Changes
+
+- 6096f2a: Add support for backdrop styling options in dialogs and fixes alignment issue on floating elements that could cause position to not be exact on screen axis (X or Y)
+
+## 7.5.1
+
+### Patch Changes
+
+- 9be7f95: Npm SDK can now load styles correctly
+
 ## 7.5.0
 
 ### Minor Changes

package/LICENSE.md

@@ -0,0 +1 @@
+The software is governed by the Appcues License Terms of service available at https://www.appcues.com/terms (including any successor site).

package/README.md

@@ -1,5 +1,8 @@
 # Appcues JavaScript SDK
 
+> **ℹ️**  
+> The Appcues JavaScript SDK is currently in **beta testing** when installed via npm. We recommend evaluating carefully and providing feedback as you integrate. Please refer to our [official documentation](https://docs.appcues.com/install-appcues-web) for the latest updates, setup instructions, and support resources.
+
 The Appcues JavaScript SDK allows you to integrate Appcues into your web application. Track user events, identify users, and trigger personalized in-app experiences.
 
 ## Installation
@@ -53,4 +56,4 @@ Then open the CHANGELOG.md file from the package directory.
 
 ## License
 
-See LICENSE for details.
+See license in LICENSE.md

package/build/{index.DqdOZEH7.js → index.BinR9cxK.js}

@@ -1,4 +1,4 @@
-import { c as vt, g as gi, o as mi, a as $i, n as fe, b as bi } from "./index.BlOpB57-.js";
+import { c as vt, g as gi, o as mi, a as $i, n as fe, b as bi } from "./index.DFg8ECyO.js";
 const gt = window, ie = gt.ShadowRoot && (gt.ShadyCSS === void 0 || gt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, We = Symbol(), ve = /* @__PURE__ */ new WeakMap();
 let yi = class {
   constructor(t, e, s) {

package/build/{index.BlOpB57-.js → index.DFg8ECyO.js}

@@ -1,4 +1,4 @@
-import { C as z, a as Un, A as Tt, M as Sd, b as Td, c as ee, d as Vt, V as ho, e as Cr, f as Ke, g as Ut, B as mt, T as $i, h as Cd, i as _d, j as Id, k as Mo, l as Pn, F as Y, G as $o, m as bl, E as on, n as Ad, D as Bo, o as vd, p as hi, L as De, S as Ms, q as Vo, r as Ae, s as pn, t as Wo, N as Dn, u as wl, v as bd, w as mo, W as wd, x as ni, y as Nd, z as Cn, U as Go, H as kd, I as Od, J as jo, K as sn, O as Eo, P as mi, Q as ri, R as Rd, X as Bi, Y as Nl, Z as Hn, _ as Vi, $ as Rn, a0 as go, a1 as $s, a2 as Ld } from "./index.npm.DOLrucyP.js";
+import { C as z, a as Un, A as Tt, M as Sd, b as Td, c as ee, d as Vt, V as ho, e as Cr, f as Ke, g as Ut, B as mt, T as $i, h as Cd, i as _d, j as Id, k as Mo, l as Pn, F as Y, G as $o, m as bl, E as on, n as Ad, D as Bo, o as vd, p as hi, L as De, S as Ms, q as Vo, r as Ae, s as pn, t as Wo, N as Dn, u as wl, v as bd, w as mo, W as wd, x as ni, y as Nd, z as Cn, U as Go, H as kd, I as Od, J as jo, K as sn, O as Eo, P as mi, Q as ri, R as Rd, X as Bi, Y as Nl, Z as Hn, _ as Vi, $ as Rn, a0 as go, a1 as $s, a2 as Ld } from "./index.npm.YjV8XHqR.js";
 var xd = Object.assign || function(e) {
   for (var t = 1; t < arguments.length; t++) {
     var n = arguments[t];
@@ -2153,7 +2153,7 @@ function Mt(e) {
   }
   return `https://fast.appcues.com${e}`;
 }
-const Ih = "/generic/main/7.5.0/checklist.dffb871bc48a1e5009ee3967ba8b1407e63ac68b.css", Ah = "CIdJsbqZD3OCb40Kncy+q/MzuR2VTtMLi6Unvcp2N9c=", Yi = Mt(Ih), lc = 30, vh = -300, bh = "//cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/";
+const Ih = "/generic/main/7.7.0/checklist.76c21c6d771fd87653c0857b9e3a27556fd516e7.css", Ah = "CIdJsbqZD3OCb40Kncy+q/MzuR2VTtMLi6Unvcp2N9c=", Yi = Mt(Ih), lc = 30, vh = -300, bh = "//cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/";
 let ar = null, ur = null;
 const wh = (e) => {
   const {
@@ -5984,7 +5984,7 @@ function ms(e, t, n, r) {
     ph(e.defaultView, i), window.setTimeout(i, 200);
   }
 }
-const Ag = "/generic/main/7.5.0/modal.dffb871bc48a1e5009ee3967ba8b1407e63ac68b.css", vg = "/generic/main/7.5.0/modal-step-legacy-render.dffb871bc48a1e5009ee3967ba8b1407e63ac68b.css", bg = "1ap2xJXPA6+zfau+TTrgl+tyKnVZGWa7bl1nMr+fKvs=", wg = "f+k+n1UzKXzuja/FHkSACvNlJl9YXs1gpc/Z01OXj48=", Ng = Mt(vg), Gr = Mt(Ag), Vc = /* @__PURE__ */ new Set(["shorty", "slideout"]);
+const Ag = "/generic/main/7.7.0/modal.76c21c6d771fd87653c0857b9e3a27556fd516e7.css", vg = "/generic/main/7.7.0/modal-step-legacy-render.76c21c6d771fd87653c0857b9e3a27556fd516e7.css", bg = "1ap2xJXPA6+zfau+TTrgl+tyKnVZGWa7bl1nMr+fKvs=", wg = "f+k+n1UzKXzuja/FHkSACvNlJl9YXs1gpc/Z01OXj48=", Ng = Mt(vg), Gr = Mt(Ag), Vc = /* @__PURE__ */ new Set(["shorty", "slideout"]);
 function Wc(e) {
   if (!e) return;
   const { style: t } = e, n = t.transform;
@@ -6256,7 +6256,7 @@ function Lg({ patternType: e, hidden: t }) {
     }
   );
 }
-const xg = "/generic/main/7.5.0/tooltip.dffb871bc48a1e5009ee3967ba8b1407e63ac68b.css", Pg = "igg3p8Bk45sB0Q7EEhfzxPQN6dMtsQ/8P1+LBIDEddE=", jr = Mt(xg), jc = "//twemoji.maxcdn.com/2/svg/", Dg = "//cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/", Sr = "hs", qc = "pattern-title", Kc = "Hide these tips";
+const xg = "/generic/main/7.7.0/tooltip.76c21c6d771fd87653c0857b9e3a27556fd516e7.css", Pg = "igg3p8Bk45sB0Q7EEhfzxPQN6dMtsQ/8P1+LBIDEddE=", jr = Mt(xg), jc = "//twemoji.maxcdn.com/2/svg/", Dg = "//cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/svg/", Sr = "hs", qc = "pattern-title", Kc = "Hide these tips";
 function Fg(e, t) {
   return {
     skippable: e.skippable,
@@ -7561,7 +7561,7 @@ function cy(e) {
     )
   )));
 }
-const ly = "/generic/main/7.5.0/satisfaction-survey.dffb871bc48a1e5009ee3967ba8b1407e63ac68b.css", ay = "LCTGoWhoNncfzk7b8jDhPPF8b0PTs04uNa7LjCILym4=", io = Mt(ly);
+const ly = "/generic/main/7.7.0/satisfaction-survey.76c21c6d771fd87653c0857b9e3a27556fd516e7.css", ay = "LCTGoWhoNncfzk7b8jDhPPF8b0PTs04uNa7LjCILym4=", io = Mt(ly);
 let el, qr;
 function uy(e) {
   const t = ye(e), n = wr(e), r = Ve(e), i = tt(e), o = st(e), s = Gt(e, o), c = i[s], l = t.attributes.pattern_type, { position: u } = t.attributes, d = e.views.callbacks[z.SATISFACTION_SURVEY], f = n.cssLoaded, p = Ni(e.settings), y = r !== ee.SHOWING;
@@ -12869,7 +12869,7 @@ function Cl({ user: e }) {
   };
   return /* @__PURE__ */ a.html("table", null, /* @__PURE__ */ a.html("thead", null, /* @__PURE__ */ a.html("tr", null, /* @__PURE__ */ a.html("th", null, "Property"), /* @__PURE__ */ a.html("th", null, "Value"))), /* @__PURE__ */ a.html("tbody", null, n.sort(r).map((i) => /* @__PURE__ */ a.html("tr", null, /* @__PURE__ */ a.html("td", null, i.name), /* @__PURE__ */ a.html("td", null, JSON.stringify(i.value))))));
 }
-const a_ = "/generic/main/7.5.0/debugger.dffb871bc48a1e5009ee3967ba8b1407e63ac68b.css", u_ = "ahFr2ozGgr3TQI5KHlN9wZPypwaSYoQUyVsCyMv8vgg=", d_ = Mt(a_), uo = Xn(
+const a_ = "/generic/main/7.7.0/debugger.76c21c6d771fd87653c0857b9e3a27556fd516e7.css", u_ = "ahFr2ozGgr3TQI5KHlN9wZPypwaSYoQUyVsCyMv8vgg=", d_ = Mt(a_), uo = Xn(
   [
     er,
     Zn,
@@ -12973,7 +12973,7 @@ const m_ = "https://docs.appcues.com/user-experiences-faq/faq-test-mode", E_ = (
     },
     "Restart"
   ), /* @__PURE__ */ a.html("div", { "class-clickable": !0, "on-click": t.onCancelClicked }, "End Test"))));
-}, g_ = "/generic/main/7.5.0/test-mode.dffb871bc48a1e5009ee3967ba8b1407e63ac68b.css", y_ = "royxrv5ISPWNXk8sIb8ykOuJZkg3+vchIFFlvBuV/2Y=", S_ = Mt(g_), fo = Xn(
+}, g_ = "/generic/main/7.7.0/test-mode.76c21c6d771fd87653c0857b9e3a27556fd516e7.css", y_ = "royxrv5ISPWNXk8sIb8ykOuJZkg3+vchIFFlvBuV/2Y=", S_ = Mt(g_), fo = Xn(
   [
     er,
     Zn,
@@ -14071,7 +14071,7 @@ const RI = "v2", LI = (e) => {
   return window.createAppcues(t);
 }, xI = async () => {
   {
-    const e = await import("./open-builder.CsZ0R4-M.js");
+    const e = await import("./open-builder.CBnR8jWD.js");
     window.createAppcues = e.default;
   }
   return LI;
@@ -14115,7 +14115,7 @@ function* DI({ payload: e }) {
   if (n.some(
     (i) => i.type === "launchpad"
   )) {
-    yield import("./index.DqdOZEH7.js");
+    yield import("./index.BinR9cxK.js");
     const i = yield v(ye);
     if (!(i?.type === z.HOTSPOTS) && i) {
       const { experiences: s, launchpads: c } = Ps(n);
@@ -14318,7 +14318,7 @@ function* JI() {
     )
   ];
 }
-const QI = "/generic/main/7.5.0/container.dffb871bc48a1e5009ee3967ba8b1407e63ac68b.css", ZI = "oAzWkIGu2eINiA7AHWZtghnvS5DuvILEICBpL1HdPkY=";
+const QI = "/generic/main/7.7.0/container.76c21c6d771fd87653c0857b9e3a27556fd516e7.css", ZI = "oAzWkIGu2eINiA7AHWZtghnvS5DuvILEICBpL1HdPkY=";
 window.performance && window.performance.mark && window.performance.mark("apc-init");
 qS();
 const bt = window.AppcuesBundleSettings;

package/build/{index.npm.DOLrucyP.js → index.npm.YjV8XHqR.js}

@@ -214,7 +214,7 @@ function O(t, s) {
   };
 }
 async function u() {
-  await import("./index.BlOpB57-.js").then((t) => t.i), E = !0;
+  await import("./index.DFg8ECyO.js").then((t) => t.i), E = !0;
 }
 async function d() {
   window.Appcues.forEach((t) => {

package/build/index.npm.js

@@ -1,4 +1,4 @@
-import { a4 as s, a3 as t } from "./index.npm.DOLrucyP.js";
+import { a4 as s, a3 as t } from "./index.npm.YjV8XHqR.js";
 export {
   s as default,
   t as setup

package/build/{open-builder.CsZ0R4-M.js → open-builder.CBnR8jWD.js}

@@ -8881,21 +8881,33 @@ function Wp(t, e, n, r) {
       };
   }
 }
-function Xp(t, e, n) {
-  const r = rs[n] || "px";
+function Xp(t, e, n, r) {
+  const i = rs[n] || "px";
   switch (t) {
     case "top":
-      return { top: 0, transform: `translateY(${e}${r})` };
+      return {
+        top: 0,
+        transform: `translateY(${e}${i})`,
+        ...r && {
+          bottom: "unset"
+        }
+      };
     case "center":
       return {
         top: "50%",
-        transform: `translateY(calc(-50% + ${e}${r}))`
+        transform: `translateY(calc(-50% + ${e}${i}))`,
+        ...r && {
+          bottom: "unset"
+        }
       };
     case "bottom":
     default:
       return {
         bottom: 0,
-        transform: `translateY(-${e}${r})`
+        transform: `translateY(-${e}${i})`,
+        ...r && {
+          top: "unset"
+        }
       };
   }
 }
@@ -8921,7 +8933,8 @@ const Qp = "@appcues/floating", th = ({ addHook: t }) => {
       Xp(
         h,
         s,
-        y
+        y,
+        l
       )
     ].reduce((m, b) => {
       const { transform: E, ...v } = b;
@@ -9058,16 +9071,18 @@ const bh = "@appcues/sequential", Eh = ({ addHook: t, registerAction: e }) => {
 wt(bh, Eh);
 const xh = "@appcues/dialog", wh = `
   dialog { all: unset; }
-  ::backdrop { all: unset; }
-  dialog:-internal-dialog-in-top-layer { all: unset; }
+  ::backdrop { backdrop-filter: var(--backdrop-blur); background-color: var(--backdrop-color); }
+  :-internal-dialog-in-top-layer { all: unset; }
 `, Sh = ({ addHook: t }, e) => {
-  const { backdrop: n } = e, r = document.createElement("style");
-  r.textContent = wh;
-  let i;
-  t("step.postrender", ({ querySelector: o }) => {
-    [i] = o("dialog") ?? [], i && (i.prepend(r), n ? i.showModal() : i.show());
+  const { backdrop: n, variables: r = {} } = e, i = document.createElement("style");
+  i.textContent = wh;
+  let o;
+  t("step.begin", ({ updateRootStyle: a }) => {
+    a(r, { forceUpdate: !0 });
+  }), t("step.postrender", ({ querySelector: a }) => {
+    [o] = a("dialog") ?? [], o && (o.prepend(i), n ? o.showModal() : o.show());
   }), t("step.end", () => {
-    i?.close();
+    o?.close(), i.remove();
   });
 };
 wt(xh, Sh);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcues/web-sdk",
-  "version": "7.5.0",
+  "version": "7.7.0",
   "description": "The Appcues Javascript SDK",
   "main": "build/index.npm.js",
   "types": "build/index.npm.d.ts",
@@ -10,8 +10,10 @@
   },
   "files": [
     "build/**/**",
-    "./CHANGELOG.md"
+    "./CHANGELOG.md",
+    "./LICENSE.md"
   ],
+  "license": "See license in LICENSE.md",
   "exports": {
     ".": {
       "types": "./build/index.npm.d.ts",